DEV Community: Dreamy Developer

I Got Tired of Running Publint, attw, and Knip Separately—So I Built One Tool

Dreamy Developer — Thu, 06 Aug 2026 10:00:34 +0000

If you publish npm packages, you probably know the pre-publish ritual: run publint, read the output. Run attw (are-the-types-wrong), read a different output. Run knip, read a third output. Mentally merge all three in your head, fix whatever's broken, repeat.

I do this every time I'm about to cut a release, and at some point last week I just got annoyed enough to fix it. So I built pubcheck — it runs all three tools together and gives you one pass/fail verdict instead of three separate reports to reconcile.

pubcheck  ✔ publint   ✔ attw   ✖ knip (3 issues)

✖ FAIL — 0 errors, 3 warnings

knip
  ✖ unused-exports: formatDate (src/utils.ts)
  ✖ unused-exports: Config (src/types.ts)
  ✖ unused-dependencies: lodash

Exit code 0 or 1, so it slots straight into a prepublishOnly script or CI.

Why these three specifically

Each one catches something real, and none of them catches what the other two do:

publint checks whether your package.json actually makes sense — broken exports maps, a main field pointing at a file that doesn't exist, ESM/CJS mismatches. This is the stuff that works fine on your machine and then breaks for exactly one user with a weird bundler config.
attw checks whether your type declarations resolve the same way your actual code does, across node10/node16/bundler resolution. You can ship perfectly valid JS and completely broken types and never notice, because tsc on your own repo doesn't catch it — only checking the published artifact does.
Knip finds dead code and unused dependencies. Not really a "will this break for someone" check, more of a "why is this package 40kb bigger than it needs to be" check.

None of them overlap much, which is exactly why running only one gives you false confidence.

The build

Nothing exotic — TypeScript, tsup for the dual ESM/CJS build, commander for the CLI, cosmiconfig for the config file. publint and attw's core package both expose clean programmatic APIs so I call those directly. Knip I ended up shelling out to instead of using its programmatic export — it mutates process.cwd() and console output internally in ways that felt too fragile to embed, so I just run knip --reporter json as a subprocess and parse that. The JSON reporter is the one output shape Knip actually documents as stable.

The three checks run in parallel with Promise.allSettled, so a crash in one doesn't take down the others — you get a runError on that tool's result instead of the whole CLI dying.

The bug that almost shipped

Here's the part I actually want to talk about, because it's the kind of thing that makes you second-guess a "quick weekend project."

Right after publishing, I ran pubcheck against an already-installed copy of itself sitting in node_modules — just poking at it, not expecting anything interesting. publint came back with nine errors, every single one some variant of "this file is not published, is it specified in pkg.files?" — for files that were obviously right there on disk.

First theory: race condition. attw calls npm pack internally to inspect what actually ships, and I had it writing the tarball straight into the project directory while publint was scanning that same directory at the same time (they all run in parallel, remember). Seemed plausible, I "fixed" it by packing to an isolated temp directory instead, republished, tested again.

Same nine errors. Exactly the same, in the exact same order. Which was the tell I'd missed the first time — a race condition gives you inconsistent results between runs. Identical output every time means something deterministic, not timing-dependent.

