DEV Community: Braincuber Technologies

Earn Money By Testing Websites | 💲💲$100 a Day

Braincuber Technologies — Tue, 26 Apr 2022 12:01:15 +0000

Best Side Hustles to earn some cash. Use your free time to make some money.

There are many ways to earn money by using your free time in fun and exciting ways. These sites give you cash for taking online surveys and testing websites and apps.

Why do they give you money?

Before launching a project, many large companies test it with some professional audience and take their reviews in exchange for little cash. If the reviews are positive, they launch that project; if not, they discard it or change it. You can be that person who can give that review and earn money in return. You must be wondering whether they will be at a disadvantage by giving money to every reviewer. No, they are not because they save a lot of money when they launch their product by using little money on these platforms.

You must keep in mind a few things when using these sites; do not give your sensitive information and share the survey with others because these tests are concepts that are not made public. If you share these concepts, you might get in trouble.

Top sites:

1: UserTesting:

UserTesting is the first site that will come to your mind when we talk about these sites. It is a very easy-to-use site and uses it anywhere in the world where you can receive payments through Paypal.

You will first have to give a sample test; if you pass it, you will take other tests. You can earn up to $10-$15 for a 20-min test.

2: Enroll:

Enroll is a similar platform to UserTesting, but what makes it better is its availability; you can take tests anywhere on any device. Keep in mind that you must have a PayPal account to get money.

Many tests on Enroll are rapid and take a few minutes to complete. So, it means they will not help you get a satisfying amount of cash, but they can be a source of a few dollars.

3: Respondent:

Respondent is easily the highest paying site on this list, and it can be considered the best. So, you will see a higher quality of test on it with higher rewards. To give you a simple understanding, you can earn up to $100 in just an hour.

There are many other opportunities onRespondent like ‘paid focus group.’ To learn more about them, give it a click.

4: UserFeel:

UserFeel is very similar to the other sites on this list. You have to pass a test to join and start earning; $10 for each test. Also, you can withdraw money quicker than other sites, making it the fastest in terms of money transfer.

5: UserLytics:

Unlike other sites mentioned, UserLytics allows you to test the website and other digital products.

Keep in mind to have a webcam for tests here because you will need it a lot. After making a profile and passing the initial test, you will receive emails about test opportunities.

To sum it all up, I will say that the sites mentioned here are only the tip of the iceberg; many other websites will pay you by testing different products. So, if any of the websites mentioned above are not available to you, you can give other websites like UTest or Test.IO a tray.

Top 50 Useful GitHub Repos That Every Developer Should Follow

Top 50 Useful GitHub Repos That Every Developer Should Follow

Braincuber Technologies — Tue, 26 Apr 2022 05:40:13 +0000

Github is like facebook for developers. Giving this name to this amazing site is not injustice. After all this site not only helps you to host your code with version control, but it is also helpful in making networks with other great developers across the world. A lot of developers love to spend time on GitHub exploring the project, learning a lot of stuff all the time, making connections with other developers and contributing to the open-source projects. Over 37 million users and more than 100M repository is the proof of GitHub’s popularity, and it shows the love of developers towards this incredible site.

So it’s a popular platform for tons of resources, and there are many repositories which provide free resources on various aspects of software engineering. I would like to share 50 GitHub repositories that would help you in the journey of programming.

Before you go further read this if you can't feel confidence

10 ways to improve logical thinking skills in programming

1. FreeCodeCamp

A non profit organization and best opensource community. Over here you can help others code and also learn to code by the various tutorials they have provided.

2. Awesome Python

A github repository that lists various python frameworks, libraries, softwares, podcasts, resources for python developers

3. Ultimate Node Js Resources

Resources related to Node Js at one place which includes IDE’s security, testing frameworks blogs and much more.

4. You don’t know JS

You don’t know JS is a popular javascript book which is available in github as well.

5. Coding Interview University

If you want to get into top software companies it provides a study plan. It also helps yourself to stay prepared for technical interviews for Google, Microsoft etc.

6. Public Apis

As a developer when dealing with Apis for application you can choose a list of free Apis from this site which ranges from animation, games, google analytical apis etc.

7. App Ideas

It lists a collection of application ideas to improve your coding skills

8. Ultimate Web Development Resources

Lists collection of web development resources which ranges from the list of softwares, hosting platforms, code challenges, fonts etc. If you want to get started with web development these resources listed here would help you to get started

9. Awesome

Awesome lists about all kinds of interesting topics and resources.

10. Developer Roadmap

It provides a roadmap inorder to become a software engineer

11. The Algorithms

If you want to learn algorithms based on different programming languages this one is for you.

12. You dont need

People choose popular projects, often not because it applies to their problems. It contains a list which you don’t need for developing

13. Javascript Questions

It contains advanced javascript questions which helps to upgrade yourself as a javascript developer

14. Wtfjs

A list of funny and tricky JavaScript examples

15. Complete Python 3 Bootcamp

There is a course in udemy based on the repository name and all the course files are present here

16. Tech Interview Handbook

A curated interview preparation materials for busy engineers

17. The Art of Command Line

One github page to master all your command line operations

18. Gitignore

It list useful gitignore templates for your project

19. 30 seconds of code

It lists short javascript snippets for your next project

20. Computer Science

A repository which provides the path to become a self taught computer science engineer.

21. Data Science

A repository which provides the path to become a self taught data science engineer.

22. How to secure anything

A repository about security engineering.

23. Free Programming Books

List all the free programming books available for a programmer

24. Mobile Verification Toolkit

It is a collection of utilities to simplify and automate the process of gathering forensic traces helpful to identify a potential compromise of Android and iOS devices.

25. 33 Js concepts

