Web-Development-Tools

A collection of libraries, tutorials, and other handy web development resources.

Good Practices - Conventions for naming, organization, components, etc

• Good Practices

Libraries

C#

Caching

• Lazy Cache

Code Helpers

• Guard Classes: A simple NuGet package with guard clauses.

CSV

• CSV Helper: read and write CSV files

LINQ to SQL

• LINQKit: Extensions for LINQ to SQL and Entity Framework

Wordpress

Queries

• WordPress Query Builder

Front-end

• Smol CSS Snippets: Very helpful CSS snippets

User Interface

Accordion

• Animated Accordions without JavaScript

Add to Calendar

• Add-to-Calendar Button
• Calendar Links

Avatars

• unavatar

Carousel (sometimes referred to as a slider or swiper)

• Flickity
• Keen Slider
• Swiper

Comment systems

• Giscus (using Github discussion for commenting on blog posts)
  • Giscus
  • Migrating existing Discus comments
  • Using Octokit.GraphQL to interact with the GitHub discussions API

Date Picker

• Pikaday
• Air Datepicker

Forms

• Accessible Floating Input Labels
• :in-range psuedo class

Fonts

• Untitled UI Best Free Fonts

Frameworks

• Bulma
• Bulmaswatch: themes for Bulma

Icons

• Atlas Icons
• Material Icons
• Remix Icons

Loading Animations

• CSS Loaders

Pagination

• Paged.js

Tags

• Tagify

Toasts

• Toastify

Tooltips

• Popper

Tools

Colors

• Color palette generator

Fonts

• UI Font tester

JSON

• Online JSON Querying Tool
• JSON Broswer

Tutorials

Favicons

• Building an apaptive favicon

Scroll Animations

• A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()

Reference

Azure

• App Service Deployment Slots Tips/Tricks

Components/Modules

• Dialog Building a dialog component
• Navigation Build an accessible main navigation of a website

CSS

• Modern CSS Reset
• :has() selector use cases
• An Interactive Guide to Flexbox
• Grid Layout starting point

Favicons

• How to Favicon the Modern Way

Images

Source Sets

• https://dev.to/activenode/srcset-sizes-picture-media-what-you-might-not-have-known-31nf

Image Overlays

• https://codepen.io/sonawaneapekshit/pen/RwbmOgW

Lists

• Creative List Styling

REGEX

• US PHONE: ^([2-9]\d\d) [2-9]\d\d-\d{4}$

Select Elements

• Custom Select Styles with Pure CSS
• customizable select part 1 of 5

HTML

• Accordians (details element)
• Inputmode