Web Development Tools¶

Resources¶

Asset management for web¶

Cloudinary - free account available¶

Cloudinary

ClipArt¶

Open ClipArt

Other¶

SVG Playing Cards

Tools¶

Emmet - Code editor helper
- Expand html shortcuts
- Can really reduce the amount of typing necessary to to create a page.
browser-sync - Basic local server. Avoid the hassle of Webpack
browser-sync start --server --directory --files "**/*"
Images
Placement Images List
Hold It
Prototyping tools
Random User Generator - get list of users.
UIFaces - Faces for user interfaces
CSS Flat Mobile Devices - Prototype devices in css.
Lists - Content for prototyping
Combine JS files
Requirejs - Using Webpack now
- For r.js to work (without explicit path) npm install -g requirejs
Generating Color Palettes
Colors Palette Generator
Canva Color Palette
Pictaculous
Color Explorer - can upload an image

CSS and SCSS¶

Using sassc and libsass
libSass
Export the library location so node-sass can use it.
Compiling compass sass with sass c library.
- sass –compass sass/styles.scss test,css - seems to read the compass config.rb file to find paths.
Maintainable CSS
BEM (block, element, modifier) methodology
CSS Loaders

Resources¶

Fixed Menu - Fix menu to the top
CssDB
Animista
Atomic CSS - css for component-based frameworks

Seo¶

MegaTags - OpenGraph tag generator

Linting CSS and SCSS¶

Install stylelint, stylelint-config-standard
- npm install stylelint stylelint-config-standard

Add stylelint in package.json

  "stylelint": {
    "plugins": [
      "stylelint-scss"
    ],
    "extends": "stylelint-config-standard"
  }

Stylelint Notes¶

stylelint-config-sass-guidelines - scss stylelint rules
Stylelint webpack plugin
- const StylelintPlugin = require('stylelint-webpack-plugin')
- new StylelintPlugin({syntax: 'scss', emitErrors: false, lintDirtyModulesOnly: true})
stylelint
- npm install --save-dev stylelint stylelint-config-sass-guidelines stylelint-config-standard stylelint-scss stylelint-webpack-plugin

config in package.json

"stylelint": {
    "plugins: [
        "stylelint-scss"
}

PostCSS Notes¶

Config notes: Postcss Cli - Config section explains postcss.config.js
- Postcss Next in Webpack - config postcss.config.js

Font Awesome¶

Font Awesome icon as part of before pseudo class using scss. StackOverflow Font Awesome Icon as CSS Content

.a:after {
    // Import mixin from font-awesome/scss/mixins.scss
    @include fa-icon();

    // Use icon variable from font-awesome/scss/variables.scss
    content: $fa-var-exclamation-triangle;
}

Fonts¶

Web Font Loading Recipes
Awesome Fontstacks - fonts that go together
Fonts Squirrel

Icons - Free¶

Open Iconic
Octicons
Entypo
Bytesize Icons
Material Icons
Ionicons
Dripicons
Ikons
SmartIcons
Feather Icons - Install with npm install feather-icons

Web Framework¶

Foundation
- Setup a new project foundation new
uikit
Clarity Design System

Templates¶

CoreUI - Admin template
flakes - Design and frontend framework for dashboard.
Themezy
Templated
Admin tools
- Grafana - analytics and monitoring visualization
Framework7 - mobile web template
W3 Layouts
Freshdesign Templates

Video¶

Videvo

How to¶

Parallax
David Walsh - Used initially
Keith Clark - nice 3d effect
w3schools demo - Tried this one
Pure Css - 3d effect
Carousel
Owl Carousel - image strip carousel
- Owl Carousel Fullscreen
- Responsive Site Using Owl
Vegas Fullscreen Slideshow
slick - scss for css

Web Authentication¶

JWT¶

Jason Web Tokens

Rest¶

Response Codes: Response Codes
HTTP Status Codes: HTTP Status Codes
Details:
- 200 OK
- 201 Created
- 202 Accepted
- 304 Not Modified
- 400 Bad Request
- 401 Not Authorized
- 403 Forbidden
- 404 Not Found
- 500 Internal Server Error
- 501 Not Implemented
- 503 Service Not Available

Web Colors¶

I’m not a designer so need something very basic.
- Web Developer Color Guide
  - White
  - dark gray
  - light gray
  - Base color
  - Accent color
Color Calculator

Last update: April 13, 2020 16:50:19