Rclone is a command-line program to manage files on cloud storage. It is a feature-rich alternative to cloud vendors' web storage interfaces. Over 70 cloud storage products support rclone including S3 object stores, business & consumer file storage services, as well as standard transfer protocols.
RegexGPT is a tool that lets people generate regex patterns by inputting an example of the text they would like to transform and another input for the expected result. There is also a natural language input that allows the user to explain the pattern they would like to match. The final input lets users select the programming language for the output.
Unlock the full potential of your website by embracing web accessibility! Our comprehensive guide will walk you through the key principles and best practices to create an inclusive online experience for everyone. From understanding the importance of accessibility to implementing practical solutions, we'll empower you to transform your website into a welcoming digital space for users of all abilities.
Organic Maps is a free Android & iOS offline maps app for travelers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data. It is a privacy-focused, open-source fork of Maps.me app (previously known as MapsWithMe), maintained by the same people who created MapsWithMe in 2011.
Style Dictionary is a build system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.
You may have already heard of CSS logical properties or RTL adaptations but are still deciding whether to deploy them widely. To help raise your awareness of their possibilities, Nicolas Hoffmann shares his experience of how he and his team at Proton carried out a massive move from CSS logical props to production and how you can consider them from a different perspective in your very own projects.
Stylify CSS is a library that uses CSS-like selectors to generate optimized Utility-First CSS dynamically based on what you write. It also allows you to define components, variables and global selectors.
Soon enough in your career as a web developer, you encounter the situation where a designer hands over a wonderful web design in all its large-screen glory. Your mission now is to transform it into code to present a prototype as soon as possible, starting with nothing but an empty text file.
Lucia is a simple yet flexible user and session management library that provides an abstraction layer between your app and your database. It's bare-bones by design, keeping everything easy to use and understand. Lucia is the authentication solution that works with you and your app.
Open source virtual / remote desktop infrastructure for everyone! A remote desktop software, the open source TeamViewer alternative, works out of the box, no configuration required. You have full control of your data, with no concerns about security. You can use our public rendezvous/relay server, or self-hosting, or write your own server.
FrankenPHP is a modern application server for PHP built on top of the Caddy web server. FrankenPHP gives superpowers to your PHP apps thanks to its stunning features: Early Hints, worker mode, real-time capabilities, automatic HTTPS, HTTP/2 and HTTP/3 support...
Share and accept documents securely. SecureDrop is an open source whistleblower submission system that media organizations and NGOs can install to securely accept documents from anonymous sources. SecureDrop is available in 21 languages.
Palpatine is a minimal static site generator (SSG) built with C++. It is a command line tool that takes a directory of raw data (.txt files and markdown) and generates a static website. It is designed to be fast, simple and easy to use.
AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a single keyframe. Save time and have complete control over how your elements move. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
Build blazing fast, scalable Jamstack websites with TezJS, the performance revolution in website development and ranking space. TezJS is built on combining the cutting-edge Vue.js framework with the next-gen frontend tool, Vite, to create an amazing developer experience with less configuration.
Breaking the Frontend Monolith! Piral is a framework for next generation portal applications. It allows you to build web apps that follow the microfrontends architecture in basically no time. Piral lets you use your standard tooling to be as efficient as possible.
Handshake is a decentralized, permissionless naming protocol where every peer is validating and in charge of managing the root DNS naming zone with the goal of creating an alternative to existing Certificate Authorities and naming systems.
Agit CMS is a multi-platform desktop application built on top of Electron, which works as a frontend interface for any static site generator, like Hugo and Jekyll. You need to have a ready-to-run static sites on your local computer, as Agit CMS works as a frontend interface for it.
Fresh is a next generation web framework, built for speed, reliability and simplicity.
Sustainable web design is an approach to designing web services that puts people and planet first. It delivers digital products and services that respect the principles of the Sustainable Web Manifesto: clean, efficient, open, honest, regenerative, and resilient.
This post show us how to use the new CSS selector :where() :is() :has() to make our life easier.
SvelteStorm is a Svelte IDE with built-in browser window which allows developers to easily view their application without having to switch to a separate window. Its state visualizer provides a clear and concise layout for developers to view and edit their state.
Simple, fast, safe, compiled. For developing maintainable software. Despite being simple, V gives a lot of power to the developer and can be used in pretty much every field, including systems programming, webdev, gamedev, GUI, mobile, science, embedded, tooling, etc. V is very similar to Go. If you know Go, you already know ≈80% of V.
Shiki is a beautiful Syntax Highlighter. It uses TextMate grammar to tokenize strings, and colors the tokens with VS Code themes. In short, Shiki generates HTML that looks exactly like your code in VS Code, and it works great in your static website generator.
Medusa is an open source alternative to Shopify. It provides most of the same standard features that Shopify's backend gives out of the box (e.g. E2E order handling, easy-to-use admin interface etc.) but we are more heavily focused on developers giving them the right APIs to customize and extend the setup to their need.
Front Matter is a CMS that runs within Visual Studio Code. It gives you the power and control of a full-blown CMS while also providing you the flexibility and speed of the static site generator of your choice. Jump right into editing and creating content with Front Matter and be able to preview it straight in VS Code.
Tonic is a component framework that takes this minimal yet elegant approach and works perfectly with Jamstack, as it doesn’t use virtual DOM and is server-side rendered by default. It’s based on web components and can be used out of the box without a build tool.
Simple.css is a classless CSS framework that makes semantic HTML look good, really quickly. By classless it means that there are no CSS classes anywhere in the CSS or the HTML. So your website can look just like this using plain old vanilla HTML.
The Full-Stack addition to SvelteKit. Write your server code inside .svelte files, handle sessions, forms and SEO easily. Svemix is Remix for Svelte providing server scripts inside your Svelte components/routes, which will be transformed into endpoints.
Knex.js is a "batteries included" SQL query builder for PostgreSQL, CockroachDB, MSSQL, MySQL, MariaDB, SQLite3, Oracle, and Amazon Redshift designed to be flexible, portable, and fun to use. It features both traditional node style callbacks as well as a promise interface for cleaner async flow control, a stream interface, full-featured query and schema builders, transaction support (with savepoints), connection pooling and standardized responses between different query clients and dialects.
Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
The instant on-demand Atomic CSS engine. UnoCSS is an engine instead of a framework because there are no core utilities - all the functionalities are provided via presets or inline configurations. We are imagining UnoCSS being able to simulate the functionalities of most of the existing atomic CSS frameworks. And possibly have been used as the engine to create some new atomic CSS frameworks!
An end-to-end-encrypted contact will allow communications to stay between a user and you. Email or backend service providers would not understand the message but can still record meta data. This solution is ideal for handling sensitive communications.
Splide is a flexible and lightweight (26kB) slider written in TypeScript. It helps you to create various kinds of sliders by just changing options, such as multiple slides, thumbnails, nested sliders, vertical direction and more. Besides, you can enhance default features by using APIs or building extensions.
It’s usually necessary to store user data server side in a database or similar repository. This guarantees persistence and ensures users can access their data from any web-connected browser (presuming your storage system is reliable, of course!) But sometime, storing data in the browser could become a more viable option. Post by Craig Buckler.
Slinkity is a plugin that can extend any 11ty site. Unlocks component frameworks (React, Vue, and Svelte) for writing page templates and layout templates. Includes powerful shortcodes to insert components into existing pages. Hydrates these component-driven pages on the client. (Optionally) Turns your site into a single page app.
In a recent front-end project, one of the components included an interesting cut-out effect. There are multiple ways to do such an effect in CSS or SVG, but each way has its pros and cons. I thought about exploring the solutions for this challenge and share them with you. By Ahmad Shadeed
You can create a Total.js server-side application with the help of Total.js AppBuilder. It's effortless and very comfortable. A significant advantage is a design architecture overview and reusing the design or its parts between different projects.
A curated list of tutorials. Better than that. A curated list of the finest free tutorials.
petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for "sprinkling" small amount of interactions on an existing HTML page rendered by a server framework.
With modern HTML and CSS, we can create responsive and accessible web apps with relative ease. In my years of doing software development, I have learned some HTML and CSS tips and tricks, and I want to present these in this post. This list is not exhaustive, but these are tried and true patterns that I frequently use in different projects.
Quire is a modern, multiformat publishing tool designed to create books as authoritative and enduring as print and as vibrant and feature-rich as the web from a single set of plain text files. All without paying a fee or setting up and maintaining a complicated server.
Godot provides a huge set of common tools, so you can just focus on making your game without reinventing the wheel. Godot is completely free and open-source under the very permissive MIT license. No strings attached, no royalties, nothing. Your game is yours, down to the last line of engine code.
Tauri is a toolkit that helps developers make applications for the major desktop platforms - using virtually any frontend framework in existence. The core is built with Rust and the CLI leverages Node.js making Tauri a genuinely polyglot approach to creating and maintaining great apps.
Windi CSS is the next generation Tailwind CSS compiler. If you are already familiar with Tailwind CSS, think about Windi CSS as an alternative to Tailwind, which provides faster load times, and supports all the features in Tailwind v2.0 and more.
In this post the author will outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.
Agorakit is web-based, open source groupware for collectives. By creating collaborative groups, people can discuss topics, organize events, store files and keep everyone updated as needed. Agorakit is a forum, calendar, file manager, mapping tool and email notifier.
Open source tool to monitor your servers and websites. PHP Server Monitor is a script that checks whether your websites and servers are up and running. It comes with a web based user interface where you can manage your services and websites, and you can manage users for each server with a mobile number and email address.
Lychee is a free photo-management tool, which runs on your server or web-space. Installing is a matter of seconds. Upload, manage and share photos like from a native application. Lychee comes with everything you need and all your photos are stored securely.
Node-RED is a programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using the wide range of nodes in the palette that can be deployed to its runtime in a single-click.
Stripe’s extension for Visual Studio Code makes it easy to generate sample code, view API request logs, forward events to your application, and use Stripe within your editor.
Zola is a static site generator (SSG), similar to Hugo, Pelican, and Jekyll. It is written in Rust and uses the Tera template engine, which is similar to Jinja2, Django templates, Liquid, and Twig. Content is written in CommonMark, a strongly defined, highly compatible specification of Markdown.
CodeSwing is a VSCode extension and an interactive coding environment for building web applications. CodePen in your VSCode editor!
Agile Content Management with JSON & Git. FrontAid CMS is a decoupled and Git-based content management system. Content is stored in your own Git repository in the JSON text format. It works with all your current tools and you always own your data.
The React Framework in Deno. Aleph.js gives you the best developer experience on building modern web application: TypeScript in Deno, ES module imports, file-system routing, SSR & SSG, HMR with Fast Refresh, and more. No config needed.
A script that converts a WordPress export XML file into Markdown files suitable for a static site generator (Gatsby, Hugo, Jekyll, etc.).
Stellar makes it possible to create, send, and trade digital representations of all forms of money: dollars, pesos, bitcoin, pretty much anything. It’s designed so all the world’s financial systems can work together on a single network.
Build Better Websites. Remix brings the best of modern web development without leaving behind the fundamental parts that make the web great. Deploy server rendered, code split, dynamic data-driven React apps to any cloud service provider. Experience unparalleled performance without the giant build times.
Umami is a simple, easy to use, self-hosted web analytics solution. The goal is to provide you with a friendlier, privacy-focused alternative to Google Analytics and a free, open-sourced alternative to paid solutions. Umami collects only the metrics you care about and everything fits on a single page.
Hyper is an Electron-based terminal built on HTML/CSS/JS and fully extensible. With Hyper, you can install themes and plugins from the command line. The goal of the project is to create a beautiful and extensible experience for command-line interface users, built on open web standards.
A new funding model for open source software or, achieving the holy grail of one-click sponsorships.Written by Colin McDonnel.
Apple and Google have jointly created the ExposureNotification framework to help governments and public health authorities reduce the spread of COVID-19 through contact tracing, with user privacy and security core to the design. Public health authorities can use this framework to create apps that enable users to take measures to protect themselves and help others.
Free multi-platform database tool for developers, database administrators, analysts and all people who need to work with databases. Supports all popular databases: MySQL, PostgreSQL, SQLite, Oracle, DB2, SQL Server, Sybase, MS Access, Teradata, Firebird, Apache Hive, Phoenix, Presto, etc.
ProcessWire is a free content management system (CMS) and framework (CMF) built to save you time and work the way you do. With all custom fields, a secure foundation, proven scalability and performance, ProcessWire connects all of your content seamlessly, making your job fast, easy and fun.
Build high-performance VueJS user interfaces in record time. One source code for all platforms simultaneously through Quasar CLI with all the latest and greatest best practices out of the box. Focus only on your app's features and forget about the boilerplate around it.
Capture screenshots of websites in various resolutions. A good way to make sure your websites are responsive. It's speedy and generates 100 screenshots from 10 different websites in just over a minute. It can also be used to render SVG images.
Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and which ones should you use? Here's the complete guide to media queries.
One of the decisions that a front-end developer needs to make while building a website is the technique to include an image. It could be an HTML , or an image via CSS backgrounds, or maybe SVG . Choosing the correct technique is important and can play a huge role in performance and accessibility. Post written by Ahmad Shadeed.
One of Alpine's main selling points is that it provides most of the reactive goodies that Vue and React do at a much lower cost. What if you don't need reactivity for your site? Well, Alpine can definitely still fit into your stack! Post written by Ryan Chandler
Build web applications with less tooling. With Snowpack you can build modern web apps (using React, Vue, etc.) without a bundler (like Webpack, Parcel, Rollup). No more waiting for your bundler to rebuild your site every time you hit save. Instead, every change is reflected in the browser instantly.
SPA JS is built on the popular paradigm “KISS” (Keep It Simple, Stupid) that emphasizes on keeping a framework simple and not complicating it. Ideally a powerful framework should do all the heavy lifting and must make it easy for the developers to focus on the product features and not the framework.
The responsive images spec is fantastic and covers a lot of use cases, but in my experience, most of the time you’ll only need to understand one of them ... Post written by Scott Vandehey
Do you love the JAMstack philosophy but need a database-backed web app? Want great developer experience and easy scaling? Redwood is here! Built on React, GraphQL, and Prisma, Redwood works with the components and development workflow you love, but with simple conventions and helpers to make your experience even better.
In this tutorial, Beau Carnes, teacher and developer with freeCodeCamp.org, shows you how to build a fast and secure websites with the JAMstack architecture.
Pay what you want: 5, 10 or 15€/month. The essence of our hosting platform is sharing: we provide enough resources for everyone and sufficient headroom to handle traffic spikes on your site. We always keep the systems up to date and take care of maintenance so you have the time to focus on your project.
What began as a side project of a Google developer now shares the JS leaderboard with React and Angular... With the help of Sarah Drasner, Taylor Otwell, Thorsten Lünborg and many others from the Vue.js community, Evan You tells the story of how he fought against the odds to bring Vuejs to life.
The Odin Project is one of those "What I wish I had when I was learning" resources. Not everyone has access to a computer science education or the funds to attend an intensive coding school and neither of those is right for everyone anyway. This project is designed to fill in the gap for people who are trying to hack it on their own but still want a high quality education.
Layouts with diagonal sections are quite popular for several years now. It is not the new hot stuff, and you will probably not find it in the articles titled "Design trends for 2020". But I think it is here to stay. Post written by Nils Binder.
Giving users a dark theme option can be beneficial for accessibility, as some people experience headaches or visual difficulties from excessively bright screens, or have trouble reading for long periods on a light background. Post written by Michelle Barker.
Matt Stauffer shares with us some precious advises in this post to set up your equipment for podcasting and streaming.
You've heard about testing, and even better "Test-Driven Development", but you're still not sure exactly what they are. Well now you'll know! In this trail, thoughtbot developers Harry Schwartz and Ian C. Anderson cover core principles of writing code with Test-Driven Development. You'll learn about the benefits of testing, the way testing first applies positive design pressure to your code, and how to apply TDD to your own development.
Grow is a static site generator optimized for building highly-interactive, localized microsites. With a focus on workflow and building projects that are highly maintainable in the long-term, Grow encourages a strong-but-simple separation of content and presentation, and makes maintaining content in different locales and different environments a snap.
Constantin shows us how to build a signup form using the library AlpineJS. Post written by Constantin - Placebo Domingo
A 6 step how-to guide to let you start in podcasting by Dale Cudmore.
Here's what I'd like you to know upfront: this is a hard problem. If you've landed here because you're hoping to be pointed at a tool you can run that tells you exactly what CSS you can delete from your project, well... there are tools out there, but I'm warning you to be very careful with them because none of them can ever tell you the complete story. Post written by Chris Coyer.
A biweekly 20-min podcast about the latest in tech tools, tips, and tricks!
How the new release will affect the way we write our code. As you could expect, Vue 3 brings a lot of new exciting features. Thankfully Vue team mostly introduced additions and improvements over current APIs rather than major changes so people that already know Vue 2 should quickly feel comfortable with new syntaxes. Written by Filip Rakowski.
When it comes to building a simple front-end project, how do you get started? What are the tools you need? I suspect everyone will have a different answer. Do you start with a (JS or CSS) framework, or off-the-shelf boilerplate? Perhaps you use a task runner (like Gulp to orchestrate your project’s needs. Or do you start simple, with just HTML and a CSS file? post written by Michelle Barker.
This is how Bethan Vincent developed and launched her first podcast, The Brave, in under 2 months.
The awesome Kirby team has released Trioceros, the 3.3.0 version of Kirby CMS and the very first version of their new Kirby Editor plugin. Kirby Editor is a new visual writing and layout field for Kirby. Compose long-form text with consistent inline styles. Add images, videos, quotes and more. Bring your own block types and always rest assured that the output will be valid, customizable HTML.
Vulcain is a brand new protocol using HTTP/2 Server Push to create fast and idiomatic client-driven REST APIs. An open source gateway server which you can put on top of any existing web API to instantly turn it into a Vulcain-compatible one is also provided! It supports hypermedia APIs but also any "legacy" API by documenting its relations using OpenAPI.
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.
Today we released the third major version of Ghost, representing a total of more than 15,000 commits across almost 300 releases. The product is as fast and stable as it has ever been, and now it also has support for memberships, subscription revenue, and API driven modern site architectures. Post written by John O'Nolan.
I find that the need to create responsive table layouts pops up far more often than most developers would expect. The gut reaction might to be implement some sort of custom grid-system or pull in a pre-built library. Don't do this - just use tables and some simple CSS. Post written by Bradley Taunt.
With the wonderful world of JAMstack getting big, all the categories of services and tools that help it along are as important as ever. There are static site generators, headless CMSs, and static file hosts. I think those classifications are handy, and help conversations along. But there is a point where nuance is necessary and these classification buckets get a little leaky. Post written by Chris Coyier.
Learn basic Bash programming syntax and tools, as well as how to use variables and control operators, in the first article in this three-part series. Post written by David Both.
It is a tool to make shades and tints for a given color and generate the proper code for the TailwindCSS config file.The idea is to make the custom color generation a bit easier when creating custom color variants to use in your app's CSS.
Do you have scheduled jobs run via Cron that you want to prevent being run via browsers and other user agents? This post, written by Andy W, presents two methods to do so.
Discover how to implement target="_blank" the right way to not be hacked. Written by Alex Yumashev.
How much of the CSS style that you import from external libraries you really use? Sometimes even less than 20%, so why do you need to have all this unused style? No reason! Purgecss come to help, it is a tool which helps to remove unused CSS and it can be used as part of your development workflow. Post written by Luca Spezzano.
A guide to getting you on the IndieWeb. We should all own the content we're creating, rather than just posting to third-party content silos. Publish on your own domain, and syndicate out to silos. This is the basis of the "Indie Web" movement.
Netlify helps developers quickly roll out static websites. In this in-depth Netlify course for beginners, you will learn how to use the service for everything needed in modern web development, from local setup to global deployment. This video is the perfect place to start for anyone that wants to learn how to use Netlify.
I’ve started using an excellent piece of software called Restic for backing up my various hosts. Restic has multiple backend types that you can send your backups to. One of the backends it supports is a REST API for which there is an implementation named Rest Server written in Go. Post written by Mike Cardwell.
Progressive Web Apps have been part of the conversation for a number of years, but have yet to be meaningfully adopted by most brands, which strikes us as a missed opportunity given the many benefits they possess. In fact, PWA’s can bring native app-like experiences and functionality to the mobile web, and they can be an extremely efficient way to deliver your digital experiences. Written by Jason Rzutkiewicz and Jeremy Lockhorn
In yet another recent project, I’m building a book proposal submission platform with a Vuejs frontend and a Kirby CMS backend. Kirby supports the use of HTTP Basic Autentication to make interacting with it via a custom web client (e.g. Vuejs) nice and easy. In my case, I need to interact with Kirby securely to tell it to create a new page (a new “Book”) without requiring a user to create an account or login. Post written by Morgan Brown .
Who is this for? For website developers that use Hugo and want to make the content of their static websites easy to edit, all for free and without having to pay for a server. For content editors that want to manage content of small static websites using a sleek user-friendly interface.
On a desktop, websites have the space to show the full menu, but on a mobile device that space isn't there, and you want to hide the menu behind a toggle (like a hamburger icon) and show it when people click that toggle. How do you offer both in an accessible way that keeps your HTML simple, without duplicating your menu? That's what the perfect responsive menu does.
A brief video explanation of what Caddy 2 is: a web server that acts as both a content origin and reverse proxy, suitable for both personal projects and production deployments. Discuss and get help with Caddy 2 on this forum: https://caddy.community
If you use Git and you need to upload your files to an FTP server, Git-ftp can save you some time and bandwidth by uploading only those files that changed since the last upload. It keeps track of the uploaded files by storing the commit id in a log file on the server. It uses Git to determine which local files have changed. You can easily deploy another branch or go back in the Git history to upload an older version.