It lists about 33 Javascript concepts which every developer must know.

26. Front end interview handbook

It lists various front end interview preparation materials for busy engineers.

27. Project based learning

A list of programming tutorials in which aspiring software developers learn how to build an application from scratch. These tutorials are divided into different primary programming languages. Tutorials may involve multiple technologies and languages.

28. Build your own X

What you cannot create you cannot understand. It lists resources which help you to build your own database, bots, cryptocurrency etc.

29. System Design Primer

Learn how to design large-scale systems and also preparation for the system design interview.

30. Javascript Algorithms

Algorithms and data structures implemented in JavaScript with explanations and links to further readings.

31. Big List of naughty strings

The Big List of Naughty Strings is a list of strings which have a high probability of causing issues when used as user-input data.

32. The book of secret knowledge

A collection of inspiring lists, manuals, cheatsheets, blogs, hacks, one-liners, cli/web tools and more.

33. Node best practices

The Node.js best practices list

34. Real World

“The mother of all demo apps” — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django etc.

35. TheAlgorithms/Python

Lists all Algorithms implemented in Python.

36. Project Guidelines

A set of best practices for JavaScript projects

37. Clean Code Javascript

Lists all the clean Code concepts adapted for JavaScript

38. Front End Checklist

The perfect Front-End Checklist for modern websites and meticulous developers

39. Css Pro Tips

A collection of tips to help take your CSS skills pro

40. Javascript Testing Best Practices

Comprehensive and exhaustive JavaScript & Node.js testing best practices

41. Java Design Patterns

Lists various design patterns implemented in Java

42. First Contributions

Lists Materials to contribute to open source projects

43. Slidev

Lists the presentation slides for developers

44. Cheat.sh

Unified access to the best community driven cheat sheets repositories of the world.

45. Awesome Privacy

A curated list of services and alternatives that respect your privacy because PRIVACY MATTERS.

46. Blockchain

To create a simple block chain using python

47. Ionic framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

48. Pixijs

The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

49. Supercookie

Supercookie uses favicons to assign a unique identifier to website visitors. Unlike traditional tracking methods, this ID can be stored almost persistently and cannot be easily cleared by the user.

50. How web works

Details information about how DNS, HTTP protocol, servers work or about Render Tree, DOM Tree, page painting etc. It is a useful repository to learn the basics of how the web works.

Cool, You’ve finished reading, Now if you have any other valuable github repositories to share feel free to drop below…

Don’t Use Switch or If-Else in JavaScript, Instead, Try This

Braincuber Technologies — Tue, 26 Apr 2022 05:03:38 +0000

Instead of Write better switch and if…else statement in JavaScript with object

What is the switch statement?

The switch statement evaluates an expression, matching the expression’s value to a case clause, and executes statements associated with that case, as well as statements in cases that follow the matching case.

Problems with switch

The switch case is a little difficult to read and a bit ancient, and it’s prone to debugging problems.

The odd thing about the switch case is that you have to include the keyword break at the end of each case to prevent the control from moving to the next.

in addition to that, it’s a disaster when it comes to mapping complex scenarios, which can lead to difficult debugging and nested errors.

Every time we write a switch statement, we must exercise extreme caution.

The joy of writing code is curtailed when you have to be extra cautious and that causes a huge problem.

Using objects

Let’s set up a match function to simulate switch cases

And you can do something like this :

An object can be used as an alternative to the switch statement.

Using Object one can implement a keyed method lookup.

Summing up

This isn’t to say that the switch statement isn’t useful or that using object literals is always the best option. Object literals as switches, on the other hand, should become another tool in your javascript toolbox.

You can find the full code we implemented in this post here.
That’s it

I hope you enjoyed it!

Leave any questions, concerns, recommendations, or criticisms in the comments section. This motivates me to keep improving and writing on dev

See you later! ❤️

7 JavaScript clean coding tips every developer should know 😎

Top JavaScript VSCode Extensions for Faster Development 🔥

10 ways to improve logical thinking skills in programming

Braincuber Technologies — Sat, 23 Apr 2022 12:07:17 +0000

Before we look at ways to improve our logic, first let us understand and have a common ground for what exactly logic is!

Logic is the way of analysing, thinking, and our sensible approach to solving a given problem

That being said, now let us look at the 10 ways to improve our logic in programming

1. Practice writing lots of code

Time, Effort, and Pure Hard Work is the only key.

Practising is vital when trying to improve logic-building skills.

Practice is a crucial part of our life. If we want to have a better command over anything, we need to practice the same thing repeatedly.

2. Look at other people’s code

The next best thing after writing code is to read code.

The best way to build logic is by understanding how others build it, ensuring you can re-enact the process when required.

3. Learn programming data structures

Programming is all about data structure and algorithms.
Data structures are the fundamentals of all programming languages. It means that if you want to have a good command over any programming language, then you should start with the data structures of that programming language

4. Divide the problem into smaller chunks

Break down the problem statement into smaller use cases. Divide the problem into smaller chunks and this is one of the best way to improve logical thinking.

Remember: How do you eat an elephant?
Piece by Piece

5. Think negative scenarios as well

Not just happy path.
Think through all the use cases where the solution can or may or will fail. Never assume user will not do negative use cases.
Most likely they will.
Hence try to break the application with all possible edge cases.

6. Be Confident & Fearless

Be fearless. If your mind thinks it's easy, it will find an easy way out.
Start with a thought of solving a problem and be confident that for most use cases we will find simple and efficient solutions

7. Make mistakes.

We all make mistakes, it’s common, it’s human.
That’s the only way to learn.
The world is not going to stop if you make mistakes.

8. Learn from your peers/seniors/team.

