AndySciro

“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

“This is my first time hosting a meetup.com group, it’s taken a lot more work than I ever thought and I really respect others who do this type of stuff EVERY MONTH.”

Our first meetup!

Wednesday, Nov 6, 2019, 6:00 PM — 150 Clove Rd, Little Falls, NJ

Food will be provided! Guest speakers from SPS to be announced in the coming days. All are welcome! Speakers:

• Frank De Luccia (principal software engineer) – SnowFlake
• Andy Sciro (senior software engineer) – Leetcode problem
• Cameron Fiederer (lead software engineer) – 5 Steps to Glory

Check out this Meetup →

Check it out! Hosting a meetup.com for software engineering!

This is my first time ever trying to get this off the ground and I want to thank my company SPS commerce for making this possible. There will be pizza, 3 speakers including myself and hopefully we can collaborate, and network. Join us on November 6th, 2019 – address here.

We’re looking for new members, please join!

Being that this is a brand new group I’m looking for new members and remember everyone is welcome! Check out the group here for more information about upcoming events. I’m half-joking about it but come on there’s pizza and some great content!

New Jersey Cloud Computing and Software Engineering Meetup — Little Falls, NJ

This is a virtual/online group for all interested in software engineering, cloud computing, and DevOps culture. Come learn, collaborate, and network in a safe positive environment.

Check out this Meetup Group →

“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

I use the spread operator all day, every day like it’s going out of style. It was such a headslapping moment when I realized it can work on strings too — not sure if useful, but still pretty cool.

One thing I didn’t know was it’s not just for arrays and objects. Check out the Spread syntax (…) docs on MDN — how did I miss it?

So what does MDN say?

“Spread syntax (…) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.”

So that means you can do something like this:

const str = "hello";
const chars = [...str];
// ["h", "e", "l", "l", "o"]

I’m not sure when I’ll actually need to use this over split(), but it’s still cool to know about it.