Turned out the actual cause was almost funny: publint auto-detects which package manager to use for its own internal packing step by walking up the directory tree looking for a lockfile. My test project had a yarn.lock sitting a couple of levels up (because I'd installed with yarn add), so publint quietly decided to use yarn pack instead of npm pack — and yarn pack (classic Yarn 1) has a real, reproducible bug when the target directory is nested inside someone else's node_modules. It silently returns basically nothing, so every file check fails.

None of that has anything to do with what actually gets published, though — npm publish is what ships to the registry regardless of what package manager the author used locally to develop it. So the fix was just forcing publint's pack option to "npm" explicitly instead of letting it auto-detect. One line. Took a lot longer to find than to fix.

I'm mentioning this mostly because it's a good reminder that "it works when I test it" and "it works" are not the same claim, and the fastest way to close that gap is to immediately go run your own tool against something adjacent to your own use case — in my case, literally just checking my own package once it was sitting in someone else's node_modules, the way a real user would actually encounter it.

Trying it

yarn add -D pubcheck-cli
npx pubcheck

or without installing:

npx pubcheck-cli

There's also a programmatic API if you want the verdict object in your own scripts instead of parsing stdout:

import { runCheck } from "pubcheck-cli";

const verdict = await runCheck({ cwd: "./packages/my-lib" });
if (!verdict.pass) process.exit(1);

It's early — 0.1.x, and I found (and fixed) two real bugs in the first day it was live, which tells you something about how much more testing across different setups it probably still needs. If you publish packages and try it, I'd genuinely like to know if it breaks on your setup. Repo's at github.com/Dreamyplayer/pubcheck-cli, issues and PRs welcome.

I built a logging middleware because I was tired of manually listing which fields to redact

Dreamy Developer — Thu, 06 Aug 2026 07:06:14 +0000

A few weeks ago I was reviewing logs from a side project and found an email address sitting right there in plain text, in a log line I'd written months earlier and completely forgotten about. Nothing bad happened, but it bugged me enough that I went looking for a fix. What I found was a pile of tools that all had the same shape: "sure, we'll redact your logs, just tell us which fields to redact first."

Pino has a built-in redact option. There's fast-redact. There's mask-json. All good tools, all doing exactly what they say. But every single one of them wants a list of paths up front — req.headers.authorization, user.password, body.creditCard, and so on. Which means the day someone on your team adds a new field with a customer's phone number in it, nothing redacts it, because nobody told the tool to look for it.

That gap — detecting PII by what it looks like instead of by what it's named — is what I ended up building. It's called piiguard, and it's a thin wrapper around Winston and Pino, not a new logger.

What it actually does

You wrap your existing logger, and it auto-detects emails, credit card numbers, SSNs, phone numbers, JWTs, and API-key-shaped strings by pattern, plus a list of common secret field names (password, token, apiKey, etc.) by key name. Zero config to get the baseline working.

import pino from 'pino';
import { wrap } from 'piiguard';

const logger = wrap(pino(), { adapter: 'pino' });

logger.info({ email: 'jane@example.com', password: 'hunter2' }, 'user signed up');
// -> { "email": "j***@e***.com", "password": "[REDACTED]", "msg": "user signed up" }

Two things worth calling out in that output. First, the email is partially masked, not fully redacted — I went back and forth on this, but landed on partial masking as the default because full [REDACTED] everywhere makes your logs useless for actually debugging anything. You still want to know "oh, this is the jane@ account having trouble" without the full address sitting in plaintext. Second, the password is fully redacted no matter what, because there's no safe way to partially reveal a credential. That distinction — PII gets masked, secrets get nuked — runs through the whole design.

The part that was harder than I expected

Getting the regex patterns right was the easy 20%. The other 80% was making sure the wrapper didn't break the logger it was wrapping, which turned out to have more sharp edges than I assumed going in.

Pino's hooks only work at construction time. I initially tried hooking into hooks.logMethod via logger.child({}, { hooks: {...} }), assuming child loggers could add hooks retroactively. They can't — Pino only accepts that option when you first create the logger. So instead I wrap the actual log methods (info, error, etc.) directly, which works regardless of how the original logger was constructed, at the cost of one extra function call per log line.

Winston carries internal symbols on the info object. Winston attaches Symbol.for('level') and Symbol.for('message') to the log object internally, and my first version of the redaction walker rebuilt the object using Object.entries(), which only sees string keys. Result: symbols silently dropped, and the rest of the format pipeline downstream had no idea what to do with the mangled object. Log lines just... stopped appearing, no error, nothing. Took me a minute to figure out why.

Error objects were the sneaky one. message and stack on a plain new Error(...) aren't enumerable own properties, so my object walker skipped straight past them. Which means if you did logger.error(err, 'request failed') and err.message contained something like "failed for jane@example.com", none of it got redacted — because the walker never even saw it as a field to check. The whole point of the library, silently failing on one of the most common logging patterns there is.

Buffers exploded into garbage. Object.entries() on a Buffer iterates every single byte as a numeric key. A ten-byte buffer became a ten-key object like { '0': 104, '1': 101, ... }. Not a redaction bug exactly, just a "this tool corrupts your binary payloads" bug, which is arguably worse.

None of these showed up in my first round of unit tests, because my unit tests imported straight from src/, not from the actual built and packaged output. The fix that mattered more than any individual bug fix was making myself install the real published tarball into a separate throwaway project and run it there, the way an actual consumer would. That's where the Winston symbol bug and the Error/Buffer bugs actually surfaced.

A TypeScript lesson I didn't expect

Here's a fun one. wrap() needs to behave differently depending on the adapter — for Pino it hands you back a wrapped logger, for Winston it hands you back a Format object to plug into format.combine(...). I typed it with a single generic:

function wrap<T>(loggerOrWinston: T, options: PiiGuardOptions): T

Which is wrong, because the Winston branch doesn't return T at runtime — it returns something else entirely. TypeScript didn't catch this until someone actually tried to use it against the real winston types, at which point it threw a genuinely confusing error about Format being incompatible with typeof winston.

The fix was proper overloads, one per adapter. But while fixing that I ran into something I hadn't seen before: my internal duck-types for "something that looks like a Pino logger" used Record<string, unknown>, which works completely fine as a plain type annotation, but fails as a generic constraint (T extends Record<string, unknown>) against real class instances that don't declare an explicit index signature — which Pino's actual Logger type doesn't. Assignability and constraint-satisfaction aren't the same check in TypeScript, and they diverge in exactly this case. I only found it because I typechecked against the real pino/winston type declarations instead of trusting my own hand-rolled test doubles.

Where it's at now

It's up on npm as piiguard, MIT licensed, TypeScript throughout, dual ESM/CJS build. Pino and Winston are optional peer dependencies so you only pull in whichever one you actually use.

npm install piiguard
# or
yarn add piiguard

It's genuinely a small library — the whole point was to do one narrow thing well rather than become a logging framework. If you've got PII quietly leaking into logs because nobody remembered to add a field to a redact list, this is built for exactly that problem.

Repo's on GitHub if you want to look at how it's put together or file an issue: github.com/Dreamyplayer/piiguard

5 Flutter Dart Tips.

Dreamy Developer — Wed, 27 Jul 2022 16:56:32 +0000

1) .any

