Tuesday, November 4, 2014

Smashing Newsletter #122: SVG, Input Range Slider and Sublime Extensions

Colorful wonders of CSS, useful Sublime text extensions and hidden gems. Issue #122 Tuesday, November 4th 2014 181,804 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

WOFF2 has been promising a better compression for web fonts for quite some time now, and with the browser support landing in Chrome and Opera recently, it's just about time to give it the attention it deserves in our stylesheets, wouldn't you agree?


If you serve your fonts via the @font-face attribute, you can just add url('web-font.woff2') format('woff2') in your src stack, just before url('web-font.woff') format('woff'), or use FontSquirrel that will generate the code for you. To generate the actual WOFF2 file, you can use a converter tool from TTF to WOFF2, or convert directly from WOFF to WOFF2.

In case you need to encode your fonts with Base64, you might just embed them additionally in your @font-face rules, but to avoid extra bandwidth, you can also use FilamentGroup's WOFF2 See the Wizard, a little JavaScript feature test for WOFF2 support (198 bytes gzipped) and serve only WOFF2 files to browsers supporting it and WOFF files to other modern browsers (with a EOT/TTF/SVG fallback for older browsers).

Keep in mind that WOFF already contains compressed data, so no gzipping is necessary. Not too much work considering that you can save up to a half of the web font bandwidth for your users, is it?

Happy web fonting!
– Vitaly (@smashingmag)

Table of Contents

1. Free SVG Pocket Guide (And Flexbox Cheat Sheet)
2. Blend If: A Hidden Photoshop Gem
3. Usability? Check!
4. Cross-Browser Input Range Slider
5. Useful Sublime Text Extensions
6. The Colorful Wonders Of CSS
7. Information, It's All Around Us
8. Learning Has Never Been Easier: Join A Smashing Workshop

1. Free SVG Pocket Guide (And Flexbox Cheat Sheet)

You must have come across SVG a lot recently, but you might have never found the time to actually get a proper overview of SVG and all its shiny properties. Well, perhaps Joni Trythall's SVG Pocket Guide, a free HTML book fully available online, is just what you need.

Free SVG Pocket Guide (And Flexbox Cheat Sheet)

The book is a very short, concise and detailed overview of SVG properties, with examples of document organization, basic shapes and paths, workspace, fills and strokes, the text element and a few advanced features such as gradients and transforms. The PDF version can be purchased as well. A short lovely book to read over a slow weekend.

If SVG doesn't happen to be your cup of tea, you might find Jodi's Flexbox Cheatsheet, a quick visual to summarize Flexbox properties, quite handy instead. (vf)

2. Blend If: A Hidden Photoshop Gem

If you think you know Photoshop inside out, well, there's a hidden little gem that you probably haven't stumbled across yet. A little gem thatis sure to make your workflow a lot easier. This little gem named Blend If can actually use shape layers to paint transparent areas. It's a quite useful feature that can help you achieve a transparent effect in your icons but at the same time maintain its ability to scale for different pixel densities.

Blend If: A Hidden Photoshop Gem

Usually, such an effect is quite difficult to achieve and requires complex bitmap masking. If you'd like to give it a try, Marc Edwards has written a short tutorial on how to use Blend If and all the possibilities it has to offer. Nifty! (cm)


3. Usability? Check!

In order to help us all improve the way we design digital things, Aaron Legaspi and Amit Jakhu have created an interaction design checklist that we can refer to during every step of our product development process. Its goal is to serve as a guide for creating positive UX and UI experiences between people and the products they use. Well, the products we build, that is.

Usability? Check!

All the different factors that contribute to a user's satisfaction (but which can easily fade out of the spotlight when working on a project) are neatly organized on the list and can be checked off as soon as your product complies with it. Is the function of a control easily determined at a glance? Check! Are there any fallbacks in place for accessibility purposes? Check! The IxD Checklist considers interface design, iconography, typography, interaction, and navigation issues. A handy little helper that belongs into every designer's toolbox. We're sure you'll agree! (cm)

4. Cross-Browser Input Range Slider

Nobody really likes filling in web forms; they're tedious, usually unnecessarily long and complex. If you can avoid input fields and select drop-downs with more reasonable and comfortable alternatives, such as segmented controls, switch or input range sliders, then it's definitely a good idea to do so. However, finding a good cross-browser slider isn't that easy.

Cross-Browser Input Range Slider

