Awesome Web Dev in R

This is a big list of links to articles, blog posts, JavaScript and CSS libraries, online learning resources, notes, and so much more that I found interesting while working on this workshop.

I hope to curate and organize this list a bit more in the future. For now, I hope you find something helpful or interesting!

Accessibility

accessibility
How to improve the accessibility of your web apps (medium.com)
A gentle introduction to improving the accessibility of your app
accessibility
Accessibility Checklist (a11yproject.com)
accessibility
Accessibility 101 (speakerdeck.com)
An excellent introductory presentation on accessibility
accessibility
The A11Y Project (a11yproject.com)
accessibility
Accessibility Simulation (developer.mozilla.org)
Firefox developer tools for accessibility
accessibility
axe (www.deque.com)
Accessibility for Development Teams
accessibility post
The web accessibility basics (marcozehe.wordpress.com)
accessibility
Front End Checklist (frontendchecklist.io)
Your best Front-End Tool
accessibility video
A11ycasts with Rob Dodson - YouTube (www.youtube.com)
accessibility post
9 tips to get bare minimum of web accessibility (medium.com)
accessibility color
Who Can Use? (whocanuse.com)

API

api github
public-apis/public-apis (github.com)
A collection of public APIs
api
Numbers API (numbersapi.com)

App

app
JavaScript Event KeyCodes (keycode.info)
Get information about key press events and how to match them to the browser event.
app
BundlePhobia (bundlephobia.com)
Find out the size of your JavaScript bundle based on the libraries you're using.
app
StackBlitz (stackblitz.com)
The online code editor for web apps. Powered by Visual Studio Code.

Books

book shiny
How to Build a Shiny Application from Scratch (bookdown.org)
book jslib d3 dataviz
Fullstack D3 and Data Visualization (www.newline.co)
The Complete Guide to Developing Data Visualizations with D3
book css html js
Front-end Developer Handbook 2019 (frontendmasters.com)
Learn the entire JavaScript, CSS and HTML development practice!
book learn js
Eloquent JavaScript (eloquentjavascript.net)
book learn js free
You Don't Know JS Yet (github.com)
book learn js
JavaScript for Data Science (js4ds.org)
book learn js
JavaScript & jQuery: Interactive Front-End Web Development (www.javascriptbook.com)
book learn js free
Speaking JavaScript (speakingjs.com)
book learn js free
Exporing ES6 (exploringjs.com)
book learn js
Learning JavaScript Design Patterns (addyosmani.com)
book learn js
Deep JavaScript: Theory and Techniques (exploringjs.com)
book shiny
Engineering Production-Grade Shiny Apps (thinkr-open.github.io)
Colin Fay, Vincent Guyader, Cervan Girard, Sébastien Rochette
book shiny
Mastering Shiny (mastering-shiny.org)
Hadley Wickham and Joe Cheng

Browser

browser
Get Started with Debugging JavaScript in Chrome DevTools (developers.google.com)
browser
A list of cool Chrome DevTools Tips and Tricks (flaviocopes.com)
browser
Version Museum (www.versionmuseum.com)
A Visual History of Your Favorite Technology

Build

build
Modern JavaScript Tooling (www.youtube.com)
In this talk Mark Volkmann provides a roundup of popular tools used in modern JavaScript development.

CSS