This is a list of Languages

And you can use the .any to check whether any elements of this iterable to satisfy the test.

In this example we verify if any language starts with the letter D or B

The first one is true and the second one is false.

2) .padRight .padLeft

You can add characters before or after a string if you use the padLeft or padRight.

This number is the total amount of character you will have and

This is what will be added inside your string

You can do the same thing with the padRight.

3) .shuffle()

It is sometimes useful to randomize items inside the list

For this you can use the shuffle and you can see that everything is now randomized.

4) String Multiplication

It is possible to use string multiplication with dart.

This example will print x times your string.

5) .toSet()

If you have a list of repeated items.

You can use the .toSet() to remove all the duplicates and this is the final result.

A Powerful Story AboutThe Eagle. 🦅

Dreamy Developer — Wed, 27 Jul 2022 08:42:35 +0000

once upon a time ⏲️

A farmer found an abandoned eagle’s nest.

And in it was an egg still warm. 🌺 🥚

looking out…

there was no sign of its mother or of its siblings 👩‍👧

And so the farmer feared for the little eagle’s life.

and took the egg back to his farm 🏡

and laid it in the nest of one of his hens

After two weeks, the egg hatched 🐣

and out came a little baby eagle 🦅

the hens looked after the eagle

as if it were a little chicken 🐤

And so the eagle grew up.

Along with the other chickens 🐓

it pecked about the farm yard

scrabbling for grain 🌾

It ran into the chicken house. 🏡

When it started to rain 🌧️ it did exactly what all the other chickens did.

All his life…

It spent its whole life within the yard and rarely looked up.

Because, all the other chickens never looked up 🙄

After it had a very long, uncomfortable life in the chicken yard.

It was very old, and one day…

It decided to lift up its head, and so above a wonderful sight. 🌌

He saw an eagle soaring high above in the sky.

Looking at it, the old creature sighed and said to itself:

❝If only I had been born an eagle! 🦅❞

You see in life, in your life

You only have one life. 💖

let no one tell you what you can or can’t do 🙅‍♂️

because it is only up to you

You were born an eagle but decided to live as a chicken because all the others did the same. 🐓

What you don’t know is…🤔

that you are the eagle 🦅

that you are the Lion 🦁

that you are the chicken 🐓

That all the strength and might you need to fulfill all of your dreams in your life are already within you. 💪

Your decision not to look up into the sky and understand that you are an eagle, and as time will pass you become old; and one day when you realize that you are an eagle, it might be too late to change.

So go after your dreams today and believe that you can achieve anything that you want.

“Never judge an eagle by the opinion of turkeys.”

Top 13 IDE & Tools for Flutter Development in 2022.

Dreamy Developer — Tue, 26 Jul 2022 18:17:02 +0000

Flutter is the immensely used cross-platform framework by developers to develop cross-platform applications. It produces efficient cross-platform apps that can work on both Apple’s iOS and Android platforms seamlessly. Other than that, many things are there that should be taken into consideration at the time of Flutter application development.

