5 Of My Coolest jsFiddles That I’ve Made

I wanted to share some of my best jsFiddles because I have a lot of them, and they aren’t accessible in any one place. Here are some of my most favorite ones that I’ve made.

HTML5 Form from Mockup with Validation

I made this fiddle from a mockup I was given as part of an interview I had with a company. The requirements included:

  • Validating that the form didn’t submit if Name and Password inputs were empty.
  • Showing custom tooltip error messages for invalid fields.
  • Password must include an uppercase character and a number or a special character.
  • Error tooltips update on keyup once they meet any part of the validation.
  • The submit button must remain disabled until all fields are valid values.

Canvas Stopwatch

This was something I made so I could use it for another interview coding test I had to make that was to be completed within 1 hour.

Isobar Canvas Logo Animation

This is my previous company’s logo with some animation added to it. I drew out the letters in the word Isobar using a background grid layered with an image of the logo so I could trace it with canvas drawing points. The font used in the logo was slightly tweaked in various ways so it was not possible to use the text methods in canvas to just type in the word. I had to draw it manually line by line. The animation of the circles is done in such a way that makes it look like they are coming out of the top of the letters. Only 10 circles show at once and only for a certain amount of time before they disappear allowing a new one to be created.

Note: View the result tab to see the animation. Showing it by default makes the animation not work correctly.

Raining HTML5

This was just a fun and simple animation showing all the HTML5 tags falling, kind of like the Matrix code.

Currently Open Tabs: Resources For Using AngularJS

Although this list is not actually a complete or accurate list of my currently open tabs (I have since closed some, as well as, working on a page for DevTools docs), this is a list of tabs I have either open, or have opened at one time.

You may have noticed more and more recently, that Angular.js is growing in popularity among Front-end Developers. I’m personally a big fan of it, and I would like to share some more things which I’ve come to learn about it in the near future.

Until the, here’s a list of tabs which are mostly focused on developing with Angular.js, but a few others thrown into the mix as well.

Handy Tricks With Developer Tools

This is a comparison of the most popular MV* JavaScript Frameworks using Google Trends

You can tell that Angular.js has really picked up some momentum judging by this graph. I wonder how long this climb to most popular will continue.

Current State of Front-end Development Workflows

I don’t think I am alone in I say “Enough already with the need to fill in all the gaps that any one stack may have, there are 10 other options that exist for any given thing”. Sometimes I wish there was a way to freeze the development of new libraries and frameworks so that a chosen few can be determined from those that exist already. I hate to say it, but people need to stop releasing frameworks, libraries, and any other chosen name to categorize these things (tasks, packages…). I mean I understand why and do get it. I would also love to build that next game changing workflow simplifying aha.js framework, which ideally would bring us back to the simple days, when jQuery was all that you needed to start building something cool, while still keeping the various combinations of the “new stack development” that has become built-in. I’m still in the dream phase 1, and the beta release is set for some time in the future, indefinitely…

Again, I am not the only one who is feeling fatigued from the massive framework and library overload that front-end development has transformed very quickly into, resulting in dozens of options that have options with optional options you can opt to use or not. By options, I am referring to the many solutions for any single tiny piece of the puzzle for a given project that one can have which leaves the developer with the problem of choice.

On one hand, this isn’t a terrible problem to have. Not needing to reinvent the wheel is always best, so if there is a piece of code that already exists which solves a problem you need a solution for, then the obvious thing to do is use it. It’s silly to not reuse existing code wherever possible.

That said, choose your tools carefully as you cannot always easily swap them for something else later on when a project is in mid-development. Deciding on what technologies to use and which tools will be used as part of the workflow has become much more involved. There are many things to take into consideration and we all have our own particular preferences when it comes to things. It is necessary to weigh all the options so you are well-informed before settling on what to use.

