ocidique's opinionated dev bookmarks

List of bookmarked (reasoned) front end development resources that I use on a regular basis

• Guides & Approaches

  • CSS
    • First thing to understand in CSS: The CSS Box Model
    • Flexbox: A Complete Guide to Flexbox
    • Grid: A Complete Guide to Grid
    • CSS TRICKS: All kinds of CSS resources
  • JavaScript & TypeScript
    • JavaScript: The Good Parts
    • TypeScript Deep Dive
  • HTML
    • HTML5
  • Design
    • Nielsen Norman Group: Lots of research-based design related articles
    • Design Thinking
    • Design Systems 101
    • Design Systems: Design system articles and repos
  • Architecture
    • Atomic Design
    • BEM: Block, Element, Modifier
  • Git: the one and best version control system
    • Conventional Commits: the best way

• Accessibility

  • Web Content Accessibility Guidelines (WCAG) 2.2
  • Web Content Accessibility Guidelines (WCAG) 2.1
  • Google Lighthouse: audits for performance, accessibility, progressive web apps, SEO etc.
  • Extending Semantics & Accessibility
  • Deque Accessibility Tools: Chrome Extension and tools for automatic and guided testing
  • NVDA Screen reader: Only for Windows
  • JAWS Screen reader: Only for Windows
  • TODO: add color contrast pages?

• Workflow & Tools

  • npm: Default package manager for Node.js
  • Yarn: Fast, reliable, and secure dependency management.
  • webpack: Module bundler
  • Vite: front end tooling
  • Volta: JavaScript tool manager
  • Storybook: Storybook is an open source tool for developing UI components in isolation

• Documentation

  • Docusaurus: Docusaurus makes it easy to maintain Open Source documentation websites
  • Mermaid: Mermaid lets you create diagrams and visualizations using text and code.
  • PlantUML: UML diagrams.

• Frameworks & Libraries

  • CSS
    • TailwindCSS: probably the best CSS thingy out there (2022)
  • JavaScript
    • React: My weapon of choice as UI library
      • Zustand: Bear necessities for state management in React
      • Redux: A bit more complex state handling, might not be perfect fit for simpler use cases
      • MobX: Simple, scalable state management
      • useHooks: Easy to understand React Hook recipes
      • React Hook Form: Performant, flexible and extensible forms with easy-to-use validation.
      • react-jsonschema-form
      • React Table
    • Vue.js: Framework for building user interfaces
    • AngularJS: Open source web-application framework
    • Express: Fast, unopinionated, minimalist web framework for Node.js
    • Strapi: open-source headless CMS built with Node.js
    • Ember: Framework for web applications
    • Awesome lists?
  • Python
    • Django: a high-level Python web framework that encourages rapid development and clean, pragmatic design
    • FastAPI: a modern, fast (high-performance), web framework for building APIs with Python
    • Flask: Python microframework
    • TODO: add Awesome lists

• Cross Browser

  • Modernizr: Library for detecting browser features
  • normalize.css

• JavaScript

  • Useful libraries
    • Bluebird: Promise library
    • reveal.js: The HTML Presentation Framework

• UI

  • Design Libraries
    • Material Design
  • Colors
    • Flat UI color picker
    • BrandColors: Official color codes for the world's biggest brands, good for study purposes
    • coolors.co: The super fast color schemes generator
    • Color Tool: A color tool for picking and visually comparing color schemes
  • Typography
    • Google Fonts
  • Icons
    • Font Awesome: Large icon library, free and paid licenses
    • Flaticon: free icons
    • heroicons: Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS
  • Images
    • PictureFill: A responsive image polyfill
    • Compressor.io: Compress and optimize your images, up to 90% file size reduction
    • Better SVG Fallback: Blog post
    • SVG Minifying: SVGO's Missing GUI
  • Transitions & Animation
    • Animate.css: CSS animations
  • Loading
    • TODO: add loading animation examples?
  • Animation
    • Anime: JavaScript animation engine. Outdated? Last release 2020

• Useful Widgets

  • Image & Gallery
    • PhotoSwipe: JavaScript gallery, no dependencies.

• Performance

  • TODO: check for latest perf tools

• Security

  • Snyk: a developer security platform for securing code, dependencies, containers, and infrastructure as code.
  • SonarQube: Code Quality and Code Security

• Testing

  • Playwright: End-to-end testing for modern web apps
  • Jest: JavaScript testing framework
  • Enzyme: JavaScript Testing utility for React
  • Cypress: end-to-end testing
  • BackstopJS: Visual regression testing for web apps

• Utilities

  • Cookie Consent: Solution to the EU cookie law. Free and open source

• Analytics

  • Google Analytics: not GDPR compliant anymore?
  • Plausible: Google Analytics alternative
  • Piwik Pro: Google Analytics alternative

• Tools

  • Visual Studio Code: Best code editor out there (2022)

    • Plugins
      • One Dark Pro -theme: Atom‘s iconic One Dark theme for Visual Studio Code
      • vscode-icons: A must have icons in the file explorer
      • Git Lens: - git blame annotations, code lens, etc.
      • Prettier: Code formatter, works with various libraries
      • Tailwind CSS IntelliSense
      • Todo Tree: browse files with TODO etc. comments

  • Figma: Weapon of choice for UI design prototyping, multi platform

    • Plugins
      • Unsplash: Easily access stock photos and improve UI prototyping
      • Design Tokens: Export Figman design tokens as JSON, e.g. if you are using Tailwind naming this will be your saviour. With parser you can generate tailwind configs from your Figma.
      • A11y - Color Contrast Checker

  • Sketch: design tool for macOS

  • iTerm2: macOS Terminal Replacement

    • oh-my-zsh: Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration.
    • powerlevel10k: best zsh theme

  • Hammerspoon Shiftit: window management for macOS