The use of Hot Reload, widget catalogs, etc., features of the Flutter framework, add ease to developing effective and efficient applications. The features further help to make Flutter a useful and ethical framework for cross-platform app development. Flutter lets you choose from numerous IDEs to develop an app. Each of them has the potential to make coding easy and faster for developers. Flutter IDEs and tools are an unparalleled ally in terms of visual assistance, code completion, and debugging the code.

1. Visual Studio Code

Recommended by developers and the most efficient IDE for Flutter Development, Visual Studio Code comes equipped with a huge plugin system and functionalities. A web app developer prefers this IDE for Flutter Application Development for various reasons. A few of them include Git control & terminal, debugging, plugins that ease out the process of development, and more.

2. Firebase

Firebase is a well-known cloud computing platform introduced by Google to accelerate app development. It supports Flutter and works as a Backend as a Service that comes with hosted backend services, including cloud storage, authentication, real-time database, crash reporting, machine learning, and more. Ultimately, it unifies the backend.

3. Android Studio

Android Studio is recommended by many developers who use the Flutter platform to create applications. It is one of the best IDEs that helps you to create efficient apps. It provides you with code completion features, syntax highlighting processes, and widget editing assistance. The Android Studio plugin in flutter lets you build and run flutter apps on an Android emulator or device and prevent the need to download and install the Android Studio.

The above-mentioned are some of the Best IDEs for Flutter Application Development. You can use any of them when you develop an app on the Flutter platform. It is one of the best UI frameworks that’s been introduced by Google to all the developers. They can now create native apps quickly for mobile, desktop, or web users. So, use these IDEs to develop appealing applications that millions of users across the world can use for their benefit.

4. Codemagic

Codemagic is also considered one of the most effective Flutter Development Tools. Because it helps you in boosting your application development process when you are using the Flutter framework. Cinemagic will help you in testing and releasing the apps with Codemagic. Moreover, you will be able to market the app without facing any complications or issues.

You won’t need a configuration to release your application in the market when you are using Codemagic. Also, you can use the automation feature to make your product and testing. It even helps in the releasing process more straightforward and done in an effective manner.

5. Appetize

One of the best and online-based, Appetize helps you to release your applications on the Android and Apple platforms quickly. It will help you in running the native apps on the mobile when the user is accessing the browser in HTML or JavaScript format.

Moreover, it is quite natural for the users as well as developers to maintain their applications and tacks effectively. So, whenever you are developing an application in Flutter, you can use this option to make the release process more straightforward and efficient.

6. TestMagic

While developing an application using the Flutter framework, TestMagic comes really handy. It is a free online application like Codemagic used by Flutter developers. It is useful to distribute the developed and tested application on the respective platforms easily and also helps to gain feedback.

7. Supernova

This new edition, Supernova, has recently been introduced that can be used in the Flutter applications development. Supernova assists you in generating the UI code for the platform. It further extends its support to design the widgets stylishly.

You can also add tokens and different styles to make your application appealing and attractive. Moreover, when you are using Supernova, you can also open the Flutter application next to it to work on that in real-time.

8. Adobe Plugins

The new plugin, Adobe has been recently announced at the Flutter Interact event. The Adobe XD simplifies the developer to a designer workflow. The Adobe plugin generates the Dart code for design elements and that code can be directly placed in your application codebase.

Moreover, the XD and many other plugins will be introduced to the platform in the upcoming year. And hence you can still make good use of the platform to create compelling apps using the current plugins.

9. Panache

Panache lets you customize the colors & shapes to create beautiful themes for your application. For the applications that you are building in Flutter, Panache will assist you in creating beautiful and appealing themes. One of the effective ways to create appealing themes and materials for your software, you can customize your widgets and download the theme as you wish.

Over 40 million testers and developers using this theme, you can review the codes once you have completed the whole coding structure. Moreover, Panache is a developer trusted and considered the best Flutter Development Tool.

10. Sylph

There is an AWS device farm that contains a huge pool of iOS and Android devices. It helps you run integration tests on numerous Android and iOS devices at once to ensure your build runs as expected. However, AWS device farm supports native and Appium tests and Flutter Driver tests are not in its supported frameworks list.

To unlock this benefit for Flutter apps, Maurice McCabe developed Sylph. Sylph is an open-source command-line tool and a wrapper around AWS Device Farm. It opens the door to AWS Device Farm for Flutter apps. And allows you to run Flutter integration and end-to-end tests on various mobile devices at a time.

11. Amplitude

Amplitude is a great in-app analytical tool to study your app user behaviors and make them more personalized to them. Besides, there is an Amplitude Flutter SDK that helps you monitor and track extensive insightful data. Further, it lets you integrate the data into app development and take data-driven actions.

12. Instabug

Who does not want to get real-time insights that could improve an overall experience and uplift user engagement? By integrating Instabug’s FLutter SDK into the Flutter app, you can enable real-time bug reporting, in-app crashes, feature requests, etc. Your app users would be able to report the bugs they experience without leaving the app.

Moreover, Instabug collects device logs & info, captures screenshots, and sends in-depth reports. The information can be used to eradicate glitches and enhance user experience.

13. RevenueCat

Business mobile application development calls for a robust, well-maintained, and up-to-date purchase infrastructure. It requires databases, APIs, servers, and frontend code that need to be kept updated with the change. RevenueCat, on the other hand, takes care of all this and provides the tools to set up any in-app subscription model quickly.

You can install RevenueCat SDK for Flutter to build and manage the billing infrastructure that supports Android, iOS, and Stripe. Interestingly, it also assesses churn, MRR, and LTV by tracking how an application is working.

Conclusion

The above-mentioned are some of the Best Flutter Development Tools you can use in 2022 to develop a high-performing app. Flutter is one of the best UI frameworks & SDKs that has been introduced by Google to all the developers. The framework enables the creation of out-of-the-box, native-like apps for mobile, desktop, or web quickly.

Above all, with the support of these tools, you can now create even more appealing applications quickly and attract a maximum audience and receive a high ROI. In case, choosing the right tool is difficult for you, you can always count on our Flutter experts who have practiced the marvelous technology since its dawn.

4 ways to center a component/div in CSS

Dreamy Developer — Tue, 08 Mar 2022 14:38:16 +0000

Flexbox
Grid
Margin auto on a flex item
Position

/* Using Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  place-items: center;
}

/* margin auto on a flex items */

.parent {
  display: flex;
}
.child {
  margin: auto;
}

/* Using Position */
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%); /* OR right: 0; bottom: 0; */
}

What are Web Vitals?

Dreamy Developer — Fri, 04 Mar 2022 15:46:25 +0000

Web Vitals

Proposed by Google to measure the quality of user experince on web and improve web performance.

Measured by the above three aspects of website

Largest Contentful Paint (LCP): measures loading performance. Time that browser takes to render the element having largest height in the viewport of the webpage
e.g. large slider image in the hero section.

Good < 2.5 seconds
Average < 4 seconds
Poor > 4 seconds

First Input Delay (FID): measures interactivity. There might be a delay in browser performing user's action upon user's interaction becasue main thread might be busy parsing and executing some large Javascript.

Good < 100 ms
Average < 300 ms
Poor > 300 ms

Cumulative Layout Shift (CLS): measures visual stability. The sudden changes on webpage e.g. due to asynchronous loading of content, loading of video with unknown dimensions or an image.

Good < 0.1
Average < 0.25
Poor > 0.25

Measuring web vitals

use npm package web-vitals to monitor your app.
Use Chrome extension web-vitals
Run in Chrome DevTools Lighthouse

40+ Killer JavaScript One Liners 🔥

Dreamy Developer — Tue, 15 Feb 2022 12:54:31 +0000

👋 Hey Everyone! Comment your Best One-liner JS code. 🙏

[1. Get a random boolean]

This function will return a boolean (true or false) using Math.random() method. It’s a 50/50 chance to get either true or false.

const RandomBoolean = () => Math.random() >= 0.5;

[02. Check if the provided date is a weekday or Weekend]

const isWeekend = date => [0, 6].indexOf(date.getDay()) !== -1;

[03. Check if a number is even or odd]

const isEven = num => num % 2 === 0;
// OR
const isEven = (n) => !(n & 1);

[04. Remove all duplicate values in an array]

const setArr = arr => [...new Set(arr)];

[05. Check if a variable is an array]

A clean and easy way to check if a variable is an array.

const isArray = (arr) => Array.isArray(arr);

[06. Generate a random number between two numbers]

This will take two numbers as params and will generate a random number between those two numbers!

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
console.log(random(55, 999));

[07. Generate a random string (unique id?)]

const randomString = () => Math.random().toString(36).slice(2);

[08. Swapping Two Variables || Destructuring]

Destructuring assignment that swaps the variables values

let foo = '🥳';
let bar = '🥶';
[foo, bar] = [bar, foo];

[09. Calculate number of days between two dates]

To calculate the days between two dates, we first find the absolute between two dates and then divide it with 24 * 60 * 60 * 1000 = 86400000 which is equal to milliseconds in a single day, and at the end, we round the result and return it.

const daysDiff = (date, date2) => Math.ceil(Math.abs(date - date2) / 86400000);

