Dear Friend,
As designers and developers, we are usually quite busy. We're always running behind deadlines and seeking perfect solutions, while being faced with new challenges and opportunities. Perhaps the only exception is late December when things slow down and everybody seems to be less in a hurry to deploy that feature and refactor that component. It's a great time to be slow, and mindful.
Every year in December, I set aside a week to thoroughly think about the passing year and set out some goals for the upcoming one. They are rarely professional or financial notes though; some of these days I write down interesting stories of fascinating people I've met that year, and most of these days I think about my family, my close friends, and myself.
You deserve a break, and a little reward for the hard year. Take the time to be slow. Perhaps think about places you could visit.
Perhaps look back at this year and think about how happy you were. Being busy and between projects feels great sometimes, but what do you actually remember from that year? What have you learned, and who have you met? How much time did you spend with people with whom you'd actually like to spend much more time with?
Looking forward, which places would you like to visit next year? What cultures to explore? What personal achievements to accomplish? What friendships to rekindle? Perhaps you could invite your partner to join you at a music festival or an art exhibition? Get the tickets ahead of time and look forward to the wonderful and precious time to spend together with your loved ones in 2020.
Perhaps you could call a good old friend and invite them for a birthday ahead of time, or a community gathering, so you both have time to prepare and set aside for that shared experience next year.
Perhaps you'd love to clean up, sort out and back up your digital footprint to help you ensure a good smooth start to the new year. In fact, I've prepared a digital clean-up checklist a couple of years ago that still proves to be quite useful even today!
And don't forget to ask yourself whether there is anything you really want and like. Do you feel that you missed out on something this year? Make sure you'll get it — even it's a little bit more expensive than usual — you are worth it and so is your family. Maybe by the end of 2020, you'll be looking back at these goals and be surprised at how wonderful the year has become. And that's something worth preparing for, isn't it?
Happy slow times, everyone!
— Vitaly (@smashingmag)
Table of Contents
1. Scaling SVGs Made Simple
Scaling <svg> elements can be a daunting task, since they act very differently than normal images. Amelia Wattenberger came up with an ingenious comparison to help us make sense of SVGs and their special features: "The <svg> element is a telescope into another world."
Based on the idea of the telescope, Amelia explains how to use the viewBox property to zoom in or out with your "telescope", and, thus, change the size of your <svg>. A small tip that works wonders. (cm)
2. Time-Travel-Debugging For The Web
An early Firefox DevTools experiment that is worth keeping an eye on is Web Replay. Web Replay records your actions so you can track bugs down faster and understand your code better — a collaborative time-travel debugging instrument, so to say.
The replaying process preserves all the same JS behavior, DOM structures, graphical updates, and most other behavior that occurred while recording. Want to give it a try? Replay is already available in Firefox Nightly for macOS (still disabled by default until it is more stable, but you can turn it on manually). Handy! (cm)
3. Flowy, A Simple Flowchart Engine
Are you working on a web app with flowchart functionality? Well, then you might want to take a closer look at Flowy. Created by Alyssa X, the minimal JavaScript library is a real timesaver.
Once implemented into your project, Flowy helps you build automation software, mind mapping tools, or simple programming platforms with ease. The flowchart engine currently depends on jQuery, but there are plans to replace jQuery with ES6 in a future release to make the already minimalist Flowy even slimmer. Be sure to check out the demo to see Flowy in action. (cm)
From our sponsor
Get Your Free .design Domain Name
Thinking of building your portfolio? .design is like .com and .net, but it's more relevant to what you do as a designer. A .design domain name lets potential clients and employers know what you do before they arrive to your website. Your .design name is free for 1 year and comes with free WHOIS Privacy & a Site Builder trial. Claim your .design domain name before it's gone!
4. A Portfolio That Thinks Out Of The Box
A lot of sites look rather similar these days, but sometimes you come across a design that surprises you, one that is different from what we are usually used to see on the web. Bruno Simon's portfolio is such an example.
To browse the portfolio, you don't scroll down a page or click through an image gallery but use your keyboard to maneuver a little red jeep through a 3D landscape to follow along the signs and learn more about Bruno's projects and experiments or view his contact details. Fun! (cm)
5. Recreating Print Layouts With CSS
When it comes to creative layouts, magazines are an endless source of inspiration. And thanks to CSS Grid, there's nothing to hold you back from bringing more sophisticated layouts to the web, too.
Inspired by magazine layouts, their use of typography and their structures, Dan Davies took on the challenge to recreate some of the print work he liked on the web. The result is an awe-inspiring collection of nine layouts that use the potential of CSS Grid to its fullest. Beautifully art-directed and responsive, they are great examples of pushing the limits of what's possible on the web layout-wise. (cm)
6. Conference Videos To Catch Up On
Some amazing conferences took place in the past month, with beyond tellerrand, performance.now(), and Cascadia JS being only three of them. If you couldn't attend but wish you had, there are now video recordings of the sessions available.
At beyond tellerrand in Berlin, Cassie Evans, for example, explored SVG animations, Jason Pamental talked variable fonts, and Charlotte Dann demonstrated how you can use your coding prowess to make physical art.
performance.now() in Amsterdam was, of course, dedicated to all things performance, with Henri Helvetica taking a retrospective look at how the 14 performance rules for developers from 2007 apply today in our quest to deliver and load resources as quickly as possible. How privilege defines performance (Tatiana Mac) and a deep dive into third-party performance (Simon Hearne) were also among the 14 talks.
Last but not least, at Cascadia JS 2019, 37 speakers discussed the cutting-edge of JavaScript, web development, and engineering culture this year, among them Charlie Gerard, Jasper Schulte, Samantha Siow, and Brian Holt. Lots of new takeaways guaranteed. (cm)
From our sponsor
Get Angular Code from Sketch Designs with Indigo.design
Indigo Design is a unified platform for visual design, UX prototyping, code generation and app development that keep your teams productive in the tools
they love. Create the best-in-class UI designs using components & UX patterns in the expressive
Indigo Design System with Sketch UI Kits. With the click of a button, generate high-quality HTML, CSS, and Angular code from your design with no compromise.
Sign up for free.
7. Dealing With Ads In 2020
Ads are a two-sided sword: nobody really likes them but a lot of sites depend on them to generate revenue. Working for a news company that is dependent on ads, Christian Schaefer wanted to find ways to minimize their impact and make them less annoying. Now he summarized his approach in a comprehensive blog post.
The post shares valuable insights into how Christian and his team developed a generic solution to transform and combine mobile and desktop ad code into one responsive ad loading code, how they improved performance by lazy loading the ads, what they did to prevent the ads from breaking the site's layout, and some other things that add up to bringing the front end into a much better position when dealing with ads. Great tips for everyone who finds themselves wrangling ads. (cm)
8. 30 Days Of Code Tidbits
Who doesn't love a bite-sized tip? One that doesn't take long to swallow but teaches you something new to instantly ease your life as a developer? Using the hashtag #codetidbits30 on Twitter, Samantha Ming posts a new coding tidbit every day in December.
Three ways to remove array duplicates, a little trick to style elements that have no children or text at all, and a solution for displaying your data in your browser dev tools, these are only some of the tips in the series. Covering JavaScript, HTML, and CSS snippets, #codetidbits30 is a true treasure chest of front-end goodies. Be sure to follow along. (cm)
9. Upcoming In Smashing Membership
We released Heydon Pickering's brand new book Inclusive Components. The eBook version is and always will be free for Smashing Members, of course. Please check your dashboard to download it.
We are also looking into a slightly more interactive format for our Smashing TV sessions. We kindly invite you to submit your questions or actual mock-ups of your work in the Membership channel (#tv), so our speakers can review and provide feedback to your current projects — live!
- "Building A CSS Layout, Live" with Rachel Andrew— Dec 10 at 18:00 Berlin time
- Improving Web Forms, Live, with Adam Silver, January 2020
- Smart Interface Design Patterns, video course with Vitaly Friedman, January 2020
Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉
10. New On Smashing Job Board
- Software Developer at AO.com (Bolton, UK)
"You'll be an integral part of an award-winning team, working to find ways that make the customer experience totally effortless." - Technical Application Engineer at Rotterdam Ahoy (Rotterdam, The Netherlands)
"Als ervaren Technical Application Engineer zorg je voor een optimale ICT dienstverlening van onze systemen voor de interne en externe klanten." - Java Softwareentwickler - Billingsystem (w/m/d) at mobilcom-debitel GmbH (Büdelsdorf, Germany)
"Als Java Softwareentwickler/-in erstellen und erweitern Sie robuste Microservices für unser eigenentwickeltes Kunden(stamm)daten- und Abrechnungssystem."
11. Our Next Smashing Workshops
In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.
Or, if you'd like to run an in-house workshop at your office, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Get in touch — it's that easy! (vf)
12. Our Most Popular Articles
- Struggling To Get A Handle On Traffic Surges
What happens when too many visitors come to your site at once and the site goes down? Traffic surges do happen. But rather than let your website become victim to them, this guide will show you how you can set it up to be the victor. - Get Started With UI Design With These Tips To Speed Up Your Workflow
When you are working on a design, do you struggle with all of the possibilities, like whether to make some text block bigger or smaller or increase (or decrease) the amount of white space around an element? Tomáš Čakloš shares tips for solving these common issues to make your design more consistent and user-friendly. - How To Ease Your Team's Development Workflow With Git Hooks
Development workflows can easily get out of hand and start causing confusion and friction within teams. Thanks to git and the hooks it provides, we have a great variety of automation with which we can set our development workflow and make our lives easier.
This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Rachel Andrew, Vitaly Friedman and Christiane Rosenberger.
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
0 коммент.: