As a visual person, I’m always thrilled when I come across small but subtle tips, tricks or even entire solutions that lift my understanding of what can be done with CSS to new heights. Of course, this month :has() is once again one of them, but also once again contributions from Bramus van Damme and Ahmad Shadeed, whose posts I read without exception because they are both so good at what they do.

• Tree views in CSS
• Scroll Shadows With JavaScript
• CSS Mirror Editing in Edge DevTools for VS Code
• Prevent Scroll Chaining With Overscroll Behavior
• Display content in the title bar - Microsoft Edge Development
• The large, small, and dynamic viewport units
• An Interactive Guide to Flexbox in CSS
• Flexbox Dynamic Line Separator
• Style a parent element based on its number of children using CSS :has()
• :has(): the family selector

Continue reading ...

As someone said the other day? “January is the Monday of the year”. How true. After programming myself a new workflow for creating my discoveries (see Generate Content from Trello) at the end of last year, I wanted to try it out again right away and give you a list of tips and tricks for starting 2023.

• 6 steps to get verified on Mastodon with encrypted keys
• Generate a Pull Request of Static Content With a Simple HTML Form
• My Wonderful HTML Email Workflow, using MJML and MDX for responsive emails
• How to View Build Logs for GitHub Pages
• Enabling IntelliSense for GitHub Actions workflows in VS Code
• 9 JavaScript Console Tips That Will Improve Your Debugging Skills
• Fun with console.log()
• Load hierarchical data from MSSQL with recursive common table expressions
• An HTML-first Mental Model
• Project Documentation with Hexo Static Site Generator

Continue reading ...

Websites always have a certain purpose and depending on what you want to do with it, there are pre-designed tools, that make it very easy to get started. In this issue of Discoveries I have collected a few such enablers.

Also included are two hosting offers that address the hot topics of #Fediverse and #IndieWeb in times of #TwitterMigration.

• Webmention Analytics
• Indiekit
• Masto.host
• Static Timeline Generator
• Glossary Page Template
• Markdoc
• docs.page
• JPage
• GitHub OCTO: Flat Data
• BatNoter

Continue reading ...

Web interfaces are unthinkable without CSS. It has its pitfalls, but when used correctly it’s damn powerful. It’s always incredible what developers do with it. This month’s Discoveries is about the basics and the amazing.

• My Custom CSS Reset
• Defensive CSS
• 10 Useful CSS Tricks for Front-end Developers
• Animated Star Rating
• CSS Marquee Examples
• CSS Rolling Text
• Cool Hover Effects That Use CSS Text Shadow
• Solving 'The Dangler' Conundrum with Container Queries and :has()
• Conditionally Styling Selected Elements in a Grid Container
• Intersection Observer Scrolling Effects

Continue reading ...

Colors and images are the visual meat on the boil of any web solution. If you don’t convince the visitor’s eye, they will quickly leave and if users have to work with a visually poor solution, they will be too dissatisfied, no matter how well the algorithms work.

Below are a few JavaScript libraries that help to create appealing interfaces.

• Color Thief
• Vibrant Colors
• Color.js
• TinyColor
• Qix color
• Alpha Paintlet
• DOM to Image
• imagesLoaded
• Graphery SVG
• Flickity

Continue reading ...

This months Discoveries it’s all about Web UI driven by JavaScript. I have found some really cool components in the net you can use in your project right away to give your users a bit more food for the eye. Congrats to the developers for their amazing work.

• Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline
• Slider Scroll
• Add-to-Calendar Button
• Responsive Clock Ui
• Swiffy Slider
• Floating UI
• 8 CSS & JavaScript Snippets for Creating Cool Card UI Hover Effects
• How To Build An Expandable Accessible Gallery
• Omicron drag&drop
• LetMeScroll

Continue reading ...

• Easing Functions Cheat Sheet
• A New Way To Reduce Font Loading Impact: CSS Font Descriptors
• Container Queries in Web Components
• Multi Color Text With CSS
• Conditional Border Radius In CSS
• Icons in Pure CSS
• parallax.css
• Defensive CSS
• How to Create a CSS-Only Loader Using One Element
• Getting Your head Straight: A New CSS Performance Diagnostics Snippet

Continue reading ...

In the first discoveries of 2022 I would like to offer you some interesting links to JavaScript articles that have general language features as their topic or extend them in a clever way. The language (respectively the ECMA standard behind it) is growing from year to year and it is exiting to see how it is expanding.

