#7daysofbuttons My Hero Academia UA button

See the Pen UA Button by Brian Best (@brianbest) on CodePen.5308

For today I wanted to create my own icon from “scratch”, at least make the vector all on my own. You may not know this about me but I am a huge anime fan so to satisfy some catharsis, I went out to Google and found the UA logo from the anime My Hero Academia, then I traced it in Sketch. The logo is really simple so as a beginning to building my own vectors this was easy to do. I made two logos, one with a gradient the other just the lines and a white fill. When you hover over it with a mouse I hide the line version, which is on top, to show the filled one beneath. then for added flair, I have the words Plus Ultra coming out the top, a mantra from the show. It basically means to give a 110%;

Go Beyond,
Plus Ultra.

#7daysOfButtons Heart Button – diving in on SVG animations

See the Pen button2 by Brian Best (@brianbest) on CodePen.5308

This was perhaps one of the hardest buttons I’ve ever made myself code. I wanted to push myself and make something I’ve never made before. So my inspiration was the “like” button in Facebook Messenger, the one that grows the longer you hold it. The other button that inspired me was the Medium clap button where for the longer you hold the button the bigger the value the claps become. So this is my heart the longer you press it the more it fills up till its finally full. I really want to get that ‘fill up’ animation right, and to do it I used SVG animations, but I had no idea how to make that work. After a ton of trial and error I got it working the way I wanted!

#7daysOfButtons CSS button challenge day one

See the Pen wmNXNV by Brian Best (@brianbest) on CodePen.5308

This week I want to challenge my self to practice more CSS so for the next 7 days I’m going to make a new button from scratch and see where I get. I’ll be posting my code on this site! Here is the first button that I’m doing for the 7 Days of Buttons challenge. It’s kind of a button you would expect for a mobile drop-down menu, or otherwise. Currently, this is a pure CSS version, clicking on that X won’t return it to its rest state. Id like to find a way to do that using CSS but I can’t really think of one without using JavaScript. Anyway day one down 6 to go!

Levels of expertise in JavaScript – Are you ready for the tutorial?

The following blog is apart of my growing list of guides for teachers and students of online tutorials in web technology. To help judge what a tutorial expects of the reader to know before taking. This time we’re talking about JavaScript, but check out my other guides for HTML and CSS.

JS is a big one, growth in it has just exploded in the past ten years. What used to be a system for adding a sprinkling of logic to a page can now run entire websites, hardware, and 3D games. For this guide, I’m only covering Vanilla JS as it exists on the front end in a browser. Later on, I’ll make other blogs to include more advanced features including various frameworks like React, Vue, as well as the backend side of JavaScript with Node.js.

For this scale, I will use Beginner, Basic, Intermediate, and Advanced to indicate what prior knowledge a student should know before taking on a tutorial. For each level, the student should know or have:

Beginner

Know nothing Jon Snow

  • No previous knowledge of JavaScript

Basic JavaScript

everything is on fire why

  • intermediate knowledge of both HTMLand CSS
  • variables, and how to declare them
  • operators, like +, -, etc.
  • functions
  • What an API is
  • How to access and query the DOM

Intermediate JavaScript

getting there.gif

  • Loops
  • Create and render new elements on to the DOM.
  • How and when JS renders on a web page
  • Events. How to listen for events and create your own.
  • Function and variable scopes, you should know what this is
  • Anonymous functions and Immediately Invoked Function Expression (IIFE)
  • Browser support for new JS features and how to use polyfills to fill in support when needed

Hey if you like this why not sign up for my once-a-month newsletter that covers my favorite content on tech and programming delivered to your inbox


Advanced JavaScript

Master of Javascript

  • How to make an AJAX request
  • How to use promises and know when you get data.
  • The differences in var, let, and const to declare variables.
  • What closures are and how to utilize them
  • What Object-Oriented Programming, or OOP, is and how it can happen in Javascript
  • Optimization of logic for speed

This blog is only a guideline, of course, there are plenty of cases where some overlap of knowledge will be required. Example being a basic tutorial requiring some intermediate knowledge. For students, just remember Googling for terms you don’t completely understand is encouraged. For educators, it’s not a bad thing to go into more detail on what you think might be necessary knowledge.

Levels of expertise in CSS – Are you ready for the tutorial?

The following is a guide to help understand Cascading Style Sheets (CSS) tutorials. To assist with those who are creating tutorials, as well as my future tutorials, I would like to quantify levels of expertise in CSS. I’m planning on making a guild for HTML and JavaScript! I have found that sometimes these skill levels are not well defined. So as a resource for students to gauge if a tutorial is right for them, I’ve come up with the following. For this scale, I will use Beginner, Basic, Intermediate, and Advanced to indicate what prior knowledge a student should know before taking on a tutorial. For each level, the student should know or have:

