In the past few years, we’ve seen a lot of change and diversion in regard to web technologies. In 2020, I foresee us as a web community heading toward two major trends/goals: extensibility and interoperability. Let’s break those down.
Extensibility describes how much someone can take a particular technology and extend it to their own needs. We’ve built a component-based web over the last few years in terms of both development (React components! Vue components! Svelte components! Web components!) and design (Design systems!). Interesting … Read article
The post The Web in 2020: Extensibility and Interoperability appeared first on CSS-Tricks.
Here’s a smart post from Manuel Matuzovic where he digs into why accessibility is so important for building websites:
Web accessibility is not just about keyboard users, color contrast or screen readers. Accessibility is a perfect indicator for the quality of a website. Accessibility is strongly interlocked with other areas of web design and web development. If your website is accessible, it usually means that it’s inclusive, resilient, usable, it offers great UX for everyone, and it’s fast.
I love … Read article
A pleasant little romp through iconography and culture from Sophia Lucero. The "hamburger" menu icon we're familiar with now is really a sign from Taoist cosmology.
Besides ☰, which represents heaven 天, we have ☱ for lake/marsh 澤, ☲ for fire 火, ☳ for thunder 雷, ☴ for wind 風, ☵ for water 水, ☶ for mountain 山, and ☷ for ground 地.
January 15th, 2020 was the day Microsoft Edge went Chromium. A drop in browser engine diversity. There is a strong argument to be made that's not good for an ecosystem. Looked at another way, perhaps not so bad:
Perhaps diversity has just moved scope. Rather than the browser engines themselves representing diversity, maybe forks of the engnies we have left can compete against each other. Maybe starting from a strong foundation is a good place to start innovating.
Here's Raymon Camden on adding site search functionality to a site that is statically hosted. A classic trick! Just shoot 'em to Google and scope the results to your site:<form action="https://www.google.com/search" method="get"<input type="search" name="q" value="site:https://www.raymondcamden.com " autofocus size="50"<input type="submit" value="Search"</form
Raymond then … Read article
It's just a word to evoke the idea that serving as much as you can statically while using client-side code and hitting serverless APIs for any needs after that.
There are … Read article
I admit I didn’t know the ins and outs of what the Jamstack is until recently, despite having heard the term so frequently. I think I’m not alone in this. It’s an elusive term — how is it different from what came before, especially considering it shares so many similarities? Thankfully, Divya Sasidharan is breaking down so many aspects of Jamstack every day of January in a series of posts called #JAMuary.
One of the posts in this series … Read article
(This is a sponsored post.)
Say you have an address that your user typed in, like 1600 Pennsylvania Avenue NW, Washington, DC, USA, and now you need more information about it. Maybe you need the proper country code. Maybe you need the latitude and longitude. Maybe you need the postal code.
positionstack is an API that does just that.
It works in reverse, too. So say you've got latitude and longitude, you might want to find out what … Read article
I recently started drawing on my iPad using the Procreate app with Apple Pencil. I’m enjoying the flexibility of drawing this way. What usually keeps me from painting at home are basic things, like setup, cleaning brushes, proper ventilation, and other factors not really tied to the painting itself. Procreate does a pretty nice job of emulating painting and drawing processes, but adding digital features like undo/redo, layers, and layer effects.
Here’s a Procreate painting I made that I wound … Read article
The post How to Turn a Procreate Drawing into a Web Animation appeared first on CSS-Tricks.
Hue isn't intuitive, but it's not that weird. You take a trip around the color wheel from 0 to 360. Saturation is more obvious where 0% has all the color sucked out, like grayscale, and 100% is fully rich color at … Read article
Amy Kapernick covers four types of testing that front-end devs could and should be doing:
Amy published something similar over on 24 ways, listing out 12 different testing tools.
As long as we're being … Read article
I love stuff like this.
This … Read article
Pavithra Kodmad asked people for recommendations on what they thought were some of the most timeless articles about web development that have changed their perspective in some way. Fun! I'm gonna scour the thread and link up my favorites (that are actually articles, although not all of them are super directly related to web dev).
I love that it exists, but for the moment, my window management mostly consists of: grab this window and chuck it on the left half of the screen, and grab this window and … Read article
I'm a fan of the componentization of the web. I think it's a very nice way to build a website at just about any scale (except, perhaps, the absolute most basic). There are no shortage of opinions about what makes a good component, but say we scope that to third-party for a moment. That is, components that you just use, rather than components that you build yourself as part of your site's unique setup.
What makes a third-party component … Read article
NetNewsWire is one of the classic RSS apps, debuting in 2002. I was pretty stoked when it went 5.0 and was open-sourced in August 2019! You can snag it right here. (Sorry, Mac only.)
It's super nice, is fast, and looks great. It has just the right features.
But... I thought, at least at first, that really prefer websites for reading RSS content. I have multiple machines. I have mobile devices. I don't want my RSS to be limited … Read article
Where do you put styles in web components?
I'm assuming that we're using the Shadow DOM here as, to me, that's one of the big draws of a web component: a platform thing that is a uniquely powerful thing that only the platform can do. So this is about defining styles for a web component in a don't-leak-out way, and less so a way to get global styles to leak in (although that's very interesting as well, which can be … Read article
The post Thinking Through Styling Options for Web Components appeared first on CSS-Tricks.
I think we all have an intuitive understanding that, at the beginning of projects that require our creativity (be it design or code), things feel uncertain and messy. Then, as we go, things tend to straighten out. There is still some wiggling and setbacks, but by the end, we find a single solution and ship it.
Apparently this feeling has a logo: The Design Squiggle
The Process of Design Squiggle by Damien Newman, thedesignsquiggle.com
It comes from Damien Newman who … Read article
Copyright 2019 © All rights reserved