recentpopularlog in
« earlier  
Frank Chimero · Redesign: Gridniking
I’m a big proponent of “just enough grid.” Grids are scaffolding, structures meant to help get the main building done. There is no need to overbuild, especially for this site. I am going to stay organized, but only just so.
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
2 days ago
Same HTML, Different CSS
I stumbled upon a project called “Evolution of Web Design”, which shows a web page about Nasa and space. The interesting thing is that there is a slider mimics how the design looked for each year (1993 - 2015). The idea is so inspiring and it challenged me to do the same, which is to get a component or a web page and try to do multiple designs for it without touching the HTML content.
fridayfrontend  css  cssbasics  csszengarden  headers 
2 days ago
Why JavaScript is Eating HTML | CSS-Tricks
In recent years, JavaScript developers have realized that by defining a page’s structure in JavaScript instead of in HTML (using frameworks such as React), they can simplify the development and maintenance of user interaction code that is otherwise much more complex to build. Of course, when you tell someone that the HTML they wrote needs to be chopped up and mixed in with JavaScript they don’t know anything about, they can (understandably) become frustrated and start asking what the heck we’re getting out of this.
fridayfrontend  javascript  cssbasics  html  html-in-js  react 
2 days ago
TIL: CSS Media Queries
Now we've come across the @media CSS rule but did you know that they are cool things you can do with it asides making your website responsive? The syntax of a media query is composed of an optional media type(such as print or screen) and any number of media feature expressions. In this article, I'll share some media features I previously didn't know about and hope you learn and share them too.
fridayfrontend  css  cssbasics  mediaqueries  prefers-color-scheme  reduced-motion  prefers-contrast  prefers-reduced-transparency  prefers-reduced-data 
2 days ago
Quick developer tools tip: simulating dark/light colour mode | Christian Heilmann
Newer operating systems come with a dark/light mode option and also a “prefers reduced motion” mode. This also affects our products and we should test them in these modes to make sure there is no glaring problem. There is also a high contrast mode in Windows which is an accessibility feature that should be on our radar to test for.

Now, to avoid having to change your whole OS to test for this, browser developer tools have simulators for these modes.
fridayfrontend  css  cssbasics  darkmode  prefers-color-scheme  edge  chrome  devtools 
2 days ago
Sticky Table of Contents with Scrolling Active States | CSS-Tricks
Say you have a two-column layout: a main column with content and a sidebar. Say it has a lot of content, with sections that requires scrolling. The sidebar column that is largely empty, such that you can safely put a position: sticky; table of contents over there for all that content in the main column. A fairly common pattern for documentation.
fridayfrontend  css  cssbasics  sticky  navigation 
2 days ago
Performance for Designers Part 2: Images - Calibre
Images are crucial to establishing a brand, portraying ideas, people and products. It’s hard to imagine the web without them. The importance of visuals cannot be understated, especially in industries such as news reporting, travel or e-commerce. Yet, images continue to be one of the most significant contributors to bad performance and user experience, accounting for 75% page weight. The average page weight is 7MB, 5.2MB of which is images.
fridayfrontend  cssbasics  performance  images 
2 days ago
Why the JAMStack is awesome (and a few reasons why its not) | Go Make Things
Last week, Nicole Sullivan replied to a “what’s your contrarian opinion” tweet with:

JAMStack is 99.9% branding and .1% substance. 😳😆

So… Nicole is awesome! She created OOCSS. She’s an amazing developer.

