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