When it comes to the problem with streamlining development workflows like the management and use of packages, frameworks and libraries available to aid in getting projects setup quickly, there is still a lot of work to be done and many people are working on improving things. However, this could create an alternative problem, multiple solutions to a problem yet again, or otherwise designed in a way where things are released as a full stack set of tools designed to work as a bigger “default” stack state.

The way it is now, depending on the person or project concluding any one technology, tool, concept, etc. to be better than another one might vary one day to the next. The evolution of front-end development is so rapid that any attempt to conclude anything will prove to be useless. I look forward to when things start to become more straight-forward again as it was a couple years ago. I would love to have all the new technologies out there to just simply work together without being required to become an expert of them all beforehand just so you can make them play nice.

You could say my excitement for new technologies is more in what they make possible and not with trying to combine a handful to make what would be possible in doing so. I feel like things have fallen into a lull or like we’re stuck in a rut spinning the wheels but not really making much needed valuable progress in solving the larger bigger problem, one we all must endure in the meantime until there is something to bridge the gap in workflows.

What’s going to be that solution, or result? I can’t imagine it’s going to be getting too much better anytime soon, so hang on for a wild ride, at least for the time being from what it looks like.

I’d love to know what you’re thoughts are on the matter in the comments :)

My currently open tabs…

Here are links to the tabs I currently have open in Chrome, that would be of interest to other people anyways:

High-Performance, Garbage-Collector-Friendly Code

What’s a Closure?

Writing Fast, Memory-Efficient JavaScript

JavaScript design patterns – Part 2: Adapter, decorator, and factory

Developing WebKit – Get the code

Contributing to Chrome Developer Tools

WebKit Inspector on trunk

Grunt.js Workflow

HTML5Weekly #67

JavaScript Getters and Setters

Chrome Devtools Cheatsheet

Douglas Crockford: Programming Style & Your Brain

JavaScript and the DOM Series: Lesson 1

Google Chrome Devtools Cheatsheet

If you are a web developer and work with HTML, CSS, or JavaScript then you are probably familiar with one or more browser’s developer tools which are built into all modern browsers or available as an add-on for older browsers, specifically old versions of Internet Explorer. If you don’t know what developer tools are yet, you should learn something about what you are missing out on.

You should get to know the Devtools in each browser really well. Become as familiar with them as you are with your text editor of choice if not better because you will spend a lot of time using them to create and debug web pages. The more you understand the importance of Chrome’s Devtools and how powerful it is as a development tool the more efficient you will be in developing websites. I wanted to help make things a little easier for myself and anyone who might also benefit as well by making a Chrome Devtools Cheatsheet.

The cheatsheet consists of shortcuts and details of various features that aren’t as well known like:

  • Shortcuts to open Devtools
  • Global Shortcuts
  • Elements Panel Shortcuts
  • Styles Sidebar Shortcuts
  • Network Panel tips
  • Sources Panel Shortcuts
  • Console Shortcuts
  • Search Shortcuts
  • Console API Methods
  • Command Line API Methods
  • Chrome Flags
  • Theming Devtools
  • about:pages and Chrome Urls
  • Links and Resources

Anyone is welcome to contribute to the cheatsheet on Github. I plan to continue developing it and keeping it up to date as changes to Chrome and it’s Devtools are made so it will be a valuable resource for developers to keep an eye on.

Keeping Up With Devtools Changes

The team working on Google’s Chrome Developer Tools has been very busy and is constantly making updates to the Devtools in Chrome adding new features and new ways to do certain things much easier and smarter. It can be hard to keep up even with just how much you can do and how to do what with Chrome’s Devtools, which is why I started making the cheatsheet a year ago. I never got to finishing it back then because I became very busy at work. I recently began working on it again after receiving an email from +Addy Osmani about wanting to help update my cheatsheet.

There has been many updates to the Chrome Devtools since last year, and recently the Devtools team at Google has been making a strong effort to communicate the lesser known secrets and various shortcuts for different features available in the Devtools. They have been working hard to improve the Devtools Documentation and there have been more videos made that demonstrate the capabilities of Devtools. Also, Addy Osmani and Paul Irish started hosting live shows called “The Breakpoint”. Those watching the episodes live are able to comment and ask questions during the show.

