A few days ago I was trying to make the Javascript logo in photoshop to put onto a blog post banner but couldn’t quite get the font for the logo right. I was playing guessing games with sans-serif fonts but then finally googled it to learn more.
Long story short the font appears to be made by House Industries, its called “NEUTRA TEXT BOLD FONT”
View the font on House Industries
However, throughout my little journey to figure this out I found out some interesting facts about the logo. It was actually kinda cool to see how it came into the community’s possession.
1. It’s a community logo released at JSConf (with love).
So apparently this logo was released in 2011 at JSConf2011, but was used for almost a year and a half prior by the community. The logo lives in Github user voodootikigod’s repo and the community has since contributed various versions, media formats, and tweaks to it.
2. You can use it for anything
On the logo’s Github it states, “We are releasing this under a MIT license so you can print it on anything, use it anywhere, and never have to worry about royalties, licenses, and other such things. So yeah use it for anything! View license here.
3. The font is available here.
In the Logo’s Github pull request history you can see Pull request #5 where there is an HTML/CSS version being created. The discussion on that PR has users trying to identify the font, with that said it’s revealed that the font is “Neutra Text Bold.”
4. My little test… Yes that’s the font for sure 🙂
So I loaded up the font in photoshop alongside the famous Javascript logo and Yep that’s it! Check it out, perfect!
It’s incredible to think that the LANDMARK Javascript release es6 was over 6 years ago (See the official release here)! Javascript and its community have learned a lot since that time, one point of criticism was how HUGE the es6 release was and how difficult it was to learn EVERYTHING. With that said, ES2021 adds a nice digestible set of awesome features coming to your browser soon 🙂 Here are my favorite things being added!
1. String.prototype.replaceAll()
I think this is a really slick feature, hopefully you think the same. Have you ever had to replace some characters in javascript with String.prototype.replace() only to find you had to have a global flag with a regex? Well not anymore, because now with String.prototype.replaceAll(), it’s very straightforward and much more readable.
Let’s go see its MDN entry:
The
String.prototype.replaceAll()method returns a new string with all matches of apatternreplaced by areplacement. Thepatterncan be a string or aRegExp, and thereplacementcan be a string or a function to be called for each match. — MDN
const str = 'Every dog has its dog day.';
console.log(str.replaceAll('dog', 'cat'));
// "Every cat has its cat day."2. Numeric separators
Maybe I think this is cooler than it really is but I think this feature speaks for itself. I used to make a few Javascript games here and there and I feel this would have really helped me back then with some of the values I stored. I do feel though that the hex stuff I will start using today. Overall it’s SOOO much easier to read, I love it.
const budget = 1_000_000_000;
const hex = 0xA0_B0_C0;3. Logical OR assignment operators
This is a slick feature and to understand why it’s so cool is to compare it to the other ways of doing this. Granted ES6 brought us default parameters in functions which I feel this would be a good candidate for (MDN here) using it, but this still has a lot of value in general day-to-day usage of Javascript.
const config = {};
config.timeout ||= 5000;
// config.timeout is now 5000Also if you like this feature, check out the logical and operator (MDN here).
4. Promise.any()
This is an interesting feature for sure, so what’s a good use case for this? Borrowing from the MDN we get a good idea here…
“This method is useful for returning the first promise that fulfills. It short-circuits/stops after a promise fulfills, so it does not wait for the other promises to complete once it finds one. Unlike
Promise.all(), which returns an array of fulfillment values, we only get one fulfillment value (assuming at least one promise fulfills.”
What’s a good example of using Promise.any()?
In the weekly SPS UI-guild we actually discussed this new feature (BTW always looking for new members, message Chris N about it!). One cool idea that fellow UI-guild member Ken Korth thought of was …
“…you were trying to get an accurate time from a time server and you were trying many time servers, when the first one came back, you could use any because the rest would be canceled…”
Or Imagine we are hitting an API endpoint and what comes back is relatively large/slow like a large MSTR sales report whose data changes infrequently. We could have a cached API and the live data API BOTH go out and whichever API comes back first is displayed to the user. Cool right?
What’s the difference between Promise.race() and this?
There is a very important KEY difference between the two, basically, Promise.any() vs Promise.race come down to how they handle failing Promises.
- Promise.any() – Brings back the first promise, and only one result. Shows failure when all promises fail.
- Promise.race() – Brings back the first promise that succeeds or fails.
const promises = [fetchFromServerA(), fetchFromServerB(), fetchFromServerC()];
Promise.any(promises)
.then((first) => console.log('First to resolve:', first))
.catch((error) => console.log('All promises rejected:', error));And there are even more features coming in the release, notably weakrefs (MDN here). Check out the v8 release notes here for even more info.
Hopefully, you can start to use these features in your daily workflow, and before you know it we’ll have es2022 features. Happy coding!
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!
“Azure data studio has solved my MSSQL problems on my mac period. I can work alongside my pc counterparts without swapping to VM”
A coworker recommended I try it after I was bouncing between DataGrip and DBeaver. I’m glad I did. Azure Data Studio is a cross-platform database tool for data professionals using on-premises and cloud data platforms on Windows, macOS, and Linux. I’m assuming it’s also another electron app just like VSCode, and it just feels right. It also comes with the amazing plugin/extension browser and as it matures I’m sure we’ll see it used by more and more developers.
So what are you waiting for? Give it a try, It’s multiplatform and free!
“Wait… normally we lowercase almost all our declarations/LHS in javascript? Why are some functions uppercase?”
Functions are uppercased to communicate to other developers the the new keyword is required. This also applies to JS classes, but remember in JS that classes are just syntatic sugar for constructor functions that operate in the same way.
This is called “the Constructor Invocation Pattern.” Here’s a little more about it in the MDN – New Operator. Also “Javascript: The Good Parts” has a really great writeup about it. Invocation – JavaScript: The Good Parts [Book]
Photo by Markus Spiske on Unsplash
“Emptiness” in javascript sometimes makes me scratch my head. Especially when checking for emptiness. Think I’m crazy? Ask your fellow developers to explain the difference between null + undefined.
What does the MDN say about NULL?
Null: The value
nullrepresents the intentional absence of any object value. It is one of JavaScript’s primitive values and is treated as falsy for boolean operations.
typeof null // "object" (not "null" for legacy reasons)
typeof undefined // "undefined"
null === undefined // false
null == undefined // true
null === null // true
null == null // true
!null // true
isNaN(1 + null) // false
isNaN(1 + undefined) // trueWhat does the MDN say about Undefined?
Undefined: The global undefined property represents the primitive value undefined. It is one of JavaScript’s primitive types. A variable that has not been assigned a value is of type undefined. A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. A function returns undefined if a value was not returned.
How about a silly… but really easy to understand image. I found this on stack overflow.
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
“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 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.
“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:
- At the top right, tap More ⋮ > Settings > Themes.
- Go to themes (it will launch in a new tab)
- Pick a cool theme, hit “Add to chrome”
There are MANY THEMES TO TRY – check them out here