CSS Grid is a CSS layout module that enables two-dimensional layout. CSS Grid is CSS’s newest layout module and has been designed to create flexible and responsive layouts. While it can be difficult to learn CSS Grid due to its new syntax and layout ideas, the rewards are worth it. With CSS Grid, you can create grid-based layouts with CSS, which means that your layouts will be more flexible and responsive. In addition, CSS Grid is well supported by modern browsers, so you can be sure that your layouts will look great on all devices. So if you’re looking for a new way to create CSS layouts, CSS Grid is definitely worth considering.

It takes time to learn CSS Grid but don’t give up, there’s a fun way now

CSS Grid is a powerful layout tool for web developers, but it can be tricky to learn. For junior developers, the process can be even more daunting. That’s where CSS Grid Garden comes in! This fun and interactive game makes it easy to understand CSS Grid, and makes the learning process enjoyable. With CSS Grid Garden, players learn by completing progressively more challenging levels. As they advance, they build up their skills and confidence, until they are ready to take on real-world projects. CSS Grid Garden is the perfect way for junior developers to learn CSS Grid – it’s easy, it’s fun, and it gets results!

At the time of writing this there are 28 levels that teach you CSS grid from basic to advanced concepts. The levels are colorful and fun as well.

It’s completely free and offers an easy to use built in css editor that updates in real time.

How many levels can you complete? Try the game by visiting https://cssgridgarden.com/

If you’re looking for a great screen recording software that is free and easy to use on a mac, giphy.com’s screen recorder is a great option. It’s completely free to use, and it has a ton of great features.

Just head to giphy.com and download giphy capture. Then, select the area of your screen that you want to record. You can also choose to record your entire screen or just a portion of it. The giphy.com recorder also lets you choose whether or not to include audio in your recording. If you choose to include audio, you can either record your own voice with a microphone or use the system audio. This is great if you want to record a video tutorial or walkthrough.

Came across this fantastic video by this fantastic YouTuber. Just wanted to share it as I felt it really did a great job demonstrating the value in knowing these width properties.

For even more information check out their respective mdn entries:

• Fit-content
• Min-content
• Max-content

Or Watch it on youtube here: 3 useful CSS values that most people don’t know about

I help run a bi-weekly algorithm coding guild at work where we solve many programming problems together. It’s a very fun and rewarding experience and I get exposed to many different programming languages. Sometimes, when I “shift gears” between languages, I mix up the prototype methods in javascript.

The one I recently flubbed was shift() and unshift(), which seems silly but when you’re moving fast its an honest mistake to make!

Let’s review their MDN entries

Array.prototype.shift()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift#description

Array.prototype.unshift()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift#description

How I always remember the difference:

If we literally break up the words into letters (similar to split() lol) you might notice something:

["u","n","s","h","i","f","t"]
// vs
["s","h","i","f","t"]

The way I see it, unshift is “updating” our array above, “shift” with two additional characters in the front (“u” and “n”). In my mind I also remember this by matching up the “u” of update and “u” of unshift. Shift on the other hand complements this as its missing the “u.” In fact this is even how unshift() works! It prepends characters to the front of the array.

Hope this little trick helps you! Remember we update (think “u”) with unshift… with two characters in the front of the word shift > unshift.

Hopefully you know about this bouncing DVD logo screensaver, my mind goes right to watching it in class or seeing it on a bus. Either way over the years its almost become a meme, there’s something just so satisfying about when it hits the corner lol.

Watch it here: Happiness comes from the simple things

(Yes I know the video above is fake, but still thought it really captures the feeling)

With that said, I tried to make it in pixi.js in an afternoon. It surprisingly wasn’t too hard when we utilize pixi.js’s tint api. Essentially though all we need to do is when the logo hits the “wall” just randomly generate a new tint.

If you want to learn more about the tint api you can read more about it here in the docs:

https://scottmcdonnell.github.io/pixi-examples/index.html?s=demos&f=tinting.js&title=Tinting

Check out the live demo on CodePen: Bouncing DVD SPS logo by Andy Sciro (@spssciro)

As always because its on codepen.io so feel free to fork it! You can view the source here, if you want you can replace the logo (it’s a base64 encoded string), because I’m too cheap for codepen premium!!

