Exploring the reasons why we no longer have web designers.

I think specialization is detrimental to building websites.

this is a fun little app that counts down to the end of support of Internet Explorer 11 + a few more features like a list of articles/websites that tell you why you should stop supporting IE11 and a list of websites that already dropped support.

This repository helps you to have a more beautiful and attractive github profile, and you can access a complete set of tools and guides for beautifying your github profile. 🪄 ⭐

This is a solar-powered website, which means it sometimes goes offline ☼ --- Low-tech Magazine refuses to assume that every problem has a high-tech solution. A simple, sensible, but nevertheless controversial message; high-tech has become the idol of our society.

The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.

A simple hand drawn HTML/CSS theme.

Let’s take a look inside your Your is the single biggest render-blocking part of your page—ensuring it is well-formed is critical. ct.css is a diagnostic CSS snippet that exposes potential performance issues in your page’s tags.

Turn a Google Sheets spreadsheet into a blog page and RSS feed

See also: https://upptime.js.org GitHub-powered open-source uptime monitor and status page --- • GitHub Actions is used as an uptime monitor • Every 5 minutes, a workflow visits your website to make sure it's up • Response time is recorded every 6 hours and committed to git • Graphs of response time are generated every day GitHub Issues are used for incident reports • An issue is opened if an endpoint is down • People from your team are assigned to the issue • Incidents reports are posted as issue comments • Issues are locked so non-members cannot comment on them • Issues are closed automatically when your site comes back • Slack notifications are sent on updates • GitHub Pages are used for the status website • A simple, beautiful, and accessible PWA is generated • Built with Svelte and Sapper • Fetches data from this repository using the GitHub API

An article about art and power focused on a piece from the Mughal empire, with an intriguing layout that scrolls sentences by on the left while zooming in on different parts of the art on the right. Crosscurrents of religion and culture shaped this stunningly detailed portrait of the 17th-century Mughal emperor who built the Taj Mahal. --- Power, for the Mughals, also came from absorbing the cultural forms under their authority, then reconstituting them in their own image.

I can’t seem to find any mention of this in the Media Queries Module specification, but apparently it’s allowed to nest media queries. E.g.: @media not print { @media (min-width: 0) { p { background: yellow; } } }

Thirteen ways to include an HTML file in another HTML file.

Create a WordPress test site with one click. FREE and no login required. Ideal for testing things out before you do it on your real site.

An easy to implement technique for fading in a page with CSS & JavaScript, useful for pages that have a slight delay when loading.

Hello! Here are some examples of weird things that can happen with CSS. This site goes with the zine Hell Yes, CSS!.

The community-driven resource library of CSS Houdini worklets. Learn about CSS Houdini, its APIs, usage, polyfills, and browser status, to take advantage of the Houdini APIs today. “Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.” —MDN

Design a letter-based favicon like most big tech companies, or be playful and create an emoji-based favicon. Modern browsers supports SVG favicon. Be creative.

Winamp 2.9 reimplemented in HTML5 and JavaScript.

Underlines are hard. Complications quickly arise if you want to do anything fancier than the good ol’ CSS text-decoration: underline. There are a lot of different techniques. Unfortunately, they nearly always come with significant drawbacks.

The amount of research and testing that had to go into this demonstrates how fractured and broken web performance is right now. But, since it is, there's a useful snippet at the end of this article. Google Fonts is fast. Now it’s faster. Much faster.

Curated directory of the best free resources and tools for non-technical entrepreneurs. Packed with the best discount codes for your favourite online tools.

Open source, experimental, and tiny tools roundup --- This is a list of smaller tools that might be useful in building your game/website/interactive project. Although I’ve mostly also included ‘standards’, this list has a focus on artful tools & toys that are as fun to use as they are functional. The goal of this list is to enable making entirely outside of closed production ecosystems or walled software gardens.

A good overview of the different ways of controlling text selection with CSS.

Sometimes our sites need a little sprinkling of content management. Not always. Not a lot. But a bit. The CMS market is thriving with affordable, approachable products, so we’re not short of options. […] Sometimes, though, it’s nice to use a really simple tool that anyone updating content on the site is already familiar with, rather than getting to grips with a new CMS. I like Trello a lot for managing ideas and tasks. And it has an API. Why not use it as a content source for a web site? I mean, hey, if we can do it with Google Sheets, then what’s to stop us from trying other things?

Click on the code or the sidebar to see which is what.

Including some centering techniques, `li::marker`, and `display: inline-flex`, `column-rule`, `background-repeat: round`. There are a lot of CSS properties that some don’t know about, or they know about them, but forget to use them when they’re needed.

Great demos for mostly-CSS card flip, cube, and carousels. With the introduction of CSS transforms, elements could be shifted, rotated, slanted, squashed and stretched. Web designers were finally able to catch up to print designers. With CSS 3D transforms, web designers can move past their print counterparts and explore a new realm in graphic design.