One of the most efficient ways is to learn from your seniors and experienced programmers.
Pair programming, getting help from mentor or just code review together can provide so much valuable knowledge.

9. Be motivated even on dark days.

This is purely mental ability.
We need to keep ourselves motivated especially on days when things are not going well.
What is your motivation?
It can be career, family, financial goals, material goals, can be anything.

10. Commit to take complex task

Once you commit, you will force solving it.
That’s one of the most challenging ways to jump in and claim your stake.

It’s not easy, but you will be rewarded accordingly!

Recap of the main points

Look at other people’s code
Learn programming data structures
Learn programming data structures
Divide the problem into smaller chunks
Think negative scenarios as well
Be Confident & Fearless
Make mistakes
Learn from your peers/seniors/team
Be motivated even on dark days
Commit to take complex task

Thank you.

If you enjoyed this article, please follow my blog to keep getting updates.

How to study Data Structures and Algorithms while working a full-time job?

13 REST API interview questions you need to know

Braincuber Technologies — Wed, 13 Apr 2022 11:57:13 +0000

No matter which programming language or technology you’re working with, you’ve probably encountered a REST application programming interface (API). REST stands for Representational State Transfer, which is the one of the most widely-used architectural styles for web services, microservices, and APIs today. APIs that follow the REST architectural style are considered REST APIs.

Whether you’re a junior or senior developer, you may be asked questions about REST API in an interview. To help you ace your next interview, we’ll discuss some common REST API interview questions and answers.

We’ll cover:
13 REST API interview questions you need to know
Wrapping up and next steps

13 REST API interview questions you need to know

1. What is REST?

REST stands for Representational State Transfer. REST is an architectural style for web development. REST architecture lays out guidelines for the transfer of resource representations between clients and servers on the web.

2. What is a REST API?

A REST API or RESTful API is a web API that conforms to the REST architecture style.

visit blog.braincuber.com for more useful content

3. Describe the 5 constraints of the REST architectural style, and their benefits.

In case they ask for 6 constraints, see the following question about the optional constraint.
A truly RESTful API must conform to the five REST architectural constraints:

Uniform interface:

Interface between client and server that allows for standardized client-server communication in a single language
Necessary for the decoupling of client and server

Client-server:

Client-server model, for separation of concerns between client and server
Permits client and server to operate and evolve independently
Supports portability and scalability

Stateless:

Refers to stateless communication protocol, wherein the server stores no information about session states
Improves performance by reducing server load

Cacheable:

Servers mark their responses as cacheable or non-cacheable
Clients and intermediaries are able to cache server responses
Reduces client-server interaction, supports scalability and performance

Layered system:

Layers between client and server, can consist of intermediaries such as proxy servers or load balancers
Layers have separate responsibilities but are able to interact with each other
Supports system scalability and security

4. What is the optional architectural constraint of REST?

Code on demand is the optional constraint of RESTful architecture. Code on demand allows the server to send executable code (scripts or applets) to a client upon client request.

Advantage: Extends client functionality, since client can download features after deployment
Disadvantage: Reduces visibility, which is why it’s considered optional
Examples: Java applets and JavaScript

5. Explain the constraints of a uniform interface.

A uniform interface is needed to decouple the client from the server.

There are four necessary constraints to achieving uniform interface:

Identification of resources: Client requests must identify resources using uniform resource identifiers (URIs)
Manipulation of resources through these representations: When clients receive a resource representation from the server, they have all information necessary to be able to modify resource state
Self-descriptive messages: Messages contain all information necessary for recipient to interpret it, including metadata
Hypermedia as the engine of application state: Hypermedia (such as HTML) is the medium for client-server interaction, and the client requires no API-specific documentation to understand server responses

6. What is CRUD?

CRUD is an acronym for the four basic operations used in relational database management system (RDBMS).

Each operation in CRUD relates to an HTTP method that REST supports.

Create: POST
Read: GET
Update: PUT
Delete: DELETE

7. Explain the HTTP request methods supported by REST, and when they are used.

REST APIs are based on HTTP requests or verbs, which each perform a different task.

REST supports the following HTTP requests:

GET method: Request data from server
POST method: Submit data to create new resource on server-defined URL
PUT method: Submit data to update a resource at client-defined URL
DELETE method: Remove resource from server
OPTIONS method: Return request methods supported by a service
HEAD method: Return meta information such as response headers
PATCH method: Modify part of the resource on the server

8. What’s the difference between PUT and POST methods?

This question can stump some developers. Being able to explain this will help you stand out as someone who actually knows what they’re talking about.

Here are the differences between PUT and POST:

PUT:

Idempotent (i.e. multiple requests will yield same result)
PUT responses aren’t cacheable
Updates or replaces target resource with request’s payload

POST:

Not idempotent (i.e. multiple requests will yield multiples of the same resource)
POST responses can be cacheable, provided proper cache-control header
Request’s payload is processed by the web server based on target resource
Understanding idempotency: An example of an idempotent operation would be the operation of multiplying a number by one. No matter how many times you multiply five by one, you’ll get the same result.

Explain what statelessness means in REST.

Statelessness means that the client and server don’t store information about each other’s state. Since the server stores no information, it treats each client request as a new request.

As a consequence, the following conditions would apply:

The client request contains all information required for the server to process the request
Client application is responsible for storing session state

10. What are the advantages and disadvantages of a REST API?

It’s important to know the pros and cons of a RESTful API.

Advantages include:

Designed for high performance, portability, reliability, and scalability
Client-server separation allows each to individually operate and scale
Easy to test and adapt to various environments
Easy to learn as it uses HTTP protocol
Supports various data transfer technologies including JSON, XML, YAML, images, and more
Uses less bandwidth than other methods, such as Simple Object Access Protocol (SOAP) technology

