DEV Community: whoami22

Best Prototyping Tools For UI/UX Designers! 👨‍💻👩‍💻

whoami22 — Mon, 20 Jul 2020 16:16:41 +0000

Discover the best prototyping tools to upgrade your workflow and give your prototypes an edge.

Prototyping tools are the tools to help you make product creation faster and much more effective. Prototypes demonstrate your ideas, and in doing so can change the way you design.

1.SKETCH

Sketch is a vector-based design tool which helps you design interfaces quickly and intuitively.

This is Only for Mac users

2.FRAMER

Includes Pricing.(Per Month)

Free	Starter	Pro	Enterprise
0₹	499₹	832₹	Custom

3.FIGMA

Includes Pricing.(Per Editor/Month)

Starter	Professional	Organization
Free	$12	$45

6.Proto.io

Includes Pricing.

FreeLancer	Startup	Agency	Corporate	Enterprise
$24/mo	$40/mo	$80/mo	$160/mo	**

7.Marvel

Includes Pricing.

Free	Pro	Team	TeamPlus
$0/mo	$12/mo	$42/mo	$84/mo

Angular 10 is now available!🌟

whoami22 — Fri, 26 Jun 2020 14:02:20 +0000

Finally,the wait is over.The Angular 10 is available now.So what's new in Angular 10 and what are the updates in it. let's get started.

Angular 10 is smaller than previous versions of Angular. New capabilities include a new date range picker in the Angular Material UI component library and warnings for CommonJS imports. CommonJS import warnings alert developers when a dependency packaged with CommonJS could result in larger, slower applications, allowing developers to substitute an ECMAScript module bundle.

How to update?

To update your current Angular install, you can run this command:

ng update @angular/cli @angular/core

or you can find the release in github here!

Key Features in Angular 10:

⭐️ New Date Range Picker

Angular Material includes this.

To use this in your code,you can use this following components-

mat-date-range-input
mat-date-range-picker

⭐️ Optional Stricter Settings

In Angular 10,you can have more strict settings while using ng new

ng new --strict

The strict flag does the following things:
-Enables strict mode in TypeScript
-Turns template type checking to Strict
-Default bundle budgets have been reduced by ~75%
and some more...

⭐️ Keeping Up to Date with the Ecosystem

A few updates to the dependencies of Angular to stay synchronized with the JavaScript ecosystem.
*TypeScript bumped to TypeScript 3.9
*TSLib has been updated to v2.0
*TSLint has been updated to v6

⭐️ New Default Browser Configuration

Updated the browser configuration for new projects to exclude older and less used browsers.

v9 default browser list-

v10 default browser list-

....and
⭐️ Deprecations and Removals
⭐️ Angular Team Fixit

and fixed several issues that raised in Angular v9.

You can find more info in github and in Angular official page.

Thanks for reading!! 😀

All about Bootstrap V5 alpha!!🎉

whoami22 — Mon, 22 Jun 2020 14:49:18 +0000

Hello everyone,let's talk about the new release of Bootstrap v5.

Bootstrap is one of the open source that many developers love. So what do we expect of the new changes when Bootstrap 5 is released?

✨Features✨ :

jQuery removed
Updated Forms
Enhanced Grid System
CSS custom properties and dropped support for Internet Explorer.

Let's get deeper!

Brand New Logo

New UI

JQuery

jQuery brought unprecedented access to complex JavaScript behaviors to millions of people.So they dropped jQuery and in addition to that they've enhanced javascript in v5 that focus on code quality and dropping the bulk of our Button plugin for an HTML and CSS only approach to toggle states.

and more 80+ changes in javascript,you can find here

Custom CSS properties

Now we can use CSS custom properties in Bootstrap v5 and a handful of components and layout options.

Example-

Enhanced Grid System

Here’s a rundown of what’s changed in grid:

We’ve added a new grid tier! Say hello to xxl.
.gutter classes have been replaced with .g* utilities, much like our margin/padding utilities. We’ve also added options to your grid gutter spacing that matches the spacing utilities you’re already familiar with.
Form layout options have been replaced with the new grid system.
Vertical spacing classes have been added.
Columns are no longer position: relative by default.

Coming soon: RTL, offcanvas, and more

So,let's get started and you can find more info here

JIT vs AOT compiler in Angular!

whoami22 — Fri, 19 Jun 2020 13:46:41 +0000

We all know that the browser understands javascript code but how the angular code work (TypeScript). To do all this angular provides us its own compiler.

The angular compiler executes in two different ways -

JIT (Just In Time Compilation)
AOT (Ahead Of Time Compilation)

Let's see about JIT.

1. JIT (Just In Time Compilation)
JIT stands for Just In Time Compilation. In JIT approach, the angular code gets compiled at the run time using a typescript (tsc) compiler.

While developing an angular application, it consists of typescript code and angular specific code (like bindings,decorators). In order to run this application in angular , both these codes need to be converted to javascript code.

Here you can observe the flow.

By using JIT approach there are some advantages as well as disadvantages. The disadvantages for using JIT approach are:-

The code has to undergo compilation twice.
a) First through typescript compiler to translate typescript code.
b) Second through angular compiler to translate angular code.
As angular code gets executed at the run time, all the errors with respect to angular code are highlighted at the run time.

Now we will see how AOT overcomes these disadvantages.

2. AOT (Ahead Of Time Compilation)
AOT compilation stands for Ahead Of Time compilation. In AOT approach,the angular code gets compiled at the build time using the angular (ngc) compiler.

Let us see how the AOT approach works to compile the angular applications.

Compared to the Typescript compiler, ngc compiler also does the same thing i.e. translates the TS code to JS code. But along with that it also takes the angular code i.e decorators, bindings, etc., and pre compiles them into imperative code before the application loads in the browser.

Hence, both typescript and angular code are in the executable format before the run time.

AOT approach in angular provides us with many advantages such as:

Rendering is faster.
Helps to find the build errors during build time itself.
Helps in reducing the size of the angular framework.

Note:- All the versions till Angular 8 used the JIT approach by default. From Angular 9, they made AOT mode as the default compilation approach.

Thanks for Reading !

Want to encrypt your disk?

whoami22 — Tue, 16 Jun 2020 15:49:18 +0000

In the modern era many people want security for their files,documents,disk..etc., So to provide security to our files we use folder locker and so many apps, but here comes the VeraCrypt an open-source encrypting disk software. It encrypts entire disk in our system. How it works?
On what basis encryption does?

VeraCrypt is a software for establishing and maintaining an On-the-fly-encrypted volume. On-the-fly encryption means that data is automatically encrypted right before it is saved and decrypted right after it is loaded, without any user intervention. No data stored on an encrypted volume can be read (decrypted) without using the correct password/keyfile(s) or correct encryption keys. Entire file system is encrypted (e.g., file names, folder names, contents of every file, free space, meta data, etc).

Here what VeraCrypt uses for encryption and hashing?
Encryption Algorithm's are -

AES (Advanced Encryption Standard)
Camellia
Kuznyechik
Serpent
Twofish
Cascades of ciphers

Hash Algorithm's are -

RIPEMD-160
SHA-256
SHA-512
Whirlpool
Streebog

Here you can checkout how to use VeraCrypt Tutorial !