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?
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)
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.
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
textelement 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.
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)
Advertisement
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.
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.
Advertisement
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.
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.
Or what about the good ol' much-maligned
display: tableproperty? 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)
Advertisement
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?
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.
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.comand 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
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 AppEvery 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 FirewallsIn 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 Typea 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
댓글 없음:
댓글 쓰기