Web Development
Google Domains - "Find a domain, create a site, and get custom email"
go-unicornify - "A port of the unicorn avatar generator at http://unicornify.appspot.com to Go, usable as a command line app"
HTML by Toptal Designers - "A delightful reference for HTML Symbols, Entities and ASCII Character Codes"
HTTP Status Codes - "httpstatuses.com is an easy to reference database of HTTP Status Codes with their definitions and helpful code references all in one place. Visit an individual status code via httpstatuses.com/code or browse the list below."
Jinja live parser - online Jinja2 sandbox
JSON Formatter #extension - "Makes JSON easy to read. Open source." GitHub. #chrome
Landbot.io - "Hey! 👋 My name is Landbot and I transform websites into Conversational Experiences."
MX Lookup - "This test will list MX records for a domain in priority order. The MX lookup is done directly against the domain's authoritative name server, so changes to MX Records should show up instantly. You can click Diagnostics , which will connect to the mail server, verify reverse DNS records, perform a simple Open Relay check and measure response time performance. You may also check each MX record (IP Address) against 105 DNS based blacklists . (Commonly called RBLs, DNSBLs)"
neocities - "Create your own free website. Unlimited creativity, zero ads. Neocities is a social network of 251,600 web sites that are bringing back the lost individual creativity of the web. We offer free static web hosting and tools that allow you to create your own web site. Join us!"
Postbin - "HTTP Post requests are displayed here, newest to oldest."
Storybook - "Build bulletproof UI components faster. Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient."
xwp/pwa-wp - "WordPress feature plugin to bring Progressive Web Apps (PWA) to Core"
Analytics
FullStory - "FullStory tells you everything you need to know about your digital experience."
Google Analytics
Checklists
18F Accessibility Guide Checklist - “This checklist helps developers identify potential accessibility issues affecting their websites or applications.”
The Front-End Checklist #webapp - “🗂 The Front-End Checklist Application is perfect for modern websites and meticulous developers!”
Vox Media Accessibility Guidelines Checklist - “Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project.”
Development Environments
Codepen #webapp - “👋 CodePen is a social development environment. At it's heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating tool for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.”
CodeSandbox #webapp - "Quickly prototype ideas with code. Free, instant, collaborative sandboxes for rapid web development."
Glitch - "Glitch is the friendly community where everyone can discover and create the best stuff on the web."
Postman #software - "Simplifies API Development. Get easy, API-First solutions with the industry's only complete API Development Environment."
GDPR
The GDPR Checklist - "Achieving GDPR Compliance shouldn't feel like a struggle. This is a basic checklist you can use to harden your GDPR compliancy."
GDPR Tracker - "Track the GDPR compliance of +100 cloud services and subprocessors."
GraphQL
Apollo: Optimistic UI #article - "Optimistic UI is a pattern that you can use to simulate the results of a mutation and update the UI even before receiving a response from the server. Once the response is received from the server, the optimistic result is thrown away and replaced with the actual result."
Relay: Mutations #article
Microservices
Microservices Foundations #course - "Microservices is a major architectural pattern in the software industry, and having an overview of what this architecture is-and what it isn't-is critical as a starting point to evaluating this model. This course covers the basic concepts of microservices, to help you determine if this architectural model is the right fit for you and your team. Instructor Frank Moley kicks off the course by briefly discussing how microservices fit into the history of software architecture, and going into some of the other notable patterns that have emerged in recent years. Frank then helps to familiarize you with some core concepts of microservices, including bounded contexts and the API layer. He also goes over some of the more advanced areas of the architecture, as well as the importance of embracing a DevOps culture should you choose to move to microservices."
Microservices: How To Build Systems That Survive - YouTube #video - "In order to build software systems that survive, the development teams should embrace change, understand that system is an asset and code is a liability."
Participatory Web
Beaker - "A browser for the next-generation Web . Beaker is an experimental browser for exploring and building the peer-to-peer Web."
Glitch - "Glitch is the friendly community where everyone can discover and create the best stuff on the web."
neocities - "Create your own free website. Unlimited creativity, zero ads."
Placeholder Content
Cupcake Ipsum - "How about using auto-generated text that will actually make people love your project even more? Pretty sweet, right?"
Unsplash
VeggieIpsum
Progressive Web Apps
An Extensive Guide To Progressive Web Applications #article - “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.”
Going Offline #book - "Boldly take your website where it’s never gone before: offline. Jeremy Keith introduces you to service workers (and the code behind them) to show you the latest strategies in offline pages. Learn the ins and outs of fetching and caching, enhance your website’s performance, and create an ideal offline experience for every user, no matter their connection."
Google Play Store now open for Progressive Web Apps 😱 #article - "Chrome 72 for Android shipped the long-awaited Trusted Web Activity feature, which means we can now distribute PWAs in the Google Play Store! I played with the feature for a while, digging into the APIs and here you have a summary of what’s going on, what to expect and how to use it today."
Pwa-wp plugin - WordPress plugin. WP plugin page
Service Workies - "Learn Service Workers inside and out with the new game of Service Worker mastery"
Security
Data Breaches - "Bringing transparency to a fast-changing connected world and helping to build a privacy-aware society."
Links to cross-origin destinations are unsafe #article - "The other page can access your window object with the window.opener property. This exposes an attack surface because the other page can potentially redirect your page to a malicious URL. See About rel=noopener."
Styleguides
Atellier - "Atellier is a React component that gives you an accessible way to interact with your components library."
BlueKit - "Render React components with editable source and live preview"
Carte Blanche - "Carte Blanche is an isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them." Inactive.
Catalog - "With Catalog you combine design documentation with real, live components in one single place, making collaboration between designers and developers seamless."
Devcards - "Devcards aims to provide ClojureScript developers with an interactive visual REPL. Devcards makes it simple to interactively surface code examples that have a visual aspect into a browser interface."
Docz - "It's never been easier to document your things!"
pocotan001/react-styleguide-generator - "Easily generate a good-looking styleguide by adding some documentation to your React project." Archived.
React-demo - "A React-component for creating demos of other components. See also react-demo-library"
React Cards - "React Cards is inspired by Bruce Hauman's excellent devcards project which aims to provide ClojureScript developers with a visual REPL-like experience especially suited for UI development."
React Cosmos - "Dev tool for creating reusable React components"
React Styleguidist - "Isolated React component development environment with a living style guide"
SourceJS - "Living Style Guides Engine and Maintenance Environment for Front-end Components. Core repository." Inactive.
Storybook - "Build bulletproof UI components faster. Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient."
Sources
Chris Biscardi - "I'm an independent consultant that works with startups built on OSS. Here I write about JAMStack, Serverless, MDX, and more. This site is built with ESModules, Snowpack, and MDX."
Conferences - "... related to Front-End Design & Development"
CSS-Tricks - "CSS-Tricks is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like."
Dave Rupert - "I'm Dave Rupert, lead developer at Paravel, co-host of ShopTalk, dad, and Aarakocran bard."
Dev.to - "DEV is a community of software developers getting together to help one another out. The software industry relies on collaboration and networked learning. We provide a place for that to happen."
Facebook Open Source - "Building community through open source technology"
FunFunFunction #channel - funfun.chat.
Jake Archibald wrote... #blog - "Hello, I’m Jake and that is my face. I’m a developer advocate for Google Chrome."
Kevin Powell #channel - "Helping you learn how to make the web, and make it look good while you're at it. ❡ With a new video every Wednesday, I'll be bringing you How Tos and Tutorials, and well as simple tips and tricks. I'm mostly looking to help people who are new to the world of web development."
Modern Web #podcast - "An interview-based podcast, featuring different web development leaders every month. Learn from trailblazers in the global community."
Sara Soueidan - "Hi, I’m Sara. I’m an independent UI engineer & conference speaker specializing in responsive Web design, modern CSS, progressive enhancement, and accessibility. I’m a SuperFriend and a team member at codrops. Find out more about my work or hire me."
Traversy Media #channel - "Traversy Media features the best online web development and programming tutorials for all of the latest web technologies including Node.js, Angular 2, React.js, PHP, Rails, HTML, CSS and much more"
web.dev - "Let's build the future of the web. Get the web's modern capabilities on your own sites and apps with useful guidance and analysis from web.dev."
Last updated