All posts by StrawberryCode

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