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
But ah yes, there is this one dark spot. Our mutually shared pain. Microsoft’s Internet Explorer.
Classes, Arrow functions, and more syntactic sugar
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.
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.
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 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.
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%;