recentpopularlog in

piperh : howto   226

« earlier  
How To Install WordPress Locally on Mac OSX - YouTube
handy video showing how to download WordPress for a local installation and create its database
webdesign  web  design  webdev  development  wordpress  local  mamp  localhost  locally  install  installation  site  mac  host  howto 
6 days ago by piperh
WPBeginner - Beginner's Guide for WordPress
great site for howto's and advice etc about installing wordpress and doing stuff
webdesign  web  design  development  webdev  wordpress  cms  howto  resources  tools 
13 days ago by piperh
Create custom keyboard accessible checkboxes | a11y with Lindsey
a method of styling accessible custom checkboxes. they can still be tabbed from keyboard and show focus.
webdesign  web  design  checkbox  accessible  accessibility  css  style  howto 
4 weeks ago by piperh
Building a Conference Schedule with CSS Grid | CSS-Tricks
details the building of a conference programme layout using css grid
webdesign  web  design  css  grid  layout  conference  congress  table  howto  code 
5 weeks ago by piperh
CSS Grid: No Nonsense Layouts |
explanation of css grid concepts and practical example layouts
webdesign  web  design  css  grid  layout  tutorial  howto 
7 weeks 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 
february 2019 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
El IPC en los Alquileres | IPC
A blog explaining the law and how to calculate annual rent increase in Spain, based on IPC
rent  alquiler  law  legal  ipc  ine  calculate  howto  spain  españa 
june 2018 by piperh
CSS Gradient Rounded Borders
a pen with code for gradient borders. Possibly naff but possibly handy too
webdesign  web  design  css  gradient  border  fill  colour  howto 
may 2018 by piperh
A Simple Guide to Taking a Web Page Offline, using Service Workers
blog entry, title: A Simple Guide to Taking a Web Page Offline, using Service Workers
webdesign  web  design  service  workers  offline  howto 
april 2018 by piperh
A11Y Style Guide
A11Y Style Guide. They say: This application is a living style guide, generated from KSS documented styles...with an accessibility twist. No matter your level of development or accessibility expertise. Meaty, thorough, no-stupid-effects-or-icons site devoted to accessibility.
webdesign  web  design  accessibility  accessible  reference  howto  guide  tips  aria  a11y 
may 2017 by piperh
It's Time To Start Using CSS Custom Properties – Smashing Magazine
Smashing article about css custom properties, aka variables. Seems like a very thorough review - requires concentration to understand in depth. Shows syntax use. Some comparison to preprocessors.
webdesign  web  design  css  howto  reference  custom  property  properties  variable  syntax  preprocessor 
april 2017 by piperh
OS X Yosemite: Create keyboard shortcuts for apps
Apple support page explaining how to mset up shortcuts for all apps (not just for system stuff)
apple  support  keyboard  shortcuts  howto 
march 2017 by piperh
jQuery Modal
interesting looking modal, with useful options
webdesign  web  design  jquery  javascript  examples  howto  code  modal  window  dialogue 
january 2017 by piperh
Intro to Sass | SCSS101 by SassTantrum on CodePen
human language intro and reference to SASS and SCSS
webdesign  web  design  code  coding  dev  sass  scss  css  howto  language 
january 2017 by piperh
Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Get You Started
good primer on responsive image techniques, explanation of the <picture> element and srcset and fallback. Code snippets for real practical use.
webdesign  web  design  picture  srcset  image  img  code  snippets  howto  responsive  photo 
december 2016 by piperh
Free Learn Grid Layout video series
free videos about css grid layout by Rachel Andrew
webdesign  web  design  css  grid  layout  code  coding  technique  structure  video  tutorial  howto 
december 2016 by piperh
Compressive images in Perch - Perch CMS documentation
Perch docs page explaining image tags to use to generate compressive images
webdesign  web  design  cms  perch  image  compressive  responsive  tag  density  quality  sharpen  examples  howto  template 
december 2016 by piperh
Pinboard: howto page
pinboard howto page, showing how to save links and bookmarks
pinboard  howto  save 
november 2016 by piperh
A Guide to Making SVG maps with MapShaper - Resources |
tutorial on making vector maps and exporting to svg. Also has list of resources, some free, for map data. The guy uses esoteric editing software so perhaps this page is mostly useful for the map resources
design  illustration  svg  maps  resources  howto  tutorial  software  vector 
october 2016 by piperh
Sticky Footer, Five Ways | CSS-Tricks
roundup of various methods for achieving sticky footer. 1st comment also looks good. Some require fixed height footer. Rec's flexbox for unknown height footer
webdesign  web  design  css  sticky  footer  code  coding  howto 
june 2016 by piperh
Considerations for styling the < pre > tag - The Media Temple Blog
article all about the pre tag, the defaults, and how to style it better
webdesign  web  design  css  pre  code  pre-formatted  white-space  wrap  coding  style  tag  format  default  howto  html  space  collapse 
june 2016 by piperh
Tools And Resources For Editing, Converting And Optimizing SVGs – Smashing Magazine
roundup of svg editors and tools with lots of links to resources and software, both for originating and for converting images
webdesign  web  graphic  design  illustration  vector  image  svg  export  convert  conversion  converter  howto  resources 
may 2016 by piperh
SVG Clipping Paths - Vanseo Design
tutorial on clipping paths in svg and css
webdesign  web  design  image  illustration  svg  clip  clipping  path  howto 
may 2016 by piperh
Quick Tip: The Best Way To Make Sticky Footers | Tutorialzine
Sticky footer using flexbox. Seems to work perfectly. Used for AOPC site April 2016. I eliminated the wrap-all div as it seemed to mess up flex functionality, though I didn't persist with tests - maybe you could make it work, cos a wrapper is handy sometimes.
webdesign  web  design  sticky  footer  flex  flexbox  code  howto  demo 
april 2016 by piperh
How to Use the Sticky Footer HTML & CSS Code
Sticky footer similar to Ryan Fait. Fixed height footer
webdesign  web  design  sticky  footer  code  howto  layout  page  technique  css  html 
april 2016 by piperh
Responsive Typographic Headlines with CSS & JavaScript | NOUPE
roundup of techniques for dealing with large headlines in responsive design, where you want to control line breaks and size.
webdesign  web  design  howto  responsive  typography  type  css  js  javascript  plugin  slabtext  fittext  bigtext  code  coding  headline  large 
march 2016 by piperh
Introducing CSS Scroll Snap Points | CSS-Tricks
article about css snap-to and the polfill needed to complete the browser support. March 2016 no support in Chrome.
webdesign  web  design  about  howto  polyfill  css  scroll  snap  scrolling  snap-to  point  vertical  long  page 
march 2016 by piperh
Accelerated Mobile Pages Project
google's pages about AMP. It's for me, yet (6.3.16). Maybe in the future
webdesign  web  design  amp  google  about  code  css  html  coding  accelerated  mobile  pages  howto  tutorial  example  speed  performance 
march 2016 by piperh
Sliding Panels Template | CodyHouse
very nice demo of a front page to present various projects, plus a menu. There's a link back to the article showing the code. Needs jQuery
webdesign  web  design  inspiration  demo  graphic  howto  code  css  jquery  js 
march 2016 by piperh
Experiment: Using Flexbox Today - Chris Wright
page with multi-choice working examples to demo the use of flex
webdesign  web  design  flex  flexbox  howto  tutorial  demo  examples  css 
february 2016 by piperh
Stupid htaccess Tricks | Perishable Press
long reference page about htaccess files, with examples of code language and advice and tips. Includes section on cacheing.
webdev  hosting  htaccess  comment  reference  howto  cache  cacheing  block  password 
february 2016 by piperh
Google Maps JavaScript API  |  Google Developers
Google's pages showing styling options for maps and howto, with sample code
webdesign  web  design  google  maps  javascript  api  code  coding  js  sample  demo  howto  reference 
january 2016 by piperh
Optimising SVGs for Web Use — Part 1 — Medium
article about making optimised svg icons - use less nodes and less handles, and whole numbers (integers).
webdesign  web  graphic  design  vector  svg  howto  draw  optimise  tips 
january 2016 by piperh
Redirect Visitors To a New Page or Site - Htaccess & PHP Redirection
useful htaccess (and other methods) reference showing code for redirecting all html pages to php pages.
Also shows other redirect situations you might need
webdesign  web  design  tria  triairemena  apache  howto  redirect  redirection  http  htaccess  301  permanent  file  extension  html  php 
january 2016 by piperh
How to Use Cookies in JavaScript (
page title: How to Use Cookies in JavaScript
How to set, retrieve and delete cookies on your website
webdesign  web  design  webdev  cookie  howto  use  about  javascript  code  set  write  read  get 
january 2016 by piperh
The Shapes of CSS
great collection of non square shapes achieved only in css. Very handy code showing how to get triangle pointers using border. (I'd always wondered how it was done)
webdesign  web  design  css  shapes  code  coding  howto  examples  non-square  triangle  border 
november 2015 by piperh
PHP and jQuery Contact Form - Codular
a more sophisticated looking form to email method using jQuery and ajax.
webdesign  web  design  form  send  email  jquery  js  script  php  howto 
october 2015 by piperh
Send Email | CSS-Tricks
css tricks version of form to email. See halfway down comments someone posts a complete php script.
Another commenter says this code is insecure and links to a secure version at w3schools
webdesign  web  design  css  html  form  email  send  contact  howto  php 
october 2015 by piperh
Lazy Loading Images on the Web -Telerik Developer Network
roundup of a few lazy loading options, some with jQuery, some vanilla, but all look fairly easy to implement
webdesign  web  design  image  lazy  loading  size  time  weight  page  webpage  load  javascript  jquery  vanilla  howto  comparison 
october 2015 by piperh
How To Do Knockout Text | CSS-Tricks
article on how to achieve image that shows through lettering. Techniques and browser support
webdesign  web  design  knockout  text  image  cutout  background  howto 
october 2015 by piperh
Modern web layout with flexbox | Webdesigner Depot
article explaining flexbox, little bit of history, purpose and usage
webdesign  web  design  css  flex  flexbox  about  howto  tutorial  reference  code  coding  webdev 
october 2015 by piperh
A Close-up Look at the CSS mix-blend-mode Property
article about css mix-blend-mode. Works on coloured divs and images (and all elements I guess) but not well supported by browsers, esp IE & Edge. Check on caniuse before considering this method.
webdesign  web  design  css  howto  reference  blend  mix-blend-mode 
september 2015 by piperh
CSS Properties to Control Web Typography
good article on css controls specific to type. e.g. reminded about white-space:pre; and others that I'd never heard of.
webdesign  web  design  css  howto  reference  tips  html  typography  type  control 
september 2015 by piperh
The CSS Transitions Cheatsheet |
handy quick reference page of css transitions and transforms
webdesign  web  design  webdev  code  coding  reference  css  transition  transform  cheatsheet  howto  animation 
august 2015 by piperh
How to Test Browsers on Virtual Machines from Modern.IE
step by step guide to installing the ie virtual machines offered free from microsoft at Beware, I've read that they last only 3 months then you have to reinstall (though not necessarily redownload). Someone said you can take snapshot after installation then return to that snapshot instead of reinstalling.
webdesign  web  design  browser  ie  explorer  test  compatibility  virtual  windows  howto  modern  microsoft  testing 
august 2015 by piperh
How To Get Started With CSS Flexbox
nice simple explanations of different uses for flex
webdesign  web  design  css  flex  flexbox  display  howto  tutorial  technique  layout  responsive 
june 2015 by piperh
Responsive Data Tables | CSS-Tricks
css method of making a table responsive
webdesign  web  design  table  data  responsive  howto  css 
may 2015 by piperh
A Complete Guide to the Table Element | CSS-Tricks
useful article and reference showing both html and css table elements and how they work/relate. With code examples.
webdesign  web  design  css  table  cell  data  row  head  markup  howto  reference  html 
may 2015 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:

to read