The thinking here is that if the user had dragged and dropped the element we would provide this function with the index position of where the element was dropped. If that index was not provided then we would push the value to the bottom of the list.

This is all fine and dandy until you consider what if you have an index of zero. Zero to Javascript is both the start index of an array, and also a falsely value when you check it in an if statement. So what do we do.

Well for this example, where the presence of an argument dictates functionality we can use the undefined keyword to resolve our issue

if(index !== undefined){
// Splice in to correct position
}

Now this if statement reads, IF the variable index IS NOT the value of undefined THEN run the functionality in the block

So heres the deal I have a lot of music that I find or gets send to me that is just solid coding music. Typically they are long sets ( > 30 mins ) and they are just great lists to loose yourself in a state of flow if you are anything like me.

My interests typically lead me to gaming or anime inspired music across all genres.

p l a y s t a t i o n w a v e is a set I’ve had on the background on repeat now for the past 2 days. Sporting a chilled out remix of some classic PlayStation tracks from Metal Gear Solid, Final Fantasy and many more. I’d say the first 10 mins are solid tunes to loose your self to, however I find myself looking to skip tracks near the end of the set.

Hey if you liked this please share this around. If you have questions hit me up on Twitter @BrianBest

This past week I gave a presentation at Sheridan College were I talked to the students of the Interactive Multimedia Managment (IMM) program. We talked about how they should best utilize their remaining time left in school to get better jobs, and to start their own companies.

If you are one of those students reading this, I hope my talk helped you.

The key take away for all students is to build up proof online that you do know what it says you know on paper. Then for those who want to jump in to startup is to build up validation prior to building your product.

To that end here are some books and podcast that can help you learn more about these lessons

Books

The Lean Startup By Eric Ries

The Inevitable By Kevin Kelly

Crushing It By Gary Vaynerchuk

Extreme Ownership By Joko Willink and Leif Babin

Podcasts:

Masters Of Scale With Reid Hoffman

Front End Happy Hour

Syntax

Earning Curve

I think if you are developing for the modern web these days life is pretty good for you. Javascript has the proper standards, CSS has an easy to understand templating system now ( grid ), and sites have never been more engaging with considerable browser API and now Progressive Web Apps ( PWA ). We as web developers have never had this much power.

But ah yes, there is this one dark spot. Our mutually shared pain. Microsoft’s Internet Explorer.

Internet Explorer, or IE, is a pain for support. The web is on a fast track of innovation right now, with the upgrade cycle of CSS streamlined into modules, as well as new features coming down the pipe with Javascript and PWA support. However Microsoft caped development of IE 11, the most up to date version, in July of 2015. Meaning, outside of security updates IE11 would not be receiving any more feature updates. Seemingly Microsoft’s plan is to sunset the service pushing users to switch to its evergreen browser Edge, by making it the default browser on Windows 10.

Classes, Arrow functions, and more syntactic sugar
The web has forced Javascript to get so much more potent with web apps consisting of thousands of lines of Javascript. One of the better features of ECMAScript 6 or ES6 is that it has become so much easier for developers to understand what is happening in their code while writing less of it.

Async/Await
Async/Await is the savior of callback hell. Await allows developers to hold up the main thread in JS for an asynchronous function to resolve before continuing. I can’t tell you how many lines of code this has saved me.

PWA
Progressive Web Apps are now the reality we live with today. Service workers are a dream to work with because they enable so many deep integrations to the browser allowing us to make compelling experiences on the web. Being a PWA and having offline support is something that Google will start weighing heavily in their SEO algorithms soon.

CSS Grid
Another quality of life thing for developers. See the less code we have to write the less likely there are to be bugs, and we can make experiences everyone can enjoy. The grid makes the layout so simple for any developer and is one of the more powerful features of modern CSS.

CSS variables
CSS variables is a big one if you build page templates. I’ve been using variables in my CSS for years thanks to Sass. However native support for variables in CSS adds a whole other level of awesome and can, for some projects, remove a build step simplifying projects.

Seeing this divide in features reminds me of the IE 6 days. A time when the web was stagnant because of the absolute monopoly Microsoft had over the browser market. Supporting IE 6, later on, was hell because everything that was the standard did not work. Very little JS support and CSS features were limited to CSS2, but even that was not correctly implemented. The only thing that saved us from the tyranny of IE 6 was time, the time unwilling users took to update their browser. At least this time around Microsoft is a willing partner in making the transition to at least edge for all its users. However till that time, we can call Internet Explorer 11 dead, IE 11 is the new IE 6.

This has been something I wanted to do for a loooooong time. Ever since I saw @wearejam3 make some cool sites with it in them years ago. Angled divs. They look amazingly cool! I’ve never really made one before that was used to section off to different spots but I was inspired by @richardcodes who happens to be building his site with some of this divisions on his home page. I’m not really reinventing the wheel here but I did find some cool resources to help others make something like this themselves. https://bennettfeely.com/clippy/ can help you make clipping masks to make this exact kind of angle for a div or other elements. This was a quick make but really fun to do!

I accidentally found this neat idea when I was playing around with my bouncing switches idea inspired by @sasha.codes. Making white squares that bounce up when you hover over them kinda have this cool effect of the webpage coming alive in some way. I showed Elva this and she suggested coloring in a logo or something, so I put my company logo (Digicraft Software Consultants) in and with an added twist the logo squares stay colored when hovered over once and don’t animate again. So this makes for a fun way to reveal a hidden message!

Today I wanted to do a little CSS of my own after work. I’ve been posting a lot on Instagram and I was checking out one of my followers @uncognition and he gave a shout out to @sasha.codes in his story. Anyway, Sasha is, from what I gather, a designer in the bay area and she posts some really cool animations and Sass snippets. Her first post on the page is of some bouncing colored boxes. I wanted to recreate that post my own way and put my own spin on it. So I present to you the bouncing switches! Fun note I used transform3d here to enable some hardware accelerated animations, however, I think I undo some of that with the box shadow. No matter still looks really smooth on my screens

In all seriousness, I think if I was born in another time before computers I’d probably be a chef. Last night Elva and I watched the first episode of the new season of Chef’s Table. I love this show. The first episode is about a chef named Christina Tosi and It’s a powerful first episode. It has one of those endings that leave you inspired to do something. So this button is inspired by Christina and the bakery she created called Milk Bar. They make a whole range of cakes and other sweets so I decided to make the button into one of those cakes. So here’s an order button where your cake gets eaten right after you order it!

I’m laaaate, yesterday I had this whole plan for a button which I, unfortunately, didn’t’ start until around 9 pm. Got tired, hit a coding wall, and decided to look at this with fresh eyes in the morning. So here are the fruits of my labor. This button is inspired by the new God of War game coming out soon. In it, the main character Kratos uses a big burly ax called the Leviathan Axe, and he can throw it and it will return much like Thor’s hammer. This button charges up kinda like the heart button does from a few days ago, then when you let go it can fly off and return. Also, a point of differentiation from the heart button, clicking on this once with no hold will also animate.