March 2020 dev links

Old CSS, new CSS

I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was.

https://eev.ee/blog/2020/02/01/old-css-new-css/

Hiding Elements On The Web

Through our work as web developers, we need to hide elements for many reasons. For example, a button that should be visible in a mobile viewport, and hidden in a desktop viewport. Or, a navigation element that is hidden on mobile and shown on the desktop.

https://ishadeed.com/article/hiding-web/

Understanding Async Await

When writing code for the web, eventually you’ll need to do some process that might take a few moments to complete. JavaScript can’t really multitask, so we’ll need a way to handle those long-running processes.

Async/Await is a way to handle this type of time-based sequencing. It’s especially great for when you need to make some sort of network request and then work with the resulting data. Let’s dig in!

Fixing memory leaks in web applications

Part of the bargain we struck when we switched from building server-rendered websites to client-rendered SPAs is that we suddenly had to take a lot more care with the resources on the user’s device. Don’t block the UI thread, don’t make the laptop’s fan spin, don’t drain the phone’s battery, etc. We traded better interactivity and “app-like” behavior for a new class of problems that don’t really exist in the server-rendered world.

Awesome stock resources

A collection of links for free stock photography, video and Illustration websites

https://github.com/neutraltone/awesome-stock-resources

JVM Ecosystem Report 2020 

Welcome to our annual JVM ecosystem report! This report presents the results of the largest annual survey on the JVM ecosystem. The survey was conducted in the second half of 2019 gathering the responses of over 2000 participants. We would like to thank everyone who participated and offered their insights on Java and JVM-related topics.

https://snyk.io/wp-content/uploads/jvm_2020.pdf

Why Your Mouse Cursor Looks The Way It Does

Have you ever wondered why the arrow-shaped mouse cursor on your computer is tilted instead of vertical? 

https://www.fastcompany.com/3026625/why-the-mouse-cursor-is-tilted-instead-of-vertical

Git from Beginner to Advanced

Getting comfortable with Git took me a long time. I thought I’d write a quick guide that assumes no prior knowledge, along with some of my favourite tips and tricks.

https://www.madebymike.com.au/writing/how-to-git/

Custom Text Underlines

Link underlines are usually an element where form steps back in favor of function. But they can be used as a design element, too, as some great examples show.

https://ishadeed.com/article/custom-underline-svg/

Learn CSS Positioning

Are you ready to start learning about how positioning works in CSS? This interactive article is for you.

https://ishadeed.com/article/learn-css-positioning/

February 2020 dev links

Inside look at modern web browser

In this 4-part blog series, we’ll look inside the Chrome browser from high-level architecture to the specifics of the rendering pipeline. If you ever wondered how the browser turns your code into a functional website, or you are unsure why a specific technique is suggested for performance improvements, this series is for you.

Part 1: https://bit.ly/browsers-pt1

Part 2: https://bit.ly/browsers-pt2

Part 3: https://bit.ly/browsers-pt3

Part 4: https://bit.ly/browsers-pt4

The CSS Cascade

Or, How browsers resolve competing CSS styles.

https://wattenberger.com/blog/css-cascade

Tiny helpers

Minifying an SVG, extracting CSS from HTML, or checking your color palette for accessibility — we all know those moments when we need a little tool to help us complete a task quickly and efficiently. If you ever find yourself in such a situation again, Tiny Helpers might have just the tool you’re looking for.

https://tiny-helpers.dev/

web.dev

Explore our structured learning paths to discover everything you need to know about building for the modern web.

https://web.dev/

Life Of A Pixel

This talk is about how Chrome turns web content into pixels.  The entire process is called “rendering”. We’ll describe what we mean by content, and what we mean by pixels, and then we’ll explain the magic in between. 

bit.ly/lifeofapixel

Twelve Days of Front End Testing

There are so many different tests we need to be running on the front end, it’s hard to work out what your need to test for and where to start.

https://24ways.org/2019/twelve-days-of-front-end-testing/

Asynchronous vs Deferred JavaScript

JavaScript is considered a “parser blocking resource”. This means that the parsing of the HTML document itself is blocked by JavaScript. When the parser reaches a <script> tag, whether that be internal or external, it stops to fetch (if it is external) and run it.

https://bitsofco.de/async-vs-defer/

Today, the Trident Era Ends

Starting now, Microsoft will roll out their new Chromium-based Edge browser to their millions of Windows 10 users. And this will also mark the end of an era. The era of the Trident-Engine.

https://schepp.dev/posts/today-the-trident-era-ends/

You might not need a CSS framework

CSS frameworks have been around for a while and they have gotten extremely popular in the front-end development scene. These frameworks provide snippets of code you can just copy and paste in your website to craft the whole layout and UI.

You have already probably read a lot of articles about how they might be good for your projects, but here I would like to do the opposite: to highlight some of the drawbacks they might bring to your websites or applications, and how you can avoid or mitigate them.

GitSheet

A dead simple git cheatsheet 

https://gitsheet.wtf/

January 2020 dev links

Software disenchantment

I’ve been programming for 15 years now. Recently, our industry’s lack of care for efficiency, simplicity, and excellence started really getting to me, to the point of me getting depressed by my own career and IT in general.

https://tonsky.me/blog/disenchantment/

A Recap of Frontend Development in 2019

A look back at the top events, news, and trends for frontend and web development

https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c

Loading web pages fast on a $20 feature phone

Building a fast, core foundation for your site gives everyone a good experience; whether they’re on a low-cost feature phone or the latest high-end smart phone.

https://dev.to/addyosmani/loading-web-pages-fast-on-a-20-feature-phone-8h6

[GIF] Timelapse of the most popular web browser by country since 2008

Fit on a Floppy

