Javascript Array to String and String to Array

Unfortunately for us, the methods to turn arrays to strings and strings to arrays are not named that explicitly, but here is a quick cheat sheet on how to do it. Array to String Let’s say we have an array of fruits: To make it an array, we have 2 options: toString() and join(). We can see in this example that join() without parameter is equivalent to toString(). For more flexibility, I prefer using join() to specify the separator I want (by default, it’s: “,”). Have a look at the documentation for more details about join() and toString(). String to … Continue reading Javascript Array to String and String to Array

Different Favicon for Dev and Prod

Having different favicons for your development and production environments can be extremely useful: you can see in a split second if you are working on the right tab in your browser. If you already refreshed, refreshed and refreshed again a page for 5 minutes… wondering why your changes don’t show up, and realizing that you were refreshing the live website instead of the local one, raise your hand ✋. This won’t happen anymore with this quick JavaScript hack to display a different favicon depending on your environment. 1. Create two different favicon images 👉 Note: a favicon image should be … Continue reading Different Favicon for Dev and Prod

JavaScript console.log: Next Level Debugging

If you are working in web development, you have probably encountered JavaScript at some point. As the following chart shows, it has been a dominating language for many years now, and still holds a strong position, probably due to the large number of frameworks using it (Angular, Backbone, Node, React, Vue.. to name a few). Then you are probably familiar with the famous logging method: console.log(). But, are you using it to its full potential ? Here is a glimpse of a few powerful hacks to debug JavaScript. Logging Objects Let’s dive directly into the core of the console with … Continue reading JavaScript console.log: Next Level Debugging

CSS Superpowers: 10 single-line Layouts

I recently came across an extremely useful video about CSS tips and tricks made by Una Kravets on the Google Chrome Developers Youtube channel: 10 modern layouts in 1 line of CSS. I think the title speaks by itself. Let’s see how to create 10 single-line layouts! First and foremost, have a look at the video, it is very detailed and nicely explained ;) If you want to give it a try, go to the Glitch demo page: 1linelayouts.glitch.me And if you are lazy, here is a quick recap: 1. Super Centered How to (finally) center an element both horizontally … Continue reading CSS Superpowers: 10 single-line Layouts

Images: Tips and Tools for Web and Social

I was working on the post layout for this blog when I realised I’m using the same (efficient) tools for years, and it could be nice to share the knowledge :)So, here goes nothing… Image creation/edition I know that Photoshop is a staple of web design, but I have my own favorite when it comes to quick works: Pixelmator Pro. It is extremely easy to use, has a sleek interface, with a short and smooth learning curve, and has a large set of specs for a moderate price. Pixelmator Pro is definitely worth a try! (I don’t have any affiliation … Continue reading Images: Tips and Tools for Web and Social