If you don't have to worry about IE8/9 and Opera Mini, you can just use the HTML5 range input type. For legacy browsers, you could use jQuery-based polyfills noUISlider or Webshim, and if you don't want to rely on jQuery, consider using the accessible input range slider polyfill instead. Also, don't forget about inventory-based discrete sliders to help avoid zero-results pages and improve user experience. Now this should have you covered for a while. (vf)


5. Useful Sublime Text Extensions

New times require new tools. While many designers tend to use nifty Sketch plugins, many other developers have turned to Sublime as a primary text editor. In fact, there is quite a number of useful extensions that can help save you quite a lot of work in the long run.

Useful Sublime Text Extensions

How about the inline color highlighter for all of the colors you use in your code? Or Gutter Color, an extension that displays a color in the gutter if the lines contains this particular color? Or perhaps an AutoFileName Completion, Git Diffs in Gutter or even JSHint Gutter? What extensions do you use the most? Share them via Twitter! (vf)

6. The Colorful Wonders Of CSS

Ah, don't you just love those little nifty CSS tools and techniques, the ones that help you save valuable time and focus on more profound and creative tasks? For instance, have you tried using the clip-path property yet? Well, Clippy allows you to generate complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS animations and transitions are possible with two or more clip-path shapes with the same number of points. Firefox and IE don't support the property, but it could be used as humble progressive enhancement, of course.

The Colorful Wonders Of CSS

Or what about the good ol' much-maligned display: table property? Whether you're looking for equal height columns, dynamic vertical centering, stack ordering, dynamic sticky footer or a cross-browser alternative for Flexbox, this property can be extremely helpful, and is also well supported.

Oh, and even though we've all said our goodbyes to Halloween, you'll be quite impressed with Bear Travis' SVG masking experiment. Don't just click around — try hovering and dragging, too! (il)


7. Information, It's All Around Us

Let's face it. Aren't we all addicted to surfing the digital universe of (seemingly) endless websites? Whenever we want to find out more about anything that interests us to a certain extent, we simply 'google', 'bing' or even 'yahoo' it. Then, sooner or later, we most probably end up on the Wikipedia site. So, there we are again, learning about yet another thing we've been wanting to learn more about. But why not turn the game the other way around?

Information, It's All Around Us

Instead of learning about something you actually wanted to learn about, why not learn something new every day with Wikipedia's Randompage instead? Just set your homepage to http://en.wikipedia.org/wiki/ Special:Random and figure out something new every time you open up your browser. Try to learn as much as you can, but before you get dizzy from all of the facts, take a break and remember that it's not only information that's all around you... (ea)

8. Learning Has Never Been Easier: Join A Smashing Workshop

With so many techniques, tools, libraries, 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 front-end and RWD workshops are all about: practical front-end + RWD workshops that will help you become better front-end developers and designers, today.

Learning Has Never Been Easier: Join A Smashing Workshop

Upcoming Online Workshops:

Upcoming Full-Day Workshop in NYC, USA:

Full-Day Workshops in Whistler, Canada:

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!

New on Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:

  • UX Architect at State Farm (Dunwoody, GA)
    We're looking for a UX Architect who has very strong web and mobile industry experience, and the ability to advise customer decisions based on that experience.

  • Web Developer at Opportunity International (Oak Brook, IL)
    We're looking for a web developer who will support and maintain Opportunity International's online development and deliver strong user experiences that improve our online platforms and enhance our brand reputation.

  • Senior UI Designer/Developer at Politico (Arlington, VA)
    We're looking for a senior UI designer/developer who is a digital problem solver with a passion for innovation in the realm of design and markup.

Smashing Highlights (From Our Archive)

  • The Art Of Storytelling Around An App
    Every app tells a story. Apps like Pandora tell the story of music; apps like Tip N Split tell a story of a calculator; and apps like Temperature tell the story of weather. Then we have storybook apps like Alice for the iPad, which literally tell stories!

  • A Comprehensive Guide To Firewalls
    In the construction industry, a "firewall" is a specially-built wall designed to stop a fire from spreading between sections of a building. The term spread to other industries like car manufacturing, and in the late 1980s it made its way into computing.

  • Typeplate: A Starter Kit For Beautiful Web Type
    a free-range and open-source typographic starter kit that will hopefully help you build beautiful, text-rich websites. The word on the street is that the Web Is 95% Typography, so as we hurtle towards the future, we think there's still a lot we can learn from five centuries of history. Typeplate is the result of this exploration of our typographic heritage.

Recent Articles On Smashing Magazine

Workshop post image credits: Paul Pride.

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Iris Lješnjanin (il), Cosima Mielke (cm), Vitaly Friedman (vf), Esther Arends (ea), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser

No comments:

Post a Comment