recentpopularlog in

piperh : design   2863

« earlier  
LazyLoad (vanilla-lazyload) | LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport. LazyLoad supports responsive images.
they say: LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport. LazyLoad supports responsive images
webdesign  web  design  js  javascript  script  lazyload  image  speed  performance 
yesterday by piperh
Glider.js - A fast, lightweight carousel alternative
a sort of substitute for a carousel (they say). Doesn't have infinite loop. Manual image change slider with touch feature
webdesign  web  design  slider  carousel  glider  js  javascript  script  slideshow 
2 days ago by piperh
Pagekite - The fast, reliable localhost tunneling solution
they say: Fast, reliable, secure: make your localhost part of the Web.
localhost tunneling. Make any computer a server: a pi, a laptop, even old cell phones.
Looks like it would be perfect for client view of dev, avoids staging site. Cheap and open source
localhost  hosting  server  development  webdesign  web  design  webdev  dev  tunnel  tunneling  host  local 
2 days ago by piperh
Free Cross Browser Testing Tool on Cloud - LambdaTest
they say: Perform Cross Browser Testing on 2000+ Real Browsers and Operating System Online
webdesign  web  design  webdev  test  testing  browser  online  website  development 
2 days ago by piperh
Inspectlet - Session Recording, Website Heatmaps, Javascript A/B Testing, Error Logging, Form Analytics
code that allows you to see user movement, clicks, behaviour. Free service would be good enough to see basic data for Tria I reckon
tria  webdesign  web  design  webdev  development  tracking  analytics  ux  user  behaviour  clicks  clicking  mouse  stats  data  inspect  view 
2 days ago by piperh
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 
8 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 
10 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 
10 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 
11 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 
12 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 
14 days ago by piperh
Cookies | ICO
Information Commissioners Office, about cookies
webdesign  web  design  webdev  development  privacy  cookies 
15 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 
18 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 
18 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 
18 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 
18 days ago by piperh
Hustl - Create time-lapse videos of your Mac screen.
They say: Create awesome time-lapse videos of your Mac screen.
Might be handy for creating tutorial or similar. $15
web  graphic  design  showcase  teach  video  screen  screenshot  tutorial  tool  online 
24 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 
24 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 
24 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 
24 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 
24 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 
24 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 
24 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 
24 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 
24 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 
24 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 
24 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 
26 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 
28 days ago by piperh
QuickLens – Explore the UI, down to the Pixels
they say: Powerful Mac App to zoom into pixels, sample colors, measure distances, check alignments, and much more. Costs $10
web  graphic  design  mac  apple  app  colour  distance  mesure  sample 
29 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 
4 weeks 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 
4 weeks 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 
4 weeks 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 
4 weeks 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 
4 weeks 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 
6 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 
6 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 
6 weeks ago by piperh
Dense Discovery – weekly newsletter for discerning web workers
they say: A weekly newsletter helping web workers be productive, stay inspired, and think critically.
dense  discovery  newsletter  bulletin  weekly  curated  links  tech  design  culture 
6 weeks ago by piperh
SVG Filters
Playground for fiddling with and getting code for SVG filters.
graphic  design  image  text  effect  svg  tester  code  filter  playground 
6 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 
6 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 
6 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 
6 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 
6 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 
7 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 
7 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 
8 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 
9 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 
10 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 
10 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 
10 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
« earlier      
per page:    204080120160

Copy this bookmark:





to read