TheaterJS is a fun JavaScript demo that emulates the typing effect of a human such as variable typing speed, making typos and erasing letters. To make it to actually “talk” we need to define our own scenario involving multiple actors with different experience levels as well as their scripts. Here are the various configurations TheaterJS supports:
Hit the button below to view more.
MixItUp is a powerful and flexible jQuery plugin for doing animated filtering and sorting by Patrick Kunka of KunkaLabs. It is great for managing large collection of categorized data like portfolios or directory, be it on the front-end or the admin panel of a website. MixItUp seems to be fairly straightforward to implement on any websites and it is responsive too. It also has a very extensive API for building customized UI or real-time data manipulation. Play around with the demo to see the various animation configurations the plugin supports.
CSS counters can easily qualify as one of those CSS features that not many of us had ever use or even heard of. With CSS counters you can have a running numerical counter all in CSS. You can think of it like an HTML ordered list tag but with more control. While real world usage may not be so practical or straightforward, this article by Will Boyd showcases some really cool things you can do with CSS counters.
Below is the most basic implementation:
Stampede Design
body {
counter-reset: pages; // initialize counter with a variable called "pages"
}
a {
counter-increment: pages; // increment counter for every <a> tag
}
a::before {
content: counter(pages); // display counter
}
Hit the button below to learn more and hopefully you’ll get inspired.
A very good article by Ivaylo Gerchev showcasing top 5 front-end frameworks for 2014 which are Bootstrap, Foundation, Semantic UI, Pure and UIkit. The most popular as everyone knows are Bootstrap and Foundation. Below is the comparison table for both front-end framework. For a closer and more technical look at Bootstrap vs Foundation comparison, check out this article.
| Bootstrap | Foundation | |
|---|---|---|
| Creators | Mark Otto and Jacob Thornton | ZURB |
| Released | 2011 | 2011 |
| Current version | 3.3.2 | 5.4.7 |
| Popularity | 77,000+ stars on GitHub | 19,200+ stars on GitHub |
| Description | “Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.” | “The most advanced responsive front-end framework in the world” |
| Core concepts/principles | RWD and mobile first. | RWD, mobile first, semantic. |
| Framework size | 145 KB | 326 KB |
| Preprocessors | Less and Sass | Sass |
| Responsive | Yes | Yes |
| Modular | Yes | Yes |
| Starting templates/layouts | Yes | Yes |
| Icon set | Glyphicons Halflings set | Foundation Icon Fonts |
| Extras/Add-ons | None bundled, but many third-party plug-ins are available. | Yes |
| Unique components | Jumbotron | Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables |
| Documentation | Good. | Good. Many additional resources are available. |
| Customization | Basic GUI Customizer. Unfortunately you need to input the color values manually, because there is no color picker available. | No GUI customizer, only manual customization. |
| Browser support | Firefox, Chrome, Safari, IE8+ (you need Respond.js for IE8) | Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+ |
| License | MIT | MIT |
At the end of the article Ivaylo also added an informative little guideline on the things to consider when choosing a framework to work with. Hit the button below to see the full comparison.
Imagefill.js is a jQuery plugin by John Polacek for making images fill their containers and centered, a feature that could be useful in a responsive website. You can use this plugin in 3 different ways namely simple, grid and different sizes.
Hit view more to learn more about the implementation. Resize your browser to see how the demo works on different screen sizes.
Foto is Javascript library that helps you load different images on different screen widths on your responsive website without using CSS media query. It’s also an alternative for srcset to load responsive images. Foto is easy to use, has no dependency and zero configuration. To use it, you just need to include foto.js inside your HTML and put ft-(number-pixel)-src on img. For example:
<!DOCTYPE> <html> <head> <title>Sample website</title> <script src="path/to/foto.js"></script> </head> <body> <img ft-320-src="image-for-320px-screen-width.jpg" ft-480-src="image-for-480px-screen-width.jpg" ft-640-src="image-for-640px-screen-width.jpg" ft-768-src="image-for-768px-screen-width.jpg" ft-1024-src="image-for-1024px-screen-width.jpg" > </body> </html>
Hit the button below to read more and view some demos. To learn more about using srcset, click here.
If you are tired of hard-refreshing your website every time you make CSS updates on your server, ProtoTool will come in handy for you. ProtoTool is a front-end development tool in the form of Google Chrome extension created by Vaclovas Vičius. With ProtoTool, you can see CSS changes take place in real time once you have configured it to read from the domain you are working on. Other ProTool features are:
Have you ever wished to be able to debug CSS animations? Now you can do just that by using the Google Chrome Canary browser. To try these out for yourself in Canary, open up Dev Tools, go to Styles tab and look for the Play button at the top right of the box. With this tool, you can decrease the animations speed from 1x (normal/default speed) to 0.1x (min speed) to see how things work in slow motion. In addition, you can also pause and resume the CSS animations. I’ve ran some tests on a CSS animation on Codepen by Mike Woodward and really liked it. Hit the button below to view a video demonstration by Val Head.
This short blog post by Chris Coyier discusses an interesting point about linked header HTML structure. To put header inside anchor link or to put anchor link inside header tag?
Link inside header:
<h1> <a href="#">Header 1</a> </h1>
Header inside link (valid structure since HTML5):
<a href="#"> <h1>Header 1</h1> </a>
Both methods are just fine but turns out majority of web developers still prefer the original and more semantic way of coding HTML with the link sitting inside the header.
Hit the button below to read the entire post and don’t miss the comments section too.
A while back, Codrops author Mary Lou created this cool morphing buttons demo. In her latest UI-themed post, she reapplied the UI concept to an e-commerce website to spice up the shopping cart view right before the user begins the checkout process. This simple but elegant idea helps create a pleasant and natural purchasing experience for users. The effect was accomplished using CSS transforms and transitions, which requires modern browsers. Hit the button below to learn more and view the demo.