But I think she’s wrong about the JAMStack.
fridayfrontend  cssbasics  jamstack 
2 days ago
While You Weren't Looking, CSS Gradients Got Better | CSS-Tricks
Surprisingly, I recently discovered most people aren't even aware that double position for gradient stops is something that actually exists in the spec, so I decided to write about it.
fridayfrontend  css  cssbasics  gradients 
2 days ago
Understanding CSS Grid: Grid Template Areas
In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use grid-template-areas to place items.
fridayfrontend  css  cssbasics  cssgrid  grids  layout  grid-template-areas 
2 days ago
Doctype Declaration in HTML
The doctype is the first row in every HTML document, and we use it automatically. This one line tells the browser what to expect and how to process the information.
fridayfrontend  css  cssbasics  html  doctype 
2 days ago
A Complete Guide to Links and Buttons
Let's take a look at the whole world of links and buttons, and all the considerations at the HTML, CSS, JavaScript, design, and accessibility layers that come with them. There are plenty of pitfalls and bad practices to avoid along the way. By covering it, we’ll have a complete good UX implementation of both elements.
fridayfrontend  css  cssbasics  buttons  links  javascript  accessibility 
2 days ago
Designing a ripple effect for UI feedback
In this tutorial, we will learn how to create a simple micro-interaction for the popular ripple effect to provide users with touch feedback. This effect was made popular by Google’s Material Design and can be used on virtually any kind of surface users can interact with.
fridayfrontend  css  cssbasics  javascript  ripple  material 
2 days ago
Styled Components vs. CSS Stylesheets
There’s a hot debate around standard CSS stylesheets vs. “CSS-in-JS” solutions when building in modern front-end frameworks. In this post, I’m going to weigh up the pros and cons of CSS vs. Styled Components and how it affects the way I write React components.
fridayfrontend  css  cssbasics  css-in-js  styled-components  emotion  react  javascript 
2 days ago
6 things I wish I knew about state management when I started writing React apps
The frontend “knows” a lot of things, and these things interact with each other in non-trivial ways. So in my view, state management is the core problem when developing a UI. Here are some things I wish I knew about state management earlier.
fridayfrontend  javascript  react  state  redux  flux  vuex 
2 days ago
Toward Responsive Elements
As developers, watching standards can be frustrating. We might learn of some new spec developing, some new features landing that you weren't even aware of - maybe many of these are even things you don't actually care much about. In the meantime, "Container Queries," clearly the single most requested feature in CSS for years, appears to be just... ignored. What gives? Why does the CSS Working Group not seem to listen? After all of these years -- why isn't there some official CSS spec at least?
fridayfrontend  css  responsive  containerqueries 
2 days ago
Getting Acquainted With Svelte, the New Framework on the Block
There’s another player in the framework space that’s gaining attention and operates very much in the same spirit as Vue… Svelte. This article is going to zoom out a bit and provide a little more context about Svelt, as well as how it differentiates itself from other frameworks, and how to implement it in your own projects.
fridayfrontend  javascript  svelte  vue  frameworks 
2 days ago
What is CSS4?
If we want CSS4 to be a thing it is necessary to define it a little more. However, that does not mean it’s necessary to divide all existing CSS modules into CSS3 and CSS4 buckets. This article discusses these issues, and goes through some of the feedback to my original article.
fridayfrontend  css  css4  cssgrid  customproperties  variables  houdini 
2 days ago
Building my New Site with VuePress
I'm so happy to finally launch my new website! In terms of the tech stack, I stayed within my favorite world -- Vue 😆. But this time I decided to use VuePress instead. In this article, I want to share how this decision came to be and what my thoughts are on using VuePress.
fridayfrontend  javascript  vue  vuepress 
2 days ago
Async + Await in JavaScript
Flow Control in JavaScript is hard! Native Promises in JavaScript have helped immensely, but the syntax is still a little callback-y. With Async + Await, we can write synchronous looking code without losing any of the benefits of JavaScript's asynchronous nature. Wes Bos explores how async + await works, best practices for flow control, and explores several solutions for handling errors.
fridayfrontend  video  javascript  promises  async  await 
2 days ago
Promises From Scratch In A Post-Apocalyptic Future
In this installment of Low Level JavaScript we build a Promise implementation from scratch in order to understand exactly how asynchronous abstractions can be built on top of lower level primitives like callbacks.
fridayfrontend  video  javascript  promises  howto  tutorials 
2 days ago
Optimize Your Libraries with Webpack
Using a library in your webpack project? Use these tips to make your bundle smaller!
webpack  optimization  performance  babel  lodash  moment  react 
2 days ago
Oh Shit, Git!?!
Git is hard: screwing up is easy, and figuring out how to fix your mistakes is fucking impossible. Git documentation has this chicken and egg problem where you can't search for how to get yourself out of a mess, unless you already know the name of the thing you need to know about in order to fix your problem.

