DEV Community

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

Posted on

Weekly Digest 10/2022

Welcome to my Weekly Digest #10 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 to design better APIs

15 language-agnostic, actionable tips on REST API design.

How to design better APIs

Horizontal Scrolling in a Centered Max-Width Container

Applying modern CSS techniques on horizontal scroll section layouts

Horizontal Scrolling in a Centered Max-Width Container | Ryan Mulligan


Some great videos I watched this week

Chrome 99 - What’s New in DevTools

Throttling WebSocket requests, new Reporting API pane, console styling and more.

by Google Chrome Developers

CSS Grid debugging tools

Tips on debugging CSS Grid with Chrome DevTools.

by Google Chrome Developers

A heroic new proposal for JavaScript

Could JavaScript have its own native type system like TypeScript in the future? The team behind TS has submitted an ECMAScript TC39 proposal that seeks to add "Types as Comments" to JS.

by Fireship

HTML5 Canvas Crash Course for Beginners

Have you decided you want to become really good with HTML, CSS, and JavaScript this year? discover creative coding and make your art come to life! In this class, we will go from drawing a simple line to complex beautiful fractal shapes.

by Franks laboratory

MandelBulb 3D Fractal

It's the Mandelbulb! What happens when you take the original fractal (The Mandelbrot Set) and extend it into 3D space? And how do you visualize it in Processing (Java) as a point cloud?

by Daniel Shiffman


Useful GitHub repositories

CSS Checker

Show Similar & Duplicated CSS Scripts with Diff in Seconds!

GitHub logo ruilisi / css-checker

Show Similar & Duplicated CSS Scripts with Diff in Seconds!

CSS-CHECKER

Css Checker - Less is More

中文文档

Purpose

css-checker checks your css styles for duplications and find the diff among css classes with high similarity in seconds. It is designed to avoid redundant or similar css between files and to work well for both local development, and for automation like CI.

Colors check, long scripts, unused CSS classes warning of css are also supported by default. This project is provided by Xiemala Team, it helps in remove hundreds of similar css classes for developers in this project.

Install

Using Go:

go install github.com/ruilisi/css-checker@latest

(With go version before 1.17, use go get github.com/ruilisi/css-checker). Or download from releases

Using npm:

npm install -g css-checker-kit

Usage

Run

  • cd PROJECT_WITH_CSS_FILES and just run:
css-checker
  • (Alpha Feature: Find classes that not referred by your js/jsx/ts/tsx/html code): css-checker -unused

DEMO

(Check and show the diff among similar classes (>=80%). Colors, long scripts that used more then…

*react-typical*

React typing animation in ~400 bytes 🐡 of JavaScript.

GitHub logo catalinmiron / react-typical

React typing animation in ~400 bytes 🐡 of JavaScript.

react-typical

React Animated typing in ~400 bytes 🐡 of JavaScript.

DEMO

React Typical

Based on awesome typical library by @camwiegert

NPM JavaScript Style Guide

React-Typical - Animated typing without the headaches

Youtube Video Tutorial

react-typing-indicator-thumbnail-v2

Install

npm install --save react-typical
Enter fullscreen mode Exit fullscreen mode

Usage

import React, { Component } from 'react'
import Typical from 'react-typical'

class Example extends React.Component {
  render () {
    return (
      <Typical
        steps={['Hello', 1000, 'Hello world!', 500]}
        loop={Infinity}
        wrapper="p"
      />
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

Properties

prop mandatory type Eg.
steps yes [] ['Hello', 1000, 'World']
wrapper no string 'p'
loop no number 3

License

This library is based on @camwiegert/typical work and it currently is just a wrapper for react.

MIT © catalinmiron

*Files*

A modern file manager for Windows

GitHub logo files-community / Files

A modern file manager for Windows

Files Logo

Files

Build Status Discord Store link Sideload link Preview link

What is Files?

Files is a file manager for Windows with a powerful yet intuitive design. It has features like multiple tabs, panes, columns, shell extensions in the context menu and tags.

We welcome discussions and contributions to our repository, however to help maintain a healthy community, please read our code of conduct.

Privacy

We use App Center to track which settings are being used, find bugs, and fix crashes. Information sent to App Center is anonymous and free of any user or contextual data.

FAQ

Have any questions? Check out our documentation site!

Building from source

1: Prerequisites

  • Git
  • Visual Studio 2022 with the UWP Development Kit and following individual components
    • Windows 11 SDK (10.0.22000)
    • MSVC v143 - VS 2022 C++ x64/x86 build tools
    • C++ ATL for latest v143 build tools (x86 & x64)

2: Clone the repository.

git clone https://github.com/files-community/Files
Enter fullscreen mode Exit fullscreen mode

This will create…


dribbble shots

Money Management Web Application Dashboard

by [Ofspace LLC](https://dribbble.com/shots/17710208-Money-Management-Web-Application-Dashboard)

by Ofspace LLC

Nowruz illustrations

by [Afshin T2Y](https://dribbble.com/shots/17711295-Nowruz-illustrations-Freebie)

by Afshin T2Y

Wallet App Design

by [Rakib Kowshar](https://dribbble.com/shots/17709920-Wallet-App-Design)

by Rakib Kowshar


Tweets


Picked Pens

Responsive CSS PS5 Controller

by Jhey

Butterfly!

by nanou

Skateboard-Like Preloader

by Jon Kantner

Pure CSS Infini-Slinky

by Jhey


Podcasts worth listening

CodePen Radio – *CJ Gammon*

Chris got to chat with CJ Gammon this week! CJ is a creative technologist, a term he’s tried to hang onto as he does more development work, so he can continue to communicate that he’s a designer as well.

The Remix Podcast – Deploy Distributed Apps

Divya is a Software Engineer at Fly.io which gives you the ability to deploy your apps and databases wherever your users are in the world.

Syntax – Sticker Mogul

In this Hasty Treat, Scott and Wes talk about Wes' experience designing, printing, and shipping out his sticker packs.


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

Discussion (0)