Friday, March 29
Developer Roadmaps
CSS Tricks, Web Tricks

Developer Roadmaps

The path to becoming a front-end developer, as looked back upon by anyone who self-identifies that way, is likely a very windy one full of thorn bushes and band websites. Still, documenting a path, even if it's straighter and far cleaner than reality, is an interesting exercise and might just be valuable. Three different writer/developers have taken a crack at it this year and their results have been extraordinarily popular. Let's take a look.   These might help inform web education curriculum as well. Kamran Ahmed's Modern Front-End Developer in 2018 From here. Adam Gołąb's React Developer Roadmap From here. Adnan Ahmed's Modern Back-End Developer in 2018 From here. Flavio Copes's Roadmap to Become a Vue.js Developer 2018 Source: CSS-tricks.com
Adding Particle Effects to DOM Elements with Canvas
CSS Tricks

Adding Particle Effects to DOM Elements with Canvas

Let’s take a look at how to make web pages more visually capable by combining the freedom of <canvas> with HTML elements. Specifically, we will be creating a basic HTML-to-particle effect, but the same technique could be used for many kinds of effects. Before we begin, feel free to grab the source code in the repo. View Repo Create the initial element First, let’s create an HTML element to build on. I'm using a simple styled button, but it really could be any HTML element. See the Pen DOM to Canvas #1 by Zach Saucier (@Zeaklous) on CodePen. A modern browser like Chrome, Firefox, or Edge is required to view these demos. But how can we get a canvas to "see" this element so that we can manipulate each pixel using canvas? In order to make that to happen, we will essentially need to tak...
Web Tricks

Text Editing Tips And Tricks Roundup

Text Editing Tips And Tricks RoundupText Editing Tips And Tricks Roundup Rachel Andrew 2018-07-23T13:30:35+02:00 2018-07-23T16:18:07+00:00 We asked the Smashing Community for their favorite text editing tricks, shortcuts, and features that save them time. Here’s a roundup of what we’ve found quite useful along with a couple of other suggestions you may find handy. Favourite Keyboard Shortcuts Many of you have favorite keyboard shortcuts. Some of these will be editor or operating system specific, although in many cases you’ll be able to find a similar shortcut with the tools you are using. I’ve rounded up a few from the community below. Ste Grainer shared a t...
20 Freshest Web Designs, July 2018
Web Tricks

20 Freshest Web Designs, July 2018

Welcome to our roundup of the best websites launched (or significantly updated) this month. July is a strange time to launch a site with the Summer slowdown in full effect, but these intrepid entrepreneurs have done so. We’ve got examples of great ecommerce, a couple of agency sites that we couldn’t resist, and lots of incredible art direction. This month sees a big trend in compass navigation (a link in every corner of the page), and parallax is definitely still a big deal. Whether it’s inspired by the World Cup, or Le Tour, there’s a subtle gallic feel to a lot of sites this month…savourer! Drift Drift is a creative agency with some chops. Rejecting the minimalism that seemingly every other agency opts for, they’ve put together a charmingly animated, hand-made site. Not too functional, ...
Popular Design News of the Week: July 16, 2018 – July 22, 2018
Web Tricks

Popular Design News of the Week: July 16, 2018 – July 22, 2018

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news. Google Material Design: Updates, Improvements, and New Tools   CSS: A New Kind of JavaScript   The Importance of Brand Consistency   A Look at Chrome’s New Tab Design   Wheel   Dar...
CSS Tricks

Your Body Text is Too Small

Several years ago, there was a big push by designers to increase the font-size of websites and I feel like we’re living in another era of accessibility improvements where a fresh batch of designers are pushing for even larger text sizing today. Take this post by Christian Miller, for example, where he writes: The majority of websites are still anywhere in the range of 15–18px. We’re starting to see some sites adopt larger body text at around 20px or even greater on smaller desktop displays, but not enough in my opinion. Christian attributes this to all sorts of different things, but I particularly like this bit: Unfortunately, it’s a common mistake to purposefully design a website in a way to avoid scrolling. To the detriment of design, body text size is reduced to either reduce scrollin...
CSS Tricks

Font Playground

This is a wondrous little project by Wenting Zhang that showcases a series of variable fonts and lets you manipulate their settings to see the results. It’s interesting that there’s so many tools like this that have been released over the past couple of months, such as v-fonts, Axis-Praxis and Wakamai Fondue just to name a few. Direct Link to Article — PermalinkThe post Font Playground appeared first on CSS-Tricks. Source: CSS-tricks.com
CSS Tricks

Weird things variable fonts can do

I tend to think of variable fonts as a font format in which a single font file is capable of displaying type at near-infinite variations of things like boldness, width, and slantyness. In my experience, that's a common use case. Just check out many of the interactive demos over at Axis-Praxis: or Make sure to go play around at v-fonts.com as well for loads of variable font demonstrations. But things like boldness, width, and slantyness and just a few of the attributes that a type designer might want to make controllable. There are no rules that say you have to make boldness a controllable attribute. Literally, anything is possible, and people have been experimenting with that quite a bit. If you're interested in variable fonts, we have a whole guide with all the best articles we've publis...
CSS Tricks