So here are some bad situations I've gotten myself into, and how I eventually got myself out of them in plain english.
git  reference  howto 
2 days ago
Little Things I Like to Do with Git – CSS Wizardry – Web Performance Optimisation
I was chatting with Tim just the other day about how much I love Git—it’s such a powerful, elegant tool and it’s one I use the most often. I thought I would note down some useful little Git snippets that I use the most frequently.
git  github  blame  tips 
2 days ago
Git from Beginner to Advanced - MadeByMike
Getting comfortable with Git took me a long time. I thought I'd write a quick guide that assumes no prior knowledge, along with some of my favourite tips and tricks.
git  github  howto 
2 days ago
javascript - Trying to use fetch and pass in mode: no-cors - Stack Overflow
But if a site sends no Access-Control-Allow-Origin header in its responses, there’s no way your frontend code can directly access responses from that site. In particular, you can’t fix it by specifying mode: 'no-cors' (in fact that’ll ensure your frontend code can’t access the response contents).
fetch  cors  no-cors  access-control-allow-origin  frontend  javascript 
8 days ago
Magic Flip Cards: Solving A Common Sizing Problem
In this article, Dan Halliday reviews the standard approach to creating animated flip cards, and introduces an improved method which solves its sizing problem.
fridayfrontend  css  cssbasics  animation  cards 
9 days ago
Quick and Easy Dark Mode with CSS Custom Properties
Adding “dark mode” support to a website or app is becoming increasingly popular among developers, many of whom favour this setting themselves. Giving users a dark theme option can be beneficial for accessibility, as some people experience headaches or visual difficulties from excessively bright screens, or have trouble reading for long periods on a light background.
fridayfrontend  css  cssbasics  darkmode  customproperties  variables  prefers-color-scheme 
9 days ago
Using the CSS line-height Property to Improve Readability
In this article, you will learn about the CSS line-height property and how you can use it to create visually pleasant, readable text.
fridayfrontend  css  cssbasics  line-height  readability 
9 days ago
How I recreated a Polaroid camera with CSS gradients only - Sarah Fossheim
Earlier I remade the design of an old calculator entirely in CSS. I had a lot of fun making it, so I decided to do the same with a Polaroid camera this time.
fridayfrontend  css  cssbasics  polaroid  gradients 
9 days ago
Custom Styling Form Inputs With Modern CSS Features
It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a single line of JavaScript or extra HTML elements! It’s actually gotten easier lately than it has been in the past. Let’s take a look.
fridayfrontend  css  cssbasics  forms  checkboxes  radio  toggles 
9 days ago
HTML attributes to improve your users' two factor authentication experience - Twilio
In this post we will look at the humble <input> element and the HTML attributes that will help speed up our users' two factor authentication experience.
fridayfrontend  cssbasics  html  autocomplete  forms  2fa  security 
9 days ago
5 tips for making your app accessible
Accessible product development is the responsibility of all designers and developers. Building an inclusive experience: Why accessibility matters, introduced the greater customer base, gaining empathy, starting the testing process, and how to learn more about accessibility. In this post, we’ll look at 5 tips developers can use to build accessible apps:
fridayfrontend  cssbasics  accessibility  forms  labels  buttons  focus  landmarks 
9 days ago
Smooth Scrolling Sticky ScrollSpy Navigation –
Yesterday evening I was working on some documentation pages. The page layout is quite classic, as it consists of a content pane on the left and a sidebar navigation on the right. Looking for a way to make the page less dull I decided to add a few small things to it:

