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.
The tiny framework for building web interfaces. Hyperapp is a modern VDOM engine with a declarative syntax that's easy to read and natural to write, Hyperapp is your tool of choice to develop purely functional, feature-rich, browser-based applications.
I’ve been using Tailwind CSS professionally almost every day for nearly two years. I love using it, and it’s made my development workflow so much better. So I wanted to share some of the benefits I’ve gained by using Tailwind over a traditional framework or custom CSS. Post written by Jason Beggs.
I'm not an extrovert. I don't like crowds. I'd rather be the trusted adviser than the guy in the spotlight. In high school, speech class gave me such anxiety that I was physically sick and needed to give the presentation over my lunch hour directly to the teacher. Post written by Matt Eland.
While the number of podcasts is growing, our time stays constant. Unable to find a great way to segment podcast into snackable bits that could be searched, shared, and consumed by anybody. Smash Notes is an experiment, an attempt to establish an entirely new medium of knowledge.
If you haven't heard of Tailwind by now it is a rising star in the utility-first CSS framework space that makes developing with CSS fun and productive. With Tailwind you are no longer fighting against the framework to try and get the box outline blue or the margin between your cards a certain rem size. Post written by Drew Town
This is not a library, this is the codebase that runs Dev-io We are very excited about the possibility that, with your contributions, this platform can eventually be re-purposed for communities and ecosystems outside of our scope. Post written by Ben Halpern, founder of Dev-io
SSLyze is a Python library and a CLI tool that can analyze the SSL configuration of a server by connecting to it. It is designed to be fast and comprehensive, and should help organizations and testers identify mis-configurations affecting their SSL/TLS servers.
Looking for a free alternative to Photoshop? Gimpshop is a fork of Gimp with a user interface close to Photoshop. There's no question that Adobe Photoshop is excellent image editing software. But for those of us that can't afford up to seven hundred dollars or more to buy it, we now have the same image manipulation power at our fingertips as the high-priced, closed-source programs.
Singer describes how data extraction scripts called “taps” and data loading scripts called “targets” should communicate, allowing them to be used in any combination to move data from any source to any destination. Send data between databases, web APIs, files, queues, and just about anything else you can think of.
Flextype is a lightweight alternative to other heavy and outdated CMS. Many people use complex solutions for simple pages, unnecessarily. Flextype focused on simplicity - even novice webmaster adapt his template and writes his own plugin. To achieve this, Flextype implemented a simple but powerful API's.
Documize is an open source modern Confluence alternative for internal and external docs built with Golang. Document all your projects, products and services to make know-how available as you grow and scale. With an open soure core, Documize can be used
in the cloud or deployed on-premise.
The Percona XtraBackup tools provide a method of performing a hot backup of your MySQL data while the system is running. Percona XtraBackup is a free, online, open source, complete database backups solution for all versions of Percona Server for MySQL and MySQL®.
Kyma is an open-source project designed natively on Kubernetes. It allows you to extend and customize cloud-based and on-premise enterprise applications in a quick and modern way, using serverless computing or microservice architecture.
Tooll2 is an free open source solution for creating interactive 3d content and animations. It combines the best aspects of animation, compositing, and coding into a lightweight and intuitive UI. Your designs can be shared as executable or rendered to movies.
"Look around the internet for a minute, and you’ll find a million and one usability issues revolving around forms" ... by Adam Silver
If you are an aspiring a developer or an entrepreneur interested to learn about backend vs frontend, you are in the right place. This blog will help you in learning what front end vs back end is all about. So, keep reading to learn what the technology stacks are and how they come together to build a website, an app, or an IoT solution.
ActivityWatch is an automatic time-tracking software which helps you keep track of what you do. It's an attempt to replace and improve existing services like RescueTime, ManicTime, WakaTime and others. It is different in that it's completely open source, extendable, and you as a user have full and exclusive control of your data.
A toolkit for building rich-text editors on the web. An ideal content editor produces structured, semantically meaningful documents, but does so in a way that is easy for users to understand. ProseMirror tries to bridge the gap between Markdown text editing and classical WYSIWYG editors.
This article will give you a quick introduction to some best practices within API design in general, as well as the definite list of 10 practical commandments you can use to create components that your fellow developers will love to use. Written by Caroline Odden and Selbekk.
Babylon.js 4.0 is here and marks a major step forward in one of the world's leading WebGL-based graphics engines. From the powerful new Inspector, best in class physically-based-rendering, countless optimizations, and much more, Babylon.js 4.0 brings powerful, beautiful, simple, and open 3D to everyone on the web.
The sectioning elements in HTML5 are < nav >, < aside >, < article >, and < section >.is also kind of a sectioning element since all content lying inside of it is part of the default document section. This post explains how each sectioning element could be used appropriately in your html code.
Librefox: Firefox with privacy enhancements. This project aims at enforcing privacy and security of Firefox without forking the project. Librefox uses more than 500 privacy/security/performance settings, patches, Librefox-Addons (optional) and a cleaned bundle of Firefox (updater, crashreporter and Firefox's integrated addons that don't respect privacy are removed).
Folks new to web development may not know that form inputs using the file type are read only. [...] However, just because the field is read only doesn’t mean we can’t do cool stuff with it. Post written by Raymond Camden.
In this article, Marcin Wanago cover another feature that we can implement with the help of Service Workers – Push Notifications. They come in handy if we need a fast channel of communicating with our users. We not only learn how to implement them in terms of code, but we also explore the User Experience side of it.
Fastify is a fast and low overhead web framework, for Node.js Fastify is a web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture. It is inspired by Hapi and Express and as far as we know, it is one of the fastest web frameworks in town.
Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.
OpenDebs is a new community repository focusing on accessibility for developers. The goal is to offer a service that lets ANYBODY upload and host their packages. OpenDebs plans to be a reliable, easy to work with, and clean repository for the jailbreak community. OpebDebs do not and will not host ANY packages that are NOT open source or free.
Writing passwords down or saving them is dangerous. With Master Password, a cryptographic algorithm calculates your site's password for you, only when you need it. When you're done, it erases the password from the device, so it can't be stolen. This approach makes you safer from loss, theft, problems with backups, sync, confiscation, snooping, and more.
Healthchecks.io monitors the heartbeat messages sent by your cron jobs, services and APIs. Get immediate alerts you when they don't arrive on schedule. Healthchecks.io is an open source service and offers a free SaaS online solution for monitoring until 20 Cron jobs.
Turtl is a secure and OpenSource collaborative notebook like Evernote. It comes also with a SaaS offer and a free plan. Whether it's bookmarks or passwords, files or shopping lists...Turtl organizes it all and makes it easy to find later. Sync across your devices. Leave nothing behind.
WebComponents.org aims to make it easy to share, discover, and reuse web components. It provides articles, presentations, podcasts, tools and more to help web professionals build first-class DOM objects in the browsers. All the content on this site is totally free, and contributions are welcome.
In this blog post Marina Aisa explains us how she created her new website with portfolio and blog in two languages. What technology she used and why.
Andy Bell shows us in this article how to build a fully responsive grid that uses no media queries to work across all viewports using CSS Grid.
Tailwind CSS is an utility-first CSS framework for rapidly building custom designs with predefined class. If you are a big fan like me, you will probably appreciate this nice cheat-sheet made by Jay Elaraj.
In this article, Erisu will cover how to build our first PWA project with the Vue.js framework by implementing the PWA minimum requirements, configure Webpack to build a caching services worker for offline support and run the Google Lighthouse audit tool to identify improvement points.
Vue is easily one of the most exciting additions to the front-end world in many years. With its intuitive API, and the fact that it can be applied to any type of application, it's no wonder why folks have gravitated to it as much as they have. If you'd like to jump on board, let me show you, step by step, exactly what you need to know. It's the best way to learn Vue!
Vue-chartjs is a wrapper for Chart.js in Vue. You can easily create reusable chart components. Vue-chartjs lets you use Chart.js without much hassle inside Vue. It's perfect for people who need simple charts up and running as fast as possible. It abstracts the basic logic but exposes the Chart.js object to give you maximal flexibility
Changes in complex software systems seem like they take forever, don’t they? Even to engineers it often feels like changes take longer than they should, and we understand the reasons for the underlying complexity in the system! By Al Tenhundfeld.
Because building and managing a web project is a big, complex process, Corey Vilhauer and Deane Barker imagined this web series of 26 episodes. With The Web Project Guide, they want to help us understand how each stage of the website process fits in with the next.
In this article Dan Vega is going to walk you through the blog post generator that he wrote using Grisdome. There have been a few iterations of this script and he has definitely learned a few tricks from others who have done something similar.
In this article, Dan Vega is going to tell you why he loves Vue and give you 4 different ways you can write your first application.
One of the fundamental tasks to perform in an API is data validation. In this article, I’d like to show you how to add bulletproof validation for your data in a way that also returns it nicely formatted. Post written by Andrej Adamcik
Victoire is a mix between a framework and a CMS. Concretely, it is able to list and store your business entities in your back office and display them on your site in a few clicks - without having to manually copy, one by one, the texts and images of these business entities.
The goal of Open Web Components is to empower everyone with a powerful and battle-tested setup for sharing open source web components. We try to achieve this by giving a set of recommendations and defaults on how to facilitate your web component project.
Stack Overflow’s annual Developer Survey is the largest and most comprehensive survey of people who code around the world. Each year, Stack Overflow fields a survey covering everything from developers’ favorite technologies to their job preferences.
Vue CLI is a full system for rapid Vue.js development. Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations.
A README is a reflection of how a repository is maintained. A good one doesn't necessarily mean an active, bug-free project with perfect tests. But it suggests that the owner cares about you, the user (or future maintainer). Written by Andrew Healey
This is a guide made by Frontend Masters that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019.
Giving your users a way to customise the interface to their preference is a huge win for user experience. In this post, Ananya Neogi shows us how to implement a simple switch to toggle between dark mode and light mode.
Imagine the productivity boost of being able to locally test your site generator, API integrations, serverless functions, and edge rules, all in a single development server. That’s Netlify Dev: a powerful way to build and test modern web apps on your local machine.
Thomas Guenther describes in this article Medium his experience in redesigning a site under the CMS Kirby 3.
Podlove Web Player is a HTML5 based web player for audio and video media files that is optimized and extended for the specific needs of podcasters. This player is the integrated player for the Podlove Podcast Publisher but can be used independent from it.
Indigo is a modular HTML5 video player written in TypeScript. It is highly extensible and use modern technologies: handles MPEG-Dash / HLS / MPEG-4 built on top of the HTML5 video element, React based UI, advertisement support for both Google DFP aswell as FreeWheel, subtitles (webvtt), picture-in-Picture mode, thumbnails.
Building accessible applications or websites is not the norm today. This is because the idea of accessibility is known to most developers, while in actual sense it is often neglected and not a common practice today in the world of web development. Post written by Egwuenu Gift.
This release starts Django’s use of a loose form of semantic versioning, but there aren’t any major backwards incompatible changes (except that support for Python 2.7 is removed) that might be expected of a 2.0 release. Upgrading should be a similar amount of effort as past feature releases.
In this series of videos, Carrie Anne Philbin and the Crash Course team are going to trace the origins of our modern computers, take a closer look at the ideas that gave us our current hardware and software, discuss how and why our smart devices just keep getting smarter, and even look towards the future!
In this post, Florin Pop explains step by step how to build a double slider sign-in and sign-up form with a nice animation.
In this article, Caleb Williams will discuss why Web Components are a great tool to deliver high-quality user experiences without complicated frameworks or build steps and that don’t run the risk of becoming obsolete. In subsequent articles of this five-part series, we will dive deeper into each of the specifications.
Make your site’s pages instant in 1 minute and improve your conversion rate by 1% Before a user clicks on a link, they hover their mouse over that link. When a user has hovered for 65 ms there is one chance out of two that they will click on that link, so instant.page starts preloading at this moment, leaving on average over 300 ms for the page to preload.
Learn how to use the combination of signed transactions and JWT tokens to authenticate users from a pair of cryptographic keys that identify the blockchain user. Post written by Viktor Sokolov & Sergey Nebolsin