<!– Target –> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!– Trigger –> <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button> Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework. That’s why …
Tag Archives: javascript
Introduction to React Native
The React Native project was introduced during the first React conference in January 2015. It allows you to build native mobile applications using the same concepts from React. In this post I am going to explain the main building blocks of React Native through the example of an iOS demo application. The demo application uses …
Stripe Open Source: Behind the Scenes
Videogular – The HTML5 video player for AngularJS
Note: the demo embedded below might not work due to the source files only being available over HTTP, and this site being loaded over HTTPS. In that case you can check out the pen here Videogular is a video application framework for desktop and mobile powered by AngularJS Really nice player. Works way smoother than …
Continue reading “Videogular – The HTML5 video player for AngularJS”
ion-drawer-vertical – A vertical slide out panel (toggle panel) for Ionic
For a current Ionic project I’m working on I needed a vertical slide out panel (toggle panel) to store in some content that may be hidden by the user. As I couldn’t immediately find such a component in Ionic itself I decided to create one myself: ion-drawer-vertical (source available on GitHub). The result is a …
Continue reading “ion-drawer-vertical – A vertical slide out panel (toggle panel) for Ionic”
Web Bluetooth API in Chrome
navigator.bluetooth.requestDevice({ filters: [{ services: [‘battery_service’] }] }) .then(device => { // Human-readable name of the device. console.log(device.name); // Indicates whether or not the device is paired with the system. console.log(device.paired); // Filtered UUIDs of GATT services the website origin has access to. console.log(device.uuids); // Attempts to connect to remote GATT Server. return device.connectGATT(); }) .then(server …
Echochamber.js – All of the commenting, none of the comments.
echochamber.js is a third-party script you can install to add a simple comment form to your blog post or website. Nothing new, right? Wrong! There’s a rather cunning twist: When a user submits a comment, echochamber.js will save the comment to the user’s LocalStorage, so when they return to the page, they can be confident …
Continue reading “Echochamber.js – All of the commenting, none of the comments.”
Zenfonts – A tiny and flexible JavaScript tool to help loading web fonts
// JavaScript Zenfonts(“Dolly”, {fallbackClass: “fallback-dolly”}) /* CSS */ body { font-family: “Dolly”, Georgia, serif; } .fallback-dolly body { font-family: Georgia, serif; } A tiny JavaScript helper to load and pre-load web fonts that are specified via @font-face. It uses best practices from other solutions, but it’s still a unique combination: It’s tiny (793 bytes minimized …
Continue reading “Zenfonts – A tiny and flexible JavaScript tool to help loading web fonts”
The JavaScript Abyss
Tiny two way data binding
Awaiting Object.observe() to land, Remy Sharp has written his own simple implementation: Data binding to the DOM is just one of those things that’s damn handy when you’ve got it and super laborious when you don’t. The problem is that it usually comes at a price of a hefty framework. So, as any good re-inventer …