Smooth Scrolling when clicking internal links
A Sticky Navigation, so that the sidebar navigation always stays in view
A “ScrollSpy” to update the active state of the navigation
These three additions make the page more delightful, and best of all is: they’re really easy to implement! In this post I’ll lay out the details.
fridayfrontend  css  cssbasics  scroll  sticky  position  scroll-behavior 
9 days ago
300 CSS properties with examples
There are more than 500 CSS properties but the browsers only support around 300+ properties. That's why we have prepared the list of 300 CSS properties with values which the current browsers support. This is not just a list. You can explore and practice each property.
fridayfrontend  css  cssbasics 
9 days ago
Getting Fancy with position: sticky; | CSS-Tricks
Mike Solomon worked on a fancy scrollytelling post for Esquire and blogged about it. It has GIFs of each step along the way of figuring out not just position: sticky; but also using negative margins, wrapper divs, backgrounds, and even a smidge of JavaScript measuring to get it all right.
fridayfrontend  css  cssbasics  position  sticky  javascript 
9 days ago
Animating CSS Width and Height Without the Squish Effect
Being able to animate the CSS width and height properties would be super useful. Unfortunately at the moment it’s a sure-fire way to get your browser to scream in agony. In this 5 minute tutorial we’ll explore using the transform property to simulate animating the width of an element.
fridayfrontend  css  cssbasics  animation  transform  width  height 
9 days ago
Corner ribbon with trigonometry
I was never the best at trigonometry, so I was very proud finally cracking how to perfectly position a corner ribbon within a box with CSS.
fridayfrontend  css  cssbasics  trigonometry  math  ribbons  corner  badges 
9 days ago
CSS Positioning
Are you ready to start learning about how positioning works in CSS? This interactive article is for you.
fridayfrontend  css  cssbasics  position 
9 days ago
Breaking out with CSS Grid explained
This really nice technique for creating a full width image inside a constrained column was being shared around recently. However, what it didn’t do was explain why this technique works. As part of my attempt to remove all the “it just works magic” from these techniques I thought I would explain.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
9 days ago
Select an Element with a Non-Empty Attribute | CSS-Tricks
In a perfect world, we'd just remove the data-attribute from the HTML template when there is no value. But a lot of templating languages, on purpose, don't allow logic in them that would help us put-or-not-put that attribute entirely.
fridayfrontend  css  cssbasics  selectors  empty  not  attributes 
9 days ago
Apples and Oranges: All Screen Readers are not Created Equal
Its time to talk about screen reader software. For the uninitiated, a low- or no-vision web user leverages screen reader software to read the contents of a website out loud. The listener then chooses how to interact with the content, press links, and input information into forms. There are three major screen readers on the market right now, and the experience that they offer are very different. As the title suggests, to understand just one screen reader does not mean you understand all screen readers.
fridayfrontend  accessibility  cssbasics  screenreaders 
9 days ago
Light and dark themed SVG favicon using the CSS prefers-color-scheme media feature
In this article you’ll learn how to use an SVG as a favicon for your website, considering the light and dark theme detection in the browser using the CSS prefers-color-scheme media feature.
fridayfrontend  css  cssbasics  svg  prefers-color-scheme  darkmode  favicons 
9 days ago
Get Moving (or not) with CSS Motion Path
CSS Motion Path is now in Firefox, new Edge, Chrome, and Opera (and other Blink-based browsers). That means each of these browsers supports a common baseline of offset-path: path(), offset-distance, and offset-rotate. To celebrate, let’s review the basics of what is supported, explain some of the specifics when a path is applied, and also highlight the possibilities of offset-anchor.
fridayfrontend  css  cssbasics  animation  motion-path  offset-path  offset-distance  offset-rotate  offset-anchor 
9 days ago
Multi-line gradient links | Zell Liew
When I saw the CSS Tricks redesign, I was hooked. I loved the links with gradients. I told myself I’m going to use gradient links for my next project.
fridayfrontend  css  gradients  background-clip  text-fill-color  underline 
9 days ago
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more straightforward to make one than you might think and only requires the trifecta of HTML, CSS and JavaScript. Let’s make one together!
fridayfrontend  css  cssbasics  html  javascript  countdown  timer  svg 
9 days ago
Tiny Web Stacks
A lot of my day to day work involves design systems. These can get pretty complex, with a lot of moving parts. Perhaps as a reaction to that, I’ve grown to love small, simple tech stacks for those occasional side projects, micro-sites and one-off experiments that don’t demand as many features or justify such diligent maintenance.
fridayfrontend  parcel  eleventy  javascript  build  cssbasics 
9 days ago
Building an accessible autocomplete control
I've been looking for a way to let users enter a destination country. Unfortunately, native HTML form controls just aren't good enough for this type of interaction. And so we need to build a custom autocomplete control from scratch.

