TimvanScherpenzeel

Device	OS	OS version	Browser	Browser version	GPU vendor	GPU renderer
Apple iPad 5th	iOS	11.0.3	Mobile Safari	11.0	Apple Inc.	Apple A9 GPU
Apple iPad Air 2	iOS	8.4	Mobile Safari	8.0
Apple iPad Mini 3	iOS	8.1.2	Mobile Safari	8.0
Apple iPad Pro	iOS	11.2.1	Mobile Safari	11.0	Apple Inc.	Apple A9X GPU
Apple iPhone 5S	iOS

justmarkup

As 140 chars are not a good way for a discussion, here are my thoughts on a tweet from Jake Archibald https://twitter.com/jaffathecake/status/814751108975489024

Many clients want all the features but only have a limitited (low) budget which in the end often leads to the following scenario.The agency/web company wants the job and promises all the features for the budget, while knowing this way the performance/usability/accessbility will probably suffer. The developers working on the project know they have too little time to add all the features and therefore use tools (frameworks, libraries, plugins...) to reduce developer time and somehow meet the deadline.

In the end, I think it is often not developer experience, often it is that developers need to use available tools to get the job done as fast as possible, which often means no time left to improve performance/ux/accessibility. Most developers know that using an unoptimized framework or some plugins probably leads to poor performance/ux/a11y but they

poshaughnessy

v1.x (v1.0: Chromium 18, v1.5 & v1.6: Chromium 28)

Originally based on the stock Android browser (AOSP), 2012.

"It was around early 2013 when we made [the decision to move to Chromium]. We shipped our first Chromium-based browser in one of the Galaxy S4 models released later in 2013." (Source)

• v1.0 preloaded in Galaxy S4
• v1.5 preloaded in Galaxy Note 3

TheLarkInn

When you use the names property in the CommonsChunkPlugin({}) and pass an array as the value, webpack converts what is seen below:

      new webpack.optimize.CommonsChunkPlugin({
        names: ['app', 'vendor', 'manifest'],  // creating manifest.js 
        minChunks: Infinity
      })

Into:

seksenov

function setAppBarColors(brandColorHex, brandColorInactiveHex) {
    // Detect if the Windows namespace exists in the global object
    if (typeof Windows !== 'undefined') {
        var brandColor = hexStrToRGBA(brandColorHex);
        var brandColorInactive = hexStrToRGBA(brandColorInactiveHex);
        // Get a reference to the App Title Bar
 var appTitleBar = Windows.UI.ViewManagement.ApplicationView.getForCurrentView().titleBar;

        var black = hexStrToRGBA('#000');
        var white = hexStrToRGBA('#FFF');

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

p3t3r67x0

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

itsthatguy

😁 😂 😃 😄 😅 😆 😉 😊 😋 😌 😍 😏 😒 😓 😔 😖 😘 😚 😜 😝 😞 😠 😡 😢 😣
😤 😥 😨 😩 😪 😫 😭 😰 😱 😲 😳 😵 😷 😸 😹 😺 😻 😼 😽 😾 😿 🙀 🙅 🙆 🙇
🙈 🙉 🙊 🙋 🙌 🙍 🙎 🙏 ✂ ✅ ✈ ✉ ✊ ✋ ✌ ✏ ✒ ✔ ✖ ✨ ✳ ✴ ❄ ❇ ❌
❎ ❓ ❔ ❕ ❗ ❤ ➕ ➖ ➗ ➡ ➰ 🚀 🚃 🚄 🚅 🚇 🚉 🚌 🚏 🚑 🚒 🚓 🚕 🚗 🚙
🚚 🚢 🚤 🚥 🚧 🚨 🚩 🚪 🚫 🚬 🚭 🚲 🚶 🚹 🚺 🚻 🚼 🚽 🚾 🛀 Ⓜ 🅰 🅱 🅾 🅿
🆎 🆑 🆒 🆓 🆔 🆕 🆖 🆗 🆘 🆙 🆚 🇩🇪 🇩🇪 🇩🇪 🇬🇧 🇬🇧 🇬🇧 🇨🇳 🇨🇳 🇨🇳 🇯
🇵 🇯🇵 🇯🇵 🇰🇷 🇰🇷 🇰🇷 🇫🇷 🇫🇷 🇫🇷 🇪🇸 🇪🇸 🇪🇸 🇮🇹 🇮🇹 🇮🇹 🇺🇸 🇺🇸
🇺🇸 🇷🇺 🇷🇺 🇷🇺 🈁 🈂 🈚 🈯 🈲 🈳 🈴 🈵 🈶 🈷 🈸 🈹 🈺 🉐 🉑 © ® ‼ ⁉
#⃣ #⃣ #⃣ ™ ℹ ↔ ↕ ↖ ↗ ↘ ↙ ↩ ↪ ⌚ ⌛ ⏩ ⏪ ⏫ ⏬ ⏰ ⏳ ▪ ▫ ▶
◀ ◻ ◼ ◽ ◾ ☀ ☁ ☎ ☑ ☔ ☕ ☝ ☺ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓

ayapi

var gulp = require('gulp');
var stylus = require('gulp-stylus');

var autoprefixer = require('autoprefixer-stylus');
gulp.task('stylus', function () {
	return gulp.src('./styl/style.styl')
		.pipe(stylus({
			use: [autoprefixer('iOS >= 7', 'last 1 Chrome version')]
		}))
		.pipe(gulp.dest('./css'))

dergachev

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application: