A definite guide through one of the most common & asked web development operation

Query String is one of the most classical and used ways to share data between environments and applications.

Historically used as a single-line text placed inside the <isindex> HTML element and sent to the server as a query string addition to the GET request URL, so the web server could respond with a list of pages that matched the keywords.

With the arrival of Web Forms, query strings was then recycled to contain the form fields (name + values) and thus, gained the shape we know…


An approach to save you time and refactoring efforts

JavaScript is beautiful❤️‍🔥 but there is some caveats that you must know about, one of them is about mutation.

Let’s take a deeper dive on this effect and understand once for all what’s that all about on and how you can overcome this effect in an elegant way.

To illustrate the problems, most of the explanations will be covered with some clear examples that you can easily test on your side, even through your Browser’s console.

So enough chit-chat, let’s get straight to the point.

What’s precisely mutation?

Mutation is an alteration of the…


Different strategies to compare operands data type and value equality.

You most likely have heard those terms before, but in case you haven’t, let’s get some concepts rights:

Shallow & Deep Comparison

They are a technic to solve comparison problem that the basic JavaScript Operators can’t solve by itself alone, like comparing if two objects are both equal in data type, size and value.

And as you probably have guessed, shallow strategy compares superficially 2 operands equality — 1st level in depth only— while deep strategy compares the equality from all depth levels.

So, which one should I choose?

Well… it depends on your use case! The most important thing…


A different approach on array access using one of the best ES6 feature

Let’s talk about ⚡️ array access ⚡️.

this is so far one of my favorites tricks on ES6

Work with array is pretty much a standard thing but the access to its items can make some people struggle or create monster code block that can be easily optimized, and remember, readability is gold ⚜️!

The following technic uses ES6 object destructuring, aka smart access, to retrieve values from any position (index) that you want to!

It’s a great choice when you need to access multiple indexes from…


Do you really do it right?

Unlocking the full power of async ops on JavaScript

Asynchronous operations are not a mystery but there is a catch: do you really take the benefits from it?

Know how to properly control the async flow is an important benchmark in a developer career and it can easily be the difference between a “yes” or “no” during a technical interview or even in the thing that can boost the performance of your app.

So let’s get some concepts right:

1 — All async functions returns a Promise, so you have available the methods .then(), .catch() and .finally().

2 — Async functions when called, are executed in the background. Once…


How to get the true data type of an element

Making JavaScript “typeof” work: how to get the true data type

Say hello to #StraightToThePoint series

NERDJACKING #StraightToThePoint series: short stories with no chit-chat, just pure hands on code.

On every story you will find smart code snippets that can elevate your coding experience and save you time to focus on what’s important.

Formulas

Typescript

ES6

Usage

API

typeOf({}); // "object"

Real world scenario / Usage case

Playground demo

Got something on your mind? Let us know in the comments 💪


How I automatised assets loading and make my SSR feel like CSR.

What you need to know before

For the purpose of this article, we assume that you already have basic understanding about server side rendering with React and of course, basic notion of Webpack.

But if you don’t, there’s no harm as well, just have fun 😄

Everything is a trade-off!

Or at least used to be…

So it all started because of the famous issue about Single Page Application harm SEO, which is true, sadly!

And to make that right, the solution was to put the SPA into SSR (Server Side Render) mode.

Just after making the first…


We all know that Media Query is a very important part of the web application, with that we can set any kind of responsiveness and device control.

Most of the developers only use simple media feature as part of the media query syntax, and for that simple use case, there’s a bunch of good approach for your styled-component based application.

Media Feature examples: width | min-width | max-width | height | min-height | max-height

But how about control over the screen orientation, aspect-ratio, resolution and tv devices? Or even have a interpolation between?

That’s where SuperQuery comes in!

SuperQuery is a media-query for styled-component, intuitive…

Marcos Gonçalves

Lead Engineer | Architect | Developer Advocate | 12+ years of experience. Also a lover of a good beer in his spare time.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store