aetles + html5   26

Plyr - A simple HTML5 media player
A simple, accessible HTML5 media player
html5  webdevelopment 
may 2016 by Aetles
CSS Buttons
100+ Hand-picked free HTML5/CSS3 and JavaScript buttons. Updated daily.
css  interface  html5  webdevelopment 
august 2015 by Aetles
» Don’t use <picture> (most of the time) Cloud Four Blog
For the majority of the images on the web, <picture> is the wrong solution
Last year, Yoav tried to figure out what percentage of responsive images fell under the art direction use case. The answer: 25%.

Responsive design is still early so we may find that the percentage changes, but it is unlikely that we’ll ever reach a point where the number of art directed responsive images out-numbers the number of resolution switching ones.

Therefore, for most responsive images, the <picture> element is the wrong solution. You should be using <img> with srcset and sizes.
html  html5  responsivedesign  webdevelopment 
september 2014 by Aetles
The HTML5 progress Element | CSS-Tricks
Pankaj wrote to me about some pretty cool styled progress elements he created. I asked if he'd be interested in fleshing out the idea into an article about styling them in general. Thankfully, he obliged with this great article about using them in HTML, styling them with CSS as best as you can cross-browser, and fallbacks.
css  html  html5 
august 2013 by Aetles
Automatic Figure Numbering with CSS Counters | Codrops
When writing articles, blog posts, tutorials, magazine entries or anything else, you will often want to include some images, charts, photographs, or even videos and code snippets to illustrate your content.
That being said, you will most likely want to attach some kind of caption to these elements, and perhaps number them so your readers can keep track of your thoughts.
And that’s exactly what we are going to do in today’s tutorial: combining the usage of the <figure> element with CSS counters to make your inserted elements (especially images) sexy as hell!
css  css3  html5 
may 2013 by Aetles
“Right click and save as” needs to go away
For a long time it has been standard practice to ask visitors to “right click and save as” when downloading a file that the browser itself is capable of rendering, but where doing so is not desirable. One reason for doing this is to spare people from the annoying experience of accidentally clicking a link to a 25 MB PDF, which subsequently launches a browser plugin that of course crashes while trying to download and display the file.

From a UX perspective though, adding instructions on how to click a link is not optimal, and feels like a hack. Not to mention that lots of people are literally afraid of the right mouse button. My mother is anyway.

Luckily there’s a correct way of doing this now, though it hasn’t seen widespread adoption yet:
webdevelopment  download  html5 
april 2013 by Aetles
Can I use... Support tables for HTML5, CSS3, etc
Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
browsers  css  css3  html5  testing 
april 2013 by Aetles
CSS: Responsive Navigation Menu
Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I've discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked to toggle, this menu toggles on hover which is more user friendly. It also has an indicator to show the active/current menu item. It works on all mobile and desktop browsers including Internet Explorer!

(But look at the comments for fair critique.)
css  dropdown  html5  navigation 
january 2013 by Aetles
Form Follows Function
FFF is a collection of interactive experiences. Each experience has a its own unique design and functionality. All the experiences are created in HTML5, the site works beautifully on both desktop and tablet.
html  html5  css  impressive 
january 2013 by Aetles
Quick Introduction to Moqups - Moqups
Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts,
prototypes depending on how you like to call them.
mockup  wireframes  javascript  html5 
july 2012 by Aetles
wysihtml5 - A better approach to rich text editing
WYSIHTML5 - A better approach to rich text editing

wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
editor  html5  javascript  wysiwyg 
may 2012 by Aetles
HTML5 Element Flowchart
Sectioning content elements and friends
html  html5 
january 2012 by Aetles
impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz
Aren't you just bored with all those slides-based presentations?
Don't you think that presentations given in modern browsers shouldn't copy the limits of 'classic' slide decks?
Would you like to impress your audience with stunning visualization of your talk?
then you should try
css  css3  html5  javascript  presentation 
january 2012 by Aetles
❖ Workless
When designing/developing a new application we all have our own way of doing things, using frameworks, grid systems, saved code snippets etc..., but what we usually have in common is the fact that we end up repeating lots of tasks for each project.

Workless aims to help you by offering a basic HTML5 base template filled with goodies to get you up and running on every project you do as quickly as possible.

At it's core Workless is simply a mashup of all the things I like about HTML5 Boilerplate and Twitter Bootstrap with some additional stuff which I tend to use on every project such as PrettyPhoto for lightboxes, Tipsy for tooltips, Prettify for styling and colorizing code and various other bits and pieces.

Workless comes with responsive media queries setup for 'Mobile Portrait', 'Mobile Landscape', 'Tablet Portrait', 'Tablet Landscape/Small Browser' and 'Large Browser', you can demo the effect right now by simply scaling your browser window. The blue button above the logo will show what query is running.

