recentpopularlog in

piperh : webdesign   2577

« earlier  
Should I Use JavaScript to Load My Web Fonts? | Filament Group, Inc., Boston, MA
dec 2018 article comparing current font loading with css-only and with js
webdesign  web  design  font  loading  js  javascript  script  css  foit  fout  webfont 
4 days ago by piperh
Getform | Easy form endpoints for your forms
Form backend platform for designers and developers
webdesign  web  design  webdev  form  backend  data 
6 days ago by piperh
Observe a story
nice logo for a west Texas observatory with animation
webdesign  web  design  inspiration  animation  logo  graphic  css  animate 
6 days ago by piperh
An Introduction to CSS Shapes | Codrops
check MS support for css shapes before using
webdesign  web  design  css  shapes  text  flow  layout 
7 days ago by piperh
Child and Sibling Selectors | CSS-Tricks
simple explanation of the different descendent, child and sibling selectors
webdesign  web  design  css  selector  child  sibling  descendent  combinator 
7 days ago by piperh
SmugMug's Privacy Policy
smugmug's privacy policy page. Possible sample text for copying, though would need translation from English.
webdesign  web  design  cookie  text  privacy  policy  smugmug 
9 days ago by piperh
Cookies | ICO
Information Commissioners Office, about cookies
webdesign  web  design  webdev  development  privacy  cookies 
11 days ago 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 
14 days ago by piperh
Why I use the BEM naming convention for my CSS - YouTube
a geezer explains about his bem and why you should use it or at least some kind of naming convention.
He says OK css nesting on small sites. On big sites will lead to problems.
You end putting classes (sometimes several) on every element in the html.
bem ties in well with sass - both use the double underscore.
webdesign  web  design  css  bem  naming  convention  block  element  modifier  sass  class 
14 days ago by piperh
Why using `tabindex` values greater than “0” is bad – Karl Groves Web Accessibility Consultant, Web Accessibility Auditing, Web Accessibility Training
last para: ... above reasons make it clear that tabindex creates more problems than it solves ...
Article about various ways in which 'tabindex' values can cause problems. Convincing.
webdesign  web  design  accessibility  accesible  tabindex  value  order  tabbing  tabbed  keyboard 
14 days ago by piperh
What, exactly, is the DOM?
Ire Aderinokum's explanation of the DOM and render tree. Sort of interesting though not helpful for coding in reality. I think she's padding out her blog
webdesign  web  design  dom  render  tree  html  browser 
14 days ago by piperh
Pico - A stupidly simple, blazing fast, flat file CMS.
flat file cms - no database.
They say: Pico makes creating and maintaining a website as simple as editing text files.
webdesign  web  design  cms  flat  file  markdown  pico 
20 days ago by piperh
Publii - Open-Source CMS for Static Site
they say: a new Static CMS with GUI to build an extremely
safe, fast and stylish HTML website
webdesign  web  design  cms  static  website  tool 
20 days ago by piperh
Wired Elements
A set of common UI elements with a hand-drawn, sketchy look. Can be used for wireframes, mockups, or just a fun hand-drawn look.
A bit feeble, but possibly handy someday
webdesign  web  design  components  sketches  elements  hand-drawn  ui  wireframe 
20 days ago by piperh
CSS and Network Performance – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts
techy article about structuring css to allow async drawing of page. Looks like a lot of bother for low-priority return in my case
webdesign  web  design  webdev  development  css  speed  performance  dom  cssom  render  critical 
20 days ago by piperh
Learn  |  web.dev
a google site titled 'Learn'. Extols 'structured learning paths'.
Quite techy, eg load times, network resilience - not about visual design
webdesign  web  design  webdev  development  speed  accessibility  security  google  learning 
20 days ago 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 
20 days ago by piperh
Fun Tip: Use calc() to Change the Height of a Hero Component | CSS-Tricks
complicated demo of using css calc to resize type or images for different window widths, instead of using media queries
webdesign  web  design  scale  responsive  fluid  proportion  aspect  ratio  css  calc 
20 days ago by piperh
How to Use SVG Patterns as Backgrounds
1st para: SVG patterns offer a more flexible approach to repeating a background image on a web page than CSS tiling. Let’s look at why that is, and how you can use them
webdesign  web  design  background  svg  css  pattern  image 
20 days ago by piperh
Simple recommendations for writing text descriptions that make a big difference | Invotra
about writing alt text for best accessibility and best experience for disabled users
webdesign  web  design  accessibility  accessible  alt  text  image 
20 days ago by piperh
howler.js - JavaScript audio library for the modern web
vanilla js library for running audio on the web. Supports many audio formats. I might conceivably find this useful sometime
webdesign  web  design  webdev  development  audio  html5  library  js  javascript  vanilla  sound 
20 days ago 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 
22 days ago by piperh
The Web Accessibility Introduction I Wish I Had - DEV Community 👩‍💻👨‍💻
primer on web page accessibility and the different types of impairment to consider and code for.
webdesign  web  design  accessibility  wcag 
23 days ago by piperh
Improve Animated GIF Performance With HTML5 Video — Smashing Magazine
shows how to use html5 native video instead of animated gif. Also shows how to convert gifs to webm or mp4
webdesign  web  design  animated  gif  webm  mp4  video  html5  animation 
26 days ago by piperh
Grid Tile Layouts with auto-fit and minmax | Geddski
author says: 'auto-fit' was made for this
We use the new auto-fit keyword to create tile layouts. It instructs the Grid to create as many columns of the given size as can fit in the space of the grid container.
webdesign  web  design  css  grid  layout  tile 
27 days ago 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 
27 days ago by piperh
Assistive technology tools you can test with at no cost - Accessibility in government
a gov.uk page explaining how to use free accessibility testing
page heading: Assistive technology tools you can test with at no cost
webdesign  web  design  webdev  development  assistive  accessibility  accesible  tools  test  testing  technology  jaws  dragon  nvda  voiceover  narrator  talkback  screen  readers  free 
27 days ago by piperh
Splicing HTML’s DNA With CSS Attribute Selectors — Smashing Magazine
useful look at attribute selectors, lots of code examples and howtos
webdesign  web  design  css  selector  attribute  html 
29 days ago by piperh
30 Seconds of CSS
snippets of 'useful' CSS. Some handy, some not. Has nice aspect-ratio trick and object-fit example. Interesting use of counter increment. Shows vertical centering achieved by flexbox, display:table and grid methods. Animated hover underline.
webdesign  web  design  css  snippets  examples  code  aspect  ratio  select  center  centre  vertical  centering 
5 weeks ago 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 
5 weeks ago by piperh
Consently - Privacy-friendly and GDPR compliant tracking
their headings: The privacy-friendly and GDPR compliant way to add tracking to your website
Get consent before loading third party tracking scripts.
webdesign  web  design  dev  webdev  development  privacy  cookies  tracking  gdpr  compliance  consent 
5 weeks ago by piperh
Concise Media Queries with CSS Grid
within 1st para author says: with CSS grid we can write our grid rules once, and achieve the desired layout at any screen size with a single rule, and without any framework
webdesign  web  design  css  grid  layout  mq  media  queries  flex  flexbox 
5 weeks ago 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 
5 weeks ago by piperh
htaccess Tester - madewithlove
To test your htaccess rewrite rules, simply fill in the url that you're applying the rules to, place the contents of your htaccess on the larger input area and press "Test" button.
webdesign  web  design  webdev  dev  htaccess  test  tester  rules  rewrite 
5 weeks ago by piperh
GRID: A simple visual cheatsheet for CSS Grid Layout
a simple, clear reference cheatsheet for css grid properties and syntax
webdesign  web  design  cheatsheet  css  grid  layout  reference  syntax  display 
5 weeks ago by piperh
Creating Layouts with CSS Grid — SitePoint
an intro to css grid: The Grid Formatting Context
Adding display: grid to an element triggers a grid formatting context for that element and its children. ...
webdesign  web  design  css  grid  intro  introduction  layout  display 
5 weeks ago by piperh
The Shapes of CSS | CSS-Tricks
interesting list of shapes achievable only with css - with live editable code!
webdesign  web  design  css  shapes  before  after  border  radius  shadow  html  reference 
5 weeks ago 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 
6 weeks ago 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 
6 weeks ago by piperh
Valid CSS Content | CSS-Tricks
about stuff you can inject via the css 'content' property
webdesign  web  design  css  content  pseudo  class  valid  invalid  attribute  property  before  after 
7 weeks ago by piperh
Favicon Checker—See how your favicon hold up across popular browsers, including native dark and light modes.
online tool: Compare your favicons on all major web browsers, including native dark and light modes.
webdesign  web  design  tool  online  favicon  check  checker  fav  icon 
8 weeks ago by piperh
Unbuttoning Buttons | scottohara.me
explains how to make a block of text behave like a button, by using css, aria and js to restyle the button element. Complicated and possibly not worth worrying about
webdesign  web  design  button  css  inline  selector  accessible  reset  style  styling 
8 weeks ago by piperh
Understanding the difference between grid-template and grid-auto
article title: Understanding the difference between grid-template and grid-auto.
Explains about explicit and implicit grids, and grid-template and grid-auto properties
webdesign  web  design  css  grid  layout  template  auto  explicit  implicit 
8 weeks ago by piperh
CSS { In Real Life }
gen article about PWAs - when it's worth considering and when not worth the time investment
webdesign  web  design  pwa  progressive  app 
8 weeks ago by piperh
CSS { In Real Life }
title: Negative Grid Lines
1st para: Did you know you can use negative line numbers to position grid items with CSS Grid?
webdesign  web  design  css  grid  negative  lines  layout 
8 weeks ago by piperh
Selectors Level 3
w3.org page showing specs for types of classes - v useful ref
webdesign  web  design  css  selectors  pseudo  classes  elements  reference 
8 weeks ago by piperh
CSS Layout cookbook - CSS: Cascading Style Sheets | MDN
a few css recipes for commonly used items or patterns, using flex or grid
webdesign  web  design  layout  components  css  flex  grid  recipes  examples  flexbox 
8 weeks ago by piperh
Use Cases For Flexbox — Smashing Magazine
Use Cases For Flexbox: last article of a series by Rachel Andrew on the uses for flex and grid
webdesign  web  design  flex  flexbox  layout  grid  css 
8 weeks ago by piperh
CheckboxRadio
Styled checkbox and radio buttons from Filament but dependent on jQuery or Showstring (another js lib). Very nicely done but look like a fair amount of faff ( too much faff in fact for Amantaní ). The css file is long
webdesign  web  design  accessible  checkbox  radio  button  custom  filament  styled  css  js  javascript  script 
9 weeks ago 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 
9 weeks ago 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 
9 weeks ago by piperh
T-Writer Demo
demo of type writing effect script, with link to its github
webdesign  web  design  effect  writing  typewriter  typewriting  keying  library  js  javascript  script 
9 weeks ago by piperh
The Complete Guide to Lazy Loading Images | CSS-Tricks
Various methods for implementing lazy - js, intersection observer API. Some resource links at end
webdesign  web  design  images  lazy  load  loading  speed  performance  js  javascript  script  api 
9 weeks ago by piperh
Trix: A rich text editor for everyday writing
a rich text content editor. Embeddable in web pages, web apps?
webdesign  web  design  webdev  development  rich  text  editor  html 
10 weeks ago by piperh
Creating Horizontal Scrolling Containers the Right Way [CSS Grid]
step by step code howto for making a horizontally scrolling part of a page, Netflix style
webdesign  web  design  css  horizontal  scroll  scrolling  grid 
10 weeks ago by piperh
✅ UX Animation Principles: Duration | @keyframers 1.22.1
possibly useful code for stepped fade-ins of divs, a la typical app behaviour, via css keyframes
webdesign  web  design  keyframe  animation  animate  fadein  fade  load  enter  css  duration  time 
10 weeks ago by piperh
GitHub - pehaa/beerslider: A vanilla JS keyboard accessible plugin for any before-after comparison
vanilla js script for making an over-image slider to compare two different overlaid images, "before and after" type
webdesign  web  design  image  comparison  slider  before  after  compare  js  javascript  script 
10 weeks ago by piperh
Having fun with link hover effects | CSS-Tricks
a couple of OK hover effects, and some terrible ones
webdesign  web  design  hover  effect  link  css  animated 
10 weeks ago by piperh
The Low Hanging Fruit of Web Performance - The Media Temple Blog
tips for performance improvements. Worth reading right through. Resources at end of article.
webdesign  web  design  performance  speed  optimisation  cacheing  caching  optimising 
10 weeks ago by piperh
The dialog element | Viget
about the native html dialog element. Sept 18, 2018
webdesign  web  design  dialog  popup  modal  element  window  html  native  polyfill 
10 weeks ago by piperh
Measure Performance with the RAIL Model  |  Web Fundamentals  |  Google Developers
they say: RAIL is a user-centric performance model that breaks down the user's experience into key actions.
It's a Google thing
webdesign  web  design  performance  speed  rail  ux  user  experience 
10 weeks ago by piperh
Designing A Textbox, Unabridged — Smashing Magazine
article about needing to use html textarea instead of input for fields that might receive a lot of text, and the issue of character limit and how to deal with it. Suggests js methods but without detailing any code.
webdesign  web  design  text  input  textarea  form  field  typing  characters  placeholder  css 
11 weeks ago by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read