Desktop Wallpaper Calendars: January 2017

Improving The UX Of Names With Vocalizer.js

☑️ The Ultimate Digital Clean-Up Checklist: Are You Prepared For The New Year?

Strategies For Effective Mobile Landing Pages

Web Development Reading List #164: Enjoy The End Of 2016, It Wasn’t The Worst

Conversational Design Essentials: Tips For Building A Chatbot

Front-End Performance Checklist 2017 (PDF, Apple Pages)

Are you using progressive booting already? What about tree-shaking and code-splitting in React and Angular? Have you set up Brotli or Zopfli compression, OCSP stapling and HPACK compression? Also, how about resource hints, client hints and CSS containment — not to mention IPv6, HTTP/2 and service workers?

Back in the day, performance was often a mere afterthought. Often deferred till the very end of the project, it would boil down to minification, concatenation, asset optimization and potentially a few fine adjustments on the server’s config file. Looking back now, things seem to have changed quite significantly.

Performance isn’t just a technical concern: It matters, and when baking it into the workflow, design decisions have to be informed by their performance implications. Performance has to be measured, monitored and refined continually, and the growing complexity of the web poses new challenges that make it hard to keep track of metrics, because metrics will vary significantly depending on the device, browser, protocol, network type and latency (CDNs, ISPs, caches, proxies, firewalls, load balancers and servers all play a role in performance).

So, if we created an overview of all the things we have to keep in mind when improving performance — from the very start of the process until the final release of the website — what would that list look like? Below you’ll find a (hopefully unbiased and objective) front-end performance checklist for 2017 — a brief overview of the issues you might need to consider to ensure that your response times are fast and your website smooth.

The post Front-End Performance Checklist 2017 (PDF, Apple Pages) appeared first on Smashing Magazine.

from Smashing Magazine http://ift.tt/2ieEK7b via http://ift.tt/1M61DFR
from Tumblr http://ift.tt/2hZYzjs

App Development Showdown: Why You Should Care About Revisiting The Native Vs. Hybrid Debate In 2016

The (Not So) Secret Powers Of The Mobile Browser

Web Development Reading List #163: The End-Of-Year Wrap-Up

Mistakes Developers Make When Learning Design

Tech Advent Calendars For Web Designers And Developers In 2016

Styling Web Components Using A Shared Style Sheet

How My API-Driven Website Helps Me Travel The World

How To Build A SpriteKit Game In Swift 3 (Part 3)

How Creating A Design Language Can Streamline Your UX Design Process

Web Development Reading List #162: Server Side React, Inclusive Design And The Web Worldwide

Christmas Goodies: Free Winter- And Holiday-Inspired Icon Sets

GPU Animation: Doing It Right

Progressive Web AMPs

Best Practices For Animated Progress Indicators

Hot To Build A SpriteKit Game In Swift 3 (Part 2)

Breaking Out Of The Box: Design Inspiration (December 2016)

Web Development Reading List #161: Restyling Form Elements, HTTP/2 HPACK, And The Empathy Vacuum

Brush Lettering: It Only Gets Better After Practice (Part 2)

Freebie: Christmas Advent Icon Set (25 Icons, AI, EPS, SVG, PNG, PDF)

Christmas Wallpaper Calendars: December 2016

Enhancing Grid Design With GuideGuide, A Plugin For Photoshop And Illustrator

How To Build A SpriteKit Game In Swift 3 (Part 1)

Web Development Reading List #160: Real Stories About HTTP/2, Cascading Style Sheets, And Code Of Shame

Brush Lettering: It Only Gets Better After Practice (Part 1)

Does Conversation Hurt Or Help The Chatbot UX?

The Wireframe Perfectionist’s Guide

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

Music Playlists To Fuel Your Coding And Design Sessions

Web Development Reading List #159: Code Splitting, A New Bundler, And Blake2x

Freebie: Thanksgiving Icon Set (15 Icons, PNG, PSD, AI, SVG)