Watch: How Steve Wozniak Brought Color to Personal Computers

Here is a fascinating talk by the famous Steve Wozniak that resonated with me. The key takeaway here is his point about where and WHEN he is the most creative. Wozniak goes onto explain that’s how he came up with the idea of color display for the mac.

“When you’re without sleep, and when you’re going to sleep your inner head goes briefly into this period of really…creativity kind of thinking. It’s not restricted to the normal thoughts of life, and the day. When you’re waking up your head’s a little like that too, well my head was kind of in this floating half-asleep state and out.”

TLDR; When you’re sleep deprived and working hard on a project, when you drift off to sleep that’s the time you may be the MOST creative. Pretty cool.

When I was a kid I received a basic hobby microscope as a birthday present. I think I spent a whole summer where I would look at anything I could get my hands on. Pond water? Sure let’s check it out. A splinter? Yes. How about sand? Yes I did that too, and while it sounds boring sand is actually pretty interesting under the microscope.

Watch: A Grain of Sand - By Dr. Gary Greenberg - Sandgrains.com

With that said the movement of pond water really left an impression on me. Everything was kinda moving around, alive, a whole world that I never knew was so active (especially because I thought of ponds as stinky and stagnant). It turns out what I was so intrigued with as a child was something called Brownian motion. Here’s a vid about it:

Watch: Random Force & Brownian Motion - Sixty Symbols

A bit more about it (taken from Wikipedia). This motion is named after the botanist Robert Brown, who first described the phenomenon in 1827, while looking through a microscope at pollen of the plant Clarkia pulchella immersed in water.

A quick and dirty recreation of Browian movement in Javascript

Long story short I had some fun playing with the incredible PixiJs and trying to recreate Brownian motion. I consider this a “bar napkin doodle” but the effect is pretty convincing.

Check out the live demo on CodePen: Brownian motion (PixiJS) by Andy Sciro (@spssciro)

The key take away here is just randomizing the x and y values for each tick. The line to really watch is simply this:

X = (Math.random() > 0.5 ? 1 : -1) * Math.random() * amp;

And voila, we get the right wiggle!

Do you have 15 mins for this video today? I can almost guarantee you that this short, well done video will be worth your time. I have watched and read a lot on the subject (MDN here) but this was just laid out so beautiful and visually.

Yeh its from 2014 but that doesn’t matter – the principles and ideas remain!

Watch: What the heck is the event loop anyway? | Philip Roberts | JSConf EU

He’s also very funny 🙂 Check out the transcript here.

“Always bet on Javascript” — Brendan Eich

What can I say about Kyle Simpson? He’s amazing and is a big source of my inspiration for pushing myself to learn more and more about Javascript. Here’s a fantastic talk by him “Keep betting on JS,” that really got me motivated that I am making the RIGHT CHOICE by investing so much time learning Javascript.

Watch it here: Keep Betting on JavaScript by Kyle Simpson · JSCamp Barcelona 2018

Slides are publicly posted here. Check out more about him by reading his bio here on Getify and if you can his FrontEnd Master talks are freaking incredible. Highly recommended to follow him on twitter too.

Photo by Michael Dziedzic on Unsplash

“Google Chrome might be the most used piece of software a front-end engineer uses, therefore it’s useful to know ALL the ins and outs of the browser as an IDE”

The Google Chrome DevTools are quite possibly the most important tool in a web developer’s toolset for delivering quality code. For most of us, it’s become part of our daily workflow, from testing to even borderline developing right in the comfort of the same browser that many of our end users use. With that said here are my favorite hidden workflow gems to help you get the most out of the Google Chrome DevTools. Best of all these are all out of the box with NO additional extensions, hopefully sparking your curiosity to wonder what else can DevTools do?

Let’s go down the list and see how many you know!

1. The Search panel – “CTRL + SHIFT + S”, not the “Source” Panel:

Ever had the frustrating task of trying to find a rogue CSS class or js method? Maybe you’re looking for a method name called on a button? I’m sure we’ve all used the sources panel to try to and find items, however, did you know that chrome has a GLOBAL search (similar to what you might see in visual studio code)? Yes, that’s right, simply press “CTRL+SHIFT+S” to reveal an extremely powerful and fast search that should be used in everyone’s daily workflow.

