Stone Chains

Series | Discoveries

Surfing around in the web is a daily routine every developer should have. Learning about new platforms, libraries or techniques is a must, due to the tremendous speed on our business. Stay current, all the time.

I’m a fan of RSS and I’m using Feedly to read my favourite blogs. Unfortunately RSS feeds is not so common anymore, due to Facebook and other social media giants, but I stay informed.

In this series I present some of the absolute pearls I found while reading. Stunning solutions or incredible tools, which I must first and foremost remember for myself, to try them out one day.


Following 28 posts belong to Discoveries ...

Grinning Horse
Discoveries

Discoveries #28 - UI Components

UI is the first building block for UX. Build a user interface that is easy to understand and use and your users will have a good experience and enjoy your website or web app.

In this new edition of Discoveries (after three long months without), we look at UI elements that are worth a second look. Some of these I'm pretty sure I'll incorporate into one of my existing projects and others I'll find an opportunity for in the future.

  • Syntax highlighting code blocks with Prism and the Custom Highlight API
  • Syntax.js
  • Replace JavaScript Dialogs With New HTML Dialog
  • Build an off-canvas menu with <dialog> and web components
  • Windowise
  • Accordion Slider - Responsive and Touch-enabled accordion
  • floatype.js
  • canvas-datagrid
  • TreeData.js
  • Grid-Overflow

Continue reading ...

Medieval Art
Discoveries

Discoveries #27 - JavaScript Tools

This month's Discoveries are about small, large, new and somewhat older JavaScript tools that can make life and coding easier for developers. Why reinvent the wheel when someone has already done it. Happy Coding :)

  • Spacing.js - Measuring
  • Ukiyo.js - Parallax Effect
  • IntersectionObserver Debugger
  • mande - Fetch Wrapper
  • Vest - Declarative Validations Framework
  • Granim.js - Gradient Animation
  • RoughNotation
  • barba.js - Page Transitions
  • dead-or-alive - URL Checker
  • timeago - Format Date

Continue reading ...

Sunset Drinks
Discoveries

Discoveries #26 - JavaScript HowTo's

Over time, everyone accumulates links somewhere about procedures that one has not yet internalized. This is also the case with me and JavaScript development. “Damn … what was that about Call | Proxy | Map | <You name it>?!”. Here are 11 of them …

  • Processing images with sharp in Node.js
  • Use console.log() like a pro!
  • Simple Swipe with Vanilla JavaScript
  • The File System Access API: simplifying access to local files
  • An introduction to WebAssembly for JavaScript Developers
  • Getting Started with the Map and Set Typed Collections
  • JavaScript Currying: A Practical Example
  • How to Use the Call, Apply, and Bind Functions in JavaScript
  • How JavaScript's Proxy Object Works
  • JavaScript waitFor Polling
  • How to measure page loading time with Performance API

Continue reading ...

Ancient Tools
Discoveries

Discoveries #25 - Tutorials & HowTo's

This Discoveries issue is generally about tutorials from different areas: CORS, Azure, Elektron, GitHub Action, SVG. Outstanding articles by outstanding authors, who explain things in an easy and understandable way.

Happy Reading…

  • CS Visualized: CORS
  • Use Azure Functions, Azure Storage blobs, and Cosmos DB to copy images from public URLs
  • Build a Secure Desktop App with Electron Forge and React
  • Node.js API Authentication with JSON Web Tokens
  • How To Build an SMTP Mail Server with Express, Node, and Gmail
  • Advanced Git Series 1/8: Creating the Perfect Commit in Git
  • Learn how to use Git and GitHub in a team like a pro
  • How to Build Your First JavaScript GitHub Action
  • Getting the Gist of GitHub Actions
  • Swipey Image Grids (with SVG)

Continue reading ...

Sweat Lodge
Discoveries

Discoveries #24 - JavaScript & UI

I’m such a UI person. It’s a blast for me to discover and try out new interface components on the web and for the web. Simplicity and a tidy text desert is not my thing. Here are a few JavaScript UI gems I found the other day for you…

  • Frontle - BottomSheet
  • downupPopup.js
  • Pikaday
  • Add to Calendar Button
  • Tippy.js
  • Responsive Full Page Scroll
  • lucafalasco/scroll-snap
  • Bgzy.js
  • ScrollyVideo.js
  • Cal-Heatmap

Continue reading ...

Seagull Meeting
Discoveries

Discoveries #23 - UI/CSS

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 ...

Black Window
Discoveries

Discoveries #22 - Tips/Tricks

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 ...

Bird House
Discoveries

Discoveries #21 - Sites & Pages

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 ...

Garden Beauties XIV
Discoveries

Discoveries #20 - CSS & UI

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 ...

Thomas' Ruby Prince I
Discoveries

Discoveries #19 - Visual Helpers

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 ...

Wood'n Glass
Discoveries

Discoveries #18 - JS UI

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 ...

Tel Aviv Sunset
Discoveries

Discoveries #17 - CSS

  • 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 ...

Sliced
Discoveries

Discoveries #16 - JavaScript

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 ...

Büyükada Landing
Discoveries

Discoveries #15 - Self Hosted

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 ...

Salzburg Cathedral III
Discoveries

Discoveries #14

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 ...

Windowed Wall
Discoveries

Discoveries #13

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 ...

Beer Barrels
Discoveries

Discoveries #12 - Tutorials

Some great articles from CSS masters

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 ...

Melting Hills
Discoveries

Discoveries #11

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 ...

Tiny Scots 6
Discoveries

Discoveries #10

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 ...

Pipes & Wheels
Discoveries

Discoveries #9

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 ...

Jad Vashem Vista
Discoveries

Discoveries #8

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 ...

Industrial Chrome
Discoveries

Discoveries #7

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 ...

Light Bulbs
Discoveries

Discoveries #6

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 ...

Kitchen Copper
Discoveries

Discoveries #5

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 ...

On The Rocks
Discoveries

Discoveries #4

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 ...

Enlightenment
Discoveries

Discoveries #3 - Tutorials

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 ...

Jerusalem Marks
Discoveries

Discoveries #2

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 ...

Ceasarea View
Discoveries

Discoveries #1

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 ...