SmashingConf San Francisco 2017: Somethin’ Is Cookin’ In The Kitchen!

Not An Imposter: Fighting Front-End Fatigue

Exploring Repeat Grid In Adobe XD

True Lies Of Optimistic User Interfaces

You, Me And The Emoji: Character Sets, Encoding And Emoji

Web Development Reading List #158: Form Usability, Vue.js, And Unfolding Critical CSS

Where Are The World’s Best Open Device Labs?

How To Create A Dramatic Vector Illustration

A Quick Guide For Designing Better Buttons

CSS Grids, Flexbox And Box Alignment: Our New System For Web Layout

What Everyone Should Know About The Process Behind App Design

Define Your Process To Master Time, Gain Clarity, And Take Control

Web Development Reading List #157: FlyWeb, Lying Charts, And Feedback Without Context

Breaking Out Of The Box: Design Inspiration (November 2016)

The Golden Rules Of Bottom Navigation Design

Building Shaders With Babylon.js

Desktop Wallpaper Calendars: November 2016

Web Development Reading List #156: Browser News, Webpack 2, And Lessons Learned From HPKP

Giving Your Product A Soul

How To Poison The Mobile User

How To Transform Your Next Conference Takeaways Into Real-Life Results

Web Development Reading List #155: On JSPerf, Client Hints, And Keeping The Balance

Icons As Part Of A Great User Experience

How To Build Honest UIs And Help Users Make Better Decisions

Best Of Halloween: All Things Spooky

How To Develop A Chat Bot With Node.js

Web Development Reading List #154: Yarn, Deep-Fried Data, And A Guide To Stateful Components

Building “Topple Trump”, An Interactive Web-Based Quiz Game (Case Study)

What’s The Deal With The Samsung Internet Browser?

Designing Card-Based User Interfaces

Taking Pattern Libraries To The Next Level

Web Development Reading List #153: Slow JavaScript, A Universal Typeface, And Healthy Work Environments

In-App Gestures And Mobile App User Experience

Next Generation Server Compression With Brotli

Breaking Out Of The Box: Design Inspiration (October 2016)

Creating Universal Windows Apps With React Native

Finding Better Mobile Analytics

Desktop Wallpaper Calendars: October 2016

Automating Art Direction With The Responsive Image Breakpoints Generator

Building Hybrid Apps With ChakraCore

Building Social: A Case Study On Progressive Enhancement

Developing For Virtual Reality: What We Learned

Stretching The Limits Of What’s Possible

Choosing The Right Prototyping Tool

How To Design Error States For Mobile Apps

Understanding REST And RPC For HTTP APIs

The Thumb Zone: Designing For Mobile Users

The Art Of Hand Lettering

Driving App Engagement With Personalization Techniques

Creating Websites With Dropbox-Powered Hosting Tools

How To Boost Your Conversion Rates With Psychologically Validated Principles

Content Security Policy, Your Future Best Friend

Reducing Cognitive Overload For A Better User Experience

How To Scale React Applications

Breaking Out Of The Box: Design Inspiration (September 2016)

Redesigning SGS’ Seven-Level Navigation System: A Case Study

The Building Blocks Of Progressive Web Apps

Freebie: Flat Line UX And E-Commerce Icon Sets (83 Icons, AI, EPS, PNG, SVG)

Web Development Reading List #152: On Not Shipping, Pure JS Functions, And SameSite Cookies

Responsive Images In WordPress With Art Direction

Desktop Wallpaper Calendars: September 2016

Prototyping For Success

Pixel-Perfect Specifications Without The Headaches

Ways To Reduce Content Shifting On Page Load

Web Development Reading List #151: Microinteraction UX, Feature Policy, And Passport.js

Upgrading CSS Animation With Motion Curves

Diverse Test-Automation Frameworks For React Native Apps

I Contributed To An Open-Source Editor, And So Can You

Five Rules Of App Localization In China: Money, Dating And App Store

Web Development Reading List #150: Less Code, GitHub’s Security, And The Morals Of Science