Webpages are getting bigger and bigger. The internet is getting faster and faster but not everywhere at the same pace. A floppy is a physical reminder of filesize.

Will your website fit on a floppy?

https://fitonafloppy.website/

My Bathroom Mirror Is Smarter Than Yours

Sometime late last year I realized that I wanted my ordinary bathroom mirror to be more like the future we were promised in the movies.

https://medium.com/@maxbraun/my-bathroom-mirror-is-smarter-than-yours-94b21c6671ba#.aug7t8ypf

PostgREST – PostgreSQL database directly into a RESTful API

PostgREST is a standalone web server that turns your PostgreSQL database directly into a RESTful API. The structural constraints and permissions in the database determine the API endpoints and operations.

https://postgrest.org

SQL, Java Top List of Most In-Demand Tech Skills

But Python, now at number three, and AWS, at number six, are coming on fast, says job search firm Indeed

https://spectrum.ieee.org/view-from-the-valley/at-work/tech-careers/sql-java-top-list-of-most-indemand-tech-skills

What broke the bank

A disastrous IT migration corrupted 1.3 billion customer records. The culprit was insufficient testing.

https://increment.com/testing/what-broke-the-bank/

Linux exists only because of a happy accident

How Linus Torvalds accidentally created Linux

https://augustl.com/blog/2019/linus_and_linux_happy_accident/

December 2019 dev links

[…]The power went out and with it, internet connectivity. Wind storms and even a hard rain can knock the power out where I live and in the winter it’s a somewhat common occurrence. For the most part, power is restored within an hour or two, but there have been a few severe wind storms and one was so severe last February that the wind woke me up at 2:30 AM.

While I ran upstairs to try and assess what was happening outside with branches snapping and loud booms of trees falling in the distance, I attempted to reach the Puget Sound Energy website on my mobile browser to report the outage.

I refreshed the page multiple times while my phone said I had data coverage and was on the network (one, maybe two bars at times), but the PSE page came up as offline. I finally managed to get the page to load to report the outage after about 5 minutes.

https://blog.stephaniestimac.com/posts/10-30-2019-performance/

SweetAlert2 – a beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes (alert, prompt, dialog, toast, side panel, etc.)

https://sweetalert2.github.io/

The mission of the Web Almanac is to take the treasure trove of insights that would otherwise be accessible only to intrepid data miners, and package it up in a way that’s easy to understand. This is made possible with the help of industry experts who can make sense of the data and tell us what it means. Each of the 20 chapters in the Web Almanac focuses on a specific aspect of the web, and each one has been authored and peer reviewed by experts in their field. The strength of the Web Almanac flows directly from the expertise of the people who write it.

https://almanac.httparchive.org/en/2019/table-of-contents

What goes into building a drag and drop component in 2019?

https://baseweb.design/blog/drag-and-drop-list/

I am a hypochondriac. In the back of my head I rationalize this as an evolutionary advantage. And in fact, it may have just saved my life.

https://medium.com/swlh/dead-men-write-no-code-e9a7c5daf5d#.8c6j682j6

For many developers their office is their home away from home — hell, some developers are at that office more often than they’re at home.  For that reason most of us take great pride in our offices, keeping them as tidy (…or not) as we’d like and injecting as much personality and comfort in said office as possible. Whether it’s a home office, cube, or coworking space, we need it to be pleasing to us for the sake of good work environment and sanity.

JavaScript is one of the most popular languages you can learn.

https://medium.com/better-programming/127-helpful-javascript-snippets-you-can-learn-in-30-seconds-or-less-part-1-of-6-bc2bc890dfe5

The default SSH port is 22. It is not a coincidence. This is a story of how it got that port.

https://www.ssh.com/ssh/port

Majestic Admin is a simple yet powerful free Bootstrap admin template that is built with the Bootstrap framework, SAAS, jQuery, HTML5, and CSS. The spectacular design, user friendliness, and easy to customizability of Majestic Admin makes it suitable for building different types of websites. This well documented template has high responsiveness to make websites look great on both desktop and mobile devices.

November 2019 dev links

Developers and Open Source authors now have a massive amount of services offering free tiers, but it can be hard to find them all in order to make informed decisions.

This is a list of software (SaaS, PaaS, IaaS, etc.) and other offerings that have free tiers for developers.

https://free-for.dev/#/

What interface component would you use for selecting from a large set of options? For most designers, checkboxes come to mind. But a long list of checkboxes is intimidating to users and can cause them to abandon your form. Not only that, but checkboxes are not efficient or easy to use because they take up space, increase the number of visual elements, and offer small tap targets.

https://twitter.com/JimMcKeeth/status/692596120464150528

I use the Chrome Developer tools pretty much daily, but there are a few things I wish I knew earlier

https://dev.to/lpellis/things-you-may-not-know-about-chrome-devtools-53k6

Here’s one of the best essays I’ve ever read about why progressive web apps are important, how they work, and what impact they have on a business: PWAs are powerful, effective, fast and app-like. It’s hard to imagine a mobile web property that could not be significantly improved via PWA implementation. They can also potentially eliminate the need for many “vanity” native apps that exist today.

https://ymedialabs.com/progressive-web-apps

I think about and enjoy very boring CSS stuff—probably much more than I should do, to be honest. One thing that I’ve probably spent too much time thinking about over the years, is CSS resets.

https://hankchizljaw.com/wrote/a-modern-css-reset/

https://arnaud.at/emoji

Large file size results in larger download times and parsing times. It’s simple as that.

https://dev.to/adrianbdesigns/improving-css-performance-and-file-size-an-in-depth-guide-4mb5

We migrated 75 petabytes of internal data stored in nearly 7,500 Oracle databases to multiple AWS database services

https://aws.amazon.com/blogs/aws/migration-complete-amazons-consumer-business-just-turned-off-its-final-oracle-database/