recentpopularlog in

piperh : design   2911

« earlier  
Iconfu - Get Icons in your Color and Style
a library of vector icons. Nice professional images but not all free. Free collection is called 'Material'
icons  vector  library  graphic  design  web  colour 
14 hours ago by piperh
Applying Styles Based on the User Scroll Position with Smart CSS • PQINA
title: Applying Styles Based on the User Scroll Position with Smart CSS
webdesign  web  design  scroll  position  style  css  page  offset  html  js  javascript  script 
yesterday 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 
2 days ago by piperh
Bookswarm | A digital agency dedicated to the world of books
they say: We are a digital agency dedicated to the world of books
webdesign  web  design  examples  inspiration  books  digital  agency  graphic 
2 days 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 
3 days ago by piperh
Slide an Image to Reveal Text with CSS Animations | CSS-Tricks
code howto: Slide an Image to Reveal Text with CSS Animations
webdesign  web  design  css  animation  animate  slide  reveal 
3 days ago by piperh
How do you figure? | scottohara.me
feb 2019: about the accessible use of html figure and figcaption
webdesign  web  design  css  figure  figcaption  caption  aria  accessibility  accessible  html 
4 days ago by piperh
A look at CSS hyphenation in 2019 | justmarkup
about the current state of word hyphenation in browsers (feb 2019)
webdesign  web  design  word  break  hyphen  hyphenate  hyphenation  css  line  ending 
4 days ago by piperh
Destyle.css - a clean slate for writing CSS without user agent styles
Destyle.css
Opinionated reset stylesheet that provides a clean slate for styling your html.
webdesign  web  design  css  reset  user  agent  styles  html 
7 days ago by piperh
How to: Back-to-top button without scroll events - Signal v. Noise
intro says: Web developers: here’s an alternative way to build UI features that rely on scroll position without actually observing scroll events. Using the Intersection Observer API ...
webdesign  web  design  backtotop  back  top  scroll  browser  window  layout  intersection  observer  api  viewport 
7 days ago by piperh
Designing Layouts for Screen Readers
title: Designing Layouts for Screen Readers. About the experience of using a site with a screen reader
webdesign  web  design  accessibility  accessible  screen  reader  layout  aria 
9 days ago by piperh
The developer’s guide to native web animation - Heart Internet Blog - Focusing on all aspects of the web
9.2.19 Outline of methods for achieving native animation in a site - css, web animations api (waapi), javascript
webdesign  web  design  animation  animate  methods  techniques  native  tools  css  api  waapi  js  javascript  script 
9 days ago by piperh
Use the :lang pseudo-class over the lang attribute selector for language-specific styles
about using lang pseudo class and why it's handier than lang attribute (for styling), although it seems to me that the lang attribute must still be present in the html
webdesign  web  design  language  lang  css  pseudo  class  attribute  html  style 
10 days ago by piperh
wiv.js
js library for animated wavy borders
webdesign  web  design  js  javascript  script  border  wavy  animated  animate 
10 days 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 days ago by piperh
CSS Grid for Designers – Times Open
haven't read it yet but looks like an a useful walkthrough tutorial about css grid. Some more resource links at end for other tutorials and guides.
webdesign  web  design  css  grid  tutorial  howto  layout  guide 
13 days ago by piperh
ANESTORE | Stockist de papeles G.F. SMITH y Colorplan para España y Portugal
Ane Store. GFSmith paper importer for Spain.
Calle Moliné 5, Local, 08006 Barcelona - off Aribau, Gracia near Carmen's place
paper  spain  importer  gfsmith  colorplan  design 
14 days 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 
15 days ago by piperh
TOAST UI :: Make Your Web Delicious!
service that renders charts and graphs on your site. Don't know how it works or how it draws in the data, but looks v interesting.
webdesign  web  design  chart  graph  graphic  bar  pie  line  js  javascript  script  column  data 
22 days ago by piperh
What’s New in HTML 5.2?
interesting summary of new and deprecated features in html 5.2 (from early 2018)
webdesign  web  design  html  html5.2  5.2  features  dialog  main  hidden  style  css  inline  p  children  valid  invalid  strict 
25 days 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 
25 days ago by piperh
cubic-bezier(.17,0,0,1.03) ✿ cubic-bezier.com
shows numbers for cubic bezier curve. You move handles 'til you get the animation you want, then copy the curve numbers for a css transform
webdesign  web  design  ease  cubic-bezier  cubic  bezier  css  curve  generator  transform 
26 days ago by piperh
Using Media Queries For Responsive Design In 2018 — Smashing Magazine
Rachel Andrew Smashing Mag article about responsive design currently (Feb 2018) - flexbox and grid reduce the need for MQs.
webdesign  web  design  grid  flex  flexbox  media  queries  mq  responsive  css 
4 weeks ago by piperh
CSS Grid Explained in 7 Minutes (with diagrams and code) - YouTube
a 7-minute video lecture explaining the basic concepts of css grid. Quick handy way to understand what it's about before getting into more detail
webdesign  web  design  css  grid  display  layout  tutorial  video  class  introduction  explanation 
4 weeks ago by piperh
SortableJS
JavaScript library for reorderable drag-and-drop lists
webdesign  web  design  js  javascript  script  reorder  reorderable  list  shared 
4 weeks ago by piperh
Did you know that style and script tags can be set to display: block? | CSS-Tricks
Amazing fact: you can set the style tag to display :block; and, if it's in the html, then it will display. You could do same with 'script' tags.
Also shows use of contenteditable, which I didn't know about. Makes content editable on the browser page! Not sure why/when you'd need it, but it should be in my knowledge bank bit of the brain!
webdesign  web  design  css  style  tag  display  block  contenteditable  webdev 
5 weeks ago by piperh
Pie Charts · ChartGen
brilliant chart generator - you input the data, gives code as svg. Pie charts, bar graphs, line graphs. Would be great for PIRC charts. Use image in Quark to draw on top, or import svg file into Affinity.
webdesign  web  design  graphic  chart  generator  bar  graph  line  pie  svg 
5 weeks ago 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 
5 weeks ago by piperh
Meta Tags — Preview, Edit and Generate
they say: With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!
Tool for generating meta tags
webdesign  web  design  webdev  development  meta  tag  generator  twitter  google  facebook  seo  tool 
5 weeks ago by piperh
CodyHouse | Web Design Nuggets
they say: CodyHouse's design system is a CSS framework and a library of HTML, CSS, JS components that work seamlessly with the framework.
Possibly some handy code within the components section and maybe some useful js. Some of the stuff uses scss
webdesign  web  design  css  html  components  framework  js 
5 weeks ago by piperh
Cookie-Script: free GDPR compliance for cookies
a cookie consent service. There's a free version but doesn't work with https. Cheapest paid is 3€ month (jan 2019)
consent  cookie  privacy  gdpr  compliance  eu  comply  law  service  webdesign  web  design  webdev  development 
5 weeks ago 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 
5 weeks ago by piperh
Discover Unique - Save time and make smarter font choices!
as far as I can tell this tool generates variations (distortions of existing fonts, and they call them unique fonts
webdesign  web  design  graphic  font  typography  generator 
6 weeks ago 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 
6 weeks ago by piperh
Somos tipos de letra | Babelia | EL PAÍS
article from Babelia 5.1.19: 'Somos tipos de letra'. Some nice image samples, too.
typography  graphic  design  type  elpaís  newspaper  spain  babelia  momento  tipográfico 
6 weeks ago by piperh
Mockuptime: Free realistic device mockups
some photos to use in mockup visuals, esp mobiles and computers
graphic  webdesign  web  design  mockup  visual  layout  image  resources 
6 weeks ago by piperh
New CSS Logical Properties! – Elad Shechter – Medium
about css logical properties: a new way of naming things like padding-left padding-right etc according to reading direction of site
webdesign  web  design  css  logical  properties  rtl  ltr  multi  language  box  model 
6 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 
6 weeks ago by piperh
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 
9 weeks ago 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 
9 weeks 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 
9 weeks 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 
9 weeks 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 
9 weeks 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. Seems like css only is good but js can enhance it a bit.
webdesign  web  design  font  loading  js  javascript  script  css  foit  fout  webfont 
10 weeks 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 weeks 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 weeks ago by piperh
An Introduction to CSS Shapes | Codrops
check MS support for css shapes before using (end 2018: not in Edge or IE)
webdesign  web  design  css  shapes  text  flow  layout  runaround  shape 
10 weeks 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 
10 weeks 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 
11 weeks ago by piperh
Cookies | ICO
Information Commissioners Office, about cookies
webdesign  web  design  webdev  development  privacy  cookies 
11 weeks 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 
11 weeks 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 
11 weeks 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 
11 weeks 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 
11 weeks 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 
12 weeks 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 
12 weeks 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 
12 weeks 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 
12 weeks 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 
12 weeks 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 
12 weeks 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 
12 weeks 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 
12 weeks ago by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read