|
|
|
|
Issue #120 (Screen API and Learning Tools)11/05/15
The global window object gives you access to a Screen interface, or screen object, that lets you access various values that give you info on the current window. Here is what the object looks like if you log it out on JS Bin or in the Dev tools using window.screen:
|
[object Screen] {
availHeight: 1040,
availLeft: 0,
availTop: 0,
availWidth: 1920,
colorDepth: 24,
height: 1080,
orientation: [object ScreenOrientation] {
...
},
pixelDepth: 24,
width: 1920
}
|
I've abbreviated the "orientation" section, but as you can see, you get values that include information about the height and width of the window, the color depth, and pixel depth. These would be accessible via window.screen.availWidth, window.screen.pixelDepth, etc. (of course, the window object is global, so you could omit it).
The orientation property is present on Chrome but not Firefox. Firefox uses mozOrientation and instead of this being an object with its own properties and methods, it's the equivalent of Chrome's screen.orientation.type property. So aside from the major differences in the orientation interface, the basic properties of the Screen API seem to be usable in all browsers.
More info:
Now on to this week's learning tools!
Books
Exploring ES6
By Axel Rauschmayer. "Contains reliable and in-depth information on ECMAScript 6, the next version of JavaScript." Written for people who already know JavaScript.
Front-end Developer Handbook
By Cody Lindley. "A guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering."
CSS Master
By Tiffany Brown. "Will show you how to write better, more efficient CSS, and to take advantage of the plethora of the new cutting-edge CSS features available to the front-end developer."
Professional Email Design
By Jason Rodriguez. "A handbook for understanding the elements of HTML email design." Free updates for life.
How to Code in HTML5 and CSS3
By Damian Wielgosik. A beautiful and free beginner's book to get started writing markup and styles.
Web Animation using JavaScript
By Julian Shapiro. "Provides you with a technical foundation to implement animation in a way that's both visually stunning and programmatically maintainable."
Using WebPage Test
By Rick Viscomi, Andy Davies, Marcel Duran. "Learn basic and advanced uses of WebPagetest, the performance measurement tool for optimizing websites."
PHP The Right Way
Multiple contributors. "An easy-to-read, quick reference for PHP best practices, accepted coding standards, and links to authoritative tutorials around the Web."
Clojure for the Brave and True
By Daniel Higginbotham. Free online book (or non-free print version) that introduces Clojure, a general-purpose language with an emphasis on functional programming.
Learn Regex the Hard Way
By Zed A. Shaw. "An in-progress book that quickly teaches you regular expressions."
Interactive Learning Tools
git-game-v2
"Second version of the terminal based game that teaches users git commands."
exercises
"Some basic JavaScript coding challenges and interview questions."
warriorjs
"Game written in JavaScript for learning JavaScript and artificial intelligence."
Challenger.js
"Pop-up JavaScript challenges in your browser."
interactive-coding-challenges
"Interactive, test-driven Python coding challenges (algorithms and data structures) typically found in coding interviews or coding competitions."
Courses and Screencast Series
Building Applications with React and Flux
"Get started with React, React Router, and Flux by building a fast, data-driven single page application."
CS for All
"Our objective is to provide an introduction to computer science as an intellectually rich and vibrant field rather than focusing exclusively on computer programming."
EmberScreencasts.com
"Twice-weekly screencasts for ambitious web developers."
Unraveling Flexbox
"A book and video course that will teach you how to create dynamic, responsive layouts with ease."
What the Flexbox?!
"A simple, free 20 video course that will help you master CSS Flexbox."
Livecoding.tv
"An educational live streaming platform where people code products live."
Test-Driven JavaScript
An in-depth screencast series about Test-Driven JavaScript.
Build Your First React.js App
"In this series, we will go beyond React, and look at the full picture of what goes into a React application. We will use Webpack to build the application. We will use Firebase to persist data."
Intro to SQL
"Learn how to use SQL to store, query, and manipulate data."
Modernizr 3
A beginner's guide to Modernizr, updated to reflect the latest version of the popular feature-detection library.
A Tweet for Thought
Cabel Sasser shares what he calls "the most amazing UI ever created". Looks kind of like Microsoft Word in full toolbar mode, actually.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Staying on the topic of learning resources, you might want to check out Bloc's Coding Bootcamp Comparison (which I've featured before but has since been updated).
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