Getting Started With Koa 2 And Async Functions

Photoshop Etiquette For Responsive Web Design

S(GH)PA: The Single-Page App Hack For GitHub Pages

Creativity Under The Microscope: Running A UI Design Critique

Web Development Reading List #149: CSS Dynamic Colors, Refactoring CSS, And CSP Hashing

A Beginner’s Guide To Progressive Web Apps

Experience Design Essentials: Animated Microinteractions In Mobile Apps

Developers “Own” The Code, So Shouldn’t Designers “Own” The Experience?

A Glimpse Into The Future With React Native For Web

Web Development Reading List #148: CSS Color Syntax Change, Browser News, And Hidden Expectations

Behind The Scenes: What It Takes To Publish A Smashing Article

Breaking Out Of The Box: Design Inspiration (August 2016)

Optimizing Critical-Path Performance With Express Server And Handlebars

How To Create A Responsive 8-Bit Drum Machine Using Web Audio, SVG And Multitouch

Using A Static Site Generator at Scale: Lessons Learned

User Memory Design: How To Design For Experiences That Last

Desktop Wallpaper Calendars: August 2016

Web Development Reading List #147: Security Guidelines, Accessible UI Compontens, And Content-First Design

Cross-Platform Native Apps With A Single Code Set Using Telerik NativeScript

Getting Practical With Microcopy

How To Create Icons In Adobe XD

The Illusion Of Life: An SVG Animation Case Study

Testing Credit-Card Numbers In E-Commerce Checkouts (Cheat Sheet)

Web Development Reading List #146: Peermaps, Passive Event Listener Note, And A Shift Of Focus

The Aesthetic Of Non-Opinionated Content Management: A Beginner’s Guide To ProcessWire

Connecting Children With Nature Through Smart Toy Design

Freebie: Olympics Sports Icon Set (45 Icons, EPS, PDF, PNG, SVG)

How To Use Arguments And Parameters In ECMAScript 6

A Deep Dive Into Axure 8: A Comprehensive Review

Conversational Interfaces: Where Are We Today? Where Are We Heading?

Web Development Reading List #145: Font Loading Strategies, Scaling SVGs, And Infinite Scrolling Done Right

Freebie: Summer Icon Set (40 Icons, PNG, PDF, PSD, EPS, AI, SVG)

Keeping Your Business And Clients Safe With Digital Policies

Making And Maintaining Atomic Design Systems With Pattern Lab 2

How To Build A Cross-Platform WebGL Game

How We Started Releasing Features Twice As Fast (Case Study)

The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today

Web Development Reading List #144: CSP Mistakes, JS Debugging And Failure Testing

Breaking Out Of The Box: Design Inspiration (July 2016)

How To Make WordPress Easy To Maintain For Your Clients

Quick UX Prototyping With Adobe XD Shortcuts (PDF Cheatsheet)

Ten Requirements For Making Home Page Carousels Work For End Users (If Needed)

A Lean Approach To Product Validation

Improving User Flow Through Page Transitions

Front-End Challenge Accepted: CSS 3D Cube

Web Development Reading List #143: The Referrer Header, Third-Party Scripts, And Color Psychology

Desktop Wallpaper Calendars: July 2016

Lessons Learned From Plugin Support

The Right Tool For The Job: Picking The Best Prototyping Software For Your Project

Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns” (Pre-Release)

An Introduction To Redux

Client Experience Design

Web Development Reading List #142: Contextual Identities, Form Hints, And ApplePay.js

Freebie: Months And Seasons Set (12 Vector Illustrations, PNG, SVG, EPS, AI)

The DAU Of Hip-Hop: Designing For Authenticity

How To Harness The Machines: Being Productive With Task Runners

Improving UX For Color-Blind Users

Free SSL For Any WordPress Website

A Roadmap To Building A Delightful Onboarding Experience For Mobile App Users

Shortcuts And Tips For Improving Your Productivity With Sublime Text

The Art Of Layout Testing With Galen Framework