A word of warning though: this is one of the hardest UI components I’ve ever had to make—they’re just way harder than they look.
fridayfrontend  accessibility  javascript  forms  autocomplete 
9 days ago
A new technique for making responsive, JavaScript-free charts
For a recent New York Times article, I wanted to see if it was possible to create SVG charts that would work without JS. I haven't seen the same combination of techniques used elsewhere, so I figured I'd write up the process. I've also created an experimental Svelte component library called Pancake to make these techniques easier to use.
fridayfrontend  svg  javascript  svelte  charts 
9 days ago
How To Create A Headless WordPress Site On The JAMstack
In this post, we’ll set up a demo site and tutorial for headless WordPress, including a starter template! We’ll use the WordPress dashboard for rich content editing, while migrating the front-end architecture to the JAMstack to benefit from better security, performance, and reliability. We’ll do this by setting up a Vue application with Nuxt, pulling in the posts from our application via the WordPress API.
fridayfrontend  wordpress  jamstack  vue  nuxt  api  javascript 
9 days ago
Old CSS, new CSS
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was.

And boy, it was horrendous. I mean, being able to make stuff and put it online where other people could see it was pretty slick, but we did not have very much to work with.

I’ve been taking for granted that most folks doing web stuff still remember those days, or at least the decade that followed, but I think that assumption might be a wee bit out of date. Some time ago I encountered a tweet marvelling at what we had to do without border-radius. I still remember waiting with bated breath for it to be unprefixed!

But then, I suspect I also know a number of folks who only tried web design in the old days, and assume nothing about it has changed since.

I’m here to tell all of you to get off my lawn. Here’s a history of CSS and web design, as I remember it.
fridayfrontend  css  history  html  layout 
9 days ago
Playing with CSS Grid
Lately, I’ve been wanting to play with layout that had more of a magazine feel. One thing that I noticed is that they’ll play with grids to create visual interest or to move your eye through a more dense page. Magazines have the advantage of a fixed size. For the web, we need to consider everything from watches to wide screens. CSS Grid seemed like a great way to play around with different options.
fridayfrontend  css  grids  layout  cssgrid 
9 days ago
Possibly The Easiest Way to Run an SSG | CSS-Tricks
One thing of the many notable things about Eleventy is that you don't even have to install it if you don't want to. Lemme set the stage.
eleventy  node  npm  ssg  netlify 
9 days ago
JavaScript Libraries Are Almost Never Updated Once Installed
Cloudflare helps run CDNJS, a very popular way of including JavaScript and other frontend resources on web pages. With the CDNJS team’s permission we collect anonymized and aggregated data from CDNJS requests which we use to understand how people build on the Internet. Our analysis today is focused on one question: once installed on a site, do JavaScript libraries ever get updated?
javascript  library  security  cloudflare  cdn 
9 days ago
Splitting a Commit
My workflow usually involves squashing many commits into a single one in preparation for a pull request. But sometimes, I need to perform the opposite action — splitting a single commit into many.
git  commits  rebase 
9 days ago
Git Branch Autocompletion
Regardless of the pattern you use, having a feature like autocomplete can save you a lot of time typing or copy/pasting. Here's how you can implement autocomplete for git branches!
git  autocomplete 
9 days ago
New CSS for Styling Underlines on the Web, by Jen Simmons
Finally in 2019, we have new CSS that allows us a lot of powerful ways to style underlines. Jen Simmons walks you through the options.
fridayfrontend  video  underline  text-decoration  text-decoration-thickness  text-decoration-color  text-decoration-offset  text-decoration-skip-ink  text-decoration-style 
9 days ago
Use new selectors responsibly with selector queries, by Miriam Suzanne
There are many ways to start using a new feature in CSS without waiting for full cross-browser support, but "feature queries" are the most clear and explicit. We can use them to test for browser support, and provide targeted styles only where they are supported. Now we can do the same with new selectors, like ::marker or :focus-visible! Firefox 69 was the first to implement selector feature queries, but other browsers are following suit. Miriam Suzanne will show you how it works, and how to start using this new feature query right away.
fridayfrontend  video  css  featurequeries  supports  selectors 
9 days ago
Writing CSS in the year 3019, by Ire Aderinokun
It’s 3019, how has writing stylesheets changed? Ire covers topics such as progressive enhancement, accessibility, internationalization, and performance as it relates to writing CSS in 3019 (and, of course, today).
fridayfrontend  video  css  supports  featurequeries  selectors 
9 days ago
5 Best Practices to Write Quality Arrow Functions
The arrow function deserves the popularity. Its syntax is concise, binds this lexically, fits great as a callback. In this post, you’ll read 5 best practices to get even more benefits from the arrow functions.
javascript  es6  arrow  functions  bestpractices 
9 days ago
Customize Your Mac Screenshots With These Hotkeys
When you’re using Command + Shift + 4 to draw a square around some part of your screen to take a screenshot, and you mess up and start it in the wrong spot, don’t give up. Instead, hold down the space bar and you’ll be able to move that rectangle anywhere you want. Release the space bar, and you can continue resizing it like before.
mac  macos  osx  screenshots  keyboard  shortcuts 
10 days ago
Intrinsic Sizing In CSS
In CSS, we have two ways of sizing, intrinsic and extrinsic. The latter is the most common one which means using fixed values for the width or height of an element. The first one means that the sizing of an element depends on its content size.

