- Beyond Console.log()
- DOMGuard - Stop scammers from the manipulating DOM
- Accessible Autocomplete
- JS DataTable
- MK Charts
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 10 posts belong to Discoveries ...
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.
- Virtual Select
- LC Select
- Vanilla Colorful
- Duet Date Picker
- Cookie Though
- Number Rollup
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.
- Magic Animations
- 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
- 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
- You might not need jQuery
- Parsing Markdown into an Automated Table of Contents
- FakeScroll - lightweight custom-looking scrollbars
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
- How to Build a CSS-only Organizational Chart
- Brad Traversy's 50 Projects 50 Days
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
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:
- 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
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 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
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
- 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
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