Dear Friends,
This is my first Smashing newsletter as the new Editor In Chief of Smashing Magazine. We've had so many lovely congratulation messages since the announcement — thank you! It's a really exciting time for all of us here at Smashing.
Speaking of exciting things, last week we announced the upcoming Smashing conferences in London, San Francisco and Toronto. Tickets are now on sale, and at each event we also have some great workshops — where you can spend a full day with a real expert in their topic. Workshops are a fantastic way to give yourself the time to think in a focused way on a subject. You'll come away with lots of real-world advice on these subjects that you can apply in your work right away, and also have a lot of fun!
You can also have a lot of fun while learning by taking part in our latest Smashing Challenge! The theme is front-end performance and you can win a trip to our London conference. I can't wait to see the entries, and how much faster those sites become.
On with the newsletter, where we have a round-up of some interesting links from the wider web as well as full details of those conferences.
Keep learning, but don't forget to enjoy yourself!
Rachel Andrew (@rachelandrew)
Table of Contents
1. Make FOUC Less Jarring
FOUC (flash of unstyled content) is a natural side effect of using web fonts. The flash of unstyled text between the initial rendering of your websafe font and the web font that you've chosen might be an issue of only a fraction of a second. However, the layout shift resulting from it can be jarring. To make it less intrusive, you can try to match the x-heights and widths of the fallback font and the web font as closely as possible. And since that involves a lot of tinkering, Monica Dinculescu built Font Style Matcher, a tool that'll ease the task and help you cater for smoother layout shifts.
The way it works is simple yet genius. Just choose a fallback font and a web font, and enter the style values for each of them. Now you only need to use the sliders to adjust the values until line height and letter spacing visually match in the best way possible. A built-in live preview visualizes the effects your tweaks have on the layout shift. Once you're happy with the result, you can copy the font styling CSS to your clipboard and use it right away. A tool that belongs in every developer's toolkit. (cm)
2. Gain Full Control Over Font Loading
What's your strategy for loading web fonts? A solution that gives you full control over web font loading is Bram Stein's Font Face Observer. Using a simple promise based interface, it lets you load fonts and customize your browser's font loading behavior, no matter if you host them yourself or use Google Fonts or another web font service.
To load the font, you create a new FontFaceObserver instance and call its load method. This will return a promise that is either resolved when the font has loaded or rejected if the font fails to load. Easy! The little helper supports all major browsers, IE8 and above, as well as the Android browser. (cm)
Our sponsor: Kick-Start Your CSS Grid Skills With Mozilla's CSS Grid Playground
Getting layout on the web right has long been a rather painful undertaking. Luckily, CSS Grid is here to change that. To get you ready to make full use of its mighty possibilities, Mozilla has built a fantastic tool that is bound to bring you a step closer towards your first own grid: The CSS Grid Playground.
And to help developers make the most out of the new layout standard, Firefox DevTools have gotten an upgrade, too. Built into Firefox Nightly and the Firefox Developer Edition, the new Grid Inspector makes inspecting grids as easy as never before. It lists all the available CSS Grid containers on the page, for example, and includes an overlay to help you visualize the grid itself — even when transformations are applied to it. A powerful duo to kick-start your CSS Grid endeavors. (cm)
3. Inter UI: A Highly Legible Typeface For Screen Design
Sharpness and readability are key factors for choosing a typeface — especially when it's supposed to work well on screens, in longer texts or tables, for example. If you're looking for a real typographic workhorse, be sure to take a look at Inter UI. The typeface is not only free and open-source but also comes with a row of lovely details that cater for an extra-smooth reading experience.
Contextual alternates, tabular numbers, fractions, open digits, and case alternates are just some of the nifty little features that make Inter UI so powerful. The font comes in four weights ranging from regular and medium to bold and black and works well in all Latin and Cyrillic languages. If you want to take a closer look at its possibilities, there's a playground to try out its features. (cm)
4. Take Your Infographics To The Next Level
What comes to your mind when you hear the term "data visualization"? Flowcharts, pie and waterfall charts? Well, nothing wrong about these, but the possibilities to visualize data go much further than just that. To help us think outside the box and inspire us to try something new when it comes to visualizing correlations, compare proportions or explain processes, the folks at infographic and data visualization agency Ferdio brought the Data Viz Project to life.
The Data Viz Project is a showcase of more than 150 different types of data visualizations. Each one of them is presented along with tips on what it can be used for and real-world examples of what it could look like in action. And to make the decision which visualization type might be the best fit for your project a bit easier, you can browse the showcase by input, function, shape, and family to find the perfect match. Now who said charts and diagrams need to be boring? (cm)
5. Tips To Avoid The Mouse Trap
Reaching for your mouse is a real productivity killer. The small movement interrupts your flow and costs you precious seconds. It might not seem a lot, but when you consider how often you reach for it during a regular day things add up. Time to finally avoid the mouse trap, don't you think?
Alex Wolkov loves to find ways to get mouse jobs done only with the keyboard, and now he collected his best tips in an article. In it, he shares everything from rather basic shortcuts like holding Option + left/right to jump by word, to plugins that know coding syntax, shortcuts that make using DevTools a lot smoother, and even browser add-ons that let you mark clickable links with shortcodes. Once you've got a hang of these tips, you won't go back to the mouse. Poor thing, but oh well. (cm)
Our sponsor: Get Your Own .design Domain For Free
.design domains are relatively new and some of the best ones are still available. The registration normally costs $35, but Smashing Newsletter subscribers get the first year for free.
6. CSS Magic With Houdini
With its ability to let you use CSS feature even if they aren't fully supported yet, Houdini is probably one of the most exciting developments in CSS. To tinker with its possibilities and inspire you to try some Houdini magic yourself, Vincent De Oliveira brought CSS Houdini to life, a showcase of Houdini-powered coding experiments.
Building your own background properties, drawing a tooltip without any extra or pseudo elements, and creating non-rectangular separators are just a few of the experiments on Vincent's Houdini playground. Each one of them comes with the accompanying code snippet which you can live edit. Watch out, though: You'll need the latest Chrome version with Web Platform flag enabled to make full use of the showcase. (cm)
7. A Free Guide To <head>
What do you usually put into the <head> element of a page? Just the bare necessities like meta, external CSS, and the page title? The possibilities of what can be done with <head> are much more diverse. To dive deeper into the usually rather under-addressed element, Josh Buchea wrote a free guide to <head> and its possibilities.
The guide dives deep into everything from meta information and resources you can link to, to favicons, social media finesses like Twitter cards, and even platform-relevant information (think smart app banners or add to homescreen shortcuts). Short, precise and super useful. (cm)
Our sponsor: Online Masters in Information Design and Strategy
Learn to drive effective digital communication.
8. Dada Data: Avant-Garde Brought To The Web
100 years ago, the European avant-garde started to express their protest against the prevailing logic and aesthetic of its time by creating nonsense art — the birth of the Dada movement. Maybe you've seen some of its irrational collages or read one of the cut-up writings it became famous for before. But what happens if you take its ideas to our digital times and give Dada a new sphere on the web? Well, the web project Dada Data did exactly that.
On the one hand, Dada Data is an interactive collection of Dada works and videos; on the other hand, it's also a showcase for the so-called Dada-Hacktions, little web projects that play with the Dada idea and transport them to our digital times. In the form of a browser add-on which replaces all website ads with Dada slogans, for example, or Dada-Gram, an experiment that combines famous Dada photomontages and your Instagram photos into real Dada art. As Richard Huelsenbeck, artist and supporter of the movement, once said: "You cannot comprehend Dada, you have to experience it." The same is true for this web experience. A weird but lovable place. (cm)
9. Upcoming Smashing Conferences
It's time we test out something new at SmashingConf. New formats, new lightning talks, evening sessions and genuine, interesting conversations. Our next new adventure: SmashingConf London / #perfmatters.
SmashingConf London / #perfmatters (Feb 7-8)
SmashingConf San Francisco / #breakingthebox
(Apr 17-18)
SmashingConf Toronto / #noslides (June 26-27)
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!
10. New On Smashing Job Board
Here are some of the most recent job openings at Smashing Jobs:
- Product Designer at Customer.io (Remote)
"I'm looking for a Designer to join our product team and help us take our interface to the next level. You should be someone who is strong in the visual side of UI design, yet we're a small team where you'll get to work across the full spectrum of experience design." - Sr. UX Designer (HTML/CSS) at Booking.com (Amsterdam, Paid Relocation)
"Join the world's leading accommodation company and help define the future of travel. This position offers the successful candidate broad scope for working on a variety of products within the current and future Booking.com family, based in our headquarters in the centre of Amsterdam." - Full Stack Web Developer at 100SEVEN (Portland, OR)
"We are looking for a web developer to join our local Portland team. We are looking for full-stack web developers. This is a part-time opportunity."
11. Our Most Popular Articles Last Month
12. Most Recent Articles On Smashing
- Right-To-Left Development In Mobile Design
Developing for right-to-left (RTL) languages entails paying attention to a number of peculiarities. The tips and best practices collected in this article will help you navigate the challenging waters of RTL development and deliver a functional, user-friendly result. - Level-Up Email Campaigns With Customer Journey Mapping
Сustomer journey mapping is mainly used to find flaws in the entire path of the user, but Yuri Vedenin was curious if there was some unconventional way to use this technique. Turns out there is. - Understanding The Vary Header
The Vary HTTP header is sent in billions of HTTP responses every day. But its use has never fulfilled its original vision, and many developers misunderstand what it does or don't even realize that their web server is sending it. Andrew Betts changes that.
No comments:
Post a Comment