Discover voorhoede/code-class-flexbox Open Source project

Collection of pre-configured front-end tooling setups for common uses.

198

front-end-tooling-recipes

Resources on Progressive Enhancement. From concept and strategies to feature detection & testing methods. Complete with a list of (code) examples.

177

progressive-enhancement-resources

128

npm-style-guide

Opinionated npm Style Guide for teams.

nuxt-twa-module

📱Nuxt module to transform your PWA into an Android app, using Trusted Web Activities (TWA)

playbook

Opinionated jQuery Style Guide for teams.

jquery-style-guide

fastatic

Speed up your static site with one command

[POC] Configure and preview your Progressive Web App Manifest.

manifiesta

Manage your front-end project in unique views and reusable components.

front-end-guide

Make continuous deployment delightful. Deploy and preview your apps for each pull request with Plek. 🇳🇱

plek

demo-navigate-with-gamepad

Manage, compile and test your nightmarish email newsletter templates.

email-template-guide

Vue component to lazy load content using the Intersection Observer API

vue-lazy-load

Proof-of-Concept: Connect a web app on iOS to something over bluetooth

bluetooth-poc

lean-web-kit

Lean Web Kit to kick-start your web project.

Companion to the RiotJS Style Guide.

riotjs-demos

Preview components in isolation with documentation, annotations and breakpoint controls.

demo-viewer

An example of module based development for front-end using .NET Core with a living guide

dotnetcore-front-end-guide

heads-up

Visualise everything in your <head> with the Heads Up Devtools

Application to split up screenshots into components and export them

componentizer

Develop more accessible websites by simulating several forms of visual imparity and color blindness

a11y-viewer

A fast & lightweight global badges service.

tiny-shields

hike-one

Website for Hike One

Support table for rendering popular JavaScript frameworks in different environments.

render-environments-for-javascript-frameworks

datocms-plugin-translate-fields

A DatoCMS plugin that gives you the ability to translate structured-text, string and text fields in DatoCMS

When everybody involved in a project understands front-end concepts, the better the chance of a project becoming a success.

how-front-end-works

Fully optimized Vue component for images from DatoCMS

vue-dato-image

experiment-dark-mode

performance-masterclass-2017-10

This DatoCMS plugin allows to compute and define a field value based on other fields.

datocms-plugin-computed-fields

Format plain content as Voorhoede pages

voorhoede-ocelot-formatter

This boilerplate helps you extend Lighthouse with your own audits and reports.

lighthouse-boilerplate

Nuxt module enabling persistant preview mode

nuxt-preview-mode-module

App to trigger DnD all over the place

trigger-dnd

Static site demo using Metalsmith + Nunjucks

demo-metalsmith-nunjucks

Progressive Web App Masterclass

pwa-masterclass-24-01-2019

Behavioural and accessible accordion component

vue-accordion

Annotate UI components and link them to wherever you want.

demo-linker

get-netlify-url

Nuxt module for querying and subscribing to DatoCMS through its GraphQL API

nuxt-datocms-module

code-class-async-await

Base setup on top of headless services to help you quickly start a new website

head-start

Fully optimized video component for videos from Dato CMS

vue-dato-video

preact-web-components-demo

Demo setup of ExpressJS server with module structure and demo viewer

demo-server-express

This DatoCMS plugin extends the DatoCMS SEO meta field. It allows you to see a preview of different sources generated from Heads Up.

datocms-plugin-extended-seo

performance-masterclass-2017-01

cross-framework-components

Make your static website even faster

fastatic-app

Lightweight serverless web app setup in Nuxt/Next/Sapper-style, sans single page app framework.

pretty-static-poc

A DatoCMS plugin that adds the ability to have a custom page in your DatoCMS instance.

wasmer-template-renderer

Rust

datocms-plugin-custom-page

webstats-google-analytics-reporter

App to easily find available spaces on the TU Delft Campus.

tudelft-spacefinder

ChatGPT is a plugin for DatoCMS that uses GPT-3 to generate text and fill in text fields within the DatoCMS interface, saving time and effort for users who need to fill in dummy data.

datocms-plugin-chat-gpt

code-class-drag-and-drop

Voorhoede logo created using only an icon font

.github

logo-using-font

vue-masterclass-day-2

dato-to-s3

code-class-font-loading

Schedule Netlify deploys by triggering a build hook from a GitHub workflow.

demo-netlify-cron-deploy-workflow

Build a simple web site / web app with data from our REST or GraphQL API.

interview-exercise

vuepress-paper

This DatoCMS plugin makes it possible to add/insert a key and value to output a simple JSON table.

datocms-plugin-json-table

Experiments compiling to and utilising Web Components

experiment-web-components

experiment-web-speech

vue-masterclass

Masterclass about Vue

code-class-text-shapes

Demo setup of Silex PHP server with module structure and demo viewer

demo-server-silex

PHP

pg-graph

Create json responses directly in the database. Including one-to-many and one-to-one relations.

code-class-koa

Website for car UI reviews

car-ui

Collection of JavaScript helpers using a wrapper around native and fallback methods rather than using polyfills.

airhooks

Nuxt module for getting data and subscribing to changes in preview mode

nuxt-dato-cms-module

code-class-text-effects

voorhoede-website

Website for De Voorhoede

Force content inside an element to have a fixed ratio. This technique prevents reflow when loading images and other lazy content.

vue-fixed-ratio

This DatoCMS plugin gives you information for text and string fields about word count, character count, sentences, paragraphs and common words.

datocms-plugin-word-counter

Demo running GitHub actions on Netlify deploy previews

demo-actions-on-netlify

code-class-indexeddb