recentpopularlog in

piperh : code   793

« earlier  
Awesome accordion menu using only HTML & CSS
nice expanding/collapsing menu with no js. Has an extra 'accordion' effect which is daft, ignore it, the main expanding feature seems good (but test it thoroughly)
webdesign  web  design  menu  expand  collapse  css  vanilla  code 
9 hours ago by piperh
Make it hard to screw up driven development | CSS-Tricks
collection of tools for validating, checking and testing code
webdesign  web  design  tool  online  lint  automated  test  testing  valid  validate  code  html 
4 days ago by piperh
How A Screen Reader User Accesses The Web: A Smashing Video — Smashing Magazine
a Smashing Mag webinar video with Léonie Watson - a blind screen reader user. About usable and technical accessibility
webdesign  web  design  accessibility  accessible  blind  user  css  code  coding  video 
6 weeks ago by piperh
How @supports Works | CSS-Tricks
about the usefulness or not of @supports
webdesign  web  design  code  coding  @support  css  query  queries 
7 weeks ago by piperh
BEM: 4 Hang-Ups & How It Will Help Your CSS Organization
their intro: "addresses four common misconceptions about BEM and explains how and why the CSS naming convention of Block Element Modifier helps solve organizational thinking around class names."
webdesign  web  design  code  coding  css  bem  block  element  modifier 
7 weeks ago by piperh
The Many Ways to Change an SVG Fill on Hover (and When to Use Them) | CSS-Tricks
Ways to colour svg, inline or as img. Interesting info and ref about svg and css filters, and a weird way to specify rgba colours using matrix
webdesign  web  design  code  coding  colour  color  filter  css  svg 
9 weeks ago by piperh
How To Architect A Complex Web Table — Smashing Magazine
author says: Tables frequently appear on the web but aren’t easy to design and code. This illustrated guide explains the table anatomy and how to build a table, keeping in mind its future elaboration.
webdesign  web  design  table  complex  code  coding  construct  build 
9 weeks ago by piperh
Palettte App
a curious tool for generating colour code - with sliders for each of hue, saturation and lightness - cool for instantly seeing the effect of changing values
color  colour  value  code  hsl  hsv  rgb  hex  palette  tool  webdesign  web  design  graphic 
9 weeks ago by piperh
Shapy | Gradient Generator
gradient shape editor that generates the css code
webdesign  web  design  css  gradient  tool  editor  generator  code  experiment  try  test 
10 weeks ago by piperh
The Actual Browser Problems with Unquoted Attributes | CSS-Tricks
about using quote marks to enclose attribute value in html. In html5 it's optional and only required if there's a space (and a few other characters as well). So if an item has two or more classes you must enclose in quotes.
If in doubt, use quote marks always (though you don't have to)
webdesign  web  design  webdev  development  code  coding  html  attribute  quote  quotemark  value  space 
11 weeks ago by piperh
140 HTML Color Names - html-color-names.com
list + swatches of html named colours, with their hex and rgb refs
webdesign  web  design  webdev  development  html  colour  color  colors  name  names  code  hex  rgb  reference 
january 2019 by piperh
Minimal Google Analytics Snippet | Minimal Analytics
author says: A snippet for tracking page views on your website without having to add external libraries. No need to add Google Tag Manager and Analytics libraries. Do not use if tracking AdWords.
webdev  seo  tracking  analytics  code  snippet  google 
january 2019 by piperh
CSS Accordion Slider: A tool for generating accordion sliders
Handy code generator for accordion style panels. You can only have one open at a time - open one, the previous closes. css only, no js. Some options can be configured first via sliders. Horizontal and vertical options.
webdesign  web  design  css  html  code  generator  configure 
january 2019 by piperh
jquery - JavaScript EU cookie law banner not removing - Stack Overflow
an important mod for the cookie consent code found at
https://gist.github.com/bavington/6727776
This mod solves the problem on tria site where it prevented the onload script in body tag from adding the .loaded class.
cookie  law  eu  gdpr  consent  privacy  comply  compliance  code  modification  modify  stackoverflow  user  js  javascript  script 
january 2019 by piperh
Simple EU Cookie Law Banner JavaScript · GitHub
cookie consent code that I used on barcelonaprints and tria.
It clashes with some js "onload add class" code I wanted in the tria body tag.
This stackoverflow page solved the problem on tria: https://stackoverflow.com/questions/32573965/javascript-eu-cookie-law-banner-not-removing
webdesign  web  design  webdev  development  code  privacy  gdpr  consent  cookie  js  javascript  script 
january 2019 by piperh
Cool Backgrounds
interesting backgrounds: trianglify etc plus the web code for installing on a site
webdesign  web  design  graphic  background  image  colour  gradient  animated  generator  code 
january 2019 by piperh
The Front-End Checklist - ✨ Your best Front-End Tool ✨
a checklist of everything to look out for when making a site live. Some essential stuff, some less important, depending on type of site, but v handy reminder of everything
webdesign  web  design  webdev  development  frontend  front  end  checklist  list  reminder  tips  todo  code  coding 
january 2019 by piperh
A11Y Style Guide
they say: This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist.
webdesign  web  design  a11y  accessibility  accessible  style  guide  html  css  code  coding 
november 2018 by piperh
Editorial Layouts, Floats, and CSS Grid | Rob Weychert
shows how css grid doesn't accommodate text wrap around images - you end up using a float like always, which seems to undermine the usefullness of grid. (I can't believe this use case wasn't an important consideration in the implementation of grid).
See addendum linked to Rachel Andrew and css exclusions (currently only in Edge)
webdesign  web  design  css  grid  code  coding  width  columns  float  wrap  around  text  editorial  layout  gutter  margin 
november 2018 by piperh
Responsive images with constant aspect ratio
a codepen using the top padding trick to maintain aspect ratio in responsive code
webdesign  web  design  css  code  coding  aspect  ratio  proportion  responsive 
november 2018 by piperh
You're using <em> wrong
great explanation of difference between <i> and <em> tags. I can use <em> now when appropriate and discard my historical, and justified, reluctance. I am vindicated!
webdesign  web  design  code  coding  i  em  italic  emphasis  stress  sense  markup  html 
november 2018 by piperh
30 Seconds of CSS
author says: A curated collection of useful CSS snippets ...
Divided and listed into categories: layout, visual, animation, interactivity, other. With explanations. Handy. I didn't know about ::selection or user-select:none or focus-within. Technique for overflow gradient. Checkbox hack toggle.
webdesign  web  design  css  snippets  code  coding  html  reference  copy 
november 2018 by piperh
Constant width to height ratio
nice bit of css that maintains aspect ration and allows content in the div, BUT, if content is larger than the div you have to deal with overflow, or the div will grow, thereby spoiling the aspect ratio. Image is best as background img.
webdesign  web  design  code  coding  css  width  height  ratio  aspect  constant  maintain 
november 2018 by piperh
UI Movement - The best UI design inspiration, every day
UI effects, free. Interesting page loading effects and loads of other components and layouts
webdesign  web  design  ux  ui  inspiration  code  loading  effects  page  animations 
november 2018 by piperh
SVG Filters
Playground for fiddling with and getting code for SVG filters.
graphic  design  image  text  effect  svg  tester  code  filter  playground 
november 2018 by piperh
SVG Marching Ants | CSS-Tricks
marching ants effect on outlines using svg
webdesign  web  design  graphic  svg  css  code  coding  marching  ants  animation  animated 
october 2018 by piperh
Fancy Border Radius Generator
generates code for corner radius (border-radius) using 8-figure syntax. You can experiment and get interesting effects, 'specially setting one or more corner to 0. Has draggable corner points. Handy.
webdesign  web  design  code  generator  border-radius  border  corner  radius  shape 
october 2018 by piperh
Pure CSS: Accessible Checkboxes and Radios Buttons – Clarity Design System – Medium
step-by-step how to style an accessible custom checkbox. Uses opacity:0 to hide the default checkbox
webdesign  web  design  checkbox  accessible  style  css  code  coding  howto  custom  customise  input 
october 2018 by piperh
What CSS prefixes should I use?
shows necessary prefixes. Date shown when I booked this (7.10.18) was 31.10.17, so it's nearly 1 year old - so don't know how often this is updated.
webdesign  web  design  css  prefix  prefixes  code  coding 
october 2018 by piperh
Using Feature Detection to Write CSS with Cross-Browser Support | CSS-Tricks
in-depth article about dealing with browser feature support. Interesting but quite techy. Saves time and hassle if you avoid dodgy features? But still, worth reading
webdesign  web  design  css  html  support  browser  feature  detection  code  coding 
september 2018 by piperh
GRID: A simple visual cheatsheet for CSS Grid Layout
css grid layout/code chart + diagrams show position effect. Divided into 'container' and 'children', like flexbox. Each main declaration has brief intro text. Very clear, simple reference.
webdesign  web  design  layout  css  grid  cheatsheet  reference  code  position  chart 
august 2018 by piperh
A Case for CSS Variables – Jody LeCompte – Medium
title and subtitle:
A Case for CSS Variables
Comparing CSS Variables and Preprocessor Variables
webdesign  web  design  css  code  coding  variables  custom  properties  preprocessors 
august 2018 by piperh
css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code
tool to convert css to sass. (you never know Peter, unlikely as it seems, maybe one day you'll need this)
webdesign  web  design  css  sass  code  coding 
july 2018 by piperh
A Beginner's Guide to Structured Data | Brandpoint
useful and clear explanation of schema structured content markup. Worth reading
marketing  schema  seo  ranking  code  coding  example  google  html  markup  itemprop 
july 2018 by piperh
Structured Data Testing Tool
Google tools: example of html code including schema tags and attributes
marketing  schema  seo  ranking  code  coding  example  google  html  markup  itemprop 
july 2018 by piperh
Getting Started - schema.org
schema.org article about getting started and how to use schema markup
tria  marketing  schema  seo  optimise  optimisation  serps  markup  code  coding  ranking 
july 2018 by piperh
How to Boost Your SEO by Using Schema Markup
explanation of schema markup, by Neil Patel who really fancies himself as a top entrepreneur
tria  marketing  schema  seo  optimise  optimisation  serps  markup  code  coding  ranking 
july 2018 by piperh
Drawing Images with CSS Gradients | CSS-Tricks
technique with code examples for drawing stuff using only css + html.
webdesign  web  design  css  html  draw  drawing  browser  background  code  coding 
july 2018 by piperh
BEM For Beginners: Why You Need BEM — Smashing Magazine
their summary: CSS styles isolation is the most frequent start point of the BEM usage. But this is the least that BEM can give you. BEM brings a system approach in your project and keeps it from the mess.
webdesign  web  design  bem  css  method  methodology  code  coding 
june 2018 by piperh
GitHub - vladocar/CSS-Micro-Reset: Minimal barebone CSS Reset
a really minimal css reset, plus some scolding about using resets. I like it. Handy.
webdesign  web  design  css  reset  micro  minimal  small  tiny  code  coding 
june 2018 by piperh
Don’t Use The Placeholder Attribute — Smashing Magazine
intro says: The placeholder attribute contains a surprising amount of issues that prevent it from delivering on what it promises. Let’s clarify why you need to stop using it.
Quite convincing argument. He says put descrip text in between label and input
webdesign  web  design  placeholder  label  tag  html  code  coding  attribute  form  input 
june 2018 by piperh
Cards
in-depth exploration of writing code for a card. Some of it seems absurd but there is useful stuff to learn
webdesign  web  design  card  code  coding  html  css  semantic  accessibility  accessible 
june 2018 by piperh
Keyframes.app
installed into Chrome 5.6.18, works like it says, generates animation css code
webdesign  web  design  css  keyframes  animate  animation  app  extension  timeline  browser  tool  code  coding 
june 2018 by piperh
What is JSON? An Introduction and Guide for Beginners
1st para: If you’re new to web development and have some basic knowledge of HTML, CSS, and possibly a little bit of JavaScript, a practical area in which to expand your front-end skills is JSON.
from the Web Tools newsletter guy, Louis Lazaris
webdesign  web  design  code  coding  json  guide  introduction  js  javascript  script  object  notation 
may 2018 by piperh
Introduction · Front-End Developer Handbook 2018
Front-End Developer Handbook 2018. Lots of links and reference to learning, tools, advice, lists, front end, back end, js and lots more
webdesign  web  design  css  html  learn  learning  code  coding  tools  js  javascript  script 
april 2018 by piperh
How to Hand Code SVG
tutorial on hand-coding svg shapes: "... you can hand-code simple shapes quite easily, without needing to open a graphics application."
webdesign  web  design  graphic  vector  svg  hand  code  coding  inline  shape  element 
april 2018 by piperh
A Comprehensive Guide to Clipping and Masking in SVG
article title: A Comprehensive Guide to Clipping and Masking in SVG
webdesign  web  design  svg  clipping  masking  clip  mask  code  coding  path  reference 
april 2018 by piperh
<use> - SVG: Scalable Vector Graphics | MDN
about the <use> element. I think it's valid within svg - allows one to take just a part of an svg document
webdesign  web  design  svg  use  <use>  element  node  code  coding 
april 2018 by piperh
CSS Gradient
css colour gradient generator. Generates hex and rgb, but not hsl. Has some premade favourites
webdesign  web  design  color  colour  gradient  generator  css  code 
march 2018 by piperh
Espresso — The Web Editor for Mac
mac website-building software. $80 in March 2018.
mac  espresso  webdesign  web  design  programme  app  software  build  code  write  edit  editor 
march 2018 by piperh
Assortment - For the practical developer
Assortment aims to provide detailed tutorials (and more) for developers of all skill levels
webdesign  web  design  tutorials  tips  development  code  coding 
march 2018 by piperh
Unused CSS finder: detect unused CSS selectors in multiple pages
1.3.18 beta version, still testing they say. Find unused css
webdesign  web  design  css  unused  find  code  coding  tool  service 
march 2018 by piperh
HTML Symbols, Entities, Characters and Codes — HTML Arrows
Toptal (recruitment company), reference for html character codes. Useful but annoying gaps
webdesign  web  design  html  character  entity  reference  hex  unicode  code  symbol  arrow 
february 2018 by piperh
How to create a fully responsive navbar with Flexbox
tutorial to make a navbar with flex. Most of it I already know but has handy tips about 'order' and width.
webdesign  web  design  css  flex  flexbox  code  coding 
february 2018 by piperh
Free customizable SVG Backgrounds
a set of svg patterns for backgrounds. Adjustable on the web page - colour, angle, opacity, scale, and generates the css
webdesign  web  design  background  svg  pattern  code  generator 
february 2018 by piperh
Clippy — CSS clip-path maker
handy code generator for css clip-path. Live demo of result + copyable code. (Use this to generate polygons for css shape-outside?)
webdesign  web  design  code  coding  clip-path  image  css  generator  shape  points 
february 2018 by piperh
CSS Arrows From CodePen - Freebie Supply
collection of (some animated) css arrows from codepen. Possibly useful for speed - grab a bit code so as not to figure out angles by trial and error
webdesign  web  design  css  codepen  arrows  css-only  examples  code 
february 2018 by piperh
HEML
they say: Quickly craft clean, responsive emails
html  email  design  language  code  coding  markup 
january 2018 by piperh
New flexbox guides on MDN – Mozilla Hacks – the Web developer blog
by Rachel Andrew. She says: ... Flexbox now sits alongside Grid and Box Alignment to form a new way of thinking about layout for the web. It is useful to reflect this in the documentation. ...
webdesign  web  design  css  flex  flexbox  resource  guide  reference  code  coding  mozilla  grid  layout 
january 2018 by piperh
30 seconds of code
collection of Javascript snippets. Not much use to me now (Jan 2018) but maybe in the future ... ?
webdesign  web  design  code  coding  js  javascript  script  snippets  resource 
january 2018 by piperh
Learn CSS Grid for free
Course screencast to learn css grid
webdesign  web  design  code  coding  grid  learn  screencast  css  layout 
december 2017 by piperh
Welcome to Scrimba
Screencasts to learn codsing. They say: 1. Pause and interact with the code. Scrimba lets you interact with the code inside the screencast whenever you want.
2. etc
webdesign  web  design  code  coding  learn  learning  screencast  teach  course 
december 2017 by piperh
Specificity Visualizer
Specificity Visualizer

A visual way to analyze the specificity of selectors in CSS.
webdesign  web  design  webdev  code  coding  development  css  specificity  tool  online  analysis  analyze  selectors 
december 2017 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read