I’d like to thank the Devtools team for all of their hard work. It’s been a tremendous difference having learned about what I never knew was possible with Devtools and makes my life so much easier. For that I am grateful and really appreciate of all they have done. I wouldn’t have known about all the new stuff I have added and updated on my cheatsheet if not for all the work they’ve done getting the word out about the new things in Devtools.

Suggestions

There is so much you can do with the Devtools in Chrome, and in my experience it can be rather difficult to absorb everything well enough so that you won’t need to refer to a specific second or minute of a half hour long YouTube video someone does which they mention a useful shortcut key or helpful trick that you can do for something. Things shown in videos sometimes happen so quickly when it comes to Devtools I’ve noticed, that before you know it, they are doing something else and you completely missed what they just did to get there. It’s a pain to keep track of it all.

What I suggested which I believe could be extremely useful and what would really just make complete sense to do, is to update the Shortcuts dialog in the Devtools with all shortcuts that are available in the tool itself (The Shortcuts dialog can be accessed by typing ? whenever Devtools is open). In my opinion, what would be most beneficial to developers around the world is if my cheatsheet was used as the Shortcuts dialog in Devtools, or a somewhat trimmed down version of it. As it turns out, Google doesn’t allow external contributions to the Devtools Docs for copyright reasons which is too bad but understandable.

Still, the fact remains that the Shortcuts dialog is extremely outdated, and sometimes displays half broken for me on different size screens for some reason. The need to update this section of the settings is huge. It should really be like a reference of the Devtools Docs which you can view quickly. It would be so great if the Devtools tool had a mini-docs page within it such as this that you could view as long as Devtools was open rather than have to open another tab and find the URL to the docs or something located on a totally different site, which information is spread out across multiple pages on.

You can find the cheatsheet on Github if you want to fork or star it. Anyone interested in contributing to it is more than welcome too.

Do you think it would be a good idea to update the Devtools list of Shortcuts?

Are there any other ideas or suggestions that you feel would make Chrome’s Developer Tools better for everyone?

11.27.12: The Chrome Devtools team is working to update the Shortcuts dialog in Devtools. Should be in Chrome before the end of January if not end of this year.

05.31.13: I have updated the Chrome DevTools Keyboard Shortcuts page using this cheatsheet. It is now more up-to-date than my cheatsheet, since it includes recently added or updated shortcut keys but doesn’t include everything that is on the cheatsheet.

Searching For Existing Keys In Arrays And Objects In JavaScript

If you want to check if an object or array has a particular key you should first make sure that what you want to search for it in is an Object or an Array. You do this by checking the constructor of the thing you want to search. If it’s not an Object or Array then return false.

if (!search || (search.constructor !== Array && search.constructor !== Object)) {
	return false;
}

If it is either an Object or Array, then handling the two types is a matter of checking the key indexes for a match to handle searching Object keys, and if that doesn’t work, then you can return the key in array. If the key is not in the array it will be false upon being returned.

Here’s a function that will do this:

function keyExists(key, search) {
	if (!search || (search.constructor !== Array && search.constructor !== Object)) {
		return false;
	}
	for (var i = 0; i < search.length; i++) {
		if (search[i] === key) {
			return true;
		}
	}
	return key in search;
}

You pass it a key: the thing you’re searching for, and search: the object you want to search for it in.

Searching Arrays

keyExists('apple', ['apple', 'banana', 'orange']); // true
keyExists('fruit', ['apple', 'banana', 'orange']); // false

Searching Objects

keyExists('age', {'name': 'Jared', 'age': 29 }); // true
keyExists('title', {'name': 'Jared', 'age': 29 }); // false

You might wonder why you can’t just skip doing the loop and just return key in search. This won’t work when searching Objects because the in keyword is going to look for an index number not a string or Object key. You need to make sure that you first do the loop in case the object being searched is an Object, otherwise it’s an Array, if it makes it to that point at all after checking the constructor.

