FrontEnd Summit 2014 - August 21, 2014 In-kind Sponsors Environments for Humans brings together some of the Web's most notable experts in Frontend for an all-new, one-day only online conference, the FrontEnd Summit 2014! Bring the experts to your desktop August 21st from 9AM to 5PM (CT). Don't miss this great event and purchase your tickets now! Buy Tickets August 21, 2014 \\ 9AM to 5PM CT (Schedule subject to change) Understanding your tools is vital for any web builder. In this session, Adam will deep dive on Vim and Sublime Text and explore their feature sets and advantages. You'll learn: Why do text editors even matter? My name is Adam Simpson, and I'm something of a web designer & front-end mutant. I write down thoughts and opinions over at adamsimpson.net. I've lived in America, Europe, and Asia - and I like all three - currently I live in Columbus, Ohio. Tweaking our tools is a lifestyle. This talk will help you obsessively refine your tooling, so your work becomes quicker, more automated, and less painful. * Seriously.
RWD Bloat Part II Building off of my previous post on RWD Bloat, the following is step-by-step how I made my site faster over the course of a few days. For the purposes of this test, I’m hyper-focused on my Speed Index numbers for my Home and Article templates (the 2 most visited templates of my site). Here is my baseline: Step 0. Normalize instead of CSS Reset I made a quick unintended decision to use Node-Sass and Autoprefixer instead of Compass. Bullshit! Step 1. I added Filament Group’s loadCSS to lazyload my webfonts instead of blocking them in the <head>. Faster! Step 2. Ugh. Step 3. I had 176 icons in my icon font, but I only use 6 icons sitewide: Home, Archive, About, RSS, Previous, and Next. This got me up and running quickly. I’ll need to automate this in the future but that feels pretty good, man. Step 4. My CSS was in an awful state; incredible redundancy and quite possibly the worst filenaming scheme I’ve ever seen. After this and without the icon font, I’m down to ~172 selectors in CSS Stats.
RWD Bloat One of Responsive Web Design’s biggest critiques is that it is responsible for slow load times and extreme page bloat. The best response to this criticism is Tim Kadlec’s Great Divorce: “Blame the implementation, not the technique”. – Tim Kadlec tl;dr — If a page clocks in at 28MB and 399 HTTP Requests, that’s not the fault of responsive design, that’s the fault an organization that doesn’t care about web performance. I agree with Tim, but “blame the implementation” doesn’t fully answer the question for me. > Inventory So I’ll put my own site under the microscope. The first part of any optimization work is to look into the mirror and find all your flabby parts. Analytics This data was taken awhile ago and a little bit has changed, but the data more-or-less holds up. 174.975kb total. Let’s keep the focus on how much the fluid grid, flexible media, and media-queries of RWD are costing my peformance baseline. Third-Party Performance Notes Stylesheets: 24.2kb, (13.8%) CSS Performance Notes
Luis Abreu: Continuity Design Principles It’s not about shared data, it’s about moving and completing activities on whichever device is most convenient. Continuity Design Principles: What is an Activity Activities are the core of Handoff — the technology that enables Continuity — and should represent a task as perceived by the user. Writing or reading an email; browsing a webpage; playing a song; writing this article; these are all activities you can start on one device such as your phone — perhaps while you’re on your way home — and finish them on your laptop once you have time to sit down. Activities, not Actions Handoff is not meant to propagate actions across devices, you wouldn’t use it to mark an email as read, fill out a form or pause a currently playing song. These actions require a context to be in place, Activities are that context, something that can be resumed at any time on any device. Activities, not Data Activities do not hold or carry data, it’s not their responsibility. Activities travel between devices
Media - A to Z CSS The @media rule allows conditional styling of elements. The conditions can be based on the type of media or known characteristics of the device being used. Combining media queries with fluid layout and flexible images, allows us to implement responsive web design. In this episdode we’ll look at how @media queries can be used to change the styling of websites based on querying information about the device and two approaches for tackling page layout in responsive design. Sometimes we only want certain styles to apply on certain types of devices or when certain characteristics of the device are true. For example, we might want to remove the header and footer when printing a web page. Using the query print will restrict the styles of the at-rule to the print media type. Other media types include all braille embossed handheld projection screen speech tty tv Device Queries We can check more fine-grained details about the device being used by passing a query into the @media rule. Combined queries Outro
How we make RWD sites load fast as heck Posted by Scott on 07/30/2014 There has been a lot of discussion about optimizing responsive layouts for performance lately, and I think that’s great. Speed broadens access and makes users happy, much like responsive design. In the past year I’ve spent a lot of time researching page loading performance, both for our ongoing client work here at FG and for my soon-to-be-released book for A Book Apart. In this post, I’ll outline some recent observations and approaches to delivering sites for speed and broader access, and link out to various tools we are using to facilitate our approach. I’ll start with some high-level observations, then later I’ll dive into the more technical how-to. Page weight isn't the only measure; focus on perceived performance When discussing how multi-device code correllates to page loading performance, one of the primary measures developers typically point to determine success is total page weight. Shortening the critical path Going async <head> ... <head> ...
Naver · Formstone Installation Include the following resources on your page before initializing: Bower You can deploy and update via the command line with Bower: bower install Naver Options Options are set by passing a valid options object at initialization or to the public "defaults" method. Events Events are triggered on the target instance's element, unless otherwise stated. Methods Methods are publicly available to all active instances, unless otherwise stated. close Closes instance $(".target").naver("close"); defaults Sets default plugin options $.naver("defaults", opts); disable Disables instance $(".target").naver("disable"); destroy Destroys instance $(".target").naver("destroy"); enable Enables instance $(".target").naver("enable"); open Opens instance $(".target").naver("open");
What's The Difference Between A Logo And A Symbol? The misuse of the word "logo" is one of those things that gets many design-minded people practically purple-faced with anger (a sibling to debate over "fonts" v. "typefaces"). A logo, they say, is not the same as a symbol, which in turn is not the same as a combination mark. So what's the difference? In brief: A logo is a word, a symbol is a picture, and a combination mark is a PB&J mashing up the two. But really, in most circumstances, using "logo" for everything is just fine, say Pentagram's Michael Bierut and Ammunition Group's Brett Wickens. Logos Vs. Although most people call any emblem that has been designed to visually represent a brand a logo, "logo" is usually taken to be short for "logotype," which literally means "word imprint" in Greek. But logotypes have issues in a global economy. Combination Marks Finally, there's the combination mark. Do The Distinctions Matter? Pentagram partner Michael Bierut agrees.
Concise / Welcome Give up the bloat. Accomplish more with less. Welcome to Concise. Perfect for all Devices Concise is built from the ground up for mobile devices. Preprocessor-built Concise includes support for Vanilla CSS, as well as SASS, and LESS. Lots of Components Concise includes buttons, drop-downs, progress bars, labels, badges, and so much more. A Compendium of SVG Information A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: <img>, background-image, <svg>, <iframe>, and <object>/<embed>. Using SVG by meResolution Independence With SVG by David BushellSVG on MDNHow to Add Scalable Vector Graphics to Your Web Page by Craig BucklerSVG Workflow for Designers by Dan Mall SVG as an Icon System SVG is particularly good for icons. I've written a bunch about this: Icon System with SVG SpritesThe whole idea is essentially based off SVG templatingSVG Sprites vs. And more: All that is based on inline SVG as a system, which is a fantastic way to go, but if you're going down the SVG as CSS background-image... Filament Group's Grunticon: Article, Repo, In-browser tool. And remember if you're looking for SVG icons to use, anything vector can be made to work. SVG Shape Syntax SVG Patterns About viewport, viewBox, and preserveAspectRatio SVG Gradients SVG Strokes
Best Buy CEO Says Tablet Sales “Crashing” Re/code has landed in Minneapolis to talk to the folks at Best Buy — the last standing nationwide big-box, bricks-and-mortar consumer electronics retailer, with over 1,000 main stores and hundreds of smaller mobile device stores. The chain, survivor of a breed that once included competitors like Circuit City and CompUSA, is waging a multi-front battle for relevance and even survival. Its foes: Online-only alternatives like Amazon, deep discounters like Walmart and high-touch boutique stores like Apple. It’s also battling the trend called “show-rooming” in which consumers try out products in a store like Best Buy but then buy online from e-tailers like Amazon. But it may have more fundamental problems: Sinking sales of Windows PCs, once a reliable Best Buy mainstay, which had their worst sales year ever in 2013; and, lately, a dive in the sales of the presumed replacement for all those laptops: Tablets. Re/code: What is happening with the PC? Stopped supporting Windows XP? Yes. Exactly.
A Look At The Current Responsive Design Landscape (And How To Speed It Up) When was the last time you visited a website and you were blown away by its performance (i.e how fast you were able to do what you wanted to do)? The new @caniuse is lightning fast! Brad Frost (@brad_frost) July 20, 2014 The newest iteration of CanIUse.com has that faster-than-a-speeding-bullet kind of feel to it. This week, Maximiliano Firtman published a thought-rousing article for Smashing Magazine. The ultimate goal for a website should be “happy users,” which will lead to more conversions, whatever a conversion might be, whether it’s getting a visitor to spread the word, providing information or making a sale. How New Responsive Redesigns Did It Here are a few stats on exciting new sites that have launched in the last month. New Yorker Load time: 4.24 secondsPage size: 3.3MBRequests: 172Grade: 67/100 Virgin America This site has reinvented how travel sites will be built going forward (hopefully). Load time: 5.31 secondsPage size: 1.5MBRequests: 91Grade: 66/100
Performance Budgeting with Grunt It seems like the idea of performance budgeting has been gaining quite a bit of traction over the past year. This is awesome! The best way to improve web performance is to prioritize it from the get-go, and that’s exactly what a performance budget helps you do. But having the budget set in a document somewhere doesn’t accomplish much. I’m a big fan of Grunt.js and use it on pretty much every project at this point. I’m also a big fan of WebPageTest, which has a slick Node API courtesy of Marcel Duran. Introducing grunt-perfbudget grunt-perfbudget is a task for Grunt.js that helps you to enforce a performance budget. For example, if you wanted to make sure the SpeedIndex of Google was below 1000, you would add the following to your Gruntfile.js: When run, grunt-perfbudget tests the URL’s you specify using WebPagetest and compares the results with the defined budget. Specify a private instance of WebPagetest (Highly recommended! Getting started Going forward