recentpopularlog in

piperh : coding   613

« earlier  
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
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
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
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
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
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
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
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
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
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
Inclusive Components
blog about inclusive design (accessibility) of webpage components
webdesign  web  design  accessible  accessibility  inclusive  components  aria  a11y  css  code  coding 
november 2017 by piperh
Patterns - The A11Y Project
very handy code and script library for frequent actions and features: dropdowns, accordions, tabs, toggles, buttons, modals, tooltips and more.
webdesign  web  design  code  coding  js  javascript  script  toggle  modal  button  breadcrumb  aria  accessible  accessibility  pattern  menu  accordion  tab  tooltip  player 
november 2017 by piperh
responsive tables Archives - CSS-Tricks
links to several resources about making responsive tables
webdesign  web  design  table  layout  html  code  coding  responsive 
november 2017 by piperh
Unlocking the Benefits of CSS Variables - Jonathan Harrell | CSS Blogger & Teacher, UI/UX Designer, Front-End Developer
Jonathan Harrell says: Overview of the benefits of CSS variables and helpful tips and tricks for working with them. CSS custom properties provide several clear benefits over preprocessor variables
webdesign  web  design  custom  properties  variables  css  code  coding 
november 2017 by piperh
Alt-texts: The Ultimate Guide - Axess Lab
v handy guide to alt texts, explaining some do's and dont's and why.
webdesign  web  design  code  coding  alt  text  image  accessibility  accessible  screen  reader 
november 2017 by piperh
Duck as a Service
A pay service offering live coders at $50/hr, via Skype or Google Hangouts, and using screen sharing
code  coding  webdev  coders  help  support  webdesign  web  design  solve  resolve  problem 
september 2017 by piperh
CSS outline property - outline: none and outline: 0
single page dedicated only to outline: none; says Don't Do It. Explains why 'outline' is important for accessibility
Includes suggestions on alternatives for outline and focus
webdesign  web  design  code  coding  css  outline  focus  accessible  accessibility 
september 2017 by piperh
Remove Unused CSS Rules – Falkus.co
only decent tip seemed to be to use 'Web page performance' in Chrome dev tools, then look for 'Remove unused CSS rules'
webdesign  web  design  webdev  developemtn  code  coding  css  rules  used  unused  remove  performance  chrome  developer  tools  audits 
september 2017 by piperh
Discover the Power of CSS Transforms - Heart Internet Blog - Focusing on all aspects of the web
blog of UK hosting company: "Discover the Power of CSS Transforms". Useful article with lots of code, about using css transforms
webdesign  web  design  css  transform  translate  examples  code  coding  tips  inspiration 
september 2017 by piperh
A Pen by Šime Vidas
css code snippet for nth-last-child: matches the last item only if the list has exactly N items
e.g. for N = 3:
webdesign  web  design  css  code  coding 
august 2017 by piperh
CSS-only numbered lists with "drop" shapes
codepen showing use of css counter. Counter is very well supported in browsers
webdesign  web  design  css  code  coding  list  counter  counter-increment  number  style 
august 2017 by piperh
Does__BEM — work? – Jack Appleby – Medium
evaluation of bem from a developer who's used it a lot. Some more resource links at end of article
webdesign  web  design  css  method  methodology  syntax  code  coding  bem 
july 2017 by piperh
Methods for Equal Height Columns by Craig Fox on CodePen
there's a nice tip about flex: if you specify flex-wrap:wrap; the rows will distribute into the number of columns you want
webdesign  web  design  code  coding  css  html  equal  height  columns  methods 
july 2017 by piperh
bojler
They say: Bojler is an email boilerplate and a guideline for writing HTML code that will render correctly across each of the most popular email clients. Uses 12-column grid in a 600px container. Has components
email  html  design  code  coding  css  boilerplate  template 
june 2017 by piperh
BEM by Example | Sparkbox | Web Design and Development
They say: BEM naming provides three specific benefits:
• communicates purpose or function
• communicates component structure
• sets consistent low-level specificity for styling selectors
webdesign  web  design  css  bem  naming  code  coding  block  element  modifier 
june 2017 by piperh
FlexBox cheatsheet
webpage with flexbox declarations and values to copy. Nothing else
webdesign  web  design  flex  flexbox  cheatsheet  code  copy  coding  paste  syntax  css 
june 2017 by piperh
The Tools of an HTML Email Workflow | CSS-Tricks
really handy roundup of templates and tools and services for html email.
graphic  web  design  email  publicity  promotion  html  template  code  coding  module 
may 2017 by piperh
the new code – Better Links for Printed Web Pages with JavaScript
article about, and code for, printing link url's as footnotes only if printing hard copy. Also links to technique for making hidden links print next to link text on hard copies, though of course it changes the text flow.
webdesign  web  design  code  coding  print  link  url  hard  copy  hidden  js  javascript  script  css 
may 2017 by piperh
Semantic UI
they say: Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Looks interesting - some ready-built js for things like accordion
webdesign  web  design  framework  structure  development  theme  ui  code  coding  html  css 
may 2017 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read