• Modern Javascript: Everything you missed over the last 10 years
• How can I define an enum in JavaScript?
• 'export default thing' is different to 'export { thing as default }'
• Dynamic, Conditional Imports
• 10 Client-side Storage Options and When to Use Them
• An Intro to JavaScript Proxy
• The Observer Pattern in JavaScript - The Key to a Reactive Behavior
• Why JavaScript Developers Should Prefer Axios Over Fetch
• Toolkit for managing multiple promises
• Promisify an entire object or class instance

Continue reading ...

Especially on Github you can find amazing open source solutions for self hosting, that makes it unnecessary to rely on web services from companies you did not know. In this issue of Discoveries I would like to introduce you to a few of them … Happy Holidays

• AppFlowy
• Bangle.io
• Cal.com (formerly Calendso)
• RSS-proxy
• FreshRSS
• Statsig's Status Page
• changedetection.io
• Homer
• Fiddly
• FileDrop

Continue reading ...

In this month discoveries you will find some posts and pens regarding CSS and its possibilities. It’s always amazing what can be done with it and what cool solutions can be found on the web.

• Sticky Definition Lists
• How to Detect When a Sticky Element Gets Pinned
• Dark mode in 5 minutes, with inverted lightness variables
• Float an Element to the Bottom Corner
• Neat Parallax Hero Effect
• Underline animation
• Building split text animations
• Intrinsic Typography is the Future of Styling Text on the Web
• CSS morphing
• CSS Tips

Continue reading ...

This month, Discoveries is all about JavaScript-driven “components” that you can quickly and easily add to your own website to enhance it. Be it with a simple code viewer or an ingenious print function or simply to display or filter photos. Go on a journey of discovery…

• indiepen
• Panzoom
• guggenheim.js
• Lazy Loading Mosaic Tiling Plugin
• ScrollTrigger
• WinBox.js
• Print.js
• Simple Text Annotations
• Clicky Menus!
• Responsive Dropdown Menu (Vanilla Navbar Menu)
• Smooth-side-bar
• Podtablejs

Continue reading ...

This months discoveries it’s all about CSS tutorials. You will find some of the best articles of profound CSS masters like Ahmad Shadeed or Josh Comeau. All tips are vital to bring your CSS to the next level. Happy learning…

• CSS Variables 101
• Full-Bleed Layout Using CSS Grid
• A Deep Dive Into CSS Grid minmax()
• Create Diagonal Layouts Like It's 2020
• Using calc to figure out optimal line-height
• Drop-Shadow: The Underrated CSS Filter
• A Guide to the Responsive Images Syntax in HTML
• Centering in CSS
• How to trigger a CSS animation on scroll
• CSS Scroll Snap

Continue reading ...

Todays issue of Discoveries is all about images. Show them, manipulate them, get information about them, protect them, use them and create them with JavaScript. Have fun trying out one of these cool solutions.

• PhotoSwipe
• lightGallery
• Pica
• Resemble.js
• medium-zoom
• LC-Mouse-Drag
• ProtectImage.js
• Tinygraphs
• Dynamic Social Sharing Images
• Automatic Social Share Images

Continue reading ...

Todays Discoveries it’s all about my favourite programming language JavaScript. Some tiny tips and tricks alongside with a deep dive into ‘console’ and some helful UI libraries. Have fun…

• Beyond Console.log()
• DOMGuard - Stop scammers from the manipulating DOM
• Handling User Permissions in JavaScript
• html-chain - Make html by chaining javascript functions
• Accessible Autocomplete
• JS DataTable
• MK Charts
• Snabbt.js - Fast animations with Javascript and CSS transforms
• SimplyLazy - Pure JavaScript Image Lazy Loader
• Blury-Loading

Continue reading ...

Todays issue is all about extending your Web Developers toolbox with some useful libraries to provide the best UX to your users or visitors. Tables, Dropdowns, Color Pickers, Footnotes and GDPR dialogs on steroids.

• JSTable
• Luckysheet
• Virtual Select
• LC Select
• Vanilla Colorful
• Duet Date Picker
• Cookie Though
• Full-Screen-Touch-Slider
• Bigfoot
• Number Rollup

Continue reading ...

This month my discoveries are all about CSS … at least almost. See the stunning solutions developers around the world have created and take them to improve yours. Have fun exploring.