Designing Modular UI Systems Via Style Guide-Driven Development

The Story Behind The Ekaterinburg Metro Map

A Framework For Brainstorming Products

How To Roll Out New Features Without Hurting Loyal Users

Web Development Reading List #141: jQuery 3, Chillout.js, And How Technology Shapes Society

Find A Friend, Boost Your Creativity, And Make Your Digital Dream Come True

Freebie: Foosball Icon Set (13 Icons AI, EPS, SVG, PNG)

Making Music In The Browser: Recreating Theremin With JavaScript And Web Audio API

Breaking Out Of The Box: Design Inspiration (June 2016)

Upcoming Web Design Conferences (June–December 2016)

The Current State Of Authentication: We Have A Password Problem

Web Development Reading List #140: Privacy, Web Apps And Progressively Enhanced Modules

Retrofitting ZUIs To Legacy Websites: An Impossible Task?

Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them

Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them

¡Arriba! Break Out Of The Box With SmashingConf Barcelona 2016

Desktop Wallpaper Calendars: June 2016

Smart Responsive Design Patterns, Or When Off-Canvas Isn’t Good Enough

Web Development Reading List #139: jQuery 3, Web Payment API, And ES6 Tricks

A Look At The Modern WordPress Server Stack

Working Remotely Around The World: Workspaces To Explore

A Guide To Personal Side Projects

Stylelint: The Style Sheet Linter We’ve Always Wanted

The Making Of Melody Jams

Developing Dependency Awareness

Improve Your Designs With The Principles Of Continuation And Common Fate (Part Three)

Understanding The CSS Property Value Syntax

Web Development Reading List #138: Accessible Web Components And CSS And Sass Precision

Looking Back: One Year Of Microsoft Edge (Videos)

Web Image Effects Performance Showdown

The Problem With Using SVG-Sprites

Five Simple Steps To Test Your Varnish Cache Deployment Using Varnishtest

Why Great Products Need Great Collaboration

Designing A Dementia-Friendly Website

Creating A Living Style Guide: A Case Study

Web Development Reading List #137: Butteraugli, Client-Side PKI, And The Importance Of Listening

Freebie: Space Icon Set (40 Icons, AI, PNG, SVG)

Easy Steps To Better Logo Design

Content-First Prototyping

Improve Your Designs With The Principles Of Closure And Figure-Ground (Part 2)

Fluid Typography

Design Inspiration (May 2016)

Web Development Reading List #136: Design Usability, Meaningful CSS And Project Include

On Design Systems: Sell The Output, Not The Workflow

Freebie: Musical Instruments Icons (39 Icons, SVG, PNG)

A Better Architecture For iOS Apps: A Deep Look At The Model-View-Controller Pattern

Delightful Bits Of Vintage Graphic Design Inspiration

Improve Your Designs With The Principles Of Similarity And Proximity (Part 1)

An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements

How To Offer More Personal Customer Support Through Effective Automation

Desktop Wallpaper Calendars: May 2016

Web Development Reading List #135: The Evergreen List, Visual Diffing And Agile Innovation

From Zero To Appium: A How-To Guide For Configuring Appium With Android

Freebie: Hotel And Spa Icon Set (55 Icons PNG, SVG)

This Interface Is A (Good) Joke!

Tools And Resources For Editing, Converting And Optimizing SVGs

SmashingConf Freiburg 2016: Some Things Are Just Too Special To Miss

Web Development Reading List #134: AI, Keyboard Interactions And Living Style Guides

For a great project, we need a well-functioning team, solid style guides, smooth workflows and well-organized kick-off meetings. Last week, I found a couple of resources that help you achieve just that.

And, a bit further down the road, the developers shouldn’t miss out on anything either, of course, — having a proper workflow is essential to be productive, and that’s why it might be a good idea to start playing with Docker. Have a productive week ahead!

The post Web Development Reading List #134: AI, Keyboard Interactions And Living Style Guides appeared first on Smashing Magazine.

