Dear Friends,
As designers and developers, we seem to be used to waiting. Hardly any article that gets published introducing a new technology passes by without a comment on how we "still" can't use the features due to the lack of support in legacy browsers. As a result, we tend to get stuck compromising on what we can't achieve rather than what we can accomplish.
However, no new technology literally breaks the experience in legacy browsers. Oh, a legacy browser doesn't support Flexbox? Well then, use JavaScript, table-cell and minimal positioning or floats as a fallback. No media queries support? Deliver a fixed-width layout. No SVG animations? Deliver an alternative image, or just change the view altogether.
In many scenarios, legacy browser support means supporting older versions of IE. That doesn't have to stop you though.
Whenever a new technology appears in a modern browser that's used by a good segment of your user base, we can use it to progressively enhance experiences for capable browsers, providing the fallback for, you know, the other ones. For example, <link rel="preload"> gives us the ability to define custom loading logic without suffering the performance penalty, has been shipped in Chrome stable, so we can use it today. Furthermore, we can of course also make use of perceived performance optimization by using resource hints such as prefetch, dns-prefetch and even prerender as well, dynamically injecting them whenever necessary.
The same goes with CSS Containment, which we can use to can isolate style, layout and paint, so processing of components like the off-canvas navigation will be deferred by the browser unless the user needs them.
We don't have to wait — the technology is already available, but it's up to us to find the most interesting and efficient ways to use it to craft better experiences for our users. In fact, that's exactly what we're going to explore at our next conference, SmashingConf NYC next week. We do have a few tickets left, you know, and we'd love to see you there!
Keep designing, keep building!
Vitaly (@smashingmag)
Table of Contents
1. Do Great Work From Anywhere
Great work can be done from anywhere. All it takes is a laptop and a stable wifi connection — perhaps a cup of coffee, too. To help you find nice places where you can settle down and get stuff done, Workfrom collects remote work spots for digital nomads, freelancers and anyone who needs a bit of bustle around them to be productive.
The platform lets you discover and share the best coffee shops, cafés, bars and co-working spaces in over 300 cities around the world, and to make your choice easier, you can use a range of filters to narrow down the hits. You need to concentrate and are looking for a quiet and spacious location? You want to bring your dog and enjoy some artisanal food along the way? Workfrom sure has the right place for you. Information on available power sockets, the level of background noise, work-friendly hours, and, if you log into the site, even on WiFi speeds, prevent you from surprises and lay the foundations for a productive stay. (cm)
2. Helpful Front-End Tools
If there's a repeating front-end problem, chances are high that somebody has already built a tool to solve it. SVG Crowbar is a Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as a SVG file. AnyPixel.js makes it possible to use the web to create big, unusual, interactive displays. Chrome Canary now has a great workflow for capturing screenshots of live pages and hardware.
Animated heat distortion effects? Done. Responsive punch-out avatars? Done, too. And if you want to ensure the code quality with every commit or deployment, you can use Stylelint or Parker to enforce consistent conventions and avoid errors in your stylesheets. Handy, and boosting the front-end workflow right away. (vf)
Advertisement
3. Designing A Galaxy Far Far Away
Take 22 Illustrator files that measure 1024 × 465152 px combined, put in 1000 hours of work, and add the story of Star Wars Episode IV. What you'll get is a project that will make your jaw drop: SWANH. Brought to life by illustrator and graphic novelist Martin Panchaud, SWANH tells the whole story of "Star Wars: A New Hope" in a huge infographic that requires 403.5ft (123m) of scrolling to get from top to bottom. And, well, it's worth it.
Made up of 157 images, the sheer dimensions of the piece are impressive, and so is the love to detail that Martin Panchaud put into creating the Star Wars universe. But SWANH is more than eye candy for Star Wars lovers. It's also an experiment that wants to create a contrast to what we usually expect on the web: quickly understandable contexts and short stories. Brilliant. (cm)
4. A Simple And Intuitive Color Palette Generator
So you're looking for some fresh color inspiration? Then check out Color Supply. The in-browser tool lets you create color palettes intuitively with just two clicks. Simply select a base color from the color wheel and choose if you want to create a complimentary, split-compliment, analogous, triad or square harmony with it. It will then generate a palette of up to four colors based on your choice. Nifty!
You can also fine-tune the saturation of the palette with a slider, and to get a better impression of what the colors will look like in a real context, a small preview shows them applied to four icons. Color Supply also provides you with the hex values of your palette, so if you like what you see, you can go ahead and use your newly generated palette directly in your project. (cm)
Advertisement
5. A Highly-Scalable, Offline-First React Boilerplate
If you're building with React.js, and are looking for a performant as well as a highly-scalable boilerplate, react-boilerplate might be just for you. It provides a strong foundation for your React application while at the same time it also offers a pleasant experience for developers. For example, you can generate components and routes from the command line and skip the boilerplate writing. Also, saved changes to the CSS and JS are instantly reflected without having to refresh the page.
Other features that make both your workflow and your product a lot smoother include predictable state management, next-generation JavaScript with support for template strings, object destructuring, arrow functions and JSX syntax, as well as next-generation CSS, which allows you to code-split and ship only the styles that are on the page. With its focus on offline-first, the boilerplate also makes sure your applications are available even without a network connection from the moment your users load the app. And thanks to the boilerplate's unidirectional flow, change logging and time travel debugging are possible, too.
Sounds like something for you? To get up and running, simply clone the repo, install the dependencies, and clean the git repo. Once you've deleted the example app, you're ready to use some boilerplate magic for your own application. (cm)
6. Type Terms Explained
How well do you know typography terminology? Have you ever heard of a "counter"? Do you know what a "terminal" is? If you feel you have some catching up to do or want to refresh your memory, Type Terms is just the place to go.
The typography cheatsheet gets you familiar with the basics of typography jargon in a clear, concise and beautiful way. Twenty terms are described, each of them accompanied by a small, animated graphic to visualize it. By the way, a "counter" describes the (partially) enclosed area of white space in the "a", "b" or "d" letters. And "terminal" is the end of any stroke that doesn't include a serif, but a circular or tapered shape instead (think of the ball-shaped end of the top stroke of an "r", for example). Typography can be so much fun! (cm)
7. Compo: A Plugin To Handle UI Components In Sketch
UI components are the foundation of every design. However, surprisingly, most design tools aren't geared towards working with components. Time to close the gaps ourselves. That's exactly what designer Roman Shamin had in mind. Frustrated by the facts that Sketch lacks support for dynamic buttons and that even small changes in a component will prevent an already configured Symbol from working, he built the Sketch plugin Compo.
Compo gives you more flexibility, while removing some of the typical Sketch drawbacks. Once installed, you trigger the plugin by pressing ⌘J, and it will turn a text layer into a button or put an existing component in order. The buttons are dynamic and adapt their width to the field label. Additionally, you can influence the margins around the text by defining them directly in the layer name. The same works to align text in other components, too, of course. Compo is free and open source. (cm)
8. Upcoming Smashing Workshops
With so many techniques, tools, style guides, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.
Workshops at SmashingConf New York
Workshops at SmashingConf Freiburg
Workshops at SmashingConf Barcelona
Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the costs — we'll find a fair price for sure. Get in touch — it's that easy! (vf)
9. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
- PHP/WP Developer at maam (Anywhere)
"You're good with PHP! You like the idea of working in a startup with users as the part-time developer because you want something different from the usual agency work. We're looking for a person that can commit five to eight days per month for at least three months to start." - Sr. Front-End Engineer: Food Network at Scripps Networks Interactive (New York, New York)
"Ever thought of combining your passion of engineering with your love of great lifestyle brands such as FoodNetwork.com, CookingChanneltv.com and Food.com? Now's your chance to work with such award winning websites that attract almost 50 million unique visitors a month in a Sr. Front End Engineer role." - Web Developer at Uni of Texas System (Austin, TX)
"The Web Developer will use their skillset of HTML, PHP, JavaScript and JQuery to build websites, develop features for our CMS platforms, coordinate with the Communications team to achieve their goals, program front-end themes and address site issues."
10. Smashing Highlights (From Our Archives)
- The Making Of "In Pieces": Designing an Interactive Exhibition With CSS Clip Paths
Web-based interactive experiences are widely used in the modern age for a variety of reasons. After discovering the little-known clip-path property of CSS, Bryan James embarked upon a five-month interactive production journey of my own with a different purpose: to raise awareness of the struggles of 30 similarly little-known endangered species. - Career Advice For Graduating Web Design Students
Jeremy Girard recently said goodbye to some of my own website design and development students. Instead of teaching lessons in design principles or responsive websites, he spent their final evening together answering their questions. One of those questions was, "What is the best career advice you've ever received?" - Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study
The article discusses how to improve the paint performance of your websites and web apps. This is an area that we web developers have only recently started looking at more closely, and it's important because it could have an impact on your user engagement and user experience.
11. Recent Articles On Smashing Magazine
Design Articles
Coding Articles
Productivity, Inspiration, Misc.
No comments:
Post a Comment