Archive for the ‘JavaScript’ Category

Online Regular Expression Tester / Debugger

DevOps, JavaScript, PHP, Web Development | Posted by Keefr July 10th, 2017

Markup / HTMLA guy on my team today shared this, and I had to immediately share as well. Regular Expression (RegEx) is super powerful, but can be very confusing, and a single character off can have big consequences, not work properly or cause a regular expression to fail completely.

Enter the site linked below, regular expressions 101. It allows you to test and debug regular expressions, and even its variations between PHP, JavaScript, Python and Go.

It’s cool in that as you put in RegEx, it code hints everything so you can fully understand everything in the string — which is nice when you find a possible solution on Stack Overflow or some other random development blog. It helps you parse out what the RegEx is actually doing.

The explanations are well done and it’s a tool I’m definitely bookmarking for the next time I’m in the regular expression world.

regular expressions 101

Hamburger Menu Animation / Functionality Collection

CSS, JavaScript, User Experience (UX), User Interface (UI), Web Development | Posted by Keefr April 24th, 2017

Markup / HTMLThe hamburger menu isn’t going away anytime soon — neither on mobile nor desktop web designs and development.

Line25 published this collection of 20 examples of ways to implement and animate the showing/hiding toggle tied to the hamburger button. A lot are similar, but worth clicking through and trying out individually.

Source: Line25 – Demystifying the Hamburger Menu: 20 Hand-Picked Examples

Overriding Hover Styles on Mobile

JavaScript, jQuery, Mobile, Web Development | Posted by Keefr May 25th, 2016

I’m always looking for more snippets of code, markup, etc. to add to my always growing TextExpander list of bits I’ll reuse. This is a definite one I immediately added.

Read the rest of this entry »

Offline Web Sites?

Browsers, JavaScript, User Experience (UX) | Posted by Keefr October 15th, 2015

optimizationWhile I appreciate the sentiment and the exploration of this — especially as a type of one-pager landing page for serving up address/phone number type information, overall I don’t get it. Offline web sites? In this day and age of LTE and open Wi-Fi hotspots, this seems like over-engineering for a scenario unlikely to be accessed very often.

This is one of those cases where someone will get a lot of mileage out of this, but most sites won’t get much utility out of this — especially those content-heavy sites.

Again, I appreciate the sentiment and exploration, but don’t think I’ll be spending much time ensuring our fleet of web sites are Offline First. Plus, if you’re offline and need something, I don’t think any site we’ve developed, maintained, etc. are going to be your first (or even second or third) target.

Offline First

Social Share Kit – CSS & JS Social Sharing Tools

CSS, JavaScript | Posted by Keefr February 4th, 2015

Social Share Kit - CSS & JS Social Sharing ToolsWhile its relatively easy to roll your own social sharing tools, especially for things like Twitter and Facebook, the tool kit below is a good set of icons, buttons, and popups for social sharing.

The page describes it as the following:

Social Share Kit is a library of decent and good looking CSS/JavaScript social sharing tools like social network icons, share buttons, floating/sticky button bar and popups.

It is open-source library hosted on github, yet licensed under Creative Commons Attribution-NonCommercial 3.0 license.

While it is licensed with a non-commercial license, it can’t be licensed for $19 for a single commercial site, or a $79 unlimited commercial projects license.

Social Share Kit