css
CSS Tricks - BEM 101 (css-tricks.com)
A handy guide to the popular Block, Element, Modifier CSS naming methodology
css github
AllThingsSmitty/css-protips (github.com)
A collection of awesome CSS pro tips
css
On How I Approach Teaching CSS, CodePen Quizzes and Playing Cards (pepsized.com)
css post
CSS Specificity (dev.to)
What is CSS specificity and how does it work?
css post
CSS Shapes (sharkcoder.com)
How to make shapes with CSS
css
Fixing layout instability (dev.to)
css
CSSFlow (www.cssflow.com)
Code Snippets & UI Kits for Web Developers
css post
CSS Grid: Justification and Alignment (alligator.io)
css design post
Two ways to create an image with a colour overlay in CSS (dev.to)
css
Hover.css (ianlunn.github.io)
A collection of CSS3 powered hover effects
css post
Restart CSS Animation (css-tricks.com)
css post
Our 100 Favorite CSS Libraries (speckyboy.com)
css animation
CSSFX (cssfx.dev)
Beautifully simple click-to-copy CSS effects
css post
The quick guide to CSS length units (slicejack.com)
css post
The Quick Guide to CSS Specificity (slicejack.com)
css build post
Introduction to PostCSS with Gulp (slicejack.com)
css grid
CSS Grid Generator (cssgrid-generator.netlify.com)
css post
An ode to the CSS owl selector (dev.to)
css
wysiwyg.css (jgthms.com)
A simple collection of styles targeted at HTML elements generated from a WYSIWYG editor (like TinyMCE) or Markdown.
css animation post
CSS Animation Libraries (css-tricks.com)
css flexbox
Flexbox Cheat Sheets (dev.to)
css animation
Animista (animista.net)
Collection of awesome and easy to use CSS animations.
css post
My favorite CSS hack (dev.to)
css post
Fast Software (css-tricks.com)
css post
CSS Box Shadow (css-tricks.com)
css animation post
CSS Flip Animation (davidwalsh.name)
css animation
CSS Easing Functions (easings.net)
css animation post
CSS Transition Height (css-tricks.com)
css forms
WTF? Forms (wtfforms.com)
Friendlier HTML form controls with a little CSS magic. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.
css button
Good default button styles (css-tricks.com)
css dark mode post
Dark Mode with CSS (css-tricks.com)
css learn game
Grid Garden (cssgridgarden.com)
A fun game where you write CSS code to grow your carrot garden
css learn game
CSS Diner (flukeout.github.io)
Another fun CSS game to practice writing CSS selectors
css animation
Animate.css (daneden.github.io)
A collection of CSS classes you can easily add to any webpage
css animation
vov.css (vaibhav111tandon.github.io)
A CSS stylesheet with great animations

D3

d3
Sankey diagram for d3 (ricklupton.github.io)

Data

data
Title Case Hed Goes Here (the-pudding.github.io)
data
Our World in Data (ourworldindata.org)

Design

design
Generated Photos (generated.photos)
100,000 AI-Generated Faces – Free to Download!
design
LoremFlickr.com (loremflickr.com)
LoremFlickr provides placeholder images for every case, web or print, on almost any subject, in any size.
design post
Sidebar Transitions (tympanus.net)
design post
Image Captions with Pseudo-Elements (tympanus.net)
design post
Expanding Search Bar Deconstructed (tympanus.net)
design
PlaceIMG (placeimg.com)
Easy FPO and Dummy Images for Any Project
design
FlatUI Color Palettes (flatuicolors.com)
280 handpicked colors
design
Happy Hues (www.happyhues.co)
Curated colors in context.
design
Figma (www.figma.com)
The collaborative interface design tool.
design
Font Flipper (fontflipper.com)
Find Free Fonts
design
Design Principles for Developers: Processes and CSS Tips for Better Web Design (css-tricks.com)
design codepen
Useful Pens for Everyday Front End Development - a Collection by Sarah Drasner on CodePen (codepen.io)
design framework css
Vanilla Framework (vanillaframework.io)
A simple extensible CSS framework backed by open-source code and written is Sass by the Canonical Web Team.
design framework css
USWDS: The United States Web Design System (designsystem.digital.gov)
A design system for the federal government. We make it easier to build accessible, mobile-friendly government websites for the American public.
design color
Sip Color for Mac (sipapp.io)
A better way to collect, organize & share your colors.
design color
ColorFavs (www.colorfavs.com)
design
Humans FYI (humans.fyi)
Design inspiration from some of the best humans on the web.
design typography
TypeSource (tobiasahlin.com)
Google Web Font inspiration in HTML & CSS.
design
System Font Stack (systemfontstack.com)
Fonts that look great, and native, on any device

Flexbox-grid

flexbox-grid codepen
Responsive Tables #2.5: Flexbox (codepen.io)
flexbox-grid
Faster Layouts with CSS Grid (and Subgrid!) (hacks.mozilla.org)

Framework