Remember, this isn't a 'Use this, its great!', it's simply a way I found to improve my workflow and cut down on repetitive tasks in every project. Feel free to use/abuse and hack into something that fits your workflow.
css  framework  html5 
august 2011 by Aetles
HTML5 Forms Styled With CSS3 | Devlounge
Now lets take a look at creating forms using HTML5. While browser support isn't 100% yet that we can forgo Javascript, we are getting close. There are now standard field attributes to recognize an email address input, placeholder text, autofocus and more.

Once you have created your barebone form it is time to style it with CSS. Add some gradients to the fields, create a nice image free button and use some nice font.
css3  forms  html5  webdesign 
february 2011 by Aetles
SwitchToHTML5 - The HTML5 Framework Generator
HTML5 is the new kid on the block, sure, and with reports that an official specification wont be fully completed and officially supported until 2022, you may be wondering why you should use it in your new site.

Well, there's one main reason (for me at least), and that is: The Future. The simple fact is that HTML4/XHTML1.0/CSS2 are outdated, and the new XHTML 2 standard has been scrapped in favor of HTML5. CSS3 is gaining more and more momentum every single day, the future of the web is HTML5.
development  framework  html  html5 
february 2011 by Aetles
ZEN - HTML5-CSS3 Audio Player
It's a single-song HTML5 Audio Player, powered by jPlayer, styled and mostly animated with CSS3. About the name? Hmmm.. In the stopped/paused state, doesn't it remind you a little of a dark Zen stone lying on bright sand? Hint: Click and keep holding the progress bar circle for some skipping fun.
audio  css  html5  player 
january 2011 by Aetles
A game where you shoot incoming objects by typing their names. Very addictive and lots of fun. No flash!
html5  text  game 
january 2011 by Aetles
Test! ~
New minimal text editor by Aino using local storage (webkit/FF only)
editor  html5 
january 2011 by Aetles
audio.js is a drop-in javascript library that allows HTML5's <audio> tag to be used anywhere.
It uses native <audio> where available and falls back to an invisible flash player to emulate it for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.
It plays mp3s. No ogg. Because, lets be honest, in the real world, no one really exports ogg files.
audio  html5  javascript 
december 2010 by Aetles
Vertical Forest :: YouTube5 Version 2
YouTube5 has become far more popular than I ever imagined it would! I’d like to say a general thank you to everyone who has commented to make suggestions or just express appreciation for this extension, its a great encouragement to know it has been useful to so many people.

Several months ago I had hinted that I was in the process of developing a new version of this extension, and I’m excited to announce that it is finally ready! This version is an almost complete rewrite, and includes many improvements over the first, including:

A custom designed HTML5 player to replace the usable, but very limited built-in player.
Support for Vimeo and Facebook video.
The ability to switch video resolutions within the player, without having to access Safari’s preferences.
Support for downloading videos from YouTube and Facebook.
A fully functional volume control, rather than just a mute button.
Support for displaying the video’s title, author, and source, in a video overlay, along with a link back to the video’s page on YouTube, Vimeo, etc.
safari  extension  html5  video  flash 
november 2010 by Aetles
HTML5 Audio Safari Extension //
After listening to John talk about going Flash-free and then reading the secret to his success I thought I would give it a try. First thing I did after disabling the plugin was open up Fever to see how it would impact my daily browsing experience. Almost immediately I hit a snag.

I subscribe to a number of blogs that post audio files on a regular basis (like composer of Battlestar Galactica and The Walking Dead, Bear McCreary and a number of game music sites). Connor McKay’s YouTube5 Safari extension addresses most videos I encounter and Open in Google Chrome works for the rest but while video might demand attention audio is ambient. It doesn’t makes sense to keep a second browser open just for background noise but I couldn’t find a similar extension for audio. So I made one.
safari  extension  html5  flash 
november 2010 by Aetles
20 Snippets You should be using from Html5 Boilerplate
I recently, as many web designers and developers will have, became aware of a fantastic resource put together by web developer, Paul Irish, and Divya Manian. Html5 Boilerplate, as they have named it, is a powerful starting off point for any website or web application. As Paul Irish describes it; “It’s essentially a good starting template of html and css and a folder structure that works., but baked into it is years of best practices from front-end development professionals.”

It is absolutely packed full of fantastic snippets of code that are still very much worth using even if you don’t want to start using html5 boilerplate as your base template.
html5  css  html5boilerplate 
september 2010 by Aetles
Rethinking Forms in HTML5 | Nettuts+
While there are many changes for the better in the HTML5 specification, there is no better bang for the buck for the data driven website than the transformation of forms. These simple changes will transform how you enter, validate, process, and even display inputs. You will be able to create more usable web applications with less code and less confusion.
may 2010 by Aetles
mezzoblue § Switched
Within the last few months — though I’d been intending to do so for much longer than that — I made the decision to switch all my client work starting point templates from XHTML over to HTML 4.01 and start delivering everything as plain old semantic HTML, minus the X.
html  xhtml  html5 
april 2009 by Aetles

Copy this bookmark: