Juggling between three languages every day, Iris is understood for her love of linguistics, arts, net design and typography, in addition to her goldmine of …
We all know how troublesome it might probably generally be to remain up to the mark. On this month-to-month version, you possibly can learn extra about what’s cookin’ at Smashing and discover among the hottest assets featured in our publication prior to now few weeks.
This yr has been fairly a trip — all of the extra purpose to stay up for a brand new yr with new beginnings, proper? Nicely, we’ll by no means actually know what awaits us within the subsequent months to return, however what I do know is that everybody on this planet can do solely a lot and actually simply the most effective they will to tug by. It’s actually been a yr of much less ups and extra downs for therefore many individuals all over the world, and we hope that with every thing we’ve been doing at Smashing has helped make life no less than a lil’ bit simpler.
Have you ever attended one in every of our workshops but? The Smashing Occasions crew is thrilled each time they run a workshop with the entire great attendees from everywhere in the world coming collectively to study collectively. So many concepts have been delivered to life because of the live design and coding sessions, and there are various people which have discovered new associates, too!
It will get even higher: We now have workshop bundles from which you’ll be able to select three, five and even ten workshop tickets for the workshops of your selection — ongoing, upcoming or those occurring sooner or later!
We hope you’ll discover no less than one workshop within the listing above that matches your initiatives and profession path, and if not, please do get in touch with us on Twitter and we promise to do our greatest to make it occur. Additionally, be happy to subscribe here should you’d prefer to be one of many first people to be notified when new workshops come up, and get entry to early-bird costs as nicely — we’ll have a lot of goodies coming your approach very quickly!
This yr, we’ve printed a brand new Smashing Podcast episode each two weeks, and the suggestions has been superior! With over 56k downloads (simply over a thousand per week, and rising!), we’ve had 34 company on the podcast with completely different backgrounds and so a lot to share!
In case you don’t see a subject you’d like to listen to and study extra about, please don’t hesitate to achieve out to host Drew McLellan or get in touch via Twitter anytime — we’d love to listen to from you!
Keep tuned for the following episode popping out very quickly!
With our weekly newsletter, we intention to convey you helpful content material and share all of the cool issues that people are engaged on within the net business. There are so many proficient people on the market engaged on sensible initiatives, and we’d admire it should you may assist unfold the phrase and provides them the credit score they deserve!
Additionally, by subscribing, there are not any third-party mailings or hidden promoting concerned, and your assist actually helps us pay the payments. ❤️
Curious about sponsoring? Be happy to take a look at our partnership options and get in touch with the crew anytime — they’ll you should definitely get again to you as quickly as they will.
It’s no information that CSS Grid is a implausible instrument to construct complicated layouts. However do you know that it might probably make it easier to forestall structure shifts, too? When Hubert Sablonnière found a structure shift drawback with a toggling state on a UI part he labored on, he got here up with an answer: the “Anti Layout Shift Grid Stacking Technique”.
In comparison with fixing the structure shift with absolute positioning, Hubert’s Grid-based method helps complicated conditions that require greater than two panels. One other profit: You don’t must assume which panel ought to information the dimensions of the entire part. If you wish to dive in deeper, Hubert wrote up every thing it is advisable know to forestall each vertical and horizontal shifts in a sensible blog post. (cm)
Bounce hyperlinks together with fastened headers may cause fairly some frustration. Possibly you’ve run into the identical difficulty earlier than: When clicked, your leap hyperlink takes you to the specified component, however a hard and fast header is hiding it. Up to now, wild hacks have been required to resolve the difficulty. Fortunately, there’s now a straightforward and well-supported CSS solution.
The trick: scroll-margin-top. Assign it to your headers, and the place: fastened header gained’t get into their approach anymore while you navigate to them with a leap hyperlink. A brief line of code that makes an enormous distinction. (cm)
On the subject of fluid scaling, CSS has some thrilling new options: clamp(), min(), and max(). They cap and scale values because the browser grows and shrinks. min() and max() return the respective minimal and most values at any given time whereas clamp allows you to you cross in each a minimal and most plus a most popular dimension for the browser to make use of.
As Trys Mudford factors out, clamp() is available in significantly helpful while you need broadly fluid typography with out being 100% particular concerning the relationship between the various sizes. In his in-depth article concerning the new characteristic, he shares precious hands-on ideas for utilizing clamp() successfully. (cm)
In case you’ve been searching for a free and easy-to-use instrument to document your display, it is likely to be onerous to search out one thing extra highly effective than Alyssa X’s open-source display recorder Screenity.
Irrespective of if you wish to give contextual suggestions on a undertaking, present detailed explanations, or showcase your product to potential prospects, Screenity gives quite a few sensible options to seize, annotate, and edit your recordings — with none time restrict. You’ll be able to draw on the display and add textual content and arrows, for instance, spotlight clicks and deal with the mouse, push to speak, and far more. Screenity is available for Chrome. (cm)
Date pickers could be onerous to get proper. A phenomenal instance of a human-friendly and fully accessible date picker comes from Tommy Feldt.
The Jamstack remains to be unexplored territory for you? Jamstack Explorers helps change that. Its mission: instructing you about constructing for the net with trendy instruments and strategies.
You’ll be able to select from three programs, observe your progress, and earn rewards as you proceed by the Jamstack universe. Tara Z. Manicsic leads you thru the wilds of Angular, Phil Hawksworth teaches you the best way to serve and observe a number of variations of your web site with Netlify, and Cassidy Williams guides you thru all of the necessities of Subsequent.js. When you’ve accomplished the three missions, there’s not solely a certificates ready, however you possibly can name your self a Jamstack Explorer, prepared to make use of the most recent instruments to construct experiences which can be sturdy, performant, and safe. (cm)
Design opinions, sprints, suggestions — design is a collaborative effort that brings alongside fairly some challenges when doing it remotely. The oldsters at InVision put collectively a collection of handy resources that will help you and your crew grasp these challenges.
The content material covers three of probably the most trickiest points of working remotely: fostering creativity, aiding collaboration, and staying centered. For extra greatest practices for working a distant design crew, InVision additionally printed a free eBook drawing from their very own expertise of working remotely with 700 workers unfold throughout 30 nations and no single workplace. (cm)
Sticking to the schedule could be tough if you find yourself working an extended video name or are giving a chat or workshop. That will help you be sure the session stays on observe, Koos Looijesteijn constructed Big Timer.
The daring but minimalist timer counts down the remaining minutes proper in your browser window — and even should you by accident shut the browser tab or must restart your machine, it can take the disruption into consideration. Keyboard shortcuts make it straightforward to regulate the length and pause or cease the countdown. One for the bookmarks. (cm)
Are you the kind of one that can’t focus when it’s quiet round them? Then one of many following instruments may make it easier to turn into extra productive. In case you’re lacking the acquainted workplace sounds when working from residence, I Miss The Office brings some workplace ambiance into your property workplace — with digital colleagues who produce typical appears like typing, squeaking chairs, or the occasional effervescent of the watercooler.
Workplace sounds have at all times distracted you greater than helped you focus? Then Noizio may very well be for you. The app allows you to combine nature and metropolis sounds to create your private ambient sound. One other strategy to growing focus with sound comes from Brain.fm. Their crew of scientists, musicians, and builders designs useful music that impacts the mind to realize the specified psychological state. Final however not least, Focus@Will can also be primarily based on neuroscience and helps enhance focus by altering the traits of music on the proper time intervals. Promising alternate options to your regular playlist. (cm)
Wanting again at 2020, what’s the state of the net this yr? The yearly Web Almanac provides in-depth solutions to this query, combining the uncooked stats and developments of the HTTP Archive with the experience of the net group. The outcomes are backed up by actual information taken from greater than 7.5 million web sites and trusted net consultants.
22 chapters make up this years’ almanac. They’re divided into 4 elements — content material, expertise, publishing, distribution —, and every one in every of them is explored from completely different angles. An insightful look into the state of performance is included, too, after all. (cm)
The place do all of the transmitted bytes in your web site come from? Analyzing third-party parts intimately is a time-consuming job, however it’s already a great begin to know which third events are in your web site — and the way they acquired there.
Simon Hearne’s request map generator tool visualizes a node map of all of the requests on a web page for any given URL. The scale of the nodes on the map is proportional to the share of complete bytes, and, while you hover over a node, you’ll get info on its dimension, response and cargo instances. No extra unhealthy surprises. (cm)
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.