recentpopularlog in

piperh : html   490

« earlier  
Make it hard to screw up driven development | CSS-Tricks
collection of tools for validating, checking and testing code
webdesign  web  design  tool  online  lint  automated  test  testing  valid  validate  code  html 
3 days ago by piperh
HTML 5.2: 4.3. Sections
w3.org's reference pages about html semantic elements like <section> <article> <aside> etc
w3  css  elements  article  section  aside  html  construction  content  semantic  tags 
19 days ago by piperh
Breaking CSS Custom Properties out of :root Might Be a Good Idea | CSS-Tricks
why you might need to use a variable with a more local scope than :root
webdesign  web  design  css  variable  custom  property  :root  scope  class  html 
20 days ago by piperh
GitHub - github/details-menu-element: A menu opened with a <details> button.
using <details> and <summary> html tags to open a menu of radio buttons. The selected text then appears in the <detail> text when the menu is collapsed.
Could be handy sometime
webdesign  web  design  js  javascript  script  html  detail  summary  button  radio  tag 
27 days ago by piperh
10 HTML Elements You Didn't Know You Needed - DEV Community 👩‍💻👨‍💻
some unusual html tags. Some of the code in the article is slipshod, and the code is in images not copyable, but there are useful examples
webdesign  web  design  html  tags  examples  video  audio  time  template  meter  progress  picture  output  blockquote 
28 days ago by piperh
When Is A Button Not A Button? — Smashing Magazine
nice reminder of how to use html's own semantics - good for accessibility and keyboard tabbing. Brush up on <button type="button"> ("submit" is default value for a button, he says). He suggests using "disabled" attribute for button or fieldset but I don't see how one would trigger it. 'disabled' attribute also removes element from tab order
webdesign  web  design  button  html  semantic  attribute  vale  accessibility  accessible  element 
5 weeks ago by piperh
Free HTML Website Templates and HTML UI Kits - HTMLTEMPLATES.CO
a collection of free websites and kits. Lots of them seem to be based on Bootstrap.
webdesign  web  design  template  free  bootstrap  html  ecommerce  ui  kit  resources 
6 weeks ago by piperh
instant.page
js that triggers preload of the html of a linked page when you hover the link. Seems dubious to me, but what do I know?
webdesign  web  design  webdev  development  js  javascript  script  speed  performance  instant  page  preload  preloading  html  hover  click 
7 weeks 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 
9 weeks 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 
9 weeks 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 
10 weeks 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 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
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 
january 2019 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 
january 2019 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 
january 2019 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 
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
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 
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
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 
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
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 
november 2018 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 
october 2018 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 
september 2018 by piperh
How do you mark up an accordion? — Sara Soueidan – Freelance-Front-End UI/UX Developer
about the possible markup options for an accordion, with and without semantic elements, for best accessibility. Doesn't give script for the accordion itself, just says it would be js. Some useful resources at end
webdesign  web  design  accordion  markup  html  semantic  element  faq  resources  aria  accessibility  accessible 
september 2018 by piperh
CSS Duotone Generator
playground for css image blend effects. Photoshop-like blending modes. Give duotone-like effects. Generate the html and css
webdesign  web  design  css  blend  duotone  generator  effect  colour  html 
september 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 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
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
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
Know your ARIA: 'Hidden' vs 'None' | scottohara.me
author says: A primer on appropriately using aria-hidden='true' and role='none/presentation'. They each do very different things to elements, but their purposes are sometimes confused by developers.
webdesign  web  design  accessibility  aria  css  hidden  html 
june 2018 by piperh
Choosing a Responsive Email Framework: MJML vs. Foundation for Emails | CSS-Tricks
Compares MJML with Foundation for emails - two frameworks. There are ready-made implementations of both I think (eg Slinky). From the Conclusion and some Comments, MJML looks better for me.
html  email  design  construction  responsive  construct  build  make  comparison  mjml  foundation 
april 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
Apps para webmaster: te facilitamos el desarrollo web - CDmon
CDMon page of useful tools for webmasters: IP info, html char refs, html color refs, encrypt texts, host info, and more
webdesign  web  design  webdev  tools  online  ip  html  color  htpasswd 
march 2018 by piperh
HTML Symbols, Entities, Characters and Codes — HTML Arrows
Toptal (recruitment company), reference for html character codes. Useful but annoying gaps
webdesign  web  design  html  character  entity  reference  hex  unicode  code  symbol  arrow 
february 2018 by piperh
Boilerform
they say: Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms. css is BEM
webdesign  web  design  form  boilerplate  component  html  css  input  boiler  plate  template 
february 2018 by piperh
HEML
they say: Quickly craft clean, responsive emails
html  email  design  language  code  coding  markup 
january 2018 by piperh
Using CSS Grid: Supporting Browsers Without Grid — Smashing Magazine
Rachel Andrew article about fall-back css for non-grid-supporting browsers. Interesting - many older css properties will be disregarded by supporting browsers if followed by display:grid
webdesign  web  design  grid  layout  html  css  browser  support  fallback 
november 2017 by piperh
The Ultimate Guide to Bulletproof Buttons in Email Design
article about coding buttons in html email. Don't use an image they say.
email  html  design  button  css  code  padding  pad  border  support  reference  table 
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
Collections of free website templates made by Mashup Template in HTML5 and CSS3
they say: HTML5/CSS3 Free Templates. Discover each crafted responsive design templates , ready to be use and to be customize to make your website amazing. Based on a light version of Bootstrap. Images from Unsplash
webdesign  web  design  templates  free  html  css  resource  bootstrap 
november 2017 by piperh
handorgel
vanilla ES6, expanding accessible (a11y) drop down accordion for expand/contract texts. Options for open by default, only one div open at a time, and togglable/not togglable. Looks simple and neat
webdesign  web  design  accordion  slide  expand  expandable  accessibility  accessible  js  javascript  script  a11y  css  html  markup 
october 2017 by piperh
Breakdown of a calc() for a square grid by Lasse Diercks on CodePen
Lasse Diercks says: It's one HTML element that turns every child into a square. Uses css grid and calc()
webdesign  web  design  grid  calc  css  square  html  codepen 
october 2017 by piperh
Integrating SVG into your site - Heart Internet Blog - Focusing on all aspects of the web
article about incorporating SVGs into a site. Rather basic but has some code examples
webdesign  web  design  svg  illustration  image  img  object  html  css 
october 2017 by piperh
<style> in <body> | Campaign Monitor
they say: A complete breakdown of the CSS support for the most 
popular mobile, web and desktop email clients on the planet.
html  email  support  css  guide  reference  client  webmail  app  mobile  desktop 
september 2017 by piperh
Webfont support in email
blog post from Feb 2015, titled: Webfont support in email. Fairly detailed but probably not up to date, especially about gmail font support
webdesign  web  design  html  email  font  webfont  support 
september 2017 by piperh
Learn how to use web fonts in your email marketing | Campaign Monitor
Campaign Monitor article titled: All You Need to Know About Web Fonts in Email
html  webmail  mail  design  fonts  webfonts  web 
september 2017 by piperh
The Best Way to Implement a "Wrapper" in CSS | CSS-Tricks
The Best Way to Implement a “Wrapper” in CSS. Nice appraisal of element to wrap everything in site
webdesign  web  design  wrapper  container  wrapping  div  html  css  class  element 
september 2017 by piperh
WebSlides: Create Beautiful HTML Presentations
ready-made pack (templates?) for making slide presentations using html and css. Some pre-made templates available. Customisable.
html  css  slide  presentation  webslides  present 
august 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
Masking vs. Clipping: When to Use Each | CSS-Tricks
article about clipping and masking and when to use one or the other
webdesign  web  design  graphic  mask  masking  clip  clipping  svg  css  html 
june 2017 by piperh
How to Scale SVG | CSS-Tricks
thorough article showing how to reliably scale SVGs including in Explorer (Edge is OK) using svg as a background image and using the bottom-padding hack to maintain aspect ratio.
webdesign  web  design  svg  scale  inline  background  padding  hack  explorer  microsoft  ie  css  html  scaling 
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
Mavo: A new, approachable way to create Web applications
a system that acts like a cms but allows you to edit in the browser. Data can be stored locally or on github and other remote places. Uses attributes in the html.
They say: Edit data right in the website, with an intuitive, auto-generated, customizable interface. No more wrestling with CMSes and servers!
webdesign  web  design  cms  edit  website  site  browser  content  webdev  css  html  wysiwyg  webapp 
may 2017 by piperh
Shape Shifter
online svg morphing animation tool - generates the svg's, html and css code necessary for browser.
webdesign  web  design  svg  html  css  morph  morphing  animate  animation  generate  code 
may 2017 by piperh
ThoughtCo.com is the World's Largest Education Resource
Learning/teaching website. Tech, maths, humanities, arts, other resources. Possibly useful articles and courses on web tech - html, css, js, php etc.
learn  teach  course  programming  education  educate  html  js  javascript  script  online  web  tech  technologies  articles  php  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
Combining fonts - JakeArchibald.com
shows how to combine webfonts - use only certain characters from one font inside another
webdesign  web  design  fonts  combine  combining  face  webfont  glyph  character  html  @font-face  code  coding 
may 2017 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read