from Smashing Magazine http://ift.tt/1NLenyU via http://ift.tt/1M61DFR
from Tumblr http://ift.tt/26odQOQ

HTML5 Media Source Extensions: Bringing Production Video To The Web

In the last decade, plugins such as Flash and Silverlight have enabled a rich consumption of video in browsers, powering popular services such as YouTube and Netflix. However, this approach has shifted towards HTML5 over the last few years.

Almost two years ago, the W3C published the final recommendation of the HTML5 spec, which came with a new set of HTML elements and APIs, especially for video. Some of them aim for more semantics in web pages but don’t introduce new features. Others extend the possibilities of the web and enhance the possibilities for developers without the need for plugins such as Adobe Flash, Microsoft Silverlight or Java.

The post HTML5 Media Source Extensions: Bringing Production Video To The Web appeared first on Smashing Magazine.

from Smashing Magazine http://ift.tt/1YPEL0h via http://ift.tt/1M61DFR
from Tumblr http://ift.tt/1NKwR2w

Factors In Selecting A Mobile Prototyping Tool

How To Land A First-Rate Graphic Design Internship

Designing For The Internet Of Emotional Things

Why You Should Stop Installing Your WebDev Environment Locally

How To Build Your First iOS App With JavaScript (Part 2)

Design Or Get Undesigned

Finally, CSS In JavaScript! Meet CSSX

Web Development Reading List #133: Workflow Tools And The Aesthetics Of Invisible Code

Logo Design For Responsive Websites

How To Take Charge Of A UX Kickoff Meeting

Lessons Learned From A First-Time Appreneur

Three Approaches To Adding Configurable Fields To Your WordPress Plugin

Better Interface Design: Logins, Menus, Toggles And Other Fancy Modules

The Beauty Of React Native: Building Your First iOS App With JavaScript (Part 1)

Breaking Out Of The Box: Design Inspiration (April 2016)

Web Development Reading List #132: The Challenges In Our Field, Debouncing And The Contain CSS Property

Why You Should Consider React Native For Your Mobile App

Improve User Experience With Real-Time Features

A Simple Web Developer’s Guide To Color

Sketch, Illustrator or Fireworks? Exploring A New Free UI Design App: Gravit

Web Development Reading List #131: Git 2.8, CSS Grids And The Key To Good Code

Desktop Wallpaper Calendars: April 2016

Never Stop Learning With Conference Live Streams And Videos

How To Make A Physiology-Friendly Application For The iPad

Building An Advanced WordPress Search With WP_Query

Diverse And Engaging Instances Of Interactive Infographic Design

Diving Into Procedural Content Generation, With WorldEngine

Web Development Reading List #130: Opera Mini, Workflow Fragility And Happy Work

Privacy Guidelines For Designing Personalization

Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of

Drawing A Cartoon In Illustrator

Free Font Release: Yrsa & Rasa Available For Download

The Retina Asset Workflow You’ve Always Wanted For Photoshop

Dirty Tricks From The Dark Corners Of Front-End (Slides, PDF)

Google’s Mobilegeddon Aftermath: Eight Months Into A Better Mobile Web

Freebie: Easter Icon Set (13 Icons, AI, PSD, EPS, PDF, SVG, PNG)

Web Development Reading List #129: CSRF, Modern Tooling And The UX Of Web Fonts

Freebie: Barista And Coffee Lovers Icon Set (50 Icons, EPS, PNG, SVG)

Making A WordPress Plugin That Uses Service APIs, “From Soup To Nuts”

How To Integrate Motion Design In The UX Workflow

Managing Mobile Performance Optimization

Monday Morning Design Inspiration

Web Development Reading List #128: Firefox 45, A Multi-Colored Font And Better Force-Pushing

A Never-Ending Story On Ad-Blockers

Legal Guidelines For The Use Of Location Data On The Web

From Fledgling To Founder: How Designers Can Push Their Creations Into The Real World

Tools And Resources For A More Meaningful Web Typography

Building A Real-Time Retrospective Board With Video Chat

