Friday Issue Nr.83

2023-10-13

back

This week represents a mixed bag of everything, from nice animations to the end of FE development. Definitely get your max-size coffee cup to get through all of this.

JavaScript News

Barrel file effect on build

It is quite interesting to observe how barrel files impact build speed.

https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-7/

Astro and View Transition example

https://astro-3d-view-transitions.pages.dev/

and here is an article on how to create your transitions:

https://tympanus.net/codrops/2023/10/03/animating-multi-page-navigations-with-browser-view-transitions-and-astro/

Fluid Simulation with JS

Fantastic animation and a superb explanation.

https://kyndinfo.notion.site/Fluid-Simulation-f0516d9d12e245a08ae5c7545ac822dd

If you are in a rush, there is a full-size demo: https://codepen.io/kynd/pen/jOXZXWB

An interactive intro to CRDTs

https://jakelazaroff.com/words/an-interactive-intro-to-crdts/

Was JavaScript really made in 10 days?

https://buttondown.email/hillelwayne/archive/did-brendan-eich-really-make-javascript-in-10-days/

Moment.js alternative Day.js

https://github.com/iamkun/dayjs

A Super Tiny JS autocomplete lib

~800 bytes.

https://github.com/knadh/autocomp.js

From design to build with one click

And where is the fun of building, struggling, and spending hours messing with CSS?

https://www.builder.io/blog/figma-to-code-visual-copilot

Nice Collection of UI components and effects

https://ui.ibelick.com/

There is also NBRTLSM, and I can’t decide if I like it or hate it.

https://neobrutalism-components.vercel.app/

When to nest CSS

It's certainly a good article to read.

https://cloudfour.com/thinks/when-to-nest-css/

Tailwind best practice

Short and to-the-point article on the best practice with TailwindCSS

https://evilmartians.com/chronicles/5-best-practices-for-preventing-chaos-in-tailwind-css

Summary on WCAG 2.2 updates

https://www.viget.com/articles/demystifying-wcag-2-2/

Easy light-dark mode

Here is new syntax light-dark(<color>, <color>);

Neat and simple if compared to

1
:root {
2
  --text-color: #333; /* Value for Light Mode */
3
}
4

5
@media (prefers-color-scheme: dark) {
6
  --text-color: #ccc; /* Value for Dark Mode */
7
}

https://www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark/

Box Shadow Generator

https://boxshadows.xyz/

Mixed News

Simplified Responsive Design Mode for Safari

https://webkit.org/blog/14670/simplified-responsive-design-mode/

Andris Švarcs

Somehow, I've survived over 15 years as a web developer without losing my interest in the craft. Quite the opposite, with so many great improvements in the Web standards, what was nearly impossible now is easy to make.

My career has been a wild ride through small agencies and big corporations, building everything from finance apps to health dashboards.

I'm that annoying person who needs to understand products beyond just slinging code. I ask questions like 'Why is this feature important?' and 'How will this improve the customer journey?' – you know, the kind of questions that make project managers reach for the pint aspirin. This curiosity has led me down the rabbit holes of design, accessibility, and SEO. Because apparently, making websites pretty, usable, and findable wasn't challenging enough on its own.

P.S. If this bio sounds too polished, blame my evil AI twin. I'm still working on teaching it sarcasm.

Copyright © since 2021, Andris Švarcs. All rights reserved.

Lets connect

bluesky

youtube

linkedin