squidfunk

Although CSS has seen the light of the world [more than 20 years ago][1], it's still surprisingly under-researched. Our websites keep breaking in spectacular ways: visual inconsistencies caused by seemingly minor changes can go undetected for days, negatively impacting the user experience (UX), inducing customer churn and frustration, which can lead to lost opportunities. All too often, CSS is not perceived as a critical resource requiring proactive and deliberate care, but as an annoying necessity to advertise the brand to the consumer.

CSS is a very simple language: its [parsing][2] and [matching][3] semantics are incredibly easy to understand and implement. Moreover, it is very forgiving and

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; // ¯\\_(ツ)_/¯

tangentstorm

// sh.mjs: javascript shorthand

// array helpers (apl/j/k)
export const id=x=>x
export const af=(n,x)=>Array(n).fill(x) // TODO: make this 'afl' or 'fil' (aa?)
export const ii=(n,f)=>{for(let i=0;i<n;i++)f(i)}
export const im=(n,f)=>af(n,0).map((_,i)=>f(i))
export const ia=(n,f)=>im(n,id)
export const at=(a,ixs)=>ixs.map(i=>a[i])
export const io=(xs,ys)=>ys.map([].indexOf.bind(xs))

jensgro

Linklist for using 11ty (Eleventy)

The project itself has a very good documentation.

Linkcollections

• 11tybundle - huge link collection
• Awesome Eleventy
• 11ty Plugin Repository

nhoizey

/* ***********************************************
  Styles for Mastodon

  Adapted from different sources
  - https://write.as/panais/styles-pour-mastodon-avec-stylus
  - https://mastodon.social/@matuzo/109284559864791077
  - https://mastodon.social/@matuzo/109284628517006156
  - https://gist.github.com/justmarkup/e4f6d52bef604e170815aaf44f459fbc
*********************************************** */
/* Private messages */

justmarkup

/* Visually warn about inaccessible images in feed */
.status img:not([alt]),
.status img[alt=""] {
   border-top: 2em solid red;
}

/* Highlight private toots, toots only mentioned people can see. From https://mastodon.social/@matuzo */
.status__wrapper-direct {
    padding-inline-end: 20px;
}

codepo8

Code Europe: Increasing developer effectivity by merging browser tooling and editors

• Microsoft Edge DevTools documentation overview
• Can I use? browser compatibility and support charts
• DevTools inspect tool
• DevTools Elements Tool
• DevTools CSS Grid Inspection
• DevTools Font Editor
• DevTools Issues tool
• Filtering Issue Reports

netzartist

Must have resources to start in Frontend

👉 Compact list of essential relevant topics, no exhausting and overwhelming list

👉 Regularly and manually updated

👉 Hand-picked by a Senior Frontend Developer doing frontend since 1990s

👉 Different media types

jordan-cutler

Summary

Highlights from this set of configurations

• Auto save
• Auto format on save and fix all quick fix issues
• Auto import on save
• Format on save and paste
• Prepopulate command palette and file search with the last searched thing
• Limit the number of active tabs and allow them to wrap on smaller screens
• Auto import on paste (via an extension that works part of the time)

pmmueller

{
// ================================== 
// Make Visual Studio Code look like Brackets

// Anpassungen für das Theme »Hell (Visual Studio)« (english: »Visual Studio Light«) 
// (Weitere Infos: html-und-css.de/make-vs-code-look-like-brackets/)

// Die in diesem Gist gespeicherten Anpassungen müssen manuell kopiert und in die settings.json eingefügt werden: 
// 1. VS Code starten
// 2. Befehlspalette > Einstellungen: Farbdesign, und das Theme »Hell (Visual Studio)« aktivieren