Design App Pages For Better Conversion: Case Study Of Paper By FiftyThree

Web Development Reading List #127: jQuery 3, UX Research And XSS In Ads

Getting (Dis)Connected: Shallow Interaction Design For Deeper Human Experiences

Inspiring Everyday Graphic Design

Server-Side Rendering With React, Node And Express

Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce

Desktop Wallpaper Calendars: March 2016

Preload: What is it good for?

Web Development Reading List #126: Clever Interfaces, An Open AMP Alternative And The Art Of Slow Growth

How to Get a Logo Accepted: Eight Steps To a Better Design Workflow

Simple Augmented Reality With OpenCV and Three.js

Free Icon Sets: E-Commerce, Food, Science, Avatars And Summer

Noah’s Transition To Mobile Usability Testing

The Flexbox Reading List

Content Modeling With Jekyll

Efficient Responsive Design Process

Web Development Reading List #125: The Fallacy Of Urgency And Building A Modern Theme Switcher

A Beginner’s Guide To Creating A WordPress Website

The Art Of The Intercept: Moving Beyond “Would You Like To Take A Survey?”

Free Photoshop Tools For Web Designers

High-Impact, Minimal-Effort Cross-Browser Testing

How To Create Content Wireframes For Responsive Design

Getting Ready For HTTP/2: A Guide For Web Designers And Developers

Turn Your AMP Up To 11: Everything You Need To Know About Google’s Accelerated Mobile Pages

Web Development Reading List #124: Responsibility, Bash Tooling, And Flexbox Order

Free Fonts With Personality

Improving Reviews And Testimonials Using Science-Based Design

Smashing Mystery Resolved: New York Pizza, Jules Verne and 28 Hong Kong Street

Building A First-Class App That Leverages Your Website: A Case Study

Transforming Lufthansa’s Brand Strategy: From The Online To Interactive Age, A Case Study

Freebie: Home Appliance And Real Estate Icons (72 Icons, AI, CSH, EPS, SVG, Webfont, Sketch)

Hardware Hacking With JavaScript

Automatically Art-Directed Responsive Images? Here You Go.

Design Mock-Ups Need Dynamic Content: Tools and Plugins

Web Development Reading List #123: Meaningful Git Commits and HTTP Status Codes

JavaScript AI For An HTML Sliding Tiles Puzzle

Breaking It Down To The Bits: How The Internet, DNS, And HTTPS Work

Pen Tool Vs. Live Trace: The Big Comparison

Writing Next Generation Reusable JavaScript Modules in ECMAScript 6

Making A Service Worker: A Case Study

Desktop Wallpaper Calendars: February 2016

Web Development Reading List #122: A Performance Budget Builder, Streams, And The Web Push API

Freebie: The Months Of The Year Icon Set (12 Icons PSD, AI, EPS, SVG, PNG)

Is The Internet Killing Creativity?

★ “Busting Myths and Horror Stories Of Designing For The Web!” ★

The New Smashing Mystery Riddle: Have You Figured It Out Yet?

Responsive Image Breakpoints Generator, A New Open Source Tool

Combining UX Design And Psychology To Change User Behavior

Web Development Reading List #121: The Illusion Of Completeness, Client Hints, CSS Subgrids

How To Create And Customize A WordPress Child Theme

Designing for Kids Is Not Child’s Play

The Issue With Global Node Packages

Leaner Responsive Images With Client Hints

Web Development Reading List #120: Safari 9.1, Chakra Core Open Sourced, ES6 Object Shorthand Syntax

Nobody Wants To Use Your Product

Eliminating Known Vulnerabilities With Snyk

Variables: The Backbone Of CSS Architecture

Why I Moved From A Square To A Circle

Web Development Reading List #119: Bulletproof Third-Party Content and Progressive Applications

Write Your Next Web App With Ember CLI

Upcoming Web Design Conferences (January–June 2016)

Useful Tips To Get Started With WordPress Hooks

Designing The Most Desirable Product: Exploration of Banknotes Design