framework
11ty (www.11ty.dev)
A simpler static site generator. An alternative to Jekyll. Transforms a directory of templates (of varying types) into HTML.
framework post
Svelte vs React: First impressions (medium.com)
framework
Nuxtjs (nuxtjs.org)
The progressive Vue.js framework
framework css learn post
Get up and running with Tailwind CSS and Next.js - Jamie Barton - Medium (medium.com)
framework css
Tailwind CSS (tailwindcomponents.com)
A utility-first CSS framework for rapidly building custom designs
framework
TACHYONS (tachyons.io)
A Css Toolkit
framework
UIkit (getuikit.com)
A lightweight and modular front-end framework for developing fast and powerful web interfaces.
framework css
Base CSS Framework (getbase.org)
A Rock Solid, Responsive CSS Framework

HTML

html
HTML5 Boilerplate (html5boilerplate.com)
The web’s most popular front-end template
html
HTML Entities (www.toptal.com)
A delightful reference for HTML Symbols, Entities and ASCII Character Codes

Htmlwidgets

htmlwidgets rmarkdown
HTML Widgets - R Markdown: The Definitive Guide (bookdown.org)
htmlwidgets
How to write a useful htmlwidgets in R: tips and walk-through a real example (deanattali.com)
An excellent blog post with many tips for best practices when building an htmlwidget.
htmlwidgets github
JohnCoene/countup (github.com)
countup.js R htmlwidget
htmlwidgets post
Use JavaScript visualization libraries at the R console (rstudio.com)
htmlwidgets rstudio-community
How can I include the javascript and css for html widgets such as Leaflet when using a custom shiny UI? (community.rstudio.com)
htmlwidgets post
vegawidget: UseR! 2019 Presentation (vegawidget.rbind.io)

jQuery

jquery
The jQuery Mega Cheat Sheet (makeawebsitehub.com)
jquery
jQuery is used in 86% of websites (almanac.httparchive.org)

JS

js
Drag & Drop Elements with Vanilla JavaScript and HTML (alligator.io)
js
An Intro To Using npm and ES6 Modules for Front End Development (wesbos.com)
js
JSDoc (dev.to)
Document your Javascript code with JSDoc
js deps post
Getting Started With Parcel (medium.com)
js post
5 Handy Applications of JavaScript Array.from() (dmitripavlutin.com)
js post
Simplify your JavaScript – Use .some() and .find() (medium.com)
js github
kentcdodds/10-practical-js-features (github.com)
10 practical JavaScript features
js github
ImmoweltGroup/workshop-js-fundamentals (github.com)
Workshop materials focusing on JavaScript fundamentals
js bundle
snowpack (www.snowpack.dev)
Build web applications with less tooling and 10x faster iteration. No bundler required.
js post
How to find the max id in an array of objects in JavaScript (www.danvega.dev)
js post
JavaScript Math: Find the lowest value in an array - w3resource (www.w3resource.com)
js post
Code Documentation for JavaScript With JSDoc: An Introduction (www.valentinog.com)
js post
Finally Understand the JavaScript Reduce Method (alligator.io)
js event animation
How to Capture CSS3 Animation Events in JavaScript (www.sitepoint.com)
js
Quokka (quokkajs.com)
Live Scratchpad for JavaScript in your editor
js
RunJS (runjs.dev)
Write and run JavaScript instantly
js learn post
How to use the Drag and Drop API (flaviocopes.com)
js tooling
ESLint (eslint.org)
Find and fix problems in your JavaScript code
js tooling reference
ESLint Rules (eslint.org)
ESLint Documentation

JS Library

