Use React Dev Tools in Electron

I recently set up React Dev Tools inside an Electron app, so I thought I’d write a small tutorial on it. The whole process should take less than five minutes so let’s get started. Step 1 – Install React Dev Tools Chrome Extension Before we can use React Dev Tools in Electron, we need a copy of it. To do that, install it from the Chrome Web Store Step 2 – Locate the Extension Files Chrome puts all extension files under the extension’s ID.

Continue Reading

Creating a Pure CSS Dropdown Using the :hover Selector

In this tutorial we’re going to be building a basic dropdown button. Here’s a peak at what the final result will look like. .dropdown { position: relative; display: inline-block; z-index: 9999; } .dropdown .dropdown-menu { position: absolute; top: 100%; display: none; margin: 0; list-style: none; width: 100%; padding: 0; } .dropdown:hover .dropdown-menu { display: block; } .dropdown button { background: #FF6223; color: #FFFFFF; border: none; margin: 0; padding: 0.4em 0.8em; font-size: 1em; } .dropdown-wide button { min-width: 13em; } .dropdown a { display: block; padding: 0.2em 0.8em; text-decoration: none; background: #CCCCCC; color: #333333; } .dropdown a:hover { background: #BBBBBB; } Hover Over Me Item 1 Item 2 Item 3 Let’s get started.

Continue Reading

Pure HTML Share Buttons

/** Social Button CSS **/ .share-btn { display: inline-block; color: #ffffff; border: none; padding: 0.5em; width: 4em; box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); outline: none; text-align: center; } .share-btn:hover { color: #eeeeee; } .share-btn:active { position: relative; top: 2px; box-shadow: none; color: #e2e2e2; outline: none; } .share-btn.twitter { background: #55acee; } .share-btn.google-plus { background: #dd4b39; } .share-btn.facebook { background: #3B5998; } .share-btn.stumbleupon { background: #EB4823; } .share-btn.reddit { background: #ff5700; } .share-btn.linkedin { background: #4875B4; } .share-btn.email { background: #444444; } Today we’re going to be making some HTML-only share buttons (view on Github): Share buttons are a great way to drive more traffic to a website.

Continue Reading

Semantic CSS with CSStyle

CSStyle is interesting. It’s a set of SASS mixins that basically force you to write correct CSS. There are 6 main structures in CSStyle: Components: Groups of styles like buttons, form inputs, etc. Options: Modifications of component styles for different uses Parts: Children of compenents Tweaks: Reusable “tweaks” that can be applied to any compenent Locations: Overrides for component styles based on where the component lives Here’s a sample of some of some basic CSStyle applied to a button: <a class="button --success">Save</a> <a class="button --danger">Continue Without Saving</a> /** SCSS **/ @include component(button) { background: blue; padding: 15px; @include option(success) { background: green; } @include option(danger) { background: red; } } As you can see above, we have a simple button component with an --option of success (green) or danger (red).

Continue Reading

Exclude Dev Traffic from Google Analytics

Google Analytics is a great free tool for tracking your website. To avoid compromising tracking data, it is important to not have tracking enabled while building, testing, or fixing things. Excluding Google Analytics tracking is best done at render-time on the server. However, for static websites that don’t have a server component, the same thing can be done on the frontend using Javascript. Here’s how: // Get the current hostname (ex: "localhost:8000" or "mydomain.com") var host = window.location.host; // Check if the host begins with "mydomain.com" var isProduction = host.indexOf('mydomain.com') === 0; // Run GA code if on production if (isProduction) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'MY-TRACKING-CODE', 'auto'); ga('send', 'pageview'); } Hope this helps.

"Clicky" 3D Buttons with CSS

I wanted to challenge myself to come up with some really tactile 3D CSS buttons and ended up with the result shown below. This is a short tutorial on how I used CSS to make this possible: button.clicky { position: relative; margin-top: 0; margin-bottom: 10px; box-shadow: 0 10px 0 0 #6B2A4A; display: block; background: #a47; color: #eee; padding: 1em 2em; border: 0; cursor: pointer; font-size: 1.2em; opacity: 0.9; border-radius: 10px; } button.clicky:active { box-shadow: none; top: 10px; margin-bottom: 0; } button.clicky:hover { opacity: 1; } button.clicky:active, button.clicky:focus { outline: 0; border: 0; } Click Me!

Continue Reading

Don't Use Modals

Here is how and when you should use a modal interface: When Should I Use Modals? The short answer is never – unless absolutely necessary. Modals disrupt users. That is what they are for so that is what they should be used for. For example, if a user has just received an urgent message from a contact, or is about to leave a page with unsaved changes. The End.

Creating Pure CSS Lightboxes With The :target Selector

This tutorial will show you how to create a JavaScript-free lightbox using CSS only. To accomplish this, we will make use of the :target selector from the CSS3 spec. Click the thumbnail below to see the lightbox in action, or see the full demo on CodePen. .thumbnail { max-width: 40%; } .italic { font-style: italic; } .small { font-size: 0.8em; } /** LIGHTBOX MARKUP **/ .lightbox { /** Default lightbox to hidden */ display: none; /** Position and style */ position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); } .lightbox img { /** Pad the lightbox image */ max-width: 90%; max-height: 80%; margin-top: 2%; } .lightbox:target { /** Remove default browser outline */ outline: none; /** Unhide lightbox **/ display: block; } This will work in any browser above IE8.

Continue Reading

Simple Vanilla JavaScript Typing Carousel

Last night I worked on a simple JavaScript plugin that rotates snippets of text periodically. Here is a sample of it in action: This plugin is All you need to do is insert a <span> where you want the rotating text to be: <h3>This plugin is <span class="txt-rotate" data-period="2000" data-rotate='[ "nerdy.", "simple.", "vanilla JS.", "fun!" ]'> </span> </h3> As you can see from the markup above, the plugin accepts a period (optional) telling it how long to pause after each piece of text is fully typed, as well as a JSON encoded array of text snippets that it will rotate through.

Continue Reading

How JSONP Works

The Wikipedia Definition of JSONP is as follows: a communication technique used in JavaScript programs which run in Web browsers. It provides a method to request data from a server in a different domain, something prohibited by typical web browsers because of the same origin policy. The Problem That JSONP Fixes The typical AJAX request using the JQuery library looks like this: The problem comes when you try to change the URL to point to a different domain such as http://otherdomain.com/users/billy.

Continue Reading