Beginner CSS

Know nothing Jon Snow

  • No previous knowledge of CSS

Basic CSS

Peter Grifin level of confidence

  • Requires a basic or intermediate knowledge of HTML.
  • How to make a style rule.
  • Understanding of the differences between a tag, ID, and class rule declaration.
  • Understand on how styles ‘cascade’ downward.
  • Some basic style rules, like color, font-family, background-color.
  • How to insert CSS files into HTML documents.
  • What pseudoclasses are, and how to target rules on to them.
  • What web fonts and system fonts are.

Intermediate CSS

getting there

  • What the rule !important does and why not to use it in most cases.
  • What the browser defined styles are and why reset files are needed.
  • Most of the style rules.
  • How to target rules based on HTML attributes.
  • Understand the various ways of positioning and when to use them.
  • Understand the box model, when to use position, margin, border, padding, height, and width.
  • How to nest styles within styles.

Hey if you like this why not sign up for my once-a-month newsletter that covers my favorite content on tech and programming delivered to your inbox


Advanced CSS

Bob ross of css

  • Requires an advanced knowledge of HTML.
  • All style rules and when they apply to specific tags.
  • Sibling selectors, like > and +.
  • How to solve style issues caused by browser compatibility.
  • How to use media queries to build responsive sites and elements.
  • How to create animations with keyframes.
  • How to use :before & :after to make style driven elements in the DOM.
  • Understand what CSS preprocessors are and how to use at least one.

This blog is only a guideline, of course, there are plenty of cases where some overlap of knowledge will be required. Example being a basic tutorial requiring some intermediate knowledge. For students, just remember Googling for terms you don’t completely understand is encouraged. For educators, it’s not a bad thing to go into more detail on what you think might be necessary knowledge.

Levels of expertise in HTML – Are you ready for the tutorial?

To help with those creating tutorials, as well as my own future tutorials, I would like to quantify levels of expertise in HTML. I have found that sometimes these skill levels are not well defined. So as a resource for students to gage if a tutorial is right for them I’ve come up with the following. For this scale, I will use Beginner, Basic, Intermediate, and Advanced to indicate what prior knowledge a student should know before taking on a tutorial. For each level, the student should know or have:

Beginner

i have no idea what HTML is .jpg
  • absolutely no previous knowledge of HTML.

Basic HTML

Basiclly halfway there ish

Intermediate HTML

With great power comes alright HTML

Advanced HTML

You have become amazing at HTML .gif
  • Knowing all the HTML tags
  • The ability to manipulate the DOM with JavaScript to add, modify, or remove HTML
  • Understanding how to create your own attributes using data-*
  • Build HTML documents semantically
  • How your HTML will be read by Google, Facebook, etc. for content

In the end, this is only a guideline. There will be some tutorials out there that fall in that gray space between basic and intermediate, or intermediate and advanced.

How jQuery Selectors Work With document.append() – jQuery To Vanilla JS

A week ago I attended FITC’s Web Unleashed, a conference for front-end developers. There I participated in a talk by Luke DeWitt titled “A Very Public and Overdue Funeral for jQuery.” Luke described all the ways that web development has grown out of jQuery. Standards are so much better now then they were in 2006. For example:

We don’t need the jQuery selector because we have querySelector().

We don’t need $.class() anymore because we have classList()

We don’t need $.data() anymore because we have dataset()

These are all standard now in all browsers as of IE 11. With easy polyfills for earlier support. So if you’re not targeting legacy browsers, why do need jQuery?

One of my clients has a site that uses jQuery and I ran across this gotcha when moving some features to vanilla JS. There is a function that sends in a jQuery object thats has the text for a modal in HTML. I had to take the current embed and add another template to display beside it.

See the Pen document.append() – jQuery To Vanilla JS example 1 by Brian Best (@brianbest) on CodePen.5308

This is similar to how the code was working prior to the new feature. $(‘#foo’).html() works because we are directly pasting in the html string into a innerHTML. Watch what happens when we try combining two templates using the append() function.

See the Pen document.append() – jQuery To Vanilla JS example 2 by Brian Best (@brianbest) on CodePen.5308

The issue now is the browser sees the HTML output as a literal string. append() expects to get a DOM node as an input, but here $(‘#template’).html() is only sending in the string of what is in its innerHTML. As we can see with $(‘#template-list’), the jQuery selector does not return a DOM node but a jQuery object.

See the Pen document.append() – jQuery To Vanilla JS example 3 by Brian Best (@brianbest) on CodePen.5308

To get both #template and #template-list to appear using append() we need to find the DOM node in the jQuery object. Luckily the fix is quite simple as using $(‘#template’)[0] returns the DOM node from within the jQuery object.