Disadvantages include:

Doesn’t enforce security practices
HTTP method limits you to synchronous requests
Due to statelessness, you might be unable to maintain state (e.g. in sessions)

11. What’s the difference between AJAX and REST?

The distinction can confuse beginner developers, so it’s helpful to know the difference.

An AJAX client can make a RESTful request to a REST API (e.g. a get request), but AJAX isn’t an architectural style. It’s a web development technique for client-side applications. REST APIs can be accessed by AJAX clients, but they aren’t inherently implemented with AJAX.

12. What’s the difference between SOAP and REST?

Although some REST APIs use SOAP protocols, REST and SOAP are entirely different approaches to building APIs. Interviewers may ask this to assess your depth of understanding.

Here are some of the differences between SOAP and REST.
SOAP:
Protocol
Data format is limited to XML
Heavyweight and requires more bandwidth
Calls can’t be cached
REST:
Architectural style
Allows various data formats including plain text, HTML, XML, JSON, and YAML
Lightweight and requires less bandwidth
Calls can be cached

13. Explain HTTP response status codes.

HTTP response codes indicate the result of client requests.
Common HTTP status codes include:

200: Successful request
201: Entity or entities created from successful request
400: Bad request. Invalid client request.
401: Unauthorized. User isn’t authorized to access a resource and may be unauthenticated
403: Forbidden. User isn’t authorized to access a resource, user is authenticated
404: Not found. Resource not found
500: Internal server error. Generic server error
502: Bad gateway. Response from upstream server is not valid
503: Service unavailable. Result of server-side issue, including overload or system failure

Wrapping up and next steps

Congratulations! You’re now prepared with some common REST API interview questions and answers. Where you go from here depends on your goals.

7 JavaScript clean coding tips every developer should know 😎

Braincuber Technologies — Fri, 08 Apr 2022 04:39:31 +0000

Writing clean code improves the maintainability of the application and make developers productive. However, some developers are unaware of the language features available to further enhance the code.

In this article, I will discuss how we can utilize the features of JavaScript to write clean code.

1. Use Object Destructuring

Object destructuring allows you to take specific fields from an object and assign them to a variable instantly. It reduces the number of code lines we need to extract the object properties and makes your code easier to understand.

Object destructuring saves a great deal of explicit variable declarations, and it is really useful in situations when:

Using multiple properties from an object.
Using the same property multiple times.
Using a property that is deeply nested in an object.

