DEV Community

Cover image for Weekly Digest 03/2022
Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 03/2022

Welcome to my Weekly Digest #3 of this year.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.


Interesting articles to read

ECMAScript proposal: grouping Arrays viaย .groupBy()ย andย .groupByToMap()

This blog post describes the ECMAScript proposalย โ€œArray groupingโ€ย by Justin Ridgewell.

ECMAScript proposal: grouping Arrays via .groupBy() and .groupByToMap()

Folding the DOM

In this post, we'll explore a technique we can use to "fold" a DOM node, like folding a letter in real life. On that journey, we'll learn a lot about 3D transforms and CSS animation techniques!

Folding the DOM


Some great videos I watched this week

Thinking on ways to solve a dark/light theme switch

In today's GUI Challenge, @Adam Argyle shares thinking on a way to build a theme switch component. Often a website will allow switching the theme to something other than the system preference and these are thoughts on how to achieve that user experience.

by Google Chrome Developers

Suspense and Error Boundaries in React 18

Learn how Suspense allows you to use Error Boundaries for network requests by turning asynchronous exceptions into render-time errors.

by Sam Selikoff


Useful GitHub repositories

Architect

Build ultra-scalable database-backed web apps on AWS serverless infrastructure with full local, offline workflows, and more.

GitHub logo architect / architect

The simplest, most powerful way to build serverless applications

GitHub CI status npm version Apache-2.0 License

Build ultra scalable database backed web apps on AWS serverless infrastructure with full local, offline workflows, and more. Full documentation found at: https://arc.codes

Requirements

Installation

Open your terminal to install arc globally:

npm i -g @architect/architect
Enter fullscreen mode Exit fullscreen mode

Check the version:

arc version
Enter fullscreen mode Exit fullscreen mode

Protip: run arc with no arguments to get help

Work locally

Create a new app:

mkdir testapp
cd testapp
arc init
Enter fullscreen mode Exit fullscreen mode

Kick up the local dev server:

arc sandbox
Enter fullscreen mode Exit fullscreen mode

Cmd / Ctrl + c exits the sandbox

Deploy to AWS

Deploy the staging stack:

arc deploy
Enter fullscreen mode Exit fullscreen mode

Protip: create additional staging stacks with --name

Ship to a production stack:

arc deploy production
Enter fullscreen mode Exit fullscreen mode

Add

โ€ฆ

Flowbite

Build websites even faster with components on top of Tailwind CSS

GitHub logo themesberg / flowbite

Tailwind CSS components and interactive elements

Flowbite - Tailwind CSS components
Build websites even faster with components on top of Tailwind CSS

Discord Total Downloads Latest Release Licenese


Documentation

For full documentation, visit flowbite.com.

Components

Flowbite is an open source collection of UI components built with the utility classes from Tailwind CSS that you can use as a starting point when coding user interfaces and websites.

Alerts Badge Breadcrumbs
Tailwind CSS Alerts Tailwind CSS Badge Tailwind CSS Breadcrumbs
Buttons Button group Cards
Tailwind CSS Buttons Tailwind CSS Button Group Tailwind CSS Cards
Dropdown Forms List group
Tailwind CSS Dropdown Tailwind CSS Forms Tailwind CSS List group
Typography Modal Tabs
Tailwind CSS Typography Tailwind CSS Modal Tailwind CSS Tabs
Navbar Pagination Timeline
Tailwind CSS Navbar Tailwind CSS Pagination Tailwind CSS Timeline
Progress bar Tables Toast
Tailwind CSS Progress Bar Tailwind CSS Tables Tailwind CSS Toast
Tooltips Datepicker
Tailwind CSS Tooltips Tailwind CSS Datepicker

๐Ÿ‘‰ See all components

Getting started

Flowbite can be included as a plugin into an existing Tailwind CSS project and it is supposed to help you build websites faster by having a set of web components to work with built with the utility classes from Tailwind CSS.

Require via NPM

Make sure that you have Node.js and Tailwind CSS installed.

  1. Install Flowbite as a dependency using NPM by running the following command:
npm i @themesberg/flowbite
Enter fullscreen mode Exit fullscreen mode
  1. Require Flowbiteโ€ฆ

dribbble shots

HR Dashboard

by [Afshin T2Y](https://dribbble.com/shots/17335594-HR-Dashboard)

by Afshin T2Y

Medical service - Mobile App

by [Anastasia](https://dribbble.com/shots/17316684-Medical-service-Mobile-App)

by Anastasia

Supbank Landing page design

by [Basit A. khan](https://dribbble.com/shots/17291952-Supbank-Landing-page-design)

by Basit A. khan


Tweets


Picked Pens

Generative PhpStorm Loader

by Anthony Douglas

Sign Up / Login

by Marco Biedermann

Illusion

by NANOUU


Podcasts worth listening

CodePen Radio โ€“ Moving to PostgreSQL from MySQL

As you read this, CodePen is 100% on PostgreSQL for our main relational database. It was a transition that took a couple of weeks of pretty intense effort and lots of planning and prep before that.

Syntax โ€“ New Year, New You. What to Focus on in 2022

In this episode of Syntax, Scott and Wes talk through what to focus on at beginner, intermediate, and advanced levels of coding skills.


Thank you for reading, talk to you next week, and stay safe! ๐Ÿ‘‹

Top comments (0)