Oddly enough this feature is a bit tucked away 😉 If you can’t find it go to the three dots in the top right of chrome dev tools and then look for “search”.

2. $0 to easily reference dom elements:

Have you ever want to target an element to potentially run JS code on it via the console? Want to save some time and focus more on the logic? Well Chrome dev tools will automatically reference the last selected element via the “$0” pointer.

Chrome actually keeps track of the last 5 elements 😉 so feel free to test $0,$1,$2,$3,$4 Check it out!

3. There’s a freaking Task Manager in Chrome

Yes, that’s right there’s a task manager inside Chrome. Ever have one tab that is running poorly? Or curious what THE HECK is slowing is sucking up all your PC resources? EASY check out this video 🙂

Watch: How to Open and Use the Task Manager in Google Chrome

Simple go to ”⋮ > More tools > Task Manager”

4. Right clicking network activity – WOW that’s a lot of options:

Have you ever been frustrated with an API’s response? Or maybe you might be curious about its contents. You can “right-click” the network activity items and copy the raw JSON, or even copy as a PowerShell CMD and more. There is a legitimate swiss army knife of tools that will come in handy for just about any job. Personally, I use the copy “response” all the time when I inspect JSON.

5. Pinned Expressions, allow you to always keep an eye on a value:

Expressions allow us to pin and watch variables right in the console. If you are familiar with watch functionality when debugging then you know just how incredibly useful this can be, however being that they are expressions they can have additional logic! This is a relatively new feature and I expect it to grow more in popularity the more developers learn about it. Just hit the eye and evaluate!

Read more here from the official google blog

6. Animations pane, don’t be afraid of it – be your own director

The animations pane is simply amazing, it feels as though I’m in a high-end video editor when I play with it. Why is it useful? You can actually work WITH your animations to polish them, or better yet understand WHY a CSS3 animation is buggy. Simply open the animations pane via the three dots in the top right of your DevTool “settings” and it will automatically start listening for animations.

All it takes to begin is to play with your site’s functionality and it will be recorded. From here you can replay, slow down, even reverse the animations FRAME-BY-FRAME.

It is highly recommended to read more documentation at the official google blog here.

7. There is a quick and easy “accessibility” tab in chrome:

Web accessibility is something I’ve personally seen getting more and more attention (especially at SPS), we as an industry still have a long ways to go but making the process easier for developers is important too. Of course, there are many tools for testing accessibility out on the web, but in a pinch did you know google dev tools have a little “accessibility” tab? Simple highlight an element and see what metadata gets picked up!

8. Snippets, don’t overlook them:

I could write an entire blog post just regarding snippets – this is just supposed to be an overview but DO NOT overlook the chrome “Snippets” section in sources. It’s incredibly useful and there are supporting repos and sites that have “ready to run” snippets that will have you up and running in no time. Above in the screen recording, I’m running a snippet to give me EVERY color displayed on the current website. Once you get comfortable with making them just imagine all the possibilities for how snippets could aid in a workflow.

Take the example snippet above that logs out ALL colors on a webpage, want to know if your site is in style compliance? Well, know you can in a snap, just run the snippet!

It’s highly recommended to check out the curated selection of devtool snippets here

And for even more check out the official Google developer blog documentation here

9. Trying to find a specific event? How about this example, “Why does my button trigger twice?”

Speaking for myself I have been shamefully unaware of the power of the “Event Listener Breakpoints” panel within the sources tab. There is quite a lot of functionality to play with but let’s take one scenario to show how powerful they are. Want to hunt down an annoying repeating “click” function that gets triggered twice? Simply target the “click” event on the mouse and the next event that was subscribed will be automatically revealed in the debug tools waiting at a breakpoint for you to investigate!

Watch: JavaScript Programming Tutorial 69 - Event Listener Breakpoints

I highly recommend this video to learn more!!

10. Dark Themes, Give your eyes a vacation

Lastly, you might have been wondering why is my Dev Tools so dark during this article? Well, there is a dark theme for those interested – I swapped to a dark mode theme and my eyes at the end of the day thank me for using it. To change the theme do the following:

1. At the top right, tap More ⋮ > Settings > Themes.
2. Go to themes (it will launch in a new tab)
3. Pick a cool theme, hit “Add to chrome”

There are MANY THEMES TO TRY – check them out here