Weekly Digest 47/2021

Welcome to my Weekly Digest #47.

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

Dynamic Color Manipulation with CSS Relative Colors

CSS relative colors enable the dynamic color manipulation in vanilla CSS since Sass’ color functions first came on the scene.

Continue, Step Over, Step Into and Step Out actions in Visual Studio Code debugger explained

Printing the result of your program to the console is a common practice, but being familiar with a debugger opens a new world of possibilities. To use the debugger with confidence, you need to understand the basic actions.

How to build stunning 3D scenes with React Three Fiber

WebGL is the magic sauce behind Solar Storm , an audio-reactive music video that renders live in the browser.

Some great videos I watched this week

Swift in 100 Seconds

Swift is a modern programming language developed by Apple. It is commonly used to code apps for iOS and macOS, but is open-source and can be used outside of Apple’s walled garden.

by Fireship

Remix is a new JavaScript framework you must try

Remix is a new React-based JavaScript framework that supports server-side rendering. It comes from the team behind React Router and provides a fresh take on full-stack web app development.

by Fireship

Remix Run Speedrun - Pokemon

Is Remix Run more than just hype? Let’s find out by building out a multi-page Pokemon SPA to show you a bunch of the fundamentals: SSR data loading, Navigation, API Routes, page routes and parameters, and more.

by Jack Herrington

Useful GitHub repositories

html2canvas

The script allows you to take "screenshots" of webpages or parts of it, directly on the user's browser.

GitHub logo niklasvh / html2canvas

Screenshots with JavaScript

html2canvas

Homepage | Downloads | Questions

Gitter CI NPM Downloads NPM Version

JavaScript HTML renderer

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

How does it work?

The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.

It does not require any rendering from the server, as the whole image is created on the client's browser. However, as it is heavily dependent on the browser, this library is not suitable to be used in nodejs It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a proxy…

View on GitHub

Machine Learning for Beginners - A Curriculum

12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all

GitHub logo microsoft / ML-For-Beginners

12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all

GitHub license GitHub contributors GitHub issues GitHub pull-requests PRs Welcome

GitHub watchers GitHub forks GitHub stars

Machine Learning for Beginners - A Curriculum

🌍 Travel around the world as we explore Machine Learning by means of world cultures 🌍

Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 26-lesson curriculum all about Machine Learning. In this curriculum, you will learn about what is sometimes called classic machine learning, using primarily Scikit-learn as a library and avoiding deep learning, which is covered in our forthcoming 'AI for Beginners' curriculum. Pair these lessons with our 'Data Science for Beginners' curriculum, as well!

Travel with us around the world as we apply these classic techniques to data from many areas of the world. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment, and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'.

✍️ Hearty thanks to our…

View on GitHub

@mswjs/data

Data modeling and relation library for testing JavaScript applications.

GitHub logo mswjs / data

Data modeling and relation library for testing JavaScript applications.

Data library logo

@mswjs/data

Data modeling and relation library for testing JavaScript applications.

Motivation

When testing API interactions you often need to mock data. Instead of keeping a hard-coded set of fixtures, this library provides you with must-have tools for data-driven API mocking:

  • An intuitive interface to model data;
  • The ability to create relationships between models;
  • The ability to query data in a manner similar to an actual database.

Getting started

Install

$ npm install @mswjs/data --save-dev
# or
$ yarn add @mswjs/data --save-dev
Enter fullscreen mode Exit fullscreen mode

Describe data

With this library, you're modeling data using the factory function. That function accepts an object where each key represents a model name and the values are model definitions. A model definition is an object where the keys represent model properties and the values are value getters.

// src/mocks/db.js
import { factory, primaryKey } from '@mswjs/data'
export const db = factory({
  // Create a
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

dribbble shots

Food Delivery service app

by Md Sakib

NFT Marketplace

by Shaharia Hossen

StreetArt ___ Berlin

by Sally Kutarashvili

Tweets

Picked Pens

Harry potter challenge

by CSS Challenges

Ring of Balls

by Amit Sheen

Podcasts worth listening

CodePen Radio – cpshots

We’ve been doing our own screenshotting for a long time now, but like all software, we’re always working on it for various ever-changing reasons.

Syntax – Troubleshooting

In this episode of Syntax, Scott and Wes talk about ways they troubleshoot issues with their code.

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

18

Categories:

CssJavascriptReact

Tags:

CssJavascriptWebdevReact