JS – Smooth scrolling without jQuery

You know what link anchors are, correct? They are used to jump between different sections of the same page. Quite often when a link anchor is clicked, the page smoothly scrolls to the desired location. However, smooth scrolling is not the native behavior. No, the native behavior for link anchors is to instantly jump between sections, which can be jarring and unpleasant. That is why many developers smooth it out using jQuery scripts like this one.

I too enjoy it when anchor links smoothly scroll, but for the last few months I have on a “jQuery fast” and it has severely limited my smooth scrolling options. Smooth scrolling is impossible to recreate with CSS transitions, I have had limited success using requestAnimationFrame, and fun scroll-to-top buttons like Elevator.js are not appropriate. I have really been in the dark on filling the hole left by removing jQuery.

Continue reading “JS – Smooth scrolling without jQuery”

Advertisements

Creating Tic-tac-toe in JavaScript (and why I enjoyed it)

Tic-tac-toe is one of the simplest games around, yet it can be tricky to win. The concept of Tic-tac-toe is super simple: you have a 3×3 grid, and each player takes turns writing their respective symbol, either an X or O, in a square. The first person to get three Xs or Os in a row, be it horizontally, vertically, or diagonally, wins. Even a three-year old can play Tic-tac-toe. I remember as a small child on long road trips I played Tic-tac-toe. However, this almost ridiculously simple game has some interesting hidden logic. In order to be good at Tic-tac-toe, you have to analyze the entire board every time it is your turn, calculating the best possible move for you to win but also trying to predict your opponent’s next move and try to block it, and if all else fails make the game end in a tie. This logic can be rather complicated at times, despite the tiny playing field and few move combinations. Even though I am very a very analytical and technical thinker, I somehow loose to rioforce nearly every time we play Tic-tac-toe. It is both amusing and confusing, to be honest. πŸ˜›

Continue reading “Creating Tic-tac-toe in JavaScript (and why I enjoyed it)”

Don’t Use jquery-latest.js (jQuery Blog Reblog)

This is simply passing on a warning from the jQuery blog post entitled “Don’t Use jquery-latest.js. For some time now, the jquery-latest.js file from their CDN has been heavily used and abused in production sites. jquery-latest.js was initially created as a quick way to test out the latest build of jQuery. Unfortunately, it seems many people have used this file as a way to always have the latest version of the popular JavaScript library on their site. This is a very bad idea, as each breaking change performed would make break each site that relied on it. Back in 2013 the jQuery team decided to not update jquery-latest.js to jQuery 2.0 on behalf of older sites that would suddenly break because of the new Internet Explorer support limits. However, that has not stopped people from using it.

As jQuery usage increases and to prevent this abused file from “breaking the web”, from now on (when this news was reported on July 3), the jquery-latest.js and jquery-latest.min.js files have been locked to v1.11.1 forever. They will no longer be updated. Google has also joined in the efforts and locked their CDN equivalent to v1.11.1. Further more, a few members of the community and apparently the developers themselves have discussed adding some sort of warning to these files urging developers to no longer use them, an action I would support.

So what does this mean for you and what should be your reaction? Do not use the jquery-latest.js and jquery-latest.min.js files in development nor production sites. Instead, always use a version release from the CDNs (1.11.1 or 2.1.1). It is as simple as that.

So please, tell your developer friends about this and do yourself, them, and the entire Web a favor by never using these files again and updating any current sites to use a version release. πŸ™‚

-le717

Adventures in Website Design && Development – 7/6/14

As a practicing and learning Website designer && developer, I come across many Website creation related tools, examples, demonstrations, and concepts. When possible, I try to use these elements in my own work. Adventures in Website Design && Development documents my many findings and passes them along to you. In this way, we both are on an adventure to become better website designers and developers.

We are finally getting back to the more traditional AWD&&D format with this edition. I have come across lots of pickinic baskets full of delicious goodies in the last month and a half since I started doing more teachy editions, and I am way too eager to jump right in to give a quick summary, so let’s get right to it!

Continue reading Adventures in Website Design && Development – 7/6/14″

