jsmmth

import UIKit
import CoreImage

public extension UIImage {
    /// Draws a rounded, solid‐color outline around this image’s alpha shape,
    /// then composites the full-color image back in the center.
    ///
    /// - Parameters:
    ///   - strokeColor: the color of the ring
    ///   - strokeWidth: the thickness of the ring (in points)

OrionReed

// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
(() => {
  const SHOW_SIDES = false; // color sides of DOM nodes?
  const COLOR_SURFACE = true; // color tops of DOM nodes?
  const COLOR_RANDOM = false; // randomise color?
  const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
  const MAX_ROTATION = 180; // set to 360 to rotate all the way round
  const THICKNESS = 20; // thickness of layers
  const DISTANCE = 10000; // ¯\\_(ツ)_/¯

kamilogorek

aileftech

$ grep -P "^[ABCDEFabcdefOoIi]{6,6}$" /usr/share/dict/words | tr 'OoIi' '0011' | tr '[:lower:]' '[:upper:]' | awk '{print "#" $0}' 
#ACAD1A
#B0BB1E
#DEBB1E
#AB1DED
#ACAC1A
#ACCEDE
#AC1D1C
#BAB1ED
#BA0BAB

GoodyBoy301

Impossible Checkbox v2 🐻

Revisiting one of my favorite pens to update the React side of it and add sound

A Pen by Jhey on CodePen.

License.

GoodyBoy301

Hover for Fun! 🌈

If you know me, you definitely know that I can't resist playing with CSS pens. An hour ago, I saw this post by @nazaneyn where she attempts to create a button with a rainbow border. Here is my take on that 😄

Although I like @t_afif's first solution, I would prefer a solution where we don't need any extra elements. Fortunately, conic-gradients and CSS masks can help.

I ended up using hue-rotate() to rotate the gradient 😥

---

haroldao

/* Vh Calc */
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

window.setTimeout(() => {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}, 1000);

haroldao

// check device
let isMobile = false;

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    isMobile = true;
    document.body.classList.add('is-mobile');
}

statico

    // An implementation of CSS `background-size: cover`
    // using http://stackoverflow.com/a/6565988 and my own crappy math
    vec2 s = uScreenSize; // Screen
    vec2 i = uBGSize; // Image
    float rs = s.x / s.y;
    float ri = i.x / i.y;
    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);
    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;
    vec2 uv = vTexCoord * s / new + offset;
    gl_FragColor = texture2D(uBGTex, uv);

wojteklu

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

---

General rules

1. Follow standard conventions.
2. Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
3. Boy scout rule. Leave the campground cleaner than you found it.
4. Always find root cause. Always look for the root cause of a problem.

Design rules