const employee = {name: ‘jsbro’, email: ‘jsbro@example.com’, phone:’0112–345–6789'};

//with destucturing
const {name, email, phone} = employee;

//without destucturing
const name = employee.name;
const email = employee.email;
const phone = employee.phone;

The output of the two examples above (with and without destructuring) are identical. But, using object destructuring makes the code much simpler and easier to understand.

2. Use Multiple Parameters Over Single Object Parameter

When declaring a function, we should always use multiple input parameters instead of single object inputs. This approach helps developers easily understand the minimum number of parameters that need to be passed by looking at the method signature.

Also, it improves the application performance since there is no need to create object parameters or collect garbage.

//recommended
function CustomerDetail (CustomerName, CustomerType, Order){    
  console.log('This is ${CustomerName} of ${CustomerType} and need ${Order}');
} 

//not-recommended
function CustomerDetail (User){    
  console.log('This is ${User.CustomerName} of ${User.CustomerType} and need ${User.Order}');
}

However, if the number of input parameters increase, you should switch back to using object parameters to avoid unnecessary code complexities.

Note: If you use TypeScript and have number of parameters, its easier to define the interface of the parameters to benefit from type checking and auto-suggestions.

3. Make Use of Arrow Functions

Arrow functions provide a concise way of writing JavaScript functions while resolving the problem of accessing this property inside callbacks.

If you are using arrow functions, curly braces, parenthesis, function, and return keywords become optional. Most importantly, your code becomes more understandable and clearer.

The below example shows a comparison between a single-line arrow function without parentheses and a regular function.

// Arrow function
const myOrder = order => console.log(`Customer need ${order}`);

// Regular Function
function(order){
   console.log(`Customer need ${order}`);
}

Although arrow functions are much simpler, we must understand when and how to use them.

For example, using arrow functions is not the best approach when working with object prototypes, classes, or object literals.

Also, arrow functions cannot be used as function constructors. You will receive an error if you use the new keyword to create a new object from an arrow function.

4. Use Template Literals for String Concatenations

Template literals are literals delimited with backticks (`). It provides an easy way to create multiline strings and perform string interpolation.

For example, we can define a placeholder in a string to get rid of all unnecessary concatenations.

`
//before
var name = 'Peter';
var message = 'Hi'+ name + ',';

//after
var name = 'Peter';
var message = Hi ${name},;
`

5. Spread Extension Operator

The spread extension operator (…) is another feature introduced with ES6. It is capable of expanding the literals like arrays into individual elements with a single line of code.

This operator is really useful when we need to put an array or object into a new array or object or to combine multiple parameters in the array.

The below code shows how to combine 2 arrays using the spread operator. As you can see, it makes the code clean and easy to understand since we don’t need to use loops or conditions.

let x = [car, bus,van]; let y = [bike, truck, ..x, lorry] console.log (y); // bike, truck, car, bus, van, lorry

6. Avoid Callbacks

Callbacks used to be the most popular way to express and handle asynchronous functions in JavaScript programs. However, if you are still using it, I hope you already know the pain of handling multiple nested callbacks.

For example, the following code contains 4 callback functions, and it will become even harder as the code start to grow.

`
function1(function (err, data) {
...

function2(user, function (err, data) {
...
function3(profile, function (err, data) {
...
function4(account, function (err, data) {
....
});
});
});
});

As a solution, ES6 and ES7 introduced, Promises and Async/Await to handle asynchronous functions, and they are much easier to use and makes your code easily understandable to others.

But, if you use Promises or Async/Await, your code will be clean and much easy to understand.

// Promises function1() .then(function2) .then(function3) .then(function2) .catch((err) => console.error(err)); // Async/Await async function myAsyncFunction() { try { const data1= await function1(); const data2= await function2(data1); const data3= await function3(data2); return function4(data4); } catch (e) { console.error(err); }}

7. Use Shorthand Whenever Possible

When working with conditions, the shorthand method can save you a lot of time and space.

For example, if you write a condition to check empty, null and undefined conditions for a variable, you must write 2 conditions within the if statement.

if (x !== “” && x !== null && x !== undefined) { ... }

However, if you are using the shorthand operator, you just need to write a single condition like below:

if ( !!x ) { ... }

Final Thoughts

In this article, I discuss how we can utilize the features of JavaScript to write clean code.

As developers, we should always write clean code since it increases readability and makes it easier for you and your team to understand the code.

I hope those suggestions will help you improve the readability of your code, and if you have any suggestions, please share them with others in the comments section.

Thank you for reading!

Visit braincube.com for more info

Don’t Use Switch or If-Else in JavaScript, Instead, Try This

Top JavaScript VSCode Extensions for Faster Development 🔥

It’s 2022, Don’t Use the console.log() Anymore 😎

Braincuber Technologies — Thu, 07 Apr 2022 09:00:51 +0000

We as JavaScript developers usually use console.log() to test the output or just for fun. Even I can bet that our (including mine) first code was “Hello world” logged in the console.

console.log("Hello World!")

This piece of code has been nostalgic for all fellow JS developers. But now it’s 2022, let’s make it a little handy and comfortable for our fingers.

In this article, I have discussed a simple and common method that has rarely been used by developers.

Let’s get started

As we know, we all use to log the data to the console like this:

console.log("I love js") // I love js
console.log(4 + 4) // 8
console.log(!true)  // false

Let’s work smartly and efficiently as shown below:

const log = (arg) => console.log(arg)

Here, we have created a function with a shorter name — log relative to console.log(), you can even use a shorter name, something like this:

const l = (arg) => console.log(arg)

So, you might be wondering what’s the benefit of writing code like this? Let’s discuss the benefits.

Benefits

Keeps your code clean and slick
Improve readability
Relief to your fingers, don’t have to write a long thing
Comment more benefits if you can.

Let’s test 🚗

log("Hello world") // Hello world
log(4 + 4) // 8
log(!false) // true
log(Math.PI) // 3.141592653589793

Conclusion

So, this was a quick tip to save your time and make your code look cleaner. Let me know in the comments if you will use this tip.

You can try the same thing for the console.info(), console.warn(), console.error().

🌏 Let’s connect

Twitter

Read More

A Complete Guide to WEB 3.0

How to upload files to aws s3 using nodejs lambda and api gateway

80 % of freshers fail to answers these javascript snippets 🔥

Braincuber Technologies — Thu, 07 Apr 2022 04:16:05 +0000

Q1. Guess the output:

var truth = true;
let havingFunction = function()
{
if (truth)
{
var name = “vineet”
let lastName= “mishra”
}
console.log(name)
console.log(lastName)
}
havingFunction()

Take a break don’t jump into output, think hard

Output:

vineet
ReferenceError: lastName is not defined

Reason: This happens due to the variable scope where name variable has function and lastName is having local scope

Q2. Guess the output:

console.log(3 > 2 > 1);
console.log(1 < 2 < 3);

take a break don’t jump into output, think hard

Output:

false
true

Reason: In the first section of the snippet where 3>2>1 is false because when programs run it go for 3>2 which is true and then it goes for the other part which becomes “true >1" where the value of true is 1 then equation becomes 1>1 which going to false, vice versa happens for another snippet which is 1<2< 3

Top JavaScript VSCode Extensions for Faster Development 🔥

Braincuber Technologies — Fri, 01 Apr 2022 10:41:40 +0000

VSCode is an open-source, cross-platform editor that has become a favourite of programmers, particularly in the Web Development community. It’s fast, extensible, customisable, and has tons of features. You should check it out if you haven’t already done it.

Thousands of extensions have been made for VSCode. I am going to list a few extensions that I use on a day-to-day basis.
Let’s begin!

Quokka.js

Quokka.js is a rapid prototyping playground for JavaScript and TypeScript. What that means is that it runs your code immediately as you type and displays various execution results in your code editor. Try it yourself.

After installing this extension, you can press Ctrl/Cmd(⌘) + Shift + P to display the editor’s command palette, and then type Quokka to see the list of the available commands. Select and run the New JavaScript File command. You can also press (⌘ + K + J) to open the file directly. Anything you type in this file is executed immediately.

Bracket Pair Colorizer and Indent Rainbow 🔥🔥

Brackets and parentheses are an inseparable part many programming languages. In a language such as JavaScript, a single page can have a barrage these characters with no easy mechanism to identify opening and closing pairs. Welcome Bracket Pair Colorizer and Indent Rainbow. These are two different extensions. However, they really make a good and beautiful couple. These extensions will fill your editor with a flurry of colours, and make the code blocks easily discernible and pleasing to the eyes. Once you get used to them, VSCode feels insipid, and bland without them.

Snippets

Snippets are shorthands in an editor. So instead of writing import React from 'react';, you can type imr and press Tab to expand this snippet. Similarly, clg becomes console.log.
There exists a lot of snippets for all sorts of things: Javascript(or any other language), React, Redux, Angular, Vue, Jest. I personally find Javascript snippets really useful since I work mostly with JS.

Some good snippet extensions are —

JavaScript (ES6) code snippets
React-Native/React/Redux snippets for es6/es7
React Standard Style code snippets

Todo Highlighter

It often happens that you code a function, and think that there is a probably better way to do the same thing. You leave a comment // TODO: Needs Refactoring or something to that effect. But then you forget about the note and push your code to master/production. With Todo Highlighter, that won’t happen. Hopefully.

It highlights your TODOs/FIXMEs or any other annotation in your code in bright colours so it is always clearly visible. One nifty feature is List Highlighted annotations. It lists all the TODOs in the output console.

Import Cost

This extension allows you to see the size of the imported module. It’s a huge help with bundlers such as Webpack. You can see whether you are importing the entire library or just a particular utility.

One problem that exists is that it doesn’t show the cost of custom files or modules.

REST Client

As a web developer, we often need to work with REST APIs. For examining the URLs and checking the responses, tools like Postman are used. But why have a different app when your editor can easily do the same task. Welcome REST Client. It allows you to send HTTP request and view the response in Visual Studio Code directly.

Auto Close Tag and Auto Rename Tag

Since the advent of React and the traction it has gained in the last few years, HTML-like syntax in the form of JSX is all the rage now. We again have to code with tags JavaScript. Any web developer you would tell you that it is a pain to type the tags. In most cases, we need a tool that can quickly and easily generate tags and their children. Emmet is a perfect example of this already built into VSCode. However, sometimes, you do just want something simple and concise. Such as an auto tag closer, which generates the closing pair of a tag as you type the opening pair. And when you change that same tag, the closing tag automatically gets changed. These two extensions do just that.

It also works with JSX and many other languages such as XML, PHP, Vue, JavaScript, TypeScript, TSX.

Get them here — Auto Close Tag and Auto Rename Tag

GitLens

As told by its author, GitLens supercharges the Git capabilities built into Visual Studio Code. It packs a surprising number of features such as code authorship shown via Code lens, commit search, history and GitLens explorer. You can read full explanations of these features here. Suffice it to say that you should install this plugin if you do any work with git.

There are other extensions that focus on a specific functionality. You can install those if GitLens feel bloated or you don’t use many of its features.

Git Project Manager

Git Project Manager (GPM) allows you to open a new window targeting a git repository directly from VSCode window. Basically, you can now open another repository without having to leave VSCode.

After installing this extension, you will have to set gitProjectManager.baseProjectsFolders to the list of URLs which contain the repos.

Example —

{
    "gitProjectManager.baseProjectsFolders": [
        "/home/user/nodeProjects",
        "/home/user/personal/pocs"
    ]
}

Indenticator

It visually highlights the current indent depth. So now you can easily distinguish between various blocks indented at different levels. Get it here.

VSCode Icons

Icons to make your editor more appealing!

Dracula (Theme)

One theme that I like.

That's it for today, I hope you like it!

7 JavaScript clean coding tips every developer should know 😎

Material-UI vs Tailwind CSS

GraphQL, what, why, and when?

3-month plan for Cracking the Coding Interview

Braincuber Technologies — Fri, 01 Apr 2022 04:24:09 +0000

How to crack the coding interview? I think every software engineer must have thought of this question at some point in their life. And many are still trying to find answers to this question. I was also wondering about the same a few months back. And then I made a 3-month plan to study for & crack the coding interview. I got 2 good offers after following this plan. I will be sharing the study plan with you so you can also take a few notes from my experience.

The first thing we need to think about is what we need to include in our study plan. I remember when I started to note down what I needed to study. It was overwhelming, to say the least. But I made the list. And a lot of topics were later added to that initial list as time went by. I will share the list with you so that you don’t have to make the painstaking effort yourself. Let’s first look at what we need to include in our preparation.

Data Structures:

One of the fundamentals of programming is data structures. They are used to storing and organize data in a meaningful way. Some important data structures which are a must for coding interviews are:

Array
Stack
Queue
Linked List
Binary Tree
Binary Search Tree
Heap
Graph
Tree

Important Algorithms:

Algorithms are very important for coding interviews. They help you in getting to the solution and are as important if not more important than data structures. Some algorithms that you must prepare for the coding interview are:
Backtracking
Divide & Conquer
Branch & Bound
Binary Search
Dynamic Programming
Greedy
Recursion
Sliding Window

Resources for Studying

Programming Interviews Exposed: Coding Your Way Through the Interview

The Study Plan

Now that we know what we need to study in order to prepare for the coding interview, we now need to have a plan for studying. But you should study and prepare according to the plan. Otherwise, a plan is of no use. Because a plan is only as good as the implementation. Let’s look at the plan.

Month 1

The first month should be dedicated to learning the data structures, concepts, and algorithms mentioned above. If you don't know the data structures, the concepts, and the algorithms required to solve problems, you won’t be able to solve anything.

If you have been studying from time to time, this process will be a lot easier for you. But if you are starting from scratch, you need to be dedicated. Make sure you go through the concepts thoroughly and understand the nitty-gritty of each topic. Knowing where a List should be used and where a Set should be used might seem trivial now, but during implementation in an interview, it might be the deciding factor in your selection. So be thorough.

Month 2

After you have studied and prepared for one good month, you should be able to try your hand at problem-solving. But don’t be too ambitious and start off with Medium level or Hard level questions. Start off small. Take baby steps. Don’t try to run before you can even walk.

You should start off with simple problems, the Easy level first. It’s possible that you might find solving Easy level problems difficult initially, but try to solve them on your own.

You should get fairly comfortable solving Easy questions in 10–15 days. If you are, it’s time to move to Medium level questions. Just take whatever experience and knowledge you have gained solving Easy level questions and apply it while solving Medium level questions. Remember, you will be spending most of your preparation time solving Medium level questions. And you should. Why? Because most companies ask Easy or Medium level questions only.

For the second month, if you are able to solve 3 questions daily during the Easy period and 2 questions daily during the Medium period, you will have solved 75+questions by the end of the second month.

Month 3

If you are busy solving Medium level questions by the start of the third month, you are on the right track. You should spend the last 15 days of the second month & the initial 20 days of the third month solving Medium level questions only. In the end, you will have spent a total of 35 days solving Medium level questions.

By the start of the third month, you should be fairly comfortable solving Medium level questions. You can step up your effort and should aim to solve a minimum of 3 Medium questions per day.

If you have the time and the willpower to start solving Hard level questions, you can try solving these during the last 10 days of the third month. If you don’t want to solve Hard questions, you can continue with the Medium questions or try to do a revision of whatever you did during the past 3 months.

For the third month, if you solved 3 questions per day during the Medium period and 1 question per day during the Hard period, you will have solved 70+ questions in the third month.

Important Note

While solving the problems, make sure you cover each topic mentioned above. It shouldn’t happen that you solve 15 problems based on dynamic programming, but none based on backtracking. Make sure you touch upon all the topics so that you are ready for each and every type of question that can be asked in the interviews.

Summing It Up

If you follow the plan, you will be able to complete studying all the data structures and algorithms needed for interviews. Plus you would complete solving ~150 questions. And I have considered the daily numbers on the lower side. If you really step up your efforts, you should be able to complete ~200 questions in three months' time. And that should make you ready for the interviews.

That’s it, folks!!! Hope I have helped you in preparing for the coding interview. Please click the ❤ button below if you found the article helpful :)

Further Reading:

JavaScript concepts you need to know in order to get started with React

10 Quick SQL Tips After Writing Daily in SQL for 3 Years

image credit

Computer cartoon vector created by catalyststuff www.freepik.com

Remix vs Next.js: A Detailed Comparison

Braincuber Technologies — Mon, 28 Mar 2022 09:53:37 +0000

A detailed comparison between Remix JS and Next.js frameworks

Next.js is one of the most popular React frameworks used for server-side rendering. It’s been there for a significant time, and it provides an exceptional developer experience with all the features developers need.

However, with the open-source introduction of Remix, developers have started to wonder which the better framework for their application is. So, in this article, I will compare and contrast some significant features of Next.js with those of Remix to help you choose the best framework.

How to upload files to aws s3 using nodejs lambda and api gateway 2022

Deploy React App using AWS Amplify in 2022

Routing

There are many similarities between Remix and Next.js when it comes to routings. For example, they follow a file-based routing system and support nested routing and dynamic route segments.

As far as similarities are concerned, when you create a file inside the /pages directory, it will be automatically set as a route in Next.js.

pages/index.js ==> /
pages/users/index.js ==> /users
pages/users/create.js ==> /users/create

Remix also can create automatic routes. But, you need to place the files in the app/routes directory.

As regards differences, Remix routing is built on top of the React Router, and it allows you to utilize React Hooks, like useParams and useNavigate. On the other hand, Remix has built-in support for nested routing with the nested layouts, while Nest.js requires manual configurations.

Data Loading

There are several data loading techniques in web applications. Those are:

Server-side rending in the runtime.
Server-side rending in the build time.
Client-side rending at runtime.
A mix of server-side runtime, client-side and server-side build time, and client-side runtime.

In Next.js, developers can use all the above techniques with different functionality to export data from a page.

You can use getServerSideProps it to load the data on the server-side at runtime while getStaticProps and getStaticPath can be used to load the data from the server-side at build time. The following example shows how to use getServerSideProps to load data.

export const getServerSideProps = async ({ params, query }) => { 
  // get a param from the url const id = params.id // getting data from the url query string const DataLimit = query.DataLimit
  return {props: {id, DataLimit}}
};
export default function FirstPage() { 

  let {id, DataLimit} = useLoaderData(); 
  return ( 
      <div> 
        <h1>The parameters are: {id}</h1>
        <h1>The DataLimit url query is: {DataLimit}</h1> 
      </div> 
  );
}

In Remix, there are only two methods to load the data. You can use the server-side at runtime and the client-side at runtime to render the data.

You have to export a loader function from a route to load data from the server-side and useFetcher Hook in Remix to load data on the client-side.

import { useLoaderData } from "remix"; 
export let loader = async ({ params, request }) => { 
  // get a param from the page url const id = params.id // getting data from the url query string const url = new URL(request.url) const dataLimit = url.searchParams.get("dataLimit")
  return {id, dataLimit}
}; 
export default function FirstPage() { 
  let {id, dataLimit} = useLoaderData();
  return ( 
        <div> 
          <h1>The parameter is: {id}</h1> 
          <h1>The limit for url query is: {dataLimit}</h1> 
        </div> 
  );
}

Next.js supports server-side rendering (SSR), static site generation (SSG ), Incremental site regeneration (ISR), and CSR (client-side rendering) . On the other hand, Remix only supports SSR and CSR.

Use of Sessions and cookies

There are no built-in functions to interact with cookies or sessions in Next.js. But popular libraries like Cookie.js can work with Next.js or NextAuth.js to perform user authentication and save session data in a cookie.

Remix has support for cookies and sessions out of the box. You can generate a cookie by calling a function, then serialize or parse data to store or read it.

The following code snippet from the Remix shows how to create a logical function for managing a browser cookie in Remix.

import { createCookie } from "remix";

const cookie = createCookie("cookie-name", {
  expires: new Date(Date.now() + 60),
  httpOnly: true,
  maxAge: 60,
  path: "/",
  sameSite: "lax",
  secrets: ["s3cret1"],
  secure: true
});

Deployment

Next.js can be installed on any server that can run Node.js by running next build && next start.It has built-in support for running in serverless mode when deploying to Vercel, and the Netlify team has written an adaptor for serverless deployment to their service.

The Remix was built to run on any platform and interface with any system. As a result, Remix is a request handler inside an HTTP server, allowing you to utilize any server. When you build a Remix app, you’re asked where you want to deploy it, and you have the following options as of this writing:

Remix App Server
Express Server
Netlify
Cloudflare Pages
Vercel
Fly.io
Architect (AWS Lambda)

Styling

The Remix is slightly different from Next.js when it comes to styling. Remix offers a built-in technique of linking classic CSS style sheets using link tags, while Next.js comes with Styled-JSX as the default CSS in JS solution.

Styled-JSX allows you to style your components with encapsulated and scoped CSS in your Next.js application. You can use <style jsx> tag into the existing React component and define the CSS inside that as follows:

function Home() {
return (
<div className="container">
  <h1>My Cart in Next.js</h1><p>Some paragraph</p><style jsx>
    {'
      .container {
        margin: 20px;
      }
      p {
        color: blue;
      }
    `}          
   </style></div>
 )
}               
export default Home

Remix uses a simple method to add styles to the page using<link rel ="stylesheet"> tag. When you add the stylesheet link, you can use the links module in Remix routing to export the layout. The code snippet below shows how to use the links function to load the stylesheet in Remix.

export function links() {
return [{
      rel: "stylesheet",
      href: "https://test.min.css"
   }
  ];
}

The following example shows how tag merges the links component in each nested route when rendering the myCart component.

import { Links } from "remix";
export default function myCart() {
  return (
    <html><head><Links />
        {/* ... */}
      </head>
      {/* ... */}
    </html>
  );
}

Conclusion

Remix improves the developer experience with new abstractions and the user experience by distributing less JavaScript. But Next.js has a more extensive user base with more significant resources allocated to its development from the Vercel team.

The Remix is mainly used for personal projects and toy applications when it comes to real-life applications. On the other hand, Next.js is used in many production applications.

Overall, Remix is a robust framework, and it will become more prevalent in 2022. But when dealing with production-level applications, using Next.js would be the obvious choice since it is well established and has community support.

We hope you have found this helpful. Thank you for reading!

10 ways to improve logical thinking skills in programming

90 % of Javascript Developer fail to answer these code snippets (Asked in Interview) Part-1

Braincuber Technologies — Mon, 28 Mar 2022 04:06:46 +0000

Q1. Guess the output?

let x = true
setTimeout (()=>{
x= false
})
while (x)
{
console.log(“hello”)
}

Output:
Hello

Hello ….will go on printing

Reason: In this case, the value of x is true in the global scope and as we know that javascript is a single thread language, the setTimeout is an asynchronous operation so it will go in the task queue and wait for its chance for execution so now we go to “while loop “ the value of x is true so it satisfies the given condition in the while loop now it will print continuously “hello” and after 2 seconds the setTimeout is ready for execution but the call stack is not empty, it is already running the while loop so setTimeout will not get any chance of execution

Q2 Guess the output?

let x = true
let count =0;

setTimeout(()=>{
x= false;
},2000)

setInterval(()=>{
if(x)
{
console.log(count++)
}
},200)

Output:

0
1
2
3
4
5
6
7
8

the cursor will be not free on the output screen

Reason:In this case, the setTimeout and setInterval is an asynchronous operation so first, it calls the setInterval
,setInterval will print the value of count every 200 milliseconds and then after 2-second setTimeout
will invoke and setInterval condition get dissatisfied, it will print up to 8 and execution will continue

Please Do Like, Follow and Share, Thank you

visit blog.braincuber.com for more quality content

DEV Community: Braincuber Technologies

Earn Money By Testing Websites | 💲💲$100 a Day

Why do they give you money?

Top 50 Useful GitHub Repos That Every Developer Should Follow

Don’t Use Switch or If-Else in JavaScript, Instead, Try This

What is the switch statement?

Problems with switch

10 ways to improve logical thinking skills in programming

13 REST API interview questions you need to know

13 REST API interview questions you need to know

1. What is REST?

2. What is a REST API?

3. Describe the 5 constraints of the REST architectural style, and their benefits.

4. What is the optional architectural constraint of REST?

5. Explain the constraints of a uniform interface.

6. What is CRUD?

7. Explain the HTTP request methods supported by REST, and when they are used.

8. What’s the difference between PUT and POST methods?

10. What are the advantages and disadvantages of a REST API?

11. What’s the difference between AJAX and REST?

12. What’s the difference between SOAP and REST?

13. Explain HTTP response status codes.

7 JavaScript clean coding tips every developer should know 😎

1. Use Object Destructuring

2. Use Multiple Parameters Over Single Object Parameter

3. Make Use of Arrow Functions

4. Use Template Literals for String Concatenations

5. Spread Extension Operator

6. Avoid Callbacks

7. Use Shorthand Whenever Possible

It’s 2022, Don’t Use the console.log() Anymore 😎

80 % of freshers fail to answers these javascript snippets 🔥

Top JavaScript VSCode Extensions for Faster Development 🔥

3-month plan for Cracking the Coding Interview

Data Structures:

Other Important Topics:

Important Algorithms:

Resources for Studying

Remix vs Next.js: A Detailed Comparison

90 % of Javascript Developer fail to answer these code snippets (Asked in Interview) Part-1