Through this article, I will explore each of the intrinsic values and see how we can get the benefit of them. Also, I will explain how to use those intrinsic values in combination with CSS grid, and other CSS properties.
fridayfrontend  css  cssbasics  sizes  grids  cssgrid  layout 
16 days ago
Roles and relationships
Sometimes after dabbling in gateway ARIA semantics like aria-current, landmark roles, and link-button hybrids, a budding accessibility practitioner might find themselves experimenting with more serious roles like menu, listbox, or even treegrid. These are tantalizing, powerful patterns that allow you to create experiences that are not supported by only vanilla HTML. Unfortunately, they are also brittle; even small mistakes in using these roles can take a user on a very bad trip.
fridayfrontend  cssbasics  accessibility  aria  roles 
16 days ago
How Do You Do max-font-size in CSS? | CSS-Tricks
CSS doesn't have max-font-size, so if we need something that does something along those lines, we have to get tricky.
fridayfrontend  css  cssbasics  font-size  max 
16 days ago
CSS resize none on textarea is bad for UX - Catalin Red
You must really hate your users if textarea {resize: none} is in your stylesheets. CSS resize none is bad for UX and you already know it:
fridayfrontend  css  cssbasics  textarea  accessibility 
16 days ago
Operating System and Browser Accessibility Display Modes - The A11Y Project
Most computers, laptops, tablets, smartphones, and web browsers have specialized tools to help people read and take action on the content they display. Some of these tools are display modes, which are pre-defined visual configurations you can tell your device to use.

Five such modes are Dark Mode, Increased Contrast Mode, Inverted Colors Mode, Reduced Motion Mode, and High Contrast Mode. Following is an explanation of each of these mode, who can benefit from it, how to enable it on your device or browser (if supported), and how to work with it in code.
fridayfrontend  accessibility  cssbasics  darkmode  contrast  inverted  reduced-motion 
16 days ago
What does "revert" do in CSS?
The revert value in CSS "resets" a property back to it's inherited value, only going as far back as the UA stylesheet. That's critical, as it won't reset a <p> to inline, for example, because a <p> is a block-level element as set in the UA stylesheet.
fridayfrontend  css  cssbasics  revert 
16 days ago
You don’t need a media query for that — #2 Responsive Columns
Using CSS grid we can create a list of cards that automatically fit and resize to the available space with just three lines of CSS. That’s it! A small amount of CSS with CSS Grid, and you can create fully responsive, flexible layouts with an unknown infinite number of cards without the need for media queries.
fridayfrontend  css  cssbasics  layout  grids  cssgrid  responsive 
16 days ago
Why use a form element when submitting fields with JavaScript? | Go Make Things
There are two reasons why you should still use a form element:

