DEV Community: Dreamy Developer

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 🙏

Problem Solving for Developers - JavaScript [Arrays, Searching].

Dreamy Developer — Sat, 05 Feb 2022 07:15:04 +0000

Hey everyone,
I'm Dreamy and today we're gonna solve a problem in JavaScript.

And today's type of Problem is - Arrays and Searching.

/**
 * Given two sorted arrays array1 and array2 of size m and n respectively.
 * Find the median of the two sorted arrays.
 *
 * @Example 1:
 * Input:
 * m = 3, n = 4
 * array1 = [1, 9, 15]
 * array2 = [2, 4, 5, 23]
 *
 * Output: 5
 *
 * @Example 2:
 * Input:
 * m = 2, n = 4
 * array1 = [41, 78]
 * array2 = [3, 4, 7, 8]
 *
 * Output: 7.5
 *
 * Expected Time Complexity: O(min(log n, log m)).
 * Expected Auxiliary Space: O((n+m)/2).
 */

Have a bit of a coding yourself and see what kind of solution you can come up with and comment your solution here.
You can write your solution in any language and in your way, But don't forget to comment your best solution here.

If you get stuck or you want to see the solution,
II'l show you how would i solve it.

We will Highlight top answers || comments in Future videos.

Check the tutorial for Solution