Introducing jQuery Spoiler!

I do not think I have mentioned this before, but one of my goals I set for myself for being a Website developer-trainee is to write a jQuery plugin. You know, one of those scripts you use with jQuery to perform cool stuff? Yea, that thing. There are plenty of them. Chances are, if you are a Website dev, you have used one. Just like my goal of writing a Python module (which was realized with linescan.py), I have wanted to make a jQuery plugin. The problem has been what I should make.

I finally have the answer.

Introducing jQuery Spoiler!

jQuery Spoiler is exactly what the name implies: it is a jQuery plugin that creates spoilers. If you are wondering what kind of spoilers, they are the kind that hides content unless a button is clicked. πŸ˜› I had wanted a spoiler system for Triangle Land on GitHub, and I figured the best way to do it was to write one myself (plus, I did not find any other implementations I liked). So I wrote my very own spoiler system. The other day, I was looking at the JavaScript on the site, deducing if I could modularize it a bit. My first action was splitting the spoiler system into a separate script, as it took up a large portion of the script. Once I did that, though, I started cleaning it up and improving it, and before I knew it, I had my mind made up to release it as a jQuery plugin.

You can guess what happened next. πŸ˜›

Setting up and using jQuery Spoiler is super simple, and you can nearly customize all aspects. Since all it does is show/hide content and provide a button to do so, you can style it as little or as much as you desire. It is almost like a framework. It provides the action, you provide everything else. πŸ™‚

Mind you this is a first release, so everything is not wrinkle-free. I already have a laundry list of improvements I need to make, and there are some limitations pertaining to supported selectors, but in due time they will all go away. πŸ™‚ If you want, you can even help improve it! πŸ˜€

You can find jQuery Spoiler on GitHub. A live demo is available at le717.github.io/jquery-spoiler. πŸ™‚

Catch you later!
-le717

Web Coding Style Guides

There is nothing like well written code. I am not talking about the efficient type either. I mean the clean, well-formatted, neat looking code. Code that looks the same no matter what environment it is displayed in. Clean code, both efficient and neat, makes the world go ’round.

However, how do you know what is considered clean code? What is the baseline you are to compare your code to? The answer lie in style guides. Every programming language has them, both for the code you write and the code that powers the language. By reading and following your chosen language’s style guide, you can be sure your code is a piece of code beauty (that does not mean ASCII art either πŸ˜› ). In the world of HTML, CSS, and JavaScript, there is no single style guide to follow but rather many to choose from. Although there are a few predominant ones and they usually contain some of the same suggestions, it is up to you to choose which one to follow. Furthermore, there may be a few rules from one you like from guide X but overall prefer guide Y. You may also have personal preferences not listed. All the decisions can become confusing.

This is where this post comes in. I am going to show off a few of the most well-known style guides and provide some tips on handling it all.

Are you in the reading mode? I hope so, because this quest for cleaner code is going to be long. Forward, march!

Note: this post is not directly about discussing code styles you, I, or the programmer next to you uses. While I will briefly mention some of my coding style, the primary objective of this installment is to explore some of the HTML, CSS, and JavaScript style guides out there and help you develop your own personal guidelines. Discussing personal style guides is beyond the scope of this post. πŸ˜‰ In addition, the words “rules” and “guidelines” and their variations are used synonymously to mean “suggested practice”, per the aforementioned purpose of this document.

Continue reading “Web Coding Style Guides”

Adventures in Website Design && Development – 2/20/14

As a practicing and learning Website designer && developer, I come across many Website creation related tools, examples, demonstrations, and concepts. When possible, I try to use these elements in my own work. Adventures in Website Design && Development documents my many findings and passes them along to you. In this way, we both are on an adventure to become better website designers and developers.

In this third installment, I will example two, no three JavaScript libraries, one to add features to your site, another to write less CSS, a third to help with all that pesky string concentration, a sweet CSS generator website to make your site pop, in addition to two free services to help your site’s type look its best!
Continue reading Adventures in Website Design && Development – 2/20/14″