Qlass.js – Add Or Remove Classes To Elements and NodeLists

I created the Qlass.js micro JavaScript library after having been asked during an interview with LinkedIn to write a function for adding classes to an element. After that I refined the function to work better so I could use it for something I was asked to make as part of Google’s interview process, for which I also created the hasClass() and removeClass() functions to go along with the addClass() function. Having done that, I modified the functions so they would work as a library.

To use the library, simply pass an Element or HTMLCollection to the wrapper q(), and add/remove or check if it has a class.

For example:

var div = document.getElementsByTagName('div');

q(div).addClass('my-class');
q(div).hasClass('my-class');
q(div).removeClass('my-class');

This works for getting Elements by ID as well as with querySelector() and querySelectorAll().

var elem = document.getElementById('my-element');
q(elem).addClass('new-class').hasClass('my-class');

var links = document.querySelectorAll('a');
if (q(links).hasClass('link')) {
  q(links).removeClass('link');
}

You can also just skip setting up a variable and just pass the selected item into the wrapper directly.

q(document.querySelector('element')).addClass('thisClass');

If you try to pass in something that doesn’t exist, it will just return and not do anything. So, say you select an element or NodeList of elements that aren’t in the page, nothing will be done since there is nothing that can be done.

One more thing worth mentioning is you can log to the console, whatever you try passing to the wrapper.
This will display the Element or NodeList as it is in the console of the browser.

q(div).log();

Have you ever found yourself including jQuery in a page you’re making, simply for the ease of adding a class it provides? It’s something I’ve done before, and now with this library, won’t be doing anymore.

Fork Qlass.js on Github or contribute to it if you like. Any issues or bugs you find from using it please let me know.

New blog, new car and new job soon hopefully

I finally just said screw it and decided to make Anti-Code a blog, that has a lot of cool side projects as a separate thing. I needed a place to talk about those things after all right?! I have lots of updates since my last post on New2wp too.

I no longer own Tweeaks.com

This was hard to accept for me, since I had so many things on that site, so much time and effort put into making it a fully functional blog, forum, hangout, multiple portfolios, sub-sites, and more. I was so mad to find out it had expired on me and I was never notified before it did so I could have a chance to renew it. It was then bought by someone else and parked. I could buy it back, for like $60 which is retarded, but it is worth a couple thousand. I have moved on though.

I no longer work at Isobar / Roundarch Isobar

Yes, I was sad to find this out too. I am currently looking for a new job since I was laid off from my job at Isobar at the end of August. I worked on some really cool things there, such as adidas.com sports performance sites, Samsung’s Olympic Genome Project, and a couple other pretty cool things too. I helped convert the company’s Frontend Coding Standards page to HTML5, and learned a lot about Canvas, JavaScript, CSS, and building really amazing apps and sites.

It is still hard to believe I don’t work there anymore. But on to the next great thing I suppose.

I have a new car

Yes, I bought it the day before I lost my job. That part sucks, but the car is pretty nice. It’s a Mazda S6 2004. Nice sound system in it too, and it’s entirely legal and drivable too :)

It’s not that I need to let people know I’m looking for a new job since I think everyone in the world has already contacted me in some way or another. I mean seriously. There’s no shortage for work doing frontend development, that’s for damn sure. I’m waiting patiently to hear back from one company in particular, and also talking to many others which seem to really want me bad. I’m not too worried about being able to find a new job, but I’m a little weary of choosing one that I won’t be happy at. I was very happy at Isobar, and doubt I’ll find a place as fun and enjoyable, but it’s not impossible.

Either way, here’s my LinkedIn profile and also my resume if you’re interested in my abilities and particular skillset. I’m interested in frontend development and looking for a full-time position only. No contracts, or part-time please.

The next post will be more interesting I promise. I just needed to get this set up and clear some things up.

First post

This is a sample post.