🔥 You can use Math.round or Math.floor instead of Math.ceil.

[10. Different ways of merging multiple arrays]

// Merge but don't remove the duplications
const merge = (a, b) => a.concat(b);
// Or
const merge = (a, b) => [...a, ...b];

// Merge and remove the duplications
const merge = [...new Set(a.concat(b))];
// Or
const merge = [...new Set([...a, ...b])];

[11. Get the actual type of javascript primitives]

const trueType = obj => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();

[12. Truncate]

// string at the end
const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length - 3)}...`;
};

// string from the middle
const truncateStringMiddle = (string, length, start, end) => {
  return `${string.slice(0, start)}...${string.slice(string.length - end)}`;
};

// A number to a fixed decimal point
const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);

[13. Capitalizing a string]

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
// OR capitalize all starting words in a sentence
const capitalize = (str, lower = false) =>
  (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());

[14. Check if the current tab is in view/focus]

This simple helper method returns true or false depending on if a tab is in view/focus

const isTabInView = () => document.hidden;
isTabInView(); // true/false
// OR
document.hidden ? 'hidden' : 'visible';

[15. Reverse a string]

const reverse = str => str.split('').reverse().join('');
// OR
const reverse = str => [...str].reverse().join``

[16. Check if an element is currently in focus]

We can check if an element is currently in focus using the document.activeElement property.

const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)

[17. Check if the current user has touch events supported]

const touchSupported = () => {
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}

[18. Scroll to top of the page]

const goToTop = () => window.scrollTo(0, 0, 'smooth');
goToTop();
// OR
const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" });
// Scroll to bottom of the page
const scrollToBottom = () => window.scrollTo(0, document.body.scrollHeight)

[19. Get average value of arguments]

We can use the reduce method to get the average value of the arguments.

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);

[20. Convert Fahrenheit / Celsius]

Dealing with temperatures can be confusing at times. These 2 functions will help you convert Fahrenheit to Celsius and the other way around.

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;

[21. Get query parameters from the URL]

To obtain query parameters, we must first divide the URL at “?” and then replace “=” with “:” and **“&” **with “,”.

const getQueryParams = URL =>
  JSON.parse('{"' + decodeURI(URL.split('?')[1]).replace(/&/g, '","').replace(/=/g, '":"') + '"}');

getQueryParams('https://www.com?search=api&test=true')
// {search: 'api', test: 'true'}

[22. Clipboard API]
To copy a text, we can use JavaScript navigator.

const copy = (text) => navigator.clipboard.writeText(text);

To paste text:

const text = navigator.clipboard.readText();

[23. Get Value of a brower Cookie]
Retrieve the value of a cookie by accessing with document.cookie

const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();

cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"

[24. Check if Date is Valid]

const isDateValid = (...val) => !Number.isNaN(+new Date(...val));

isDateValid("Feburary 10, 2022 09:19:00");

[25. Find which is the day by a given date in year.]

const dayOfYear = (date) =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date()); // Result: 272

[26. Clear All Cookies]

You can easily clear all cookies stored in a web page by accessing the cookie using document.cookie and clearing it.

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

[27. Check if array is empty && Object Is Empty]

const isNotEmpty = arr => arr?.some(x => x);
// OR
const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;

// Object Is Empty
const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object

[28. Get Selected Text]

Get the text the user has select using inbuilt getSelection property.

const getSelectedText = () => window.getSelection().toString();

[29. Detect Dark Mode]

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode) // Result: True or False

[30. Shuffle an Array]
Shuffling an array is super easy with sort and random methods.

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());

[31. Generate Random Hex]

const randomHex = () => '#' + Math.floor(Math.random() * 16777215).toString(16);
// OR
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;

[32. Convert RGB to Hex]

const rgbToHex = (r, g, b) =>
  "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(0, 51, 255); // Result: #0033ff

[33. Get Min & max value of an array]

const getMinMax = (arr) => [Math.min(...arr), Math.max(...arr)];

[34. Reload the current page]

const reload = () => location.reload();

// Or
const reload = () => (location.href = location.href);

[35. Check if a string consists of a repeated character sequence]

const consistsRepeatedSubstring = (str) => `${str}${str}`.indexOf(str, 1) !== str.length;

[36. Convert a letter to associate emoji]

const letterToEmoji = (c) => String.fromCodePoint(c.toLowerCase().charCodeAt(0) + 127365);

[37. Calculate the angle of a line defined by two points]

// In radians
const radiansAngle = (p1, p2) => Math.atan2(p2.y - p1.y, p2.x - p1.x);

// In degrees
const degreesAngle = (p1, p2) => (Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180) / Math.PI;

[38. Convert radians to degrees && degrees to radians]

const radsToDegs = (rad) => (rad * 180) / Math.PI;
// &&
const degsToRads = (deg) => (deg * Math.PI) / 180.0;

[39. Wait for an amount of time]

const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

[40. Create an object from the pairs of key and value]

const toObj = (arr) => Object.fromEntries(arr);

[41. Get union of arrays]

const union = (...arr) => [...new Set(arr.flat())];

[42. Partition an array based on a condition]

const partition = (arr, criteria) => arr.reduce((acc, i) => (acc[criteria(i) ? 0 : 1].push(i), acc), [[], []]);

partition([1, 2, 3, 4, 5], (n) => n % 2); // [[1, 3, 5], [2, 4]]

[43. Remove falsy values from array]

const removeFalsy = (arr) => arr.filter(Boolean);

That’s all Aliens! 👽
Hope you found this helpful, see you in the next one 😉

Problem Solving for Developers - Javascript

Dreamy Developer — Sun, 13 Feb 2022 04:19:54 +0000

Hey, Everyone! 👋
I'm Dreamy! 🧔 Today's problem [easy]
Have a bit of coding yourself and see what kind of solution you came up with, and comment down your best solution. 🙏

/**
 * Given an array of size N consisting of only 0's and 1's.
 * The array is sorted in such a manner that all the 1's are placed first
 * and then they are followed by all the 0's.
 * Find the count of all the 0's.
 * Example 1:
 * Input:
 * N = 12
 * array = [1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0]
 * Output: 3
 * Explanation: There are 3 0's in the given array.
 * Example 2:
 * Input:
 * N = 5
 * array = [0, 0, 0, 0, 0]
 * Output: 5
 * Explanation: There are 5 0's in the array.
 */

Google It Like a Pro: 10 Tips

Dreamy Developer — Wed, 09 Feb 2022 12:31:50 +0000

As an experienced software engineer, you’ve probably heard the phrase Google it more times than you can count at this point. Perhaps even to the point where it gets annoying when people say it to you! But instead of seeing this as an insult, think of it as advice from your senior developer —they’re saying Google it because they know that it will help you learn something new and deepen your understanding of the topic you’re talking about.

1. Research Your Problem Online

If you have any questions about how to go about finding your answer, there’s a good chance someone has already asked that question and gotten an answer online.

2. Look at the Source Code

One of my favorite tricks for finding solutions is to look at source code. I’ll Google an error message, and then find and read through someone else’s code that I think has similar issues.

3. Solve Simpler Problems First

In programming, it’s easy to get lost in big picture problems. The beauty of big problems is that they can be solved elegantly once you’ve solved smaller, simpler ones.

4. Get Experience with Open-Source Software

Most large, established companies use open-source software (OSS) to save time and money. Smaller companies often avoid OSS because they assume it won’t have all of their specific features.

5. Learn Basic Algorithms

An algorithm is simply a step-by-step process for accomplishing some task, and mastering basic algorithms is one of the best ways to learn how to Google it like a pro.

6. Know When to Use Tools like StackOverflow

If you’re stuck on how to solve a programming problem, StackOverflow is a great resource to use.

7. Ask Questions in Real Time

One of my favorite things to do while learning is to ask questions in real time. Whenever I find myself getting stuck on something, I’ll just ask someone nearby if they know how to work through it.

8. Keep an Active Mind

People who are active both physically and mentally stay on top of their game.

9. Know the Difference Between Need and Greediness

A good rule of thumb is that you need to be consuming twice as much content as your niche competitors. In some niches, you might need to consume even more content than that.

10. Avoid Imposter Syndrome

When you’re just starting out, it can be easy to fall into imposter syndrome; you might start worrying that your skills aren’t as strong as everyone else around you.

Top Reasons to love Next.js 🥰

Dreamy Developer — Mon, 07 Feb 2022 16:54:53 +0000

what is Next.js?

Next.js is a React framework for building sites using the JAM stack architecture. JAM stands for Javascript, APIs and Markup. Effectively, it is building sites with Javascript, with data from APIs, which all ends up as simple markup.

Why Next.js loved by most developers?

Automatic Code Splitting -

code-splitting comes as standard, avoiding that monolithic bundle that might slow down your user’s experience.

Prefetching -

Next.js also pre-fetches content when it sees links to that content in the viewport. It will only look to fetch prematurely if you have a decent connection.

When next.js sees prefetch, it will provide a ServiceWorker for the corresponding route which will load all of the JavaScript behind the scenes.

Better performance –

Because we’re serving pre-built files (probably from a CDN), we cut out network waiting times which we might have normally associated with websites (such as database calls).

Security –

Removing the need for servers and databases, and pre-building your pages on deployment reduces the possible avenues for malicious souls to attack your website.

Scalability –

You can serve your files from anywhere, and if you do so via a CDN, you can deliver as demand dictates.

Optimise Prime -

Performance is one of those JAM-y benefits which make Next.js such a good choice.

Server Side Rendering -

Next.js will pre-render static HTML on the server, and deliver that to the user. Which is super fast.
It allows all of our application code to utilize server side rendering (SSR)

HMR and Error Reporting -

The effectiveness of Hot-module replacement (HMR) has made it a must-have for the development process. Instead of reloading an entire application when code is changed, HMR will only recreate modules that have been altered.
Users will quickly learn about the error messages that Next.js immediately renders to the browser.

Next.js comes with Webpack set up for you, more or less invisible, and all the while offering all of the goodies that you would want. Asset compilation (Sass), hot reloading, optimisation (code-splitting) and code transformation (for backwards compatibility) are all set up by default.

To get Started, Run

npx create-next-app@latest

or
If you're using yarn run

yarn create next-app

After the installation is complete:

Run npm run dev or yarn dev to start the development server on http://localhost:3000
Visit http://localhost:3000 to view your application
Edit pages/index.js and see the updated result in your browser.

10 Cool VS Code Extensions Released in 2022.

Dreamy Developer — Sun, 06 Feb 2022 17:30:59 +0000

1. Preview.js
Talking of testing front-end preview, here’s another VS Code extension. Preview.js is a full-fledged extension that lets you perform almost hot reloads on Vue and React component previews instantly in your IDE.
Besides, the Preview.js editor is darn quick to display errors if any, and also lets you customize the properties that are reflected almost instantly. and It supports multiple previews, wrapping components, and storybooks as well.

2. Lightcode iOS Debug
We can use VS Code for iOS projects. Perhaps, if you’re wanting to try how GitHub Copilot fares with Swift. Or maybe just to debug your Flutter app.
Either way, the Lightcode iOS Debug extension adds support for easier debugging of iOS apps — by letting us run the apps on the phone and also use breakpoints, inspect local variables, etc.

3. Kubescape
Kubescape is an emerging open-source tool for performing security analysis on Kubernetes clusters in your CI/CD pipelines.
We now have a Visual Studio Code extension that lets you scan YAML files for security issues and misconfigurations just after you saved your code — thereby letting you find access control breaches and other vulnerabilities quickly — all within your editor itself.

4. Dyno File Utils
You could be starting a new project. Or maintaining a large codebase. In either case, file util VS Code extensions always come in handy.
Inspired by File Utils VSCode Extension, the Dyno File Utils VS Code extension provides file customization operations — like creating, deleting, moving, and remaining one or more files and folders. The extension also lets you exclude certain files or folders, generate new folder structures from strings, and create project templates.

5. Readable — Ai Generated Comments
The Readable — Ai Generated Comments extension uses Open AI’s GPT 3 to auto-generate inline comments and docstrings. It works across Typescript, Javascript, Python, C#, C++, Java, and PHP at the moment.
And from the initial looks of it, the extension does an inverse of the GitHub Copilot. In order to start comments suggestion, simply type double // or # if you’re using Python.

6. XState
XState is a popular JavaScript library for creating state machines. They’ve enhanced the developer experience with the all-new VS code extension.
From autocompleting transition targets and initial states to highlighting issues in your state machine to visualizing the XState machine with an interactive diagram to jumping across targets, actions, and conditions — they’ve got everything to simplify your workflow.

7. IAM Legend
Tired of reading the AWS IAM docs? In that case, this is the ideal extension you’d need.
IAM Legend lets you autocomplete code, browse documentation and use resolutions for wildcard actions — without ever leaving the VS Code editor.
It supports the Serverless framework and Terraform as well.

8. PhoneView
This one is handy in case you want to check if your website previews correctly on mobile screens. Once installed, a menu becomes visible on right side which says "Open PhoneView Tab". Press it and you are good to go.

9. Luvia Theme
A purple-ish theme that dark mode lovers and who code at night would thoroughly enjoy.

10. Material Code
Google’s design in your VS Code editor. Auto enables recommended settings like bracket pair colorization.Blue-grey dark theme. Adjust lightness, blue intensity in settings.

❤️ Like && Subscribe 🙏