2021 week 45—Color Spectrum Generator, CSS Tips, Micro Terminal-based Editor

Weekly tools and tutorials worth sharing for web technologies

Hi there,

In lats two weeks, I hosted the Python programming competition and the mobile web technologies skill competition.

These skill competition follows what we learned from WorldSkills competition. There are defined criteria and the weight ratios. There are over a hundred of marking aspects for 3-hour work. There are both measurement and judgement marks. Each judgement mark contains 0-3 judgement description. There are also automated assessment scripts.

Links worth sharing

This week, I collected lots of tips and tools for web development.

→ Tool / Color Spectrum generator
https://colorspectrum.design/generator.html

Beautiful and useful color palette generator.

---

→ CSS / Plus sign via conic gradient

CSS Challenges @ChallengesCss

💡CSS Tip! Create a plus symbol ➕ or a cross symbol ✖️ using only one gradient (no Pseudo element, no SVG, no extra element). You can easily adjust the size and coloration! Demo: codepen.io/t_afif/pen/yLo… via @CodePen #CSS

The conic gradient allow many new drawings possible with CSS only. Including racing check flag, and this plus sign.

---

→ CSS / Conditional border radius
https://css-tricks.com/conditional-border-radius-in-css/

---

→ CSS / loading=lazy and display:none works well together

Sara Soueidan @SaraSoueidan

This tip 💯💯 I remember when this didn't work unless you set `display:none;` on the parent. But thanks to folks in the replies, today I learned that `display:none;` on an img will prevent it from being requested if it has loading="lazy" on it 🎩 #CSS

Adam Argyle @argyleink

user in data saver mode? skip the media, save loads! ```css @media (prefers-reduced-data: reduce) { img, video { display: none; } } ``` (Canary behind a flag only) enjoy NICE page performance boosts and $$ data savings as the user is mostly browsing text. wins for all! https://t.co/lqFgcx1uUu

---

→ JS / console.log({x}) tips by @codepo8

There are many console.log tips, but this is one of the easiest yet useful to use in additional to the normal console.log(x).

---

→ Tool / Micro: modern terminal-based text editor
https://micro-editor.github.io

A terminal-based text editor with mouse and sublime-like multiple cursors support.

---

→ Tool / Clearnup.pictures
https://cleanup.pictures/

Simple and it works.

---

→ Security / TrojanSource
https://trojansource.codes/

We present a new type of attack in which source code is maliciously encoded so that it appears different to a compiler and to the human eye. This attack exploits subtleties in text-encoding standards such as Unicode to produce source code whose tokens are logically encoded in a different order from the one in which they are displayed, leading to vulnerabilities that cannot be perceived directly by human code reviewers.

Just wow!

Their Github repository contains more code examples.

https://github.com/nickboucher/trojan-source

Until next week,
Thomas Mak