14. May 2017
“Element queries are a new way of thinking about responsive web design where the responsive conditions apply to elements on the page instead of the width or height of the browser.
Unlike CSS @media queries, @element Queries are aware of more than just the width and height of the browser, you can write responsive conditions for a number of different situations like how many characters of text or child elements an element contains.
Another concept that element queries brings to CSS is the idea of ‘scoping’ your styles to one element in the same way that JavaScript functions define a new scope for the variables they contain.”
min-width min-width in px, min-width in %max-width max-width in px, max-width in %min-height min-height in px, min-height in %max-height max-height in px, max-height in %min-characters on block elements, on form inputsmax-characters on block elements, on form inputsmin-lines min-lines demomax-lines max-lines demomin-children min-children demomax-children max-children demomin-scroll-y min-scroll-y demomax-scroll-y max-scroll-y demomin-scroll-x min-scroll-x demomax-scroll-x max-scroll-x demoorientation orientation demomin-aspect-ratio min-aspect-ratio demomax-aspect-ratio max-aspect-ratio demo$this $this demo$parent $parent demo$root $root demo$prev $prev demo$next $next demo6. May 2017
readmore29. March 2017
Inspect styles in a simple, well-organized & beautiful way with this Chrome extension. You can select any object to get more specific information about them. Also a nice way to browse color palettes of websites you visit.
9. February 2017
With Chrome 56, web apps can now communicate with nearby Bluetooth Low Energy devices using the Web Bluetooth API, position sticky is back – making it easy to create elements that scroll normally until sticking to the top of the viewport. And HTML5 by Default is enabled for all users.
Chrome 56 on iOS also adds the ability to scan QR codes directly within Chrome. So many thought QR-Codes were dead, well not so much !
6. February 2017
Rocket.Chat is am impressive Open Source Web Chat Platform, with a huge amount of features:
4. February 2017
HTML5DOMDocument extends the native DOMDocument library. It fixes some bugs and adds some new functionality.
|
1 2 3 4 5 6 |
<?php require 'vendor/autoload.php'; $dom = new IvoPetkov\HTML5DOMDocument(); $dom->loadHTML('<!DOCTYPE html><html><body>Hello</body></html>'); echo $dom->saveHTML(); |
10. January 2017
Canvas based dial that adds mouse click, wheel mouse, keyboard and finger / touch events.
Really nice 🙂
9. January 2017
Papa Parse is the powerful, in-browser CSV parser for big boys and girls 🙂
If you do need easy CSV parsing and conversion back to CSV, take a look at it!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Parse CSV string var data = Papa.parse(csv); // Convert back to CSV var csv = Papa.unparse(data); // Parse local CSV file Papa.parse(file, { complete: function(results) { console.log("Finished:", results.data); } }); // Stream big file in worker thread Papa.parse(bigFile, { worker: true, step: function(results) { console.log("Row:", results.data); } }); |
|
1 |
<input type="file" name="File Upload" id="txtFileUpload" accept=".csv" /> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
document.getElementById('txtFileUpload').addEventListener('change', upload, false); function upload(evt) { var data = null; var file = evt.target.files[0]; var reader = new FileReader(); reader.readAsText(file); reader.onload = function(event) { var csvData = event.target.result; var data = Papa.parse(csvData, {header : true}); console.log(data); }; reader.onerror = function() { alert('Unable to read ' + file.fileName); }; } |
16. November 2016
Player.js is a library that allows you to programmatically control video and audio within iFrames across a number of services.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var player = new playerjs.Player('iframe'); player.on('ready', function(){ player.on('play', function(){ console.log('play'); }); player.getDuration(function(duration){ console.log(duration); }); if (player.supports('method', 'mute')){ player.mute(); } player.play(); }); |
16. November 2016
“Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.”
This shared vocabulary from Google, Bing and Yahoo helps to understand your content!
This shows how to associate your logo with your organization.
|
1 2 3 |
<a href="http://www.yoursite.com/"> <img src="http://www.yoursite.com/your_logo.jpg" alt="Your logo" /> </a> |
|
1 2 3 4 5 |
<div itemscope itemtype="http://schema.org/Organization"> <a itemprop="url" href="http://www.yoursite.com/"> <img itemprop="logo" src="http://www.yoursite.com/yourlogo.jpg" alt="Your wonderful logo"/> </a> </div> |