• Charts.css
• AnimXYZ
• Magic Animations
• transition.css
• Make Animated Content Placeholders with HTML and CSS
• Animating Underlines
• New aspect-ratio CSS property
• How to display language-specific quotes in CSS
• Making the DETAILS element look and behave like a modal
• Better Line Breaks for Long URLs

Continue reading ...

February and the first sunny days in 2021. What a delight! Have fun, sitting in the sun, discovering my newest finds on the web. This time, all regarding JavaScript…

• github1s: One second to read GitHub code with VS Code
• How to enhance fetch() with the Decorator Pattern
• Ky - Delightful HTTP Requests
• VS Code’s REST Client Plugin is All You Need to Make API Calls
• json-view
• You might not need jQuery
• JavaScript Algorithms and Data Structures
• date-fns - Modern JavaScript date utility library
• Parsing Markdown into an Automated Table of Contents
• FakeScroll - lightweight custom-looking scrollbars

Continue reading ...

2020 is over and history. Well, may 2021 be with us. With this post I would like to continue the Discoveries, with new momentum. There was a lot to read over the holidays.

All the finds in this issue have something to do with visual aspects of web design in the broadest sense.

• Drop-Shadow: The Underrated CSS Filter
• css.gg - 700+ CSS Icons
• SVGBox - API for Web Icons
• Change Color of SVG on Hover
• CSS filter generator to convert from black to target hex color
• Responsive && Configurable SVG Waves
• Balloon.css
• How to Build a CSS-only Organizational Chart
• Shifty
• Brad Traversy's 50 Projects 50 Days

Continue reading ...

In this episode of the Discoveries (almost) everything is about images and the web. There are so many pitfalls to do it wrong, but many more possibilities to do it right, especially with these resources I found in the last few weeks.

• ASP.NET Core Image Resizing Middleware
• Best way to lazy load images for maximum performance
• image orientation on the web
• cosha - Colorful shadows for your images
• parax-bg - Parallax Backgrounds
• parax - Parallax Elements
• Luminous Lightbox
• Tiny-Swiper - Image Carousel

Continue reading ...

It is so amazing how many cool stuff developers around the world are producing these days. Or they do what they always do, but I have more time to read about their smart ideas and solutions. This month I have 8 pearls for you:

• waitForElementTransition()
• Using Flexbox and text ellipsis together
• Using Trello as a Super Simple CMS
• Memorize Scroll Position Across Page Loads
• A free guide to HTML5 <head> elements
• BVSelect - Vanilla JS
• A clock that represents the time as hex color values
• Animate.css - Just-add-water CSS animations

Continue reading ...

Some articles I stumble upon in my daily routine of reading news and blogs are diving very deep in a certain topic, especially if they are describing the basics of techniques I use every day.

All of the following reading tips are of the type “ahh, that’s why this works like that” or “uuh, I just scatch on the surface on that”. Take your time and read the articles in detail. We all never stop learning and it’s a pleasure to do so…

CSS

• CSS Viewport Units
• Grid for layout, Flexbox for components
• How CSS Perspective Works
• Linearly Scale font-size with CSS clamp() Based on the Viewport
• Learn CSS Centering

JavaScript

• The Flavors of Object-Oriented Programming (in JavaScript)
• Understanding the Event Loop, Callbacks, Promises, and Async/Await in JavaScript

Continue reading ...

New month, new discoveries. We will deal with key bindings, downloads on the fly, a lot of animations and contrasting images. Have fun, trying out these stunning solutions.

• tinykeys - Modern library for keybindings
• Creating files in JavaScript in your browser
• CSS Animated Google Fonts
• Skeleton Screen CSS
• More Control Over CSS Borders With background-image
• A CSS-only, animated, wrapping underline
• Nailing the Perfect Contrast Between Light Text and a Background Image
• Contrast.js

Continue reading ...

Due to my daily routine, I’m reading a lot of articles on the web regarding software development.

The most interesting stuff ends up on my Pocket list, which grows from day to day. Hard to find the pearls, when I need them. This recurring posts will throw a stroke of light on them.

They are maybe not the newest finds, not the fanciest ones, but remarkable for me and maybe for you also.

• Pure CSS halftone portrait from .jpg source
• ScrollTrigger - Highlight Text
• Tiny long-press event handler
• Show More/Less
• 3D banners with ScrollTrigger
• Image Compare Viewer
• Add Read or Scroll Progress Bar To A Website To Indicate Read Progress
• How to Get a Progressive Web App into the Google Play Store

Continue reading ...