jslib
JustGage (justgage.com)
JustGage is a handy JavaScript plugin for generating and animating nice & clean gauges
jslib
Scene.js (daybrush.com)
Scene.js is a JavaScript Animation Library
jslib post
The Beginner’s Guide to Chart.js (www.stanleyulili.com)
jslib
Timesheet.js (sbstjn.com)
Beautiful time tables with HTML, JavaScript and CSS …
jslib
Mousetrap (craig.is)
Keyboard shortcuts in Javascript
jslib
List.js (listjs.com)
Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.
jslib
clipboard.js (clipboardjs.com)
A modern approach to copy text to clipboard
jslib
Timeline JS (timeline.knightlab.com)
Easy-to-make, beautiful timelines.
jslib
TOAST UI (ui.toast.com)
Make Your Web Delicious!
jslib
Britechart (eventbrite.github.io)
A D3.js based charting library of reusable components
jslib
The Vanilla JavaScript component list (www.reddit.com)
jslib
Muuri (haltu.github.io)
Responsive, sortable, filterable and draggable grid layouts
jslib
Blotter.js (blotter.js.org)
A JavaScript API for drawing unconventional text effects on the web.
jslib post dataviz
10 Open-Source JavaScript Data Chart Libraries Worth Considering (speckyboy.com)
jslib post
11 Javascript Utility Libraries you Should Know in 2019 (blog.bitsrc.io)
jslib
egjs (naver.github.io)
egjs is Javascript components group that brings easiest and fastest way to build a web application in your way.
jslib html
Aris (github.com)
A fast and powerful tool to write HTML in JS easily. Includes syntax highlighting, templates, SVG, CSS autofixing, debugger support and more...
jslib
Moveable (daybrush.com)
Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
jslib data
Datalib (vega.github.io)
Datalib is a JavaScript data utility library. It provides facilities for data loading, type inference, common statistics, and string templates.
jslib animation
vivus.js (maxwellito.github.io)
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.
jslib dataviz post
19 Online Tools for Creating Charts (flatlogic.com)
jslib
LoadingBar.js (loading.io)
Flexible JS Progress Bar Library
jslib dataviz
Carbon Charts (carbon-design-system.github.io)
A reusable framework-agnostic D3 charting library.
jslib animation
Splitting JS (splitting.js.org)
Awesome animated text
jslib
Wired Elements (wiredjs.com)
A set of common UI elements with a hand-drawn, sketchy look.
jslib machine-learning
Friendly Machine Learning For The Web (ml5js.org)
jslib machine-learning nlp
compromise (compromise.cool)
Good-enough natural language processing
jslib machine-learning
Tensorflow.js (www.tensorflow.org)
Machine learning in JavaScript. Develop ML models in JavaScript, and use ML directly in the browser or in Node.js.
jslib machine-learning
brain.js (brain.js.org)
GPU accelerated Neural networks in JavaScript
jslib machine-learning
ml.js (github.com)
Machine learning and numerical analysis tools in JavaScript
jslib vision
tracking.js (trackingjs.com)
A modern approach for Computer Vision on the web
jslib speech
annyang (www.talater.com)
SpeechRecognition that just works
jslib speech
voix.js (github.com)
A JavaScript library to add voice commands to your sites, apps or games.
jslib machine-learning
Swashbuckler AI (swashbuckler.ai)
A simple, complete & opensource library for machine learning at any scale.
jslib statistics
ranjs (synesenom.github.io)
A small library for robust generation of various random variates, testing data against distributions, calculating different statistical properties, or sampling unknown distributions using advanced MCMC methods.
jslib
cleave.js (nosir.github.io)
Formatted text input boxes
jslib
typerjs (github.com)
A dependency-free typing library

JSON

json jslib github
mohsen1/json-formatter-js (github.com)
Render JSON objects in beautiful HTML (pure JavaScript)

Jsquery

jsquery learn
jQuery Learning Center (learn.jquery.com)

Learn

