ClassicPress | Stable. Lightweight. Instantly Familiar.
A lightweight, stable, instantly familiar free open-source content management system. Based on WordPress without the block editor (Gutenberg).
codi.link | HTML, CSS, JavaScript Live Editor Playground
codi.link is a live editor for HTML, CSS and JS. Edit your code in real-time, and see the result instantly. It's like running codepen locally in a browser h/t https://social.ds106.us/@dnorman/113037135946398757
You don't need JavaScript for that - HTMHell
On the web this means preferring HTML over CSS, and then CSS over JS. JS is the most versatile language out of the three because you're the one describing how the browser should act, but it can also break, it can fail to load and it takes extra resources to download, parse and run. It is also very easy to exclude keyboard users and people using assistive technologies with it. In contrast to JS, which is imperative, HTML and CSS are declarative. You tell the browser what to do, not how to do it. That means the browser gets to choose how to do it, and it can do it in the most efficient way possible. Because HTML and CSS features are handled by the browser they can be more performant, more native, more adaptable to user preferences and in general, more accessible. That doesn't mean it will always be (especially when it comes to accessibility) but when the browser does the heavy lifting for you, your end users will generally have a better experience. That also means that the solution you learned once becomes part of your toolbox, and you can keep re-implementing it and everytime it will still work. So the examples I'm going to give below are cool (that's why I'm listing them) but what I want you to take away from this article is that just because you know something needs JavaScript, doesn't mean it still does. You can make better websites if you test those assumptions every now and then. h/t https://fosstodon.org/@gagliardi_vale/112637006389188415
Crontab.guru - The cron schedule expression generator
The quick and simple editor for cron schedule expressions by Cronitor
A simple page builder app by @stefan@stefanbohacek.online
Design your own personal page and find tools to host it online for free.
Minimalist static photoblog generator written in POSIX-compliant shell script
1600pr.sh is a minimalist static photoblog generator made up of a single POSIX-compliant shell script. It should work on most Unix-like systems. It passes ShellCheck and some effort has been made to ensure external tools (grep, sed, awk, etc.) are used in a portable way. The only external dependency is ImageMagick for creation of thumbnails and alternative sizes (for responsive images), however this can be disabled if you don't want those things. You can see it in action on minorshadows.net. Named after Fujifilm Neopan 1600 Professional (RIP). Inspired by (but not based on) Expose.
HTML First
HTML First is a set of principles that aims to make building web software easier, faster, more inclusive, and more maintainable by... Leveraging the default capabilities of modern web browsers. Leveraging the extreme simplicity of HTML's attribute syntax. Leveraging the web's ViewSource affordance.
Deploy a Static WordPress Site to Kinsta for Free
WordPress is an excellent Content Management System (CMS). We can achieve almost anything with it. Because of its dynamic nature, we can change any content with a click of a button. And while this is amazing, it also brings some dangers, and it can get difficult to maintain under heavy traffic. Converting your WordPress website into static might solve those problems.
Adding client side search to a static site
Creating a site-search function that doesn't rely on external services. In the bad old days (a.k.a. "a couple of years ago") adding search functionality to a statically-generated site required third-party services that provided a search backend (like Algolia or Elastic or whatever). Thankfully we can now run a (simple) search using only client-side tech thanks to libraries like Fuse.js. As Fuse say in their docs: "you don’t need to setup a dedicated backend just to handle search." So how does it all work? Why do we even want site search functionality? And what are the steps required to add a decent search experience to a statically-generated site like mine?
AI.JSX
AI.JSX is a framework for building AI applications using JSX. While AI.JSX is not React, it's designed to look and feel very similar while also integrating seamlessly with React-based projects. With AI.JSX, you don't just use JSX to describe what your UI should look like, you also use it to describe how Large Language Models, such as ChatGPT, should integrate into the rest of your application. The end result is a powerful combination where intelligence can be deeply embedded into the application stack. AI.JSX is designed to give you two important capabilities out of the box: An intuitive mechanism for orchestrating multiple LLM calls expressed as modular, re-usable components. The ability to seamlessly interweave UI components with your AI components. This means you can rely on the LLM to construct your UI dynamically from a set of standard React components.
Setting Up Your Local Web Server on macOS Big Sur 11.0.1 (2020)| MAMP Setup on mac | macOS, Apache, MySQL, PHP - Tech CookBook
Apple released its 2020 newest macOS Big Sur on November 12, 2020. It is a time of the year again that you might need to reconfigure your macOS if you are upgrading from the macOS Catalina. Or if you have a new macOS, follow the below steps to enable your local web server on macOS Big Sur (version 11.0.1)
Relearn | Hugo Themes
A theme for Hugo designed for documentation. The Relearn theme is a fork of the great Learn theme with the aim of fixing long outstanding bugs and adapting to latest Hugo features. As far as possible this theme tries to be a drop-in replacement for the Learn theme.
Setting up a local web server on macOS 12… - Apple Community
Here is my definitive guide to getting a local web server running on macOS 12 “Monterey”. This is meant to be a development platform so that you can build and test your sites locally, then deploy to an internet server. This User Tip only contains instructions for configuring the Apache server and Perl module. I have another User Tip for installing and configuring MySQL and email servers. Note: This user tip is specific to macOS 12 “Monterey”. Pay attention to your OS version. There have been significant changes since earlier versions of macOS.
GitHub - saltnpixels/crucial.css: Nothing but the crucial CSS
Crucial CSS sets up your CSS with what you need to start styling and nothing more. Crucial has all the stuff found in modern normalize to normalize the differences between browsers. It takes things a bit further for you though by implementing a few things that will save you lots of hours of tinkering. Simple things you probably do everytime you make a site, either by yourself or through a framework. From resetting differences between browsers, to fixing the box-sizing, to setting images to be responsive, to font-sizes and more. This saves you time and removes a lot of confusion and pain points.
Checkboxland
Checkboxland is a JavaScript library for rendering anything as HTML checkboxes. You can use it to display animations, text, images, video, and arbitrary data. It also supports plugins, so you can add your own APIs. Checkboxland is dependency-free, framework-agnostic, and fun!
How do I draw a line? (Webbed Briefs)
Discover all the different ways you can draw lines with the web platform—from horizontal rules all the way to WebGL.
6 Form Related HTML Tags You Might not Know - DEV
HTML5 achieved W3C recommendation in 2014 and added a lot of new tags. Some of them like , , or are semantic replacements for common used . Everybody was talking about those tags, but there a lot of different not so often used and not known. Let's discover together 6 form related HTML elements you might not know.
Blogging vs. blog setups - Rakhim.org
Blogging vs. blog setups
Local | Local WordPress development made simple
The #1 local WordPress development tool A fuss-free way to develop WordPress locally
Old CSS, new CSS / fuzzy notepad
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. And boy, it was horrendous. I mean, being able to make stuff and put it online where other people could see it was pretty slick, but we did not have very much to work with. I’ve been taking for granted that most folks doing web stuff still remember those days, or at least the decade that followed, but I think that assumption might be a wee bit out of date. Some time ago I encountered a tweet marvelling at what we had to do without border-radius. I still remember waiting with bated breath for it to be unprefixed! But then, I suspect I also know a number of folks who only tried web design in the old days, and assume nothing about it has changed since. I’m here to tell all of you to get off my lawn. Here’s a history of CSS and web design, as I remember it.
Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
An Extensive Guide To Progressive Web Applications — Smashing Magazine
In this article, we’ll look at the pain points of users who are browsing old non-PWA websites and the promise of PWAs to make the web great. You’ll learn most of the important technologies that make for cool PWAs, like service workers, web push notifications and IndexedDB.
Drag and Drop File Uploading | CSS-Tricks
The following is a guest post by Osvaldas Valutis. Osvaldas is going to show us not only how drag and drop file uploading works, but goes over what nice UI and UX for it can be, browser support, and how to approach it from a progressive enhancement standpoint.
Netlify: All-in-one platform for automating modern web projects.
An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS. And that’s just the beginning. Start for free
Taft Test - Web Dev Placeholder Image Generator
Does your page design improve when you replace every image with William Howard Taft?
concrete5
concrete5 is an Open Source Content Management System (CMS) Empower your editors to create and share more content.
Developing the Star Wars opening crawl in HTML/CSS
Even though Star Wars: The Last Jedi is a divisive movie (which is not the point of this article, I promise), it inspired me to develop the most useless thing of all: the franchise's famous opening crawl using solely HTML, CSS and a little bit of Javascript (but for a cool reason).
Small Tweaks That Can Make a Huge Impact on Your Website's Accessibility | CSS-Tricks
For a beginner, accessibility can be daunting. With all of the best intentions in the world, the learning curve to developing compliant, fully accessible websites and apps is huge. It's also hard to find the right advice, because it's an ever-changing and increasingly crowded landscape. I've written this post to give you some tips on small things that can make a big difference, while hopefully not affecting your development process too much.
How to Inspect Web Elements With Your Browser
Most web browsers don't make you download an inspection tool or install an add-on. Instead, they let you right-click the page element and choose Inspect or Inspect Element. However, the process might be a little different in your browser.
Free, responsive Weather Widget for any Website - WeatherWidget.io
...a free, customizable, responsive weather widget that will always match your website...