Building “Renderless” Vue Components

There's this popular analogy of Vue that goes like this: Vue is what you get when React and Angular come together and make a baby. I've always shared this feeling. With Vue’s small learning curve, it's no wonder so many people love it. Since Vue tries to give the developer power over components and their implementation as much as it possibly can, this sentiment has led to today's topic. The term renderless components refers to components that don’t render anything. In this article, we'll cover how Vue handles the rendering of a component. We'll also see how we can use the render() function to build renderless components. You may want to know a little about Vue to get the most out of this article. If you are a newbie Sarah Drasner's got your back. The official documentation is also a very ...
Webfonts And Performance: SmashingConf Videos
Web Tricks

Webfonts And Performance: SmashingConf Videos

Webfonts And Performance: SmashingConf VideosWebfonts And Performance: SmashingConf Videos The Smashing Editorial 2018-07-20T14:35:35+02:00 2018-07-20T15:29:44+00:00 Webfonts are difficult to get right. An often overlooked and disruptive piece of web performance, webfonts can slow down your site and leave your visitors confused and agitated. No one wants agitated visitors. Webfonts Are ▢▢▢ Rocket Science Recorded at our special web performance themed SmashingConf in London, Zach Leatherman demystifies webfonts in order that we can avoid font-related performance issues. He takes us through a detailed guide to best practices when using webfonts, so you can use ...
Brainstorming the Wiki
Web Tricks

Brainstorming the Wiki

Before the blog took off, before Tumblr became the face of fandom, but around a year after Geocities launched as a platform for Justin Timberlake fan sites, there was The Wiki. We looked upon The Wiki, and we saw its potential as a platform for crowdsourcing knowledge, collaborating, and educating. We saw that it was good. Then Wikipedia was founded at some point, and the rest is history. I love well-maintained wikis to a fault. Wikis have been a large part of my continuing education in web design, random trivia, and the minutiae of video game mechanics for a long time, now. Anyone who learns stuff on the Internet owes a lot, directly or indirectly, to wikis and their less-community-oriented cousin The Knowledge Base. Even though many of the publicly available wiki software options are da...
CSS Tricks

CSS: A New Kind of JavaScript

In this wacky and satirical post, Heydon Pickering describes a wild new technology called Cascading Style Sheets that solves a lot of the problems you might bump into when styling things with JavaScript: A good sign that a technology is not fit for purpose is how much we have to rely on workarounds and best practices to get by. Another sign is just how much code we have to write in order to get simple things done. When it comes to styling, JavaScript is that technology. CSS solves JavaScript’s styling problems, and elegantly. The question is: are you willing to embrace the change, or are you married to an inferior methodology? Yes, this is a funny post but the topic of CSS-in-JS is hot and quite active. We recently shared a video of Bruce Lawson's excellent talk on the subject and publis...
CSS Tricks

Accessibility for Teams

Maya Benari: Accessibility is a crucial part of government product design. First, it’s the law. Federal agencies face legal consequences when they don’t meet accessibility requirements. Second, it affects us all. Whether you have a motor disability, you sprained your wrist playing dodgeball, you need a building to have a ramp for your wheelchair or stroller, or you literally just have your hands full, we all find ourselves unable to do certain things at different points in our lives. Accessible products are better products for everyone. But accessibility is hard: It comes across as a set of complex rules that are hard to follow. Not everyone feels confident that they’re doing it right. It’s difficult to prioritize alongside other work and project needs. How do you make sure you’re buildin...
CSS Tricks

How to make a modern dashboard with NVD3.js

NVD3.js is a JavaScript visualization library that is free to use and open source. It’s derived from the well-known d3.js visualization library. When used the right way, this library can be extremely powerful for everyday tasks and even business operations. For example, an online dashboard. We can use NVD3.js to compile data into a centralized space that visualizes the information in neat charts and graphs. That’s what we’re going to look at in this post. Making a dashboard with NVD3.js for the first time is daunting, but after this tutorial, you should have the required knowledge to get your hands dirty and start building something awesome. Personally, I have a passion for visualizations on the web. They are both beautiful and meaningful at the same time. Real-world use case: A data dash...
CSS Tricks

​The State of Headless CMS Market

(This is a sponsored post.)In March and April 2018, Kentico conducted the first global report about the state of headless CMS market. We surveyed 986 CMS practitioners in 85 countries about their opinions, adoption, and plans for using headless CMS. The survey contains valuable industry insights into topics such headless CMS awareness, preferred headless CMS models, current and future uptake of the headless CMS approach, and much more, from leading industry players. Download your complimentary copy of the full report now. Direct Link to Article — PermalinkThe post ​The State of Headless CMS Market appeared first on CSS-Tricks. Source: CSS-tricks.com