DEV Community

Cover image for Weekly Digest 40/2021
Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 40/2021

Welcome to my Weekly Digest #40 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

How I built a modern website in 2021

Kent rewrote kentcdodds.com using the latest technologies and he wants to talk about what he did.

How I built a modern website in 2021

4 things you didn’t know you could do with GitHub Actions

GitHub Actions is a powerful platform that empowers your team to go from code to cloud, all from the comfort of your repositories.

4 things you didn't know you could do with GitHub Actions | The GitHub Blog

Conditional Border Radius in CSS

How to use CSS comparison functions to create a conditional border-radius

Conditional Border Radius In CSS - Ahmad Shadeed


Some great videos I watched this week

Em & Rem Units

Em and Rem units are used to size your text elements relative to one another. By assigning em units to your elements, you can change all of their font sizes at once, simply by changing the font size of the elements' root tag.

by Christopher Lis

What Are Build Tools in Web Development

by Scott Tolinski

Go in 100 Seconds

Learn the basics of the Go Programming Language. Go was developed at Google as a modern version of C for high-performance server-side applications.

by Fireship

Redux Sagas vs Redux Toolkit Query

Redux Saga and Redux Toolkit Query are two great ways to do API access. Let's compare them head to head doing full create, read, update and delete operations on both libraries. If you've only seen one of these in action you'll want to check this out!

by Jack Herrington

Custom Hooks in React

In this video, Amy explains what a hook is and how to set up a custom hook. Using her custom audio player as a starting point, she makes the code more reusable converting it to a custom hook library.

by Amy Dutton

Setup Multiple Pages with Vite

This lesson quickly demonstrates how to add multiple pages to a Vite application. This essentially means you get a multi-page app without adding any specific routing library.

by Basarat Ali Syed


Useful GitHub repositories

MJML

The only framework that makes responsive email easy. MJML is a markup language designed to reduce the pain of coding a responsive email.

GitHub logo mjmlio / mjml

MJML: the only framework that makes responsive-email easy

MJML 4

If you're looking for MJML 3.3.X check this branch

github actions

| Translated documentation | Introduction | Installation | Usage |


Translated documentation

Language Link for documentation
日本語 日本語ドキュメント

Introduction

MJML is a markup language created by Mailjet and designed to reduce the pain of coding a responsive email. Its semantic syntax makes the language easy and straightforward while its rich standard components library shortens your development time and lightens your email codebase. MJML’s open-source engine takes care of translating the MJML you wrote into responsive HTML.

Installation

You can install MJML with NPM to use it with NodeJS or the Command Line Interface. If you're not sure what those are, head over to Usage for other ways to use MJML.

npm install mjml
Enter fullscreen mode Exit fullscreen mode

Development

To work on MJML, make changes and create merge requests, download and install yarn for easy development.

git clone https://github.com/mjmlio/mjml.git && cd mjml
yarn
yarn
Enter fullscreen mode Exit fullscreen mode

@react-three/flex

Placing content in THREE.js is hard. @react-three/flex brings the webs flexbox spec to react-three-fiber. It is based on Yoga, Facebook's open-source layout engine for react-native.

GitHub logo pmndrs / react-three-flex

💪📦 Flexbox for react-three-fiber

@react-three/flex

Build Status Version Downloads Discord Shield

Placing content in THREE.js is hard. @react-three/flex brings the webs flexbox spec to react-three-fiber It is based on Yoga, Facebook's open source layout engine for react-native.

npm install @react-three/flex
Enter fullscreen mode Exit fullscreen mode

These demos are real, you can click them! They contain the full code, too.

Table of contents

Usage

Simply create layouts by wrapping your 3D objects in different <Box /> instances inside a <Flex /> container. This way they will be automatically placed in the 3D space following the flexbox specification just like in the DOM.

import { Flex, Box } from '@react-three/flex'
const Layout = () => (
  <Flex justifyContent="center" alignItems="center">
    <Box centerAnchor>
      <mesh geometry={box} />
    </Box>
    <Box
Enter fullscreen mode Exit fullscreen mode

Kubeapps

A web-based UI for deploying and managing applications in Kubernetes clusters

GitHub logo kubeapps / kubeapps

A web-based UI for deploying and managing applications in Kubernetes clusters

Kubeapps

CircleCI

Overview

Kubeapps is an in-cluster web-based application that enables users with a one-time installation to deploy, manage, and upgrade applications on a Kubernetes cluster.

With Kubeapps you can:

Note: Kubeapps 2.0 and onwards supports Helm 3 only. While only the Helm 3 API is supported, in most cases, charts made for Helm 2 will still work.

Getting started with Kubeapps

Installing Kubeapps is as simple as:

helm repo add bitnami https://charts.bitnami.com/bitnami
kubectl create namespace kubeapps
helm install kubeapps --namespace kubeapps bitnami/kubeapps
Enter fullscreen mode Exit fullscreen mode

See the Getting Started Guide for detailed…

dribbble shots

Dashboard Pricing Page

https://cdn.dribbble.com/users/1723105/screenshots/16622997/media/621a5bb7c121c5872bbbe5daa636e695.png

by Emmanuel Ikechukwu

Pixiedia Agency

https://cdn.dribbble.com/users/1619633/screenshots/16622979/media/e637807809c01291ace5b4cba7aa26d3.png

by Afshin T2Y

Crypter Dashboard Concept

https://cdn.dribbble.com/users/3798578/screenshots/16622484/media/2e9a2d8b8c0716b533886e63cc29f25e.png

by Arshia Amin Javahery

Segmentation Icon

https://cdn.dribbble.com/users/299116/screenshots/16613252/media/e61def3244bdeb77ecd823ac50f38501.jpg

by Fabrizio Boni


Tweets


Picked Pens

Password Generator

by Marco Biedermann

Liquid Button

by Zed Dash


Podcasts worth listening

Ladybug – A Day In The Life Of Four Software Engineers

What is a typical day in the life like for a software engineer? To close out Season 6, we thought it’d be a great idea to give you some insight into our workdays, as we all have very different roles and are in different stages of our careers.

Syntax – PHP Is Good and We’re Just Re-Creating It

Chats with Kent – Building Awesome Demos

Learn how to use projects to improve your skills and problem-solving!

Chats with Kent – Effective Learning

Learn strategies on how to effectively teach yourself!

Chats with Kent – Advancing Your Skills

Learn about how good habits can be deliberately formed to advance your skills!


Thank you for reading, talk to you next week, and stay safe! 👋

Discussion (1)

Collapse
vishal2369 profile image
Vishal2369

Nice