It makes your life easier.
Semantics (and the accessibility that happens as a result).
fridayfrontend  javascript  forms  accessibility 
16 days ago
Set Type on a Circle... with offset-path
Here's some legit CSS trickery from yuanchuan. There is this CSS property offset-path. Once upon a time, it was called motion-path and then it was renamed. I sort of rolled my eyes at the time, because the property is so obviously for animating things along a path. But you don't have to use it for animation, hence the rename, and this example proves it!
fridayfrontend  css  cssbasics  offset-path  typography 
16 days ago
Optimising SVGs for the Web
Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. But plenty of times I’ve opened up a web project and found that SVG assets could be made significantly smaller with some straightforward optimisations. In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.
fridayfrontend  cssbasics  svg  optimization 
16 days ago
What React Does (and Doesn't Do)
React doesn’t do a whole lot. Don’t get me wrong – it’s great at what it does! But the things React is actually responsible for, in a fully-functioning production app? That list is pretty small. The universe of things you might call “a React problem” or “a React thing” is probably smaller than you think.
fridayfrontend  javascript  react 
16 days ago
Magical Rainbow Gradients with CSS Houdini and React Hooks
A deep-dive look at how we can use CSS Houdini + React Hooks to animate gradients. It relies on a trick that absolutely blew my mind when I discovered it.
fridayfrontend  css  javascript  react  houdini  animation  gradients  radial 
16 days ago
Can you make a countdown timer in pure CSS?
The way my brain works is to wonder if everything can be built with CSS (the correct answer is no, not really, but you can still try because it’s fun). Even though not everything can nor should be built with only CSS, this timer thing seemed narrow enough to be plausible.
fridayfrontend  css  timer  transforms  animation  flexbox  variables  customproperties 
16 days ago
Use and Reuse Everything in SVG… Even Animations!
If you are familiar with SVG and CSS animations and started to work with them often, here are some ideas you might want to keep in mind before jumping into the job. This article will be about learning how to build and optimize your code with <use> element, CSS Variables and CSS animations.
fridayfrontend  css  animation  svg  use  variables  customproperties 
16 days ago
How Smashing Magazine Manages Content: Migration From WordPress To JAMstack
WordPress adoption is massive. So why would a WordPress site consider moving to JAMstack? In this technical case study, we’ll cover what an actual WordPress migration looks like, using Smashing Magazine itself! We’ll talk through the gains and losses, the things we wish we knew earlier, and what we were surprised by.
fridayfrontend  wordpress  jamstack  migration  headless  api  cms 
16 days ago
“Generation Style” by Eric Meyer
What good is CSS generated content, really? What can we do with it? What are its limitations? And how far can we push content generation in a new landscape full of flexible boxes, grids, and more?
fridayfrontend  video  css  generated  before  after 
16 days ago
How to (unit) test in React - ITNEXT
This guide explains what unit testing is, why it’s needed and the best practices for small to large React applications.
react  javascript  testing 
16 days ago
Links with Tips and Advice for Public Speaking – a post by Marc Thiele
I collected these links to write a blog post at some point, but did not get to the point writing it, yet. Now, to make use of my list already, before getting to the point finally writing a blog post about public speaking, I have sorted my notes and list them here in no specific order. And I am going to let you know as soon as the actual blog post is done. Plus I am, of course, adding new resources any time I find something new.
speaking  advice 
16 days ago
Frank Chimero · The Burnout List
I am a man who knows burnout. Last summer, I found myself in the deepest work-related hole I’ve experienced. I spent some time (with help) looking at what parts of my burnout were on me and what parts were outside of my control—the elements of my fatigue that were, you know, out there.
burnout  work  culture 
18 days ago
« earlier      
per page:    204080120160

Copy this bookmark:

to read