learn js es6
ES6 Tutorial: Learn Modern JavaScript | Scrimba (scrimba.com)
An interactive course introducing JavaScript and ES6
learn
Hoard.fyi (hoard.fyi)
Curated tools & resources for web designers, developers & makers – in a nutshell
learn
roadmap.sh (roadmap.sh)
Roadmaps to becoming a Modern Developer
learn
Interneting Is Hard (internetingishard.com)
Friendly web development tutorials for complete beginners
learn github
HackYourFuture/fundamentals (github.com)
JavaScript fundamentals and resources
learn html
HTML semantics cheat sheet (learn-the-web.algonquindesign.ca)
learn
Simplified JavaScript Jargon (jargon.js.org)
learn
Musical Web Dev (musicalwebdev.com)
JS Resources
learn
CreativeJS (creativejs.com)
CreativeJS Workshop pages
learn
Top 50 Cheatsheets and Reference Guides for JavaScript (speckyboy.com)
learn es6
ES6 Overview in 350 Bullet Points (ponyfoo.com)
learn es6
ES6 Crash Course (laracasts.com)
learn github
leonardomso/33-js-concepts (github.com)
33 concepts every JavaScript developer should know.
learn
Learn to code with free online courses, programming projects, and interview preparation for developer jobs. (freecodecamp.com)
learn
Learn JavaScript (learnjavascript.online)
Learn in an interactive environment. Study short lessons and practice in an intuitive environment guided by automated tests.
learn github
adamelliotfields/notes (github.com)
A collection of notes about various JavaScript topics
learn es6
A Quick Tour Of ES6 (the bits you'll actually use) (jamesknelson.com)
learn
webgems (webgems.io)
Webgems is a goto place for devs and designers to find new resources and more.
learn
scotch.io (scotch.io)
Top Shelf Web Development Training
learn post
Examples of everything new in ECMAScript 2016, 2017, and 2018 (www.freecodecamp.org)
learn
JavaScript Joe (jsjoe.io)
Excellent posts teaching JavaScript concepts.
learn js html
Walking and Traversing the DOM with JavaScript (www.digitalocean.com)
learn d3 dataviz
D3 Tutorials, D3 Screencasts, and a D3 Newsletter (www.dashingd3js.com)
learn
JavaScript: The Modern Parts (amontalenti.com)
learn js
JavaScript Examples (js.freefrontend.com)
learn js modules post
JavaScript modules, the good, the bad and the ugly (dev.to)
learn js css github
30-seconds/30-seconds-of-code (github.com)
learn js post
15 Common Operations on Arrays in JavaScript (Cheatsheet) (dmitripavlutin.com)
learn
JavaScript the Hard Parts: Closures, Scope and Context (www.youtube.com)
learn css html js
30 seconds of code (www.30secondsofcode.org)
learn js jslib
Best of JavaScript (bestofjs.org)
learn js post
How to Use Local Storage with JavaScript (www.taniarascia.com)
learn js post
Destructuring Arrays & Objects (itnext.io)
learn js post
7 Best Use Case of JavaScript Array Method map(), filter() and reduce() (codesquery.com)
learn js
JavaScript (Legacy) | Exercism (exercism.io)
learn js
JS tl;dr (js-tldr.info)
learn js
JavaScript For Cats (jsforcats.com)
An introduction for new programmers. So easy, humans can do it, too!
learn js
MDN JavaScript (developer.mozilla.org)
MDN JavaScript Resources
learn js
Array and Object Explorer (arrayexplorer.netlify.com)
Find the array and object examples you need
learn css app
CSS Diner (flukeout.github.io)
A game for learning CSS

Podcast

podcast
Ladybug Podcast (www.ladybug.dev)
Women Talking Tech with Kelly Vaughn, Emma Bostian, and Ali Spittel
podcast
Syntax (syntax.fm)
A tasty treats podcast for web developers with Wes Bos and Scott Tolinski
podcast
JavaScript Jabber (javascriptjabber.com)
podcast
The R-Podcast (r-podcast.org)
Giving practical advice on how to use R for powerful and innovative data analyses. Hosted by Eric Nantz.
podcast
JS Party (changelog.com)
A community celebration of JavaScript and the web.
podcast
The Bike Shed (bikeshed.fm)
Hosts Chris Toomey and Steph Viccari discuss their development experiences and challenges with Ruby, Rails, and JavaScript weekly on the Bike Shed podcast series.
podcast
Not So Standard Deviations (www.nssdeviations.com)
With Roger Peng and Hilary Parker

R

r
RBootcamp · A free online course about the basics of the tidyverse (r-bootcamp.netlify.com)
r
sourcethemes/project-kickstart-r (github.com)

R Markdown

rmarkdown
Advanced R Markdown Workshop (arm.rbind.io)
From rstudio::conf 2019. Designed for those who want to take their R Markdown skills to the next level.

Shiny

shiny
Sending data from client to server and back using shiny (shiny.rstudio.com)
How to send messages from the browser to the server and back using Shiny
shiny
Sending data from client to server and back using shiny (ryouready.wordpress.com)
shiny rstudio-community
Passing module namespace to embedded javascript function (community.rstudio.com)
shiny rstudio-community
Shiny:sessioninitialized : Javascript on startup (community.rstudio.com)
shiny
Shiny Developer Series (shinydevseries.com)
The goals of the Shiny Developer Series are to showcase the innovative applications and packages in the ever-growing Shiny ecosystem
shiny
Hands-on demonstration of {golem}! | Shiny Developer Series (shinydevseries.com)
shiny
tradestatistics/visualization-with-shiny (github.com)
shiny js libjs post
Introducing sortable to add drag-and-drop to your shiny apps (rviews.rstudio.com)
shiny r-pkg
golem (thinkr-open.github.io)
{golem} is an opinionated framework for building production-grade shiny applications.

State of Web Dev

state-of-web-dev
State of Front-End Toolin 2019 (ashleynolan.co.uk)
Annual Survey of Front-End Developers
state-of-web-dev
State of JavaScript 2019 (2019.stateofjs.com)
Annual Survey of JavaScript Developers
state-of-web-dev
State of CSS 2019 (2019.stateofcss.com)
Annual Survey of CSS Developers

SVG

svg
Feather (feathericons.com)
Simply beautiful open source icons
svg stack-overflow
Do I use <img>, <object>, or <embed> for SVG files? (stackoverflow.com)
svg post animation
How I stopped worrying and learned to animate SVG (medium.com)
svg
unDraw (undraw.co)
Open-source illustrations for every project you can imagine and create
svg
svg-icon (leungwensen.github.io)
An ultimate SVG icons collection DONE RIGHT.
svg
Free Web Illustrations (freewebillustrations.com)
1,500+ Beautiful Free Illustrations for Your Website
svg
Subtle Patterns (www.toptal.com)
Repeating SVG background patterns
svg
SVG Icons (svgicons.sparkk.fr)
Ready to use SVG Icons for the web.
svg
ICONSVG (iconsvg.xyz)
Find, customize & generate common SVG icons for your project
svg
Fresh Folk (fresh-folk.com)
An illustration library of people and objects
svg icon
icofont (icofont.com)
Free icons

Tooline

tooline node debug
How to fix the "Missing write access" error when using npm (flaviocopes.com)
tooline node debug
Node and npm without sudo (johnpapa.net)

Tooling

tooling node
PM2 · (pm2.keymetrics.io)
Advanced, production process manager for Node.JS
tooling node build
Choose: Grunt, Gulp, or npm? (ponyfoo.com)
tooling npm
Modern JavaScript Explained For Dinosaurs (medium.com)
tooling npm build post
Meet Gulp: A Streaming JavaScript Task Runner (slicejack.com)
tooling js
Prettier (prettier.io)
An opinionated code formatter
tooling js
Prettier Options (prettier.io)
Prettier Options
tooling js
Wes Bos' ESLint Configuration (github.com)
tooling js
OnePass' ESLint Configuration (github.com)
tooling node js
Node (nodejs.org)
tooling node js
Node Version Manager (github.com)
tooling node js
Downloading and installing Node.js and npm (docs.npmjs.com)
tooling npm js
Node Package Manager (www.npmjs.com)
tooling js
JavaScript Standard Style (standardjs.com)

Video

video learn
JSConf (www.youtube.com)
The JSConf YouTube channel
video learn
dotconferences (www.youtube.com)
The dotconferences YouTube channel
video learn
The Net Ninja (www.youtube.com)
video learn
Fireship (www.youtube.com)
Excellent, dense YouTube videos about modern web development
video learn
Web Dev Simplified (www.youtube.com)
Many, small, easy-to-follow videos about all things web
video learn
You Gotta Love Frontend (www.youtube.com)
The YouTube channel for the excellent You Gotta Love Frontend conference

VS Code

vscode post
Setting up JavaScript Debugging in Visual Studio Code (medium.com)

Web Components

web-components
Open Web Components (open-wc.org)
web-components
Styled Components (www.styled-components.com)
web-components
Frend (frend.co)
A collection of accessible, modern front-end components.

Last updated on Jan 25, 2020

Edit this page