Getting Started in Web Dev

These are the top items to look in to if you are interested in getting started in Web Development (mostly front-end).

This page is meant to be a resource of the most common things I end up linking to people as they are learning web dev. It should be short so it doesn’t overwhelm people.

Mandatory Knowledge

  1. 2022 Web Dev Getting Started/Career Guide Video – MANDATORY WATCHING
  2. MarkSheet – HTML/CSS/Sass
  3. JSFiddle – Use this when you are having trouble getting code to work and need help from someone
  4. CodePen – Create an account. Use this for stuff you want to keep track of, or to search for existing examples.
  5. Free Code Camp – Bootstrap, JS, and more
  6. Can I Use – Tells you what browser support specific web features have.
  7. Learn Chrome Dev Tools – Basically the same for other browsers as well.
  8. Why learning to code is so damn hard – important write up

JavaScript Books

  1. JavaScript: The Good Parts – Book. Pay for it on Amazon, pirate it, or just get it from your local library.
  2. You Don’t Know JS – Free online book
  3. Eloquent JavaScript – Free online book
  4. ExploringJS – Several free online books that stick close to the ES spec
  5. – Online JS resource, little easier to read than MDN

Getting Started with Vue.js

  1. Open, then follow the official Getting Started guide.
  2. Vue Mastery (Intro to Vue is free, advanced classes are not, but they have free weekends occasionally you can look out for)
  3. Anything from Maximilian Schwarzmüller is good:
  4. Sarah Drasner is one of the core members of the Vue team, she has a decent course on Intro to Vue, and is an expert in web animation.
  5. – Like JSFiddle but for large webpack based projects.

CSS Fun Time

  1. MarkSheet – HTML/CSS/Sass
  2. CSS Fundementals – Conference Talk from Bootstrap creator
  3. CSS Layout Basics – CSS Tutorial
  4. CSS Sushi – CSS Selector game
  5. Flexbox Game – Interactive CSS Flexbox Tutorial
  6. Flexbox Froggies – CSS Flexbox Game
  7. Flexbox Tower Defence – CSS Flexbox Game
  8. CSS Grid Garden – CSS Grids Game
  9. Grid By Example – CSS Grids Video Tutorials
  10. WTF HTML & CSS – Common issues people run into with HTML/CSS and their solutions

Photo credit:

Source link

JavaScript Test Automation Complete Tutorial | Selenium WebDriver With JavaScript Tutorial | 2022

In this Selenium JavaScript Complete Tutorial, Ryan Howard (@ryantestsstuff) dives deep into how Selenium WebDriver with JavaScript can be used for automated testing of web applications. By the end of this video, you will learn to perform cross browser testing using Mocha with JavaScript at scale on cloud Selenium Grid like LambdaTest , thus enhancing testing experience.


🔸Can JavaScript be used for automation?
🔸How JavaScript is used in testing?
🔸Can you test JavaScript with selenium?
🔸What is a JavaScript test runner?
🔸Can we automate JavaScript using Selenium?
🔸How does Selenium handle JavaScript?
🔸Can Selenium read JavaScript?


00:00:00 – Introduction
00:00:48 – What is JavaScript & Selenium Webdriver?
00:10:37 – How to write and run test scripts in Selenium with JavaScript?
00:31:37 – What is Assertion in Selenium JavaScript?
01:09:23 – What is Parallelization? Running Tests in parallel with Mocha?
01:22:14 – What is Mochawesome? & How to Install & Set up Mochawesome ?
01:42:53 – Running Tests on LambdaTest Selenium Grid cloud
02:12:05 – What is Headless Testing In Selenium JavaScript?
02:23:04 – Why and when to use Parameterized Test in JavaScript?
02:47:29 – Conclusion

Source link

15 Recommended Books For Computer Science Students

We are in the modern world where the digitization of education is already going on. Now lots of blogs, articles are there on the internet to learn from. But Book has its own value, the author puts his all knowledge experience and time to write one whole book. The knowledge and details you get from a book are very precious.

In this article, I am going to discuss 15 Recommended Books For Computer Science Students

1. Clean Code: A Handbook of Agile Software Craftsmanship


Because it’s more approachable, especially for inexperienced developers, Clean Code is one of the most regularly seen books on a programmer’s desk. Clean Code focuses on tactical ideas, such as how to build classes and functions, rather than high-level procedures.

2. Head First Java


Learning a difficult new language, especially an object-oriented computer programming language like Java, is no simple undertaking. You could believe the issue is with your mind. It appears to have its own mind, one that doesn’t always want to take in the dry, technical information you’re required to learn. This book is like bible for java beginners.

3. Java: The Complete Reference


In “Java: The Complete Reference, Eighth Edition,” popular programming author Herb Schildt covers all you need to know about writing, building, debugging, and running Java programmes. This comprehensive volume covers the whole Java language, including syntax, keywords, and core programming concepts, and has been updated for Java Platform, Standard Edition 7 (Java SE 7). You’ll also learn about the key components of the Java API library. Swing, JavaBeans, servlets, and applets are all addressed, with real-world examples to demonstrate how they function. Try-with-resources, strings in switch, type inference with the diamond operator, NIO.2, and the Fork/Join Framework are all covered in detail.

4. Cracking the Coding Interview


Cracking the Coding Interview is well worth your time and money if you’re ready to start interviewing with FAANG firms. Everything from the interview procedure to unique scenarios, pre-interview preparation to behavior questions, Big O to technical questions, and 189 real-world programming problems are covered.

5. Introduction to Algorithms


This book examines a wide range of algorithms in depth while making their creation and analysis accessible to readers of all levels. Each chapter is self-contained and can be utilized as a study unit on its own. The algorithms are given in English and pseudocode that anyone who has done some programming may understand. Without losing the depth of information or mathematical rigor, the explanations have been kept simple.

6. Data Structures And Algorithms Made Easy


“Data Structures And Algorithms Made Easy: Data Structures and Algorithmic Puzzles” addresses questions about complex data structures and algorithms. Because each problem has several solutions and the book is written in C/C++, it may be used as an interview and test preparation tool for computer scientists.
Easy Data Structures and Algorithms: Data Structures and Algorithmic Puzzles is a collection of solutions to a variety of difficult problems involving data structures and algorithms. Any expert in computer science will find it useful. It may be used as a reference manual for computer science professionals. This book will assist you in preparing for campus interviews, exams, and employment. In a word, this book presents solutions to a wide range of challenging data structures.

7. The Algorithm Design Manual


The “mystery” of building algorithms and measuring their usefulness and efficiency is removed in this substantially extended and updated third edition of the best-selling classic. The book currently serves as the fundamental textbook for algorithm design classes, while also serving as the foremost practical reference guide on algorithms for programmers, researchers, and students, with updates to the first and second editions.

The user-friendly format The Algorithm Design Manual makes combinatorial algorithms technology accessible to anybody, with a focus on design rather than analysis. The first section, Techniques, explains how to develop and analyse computer algorithms in a clear and understandable manner. The second section, Resources, has a library of algorithmic resources, implementations, and a wide bibliography for browsing and reference.

8. Eloquent JavaScript


Eloquent JavaScript goes beyond the cut-and-paste scripts found in recipe books to teach you how to write elegant and effective code. Variables, control structures, functions, and data structures are among the first programming concepts you’ll study. After that, you’ll dive into JavaScript’s higher-order functions, closures, and object-oriented programming.

You’ll learn how to: Understand the principles of programming and best practises. By combining the capabilities of functional and object-oriented programming, regular expressions may be used to quickly analyse and edit text. Errors and browser incompatibilities should be handled compassionately. Handle browser events and DOM modifications.

9. Let Us C


The book’s simplicity and storytelling style set it out from the packed shelves of C Programming books. These two characteristics have been present in all six prior versions of this book. Today’s C programmer must not only learn the language’s complexity and nuances, but also deal with its use in systems such as Windows and Linux. This book does an excellent job of covering all three areas of C programming.

10. Head First Design Patterns


This book teaches you the patterns that matter, when and why to use them, how to apply them to your own ideas, and the object-oriented design concepts that underpin them. Join the hundreds of thousands of developers who have used Head First Design Patterns to enhance their object-oriented design abilities.

11. The Basics of Bitcoins and Blockchains


Learn about the history and fundamentals of cryptocurrencies and blockchains: There is a wealth of information available about bitcoin and blockchains. However, most of this information may be incomprehensible to the untrained. The Basics of Bitcoins and Blockchains seeks to give an easy-to-understand introduction to this new money and the groundbreaking technology that underlies it.

12. Database System Concepts


Database System Concepts is a classic and essential work in database education. It presents the fundamental concepts of database management in an easy-to-understand manner, allowing students to begin working with databases straight away.

The text is aimed towards junior/senior undergraduate database courses or first-year graduate database courses. It also includes additional information that may be utilized as a supplement or as a prelude to a more advanced course.

13. Python Crash Course


Look no further if you need to learn Python as soon as possible. Python Crash Course is designed to get novice Python programmers up and running quickly.
Learn the fundamentals of programming quickly using a project-based approach, so you can focus on what you want to build: websites, data visualization, online apps, or even programming a Raspberry Pi. Python Crash Course is the world’s best-selling Python book.

14. Designing Data-Intensive Applications: The Big Ideas Behind Reliable, Scalable, and Maintainable Systems


“Foundations of data systems” provides an excellent overview of data systems. This section begins by discussing desired database qualities such as dependability, scalability, and maintainability. Database concepts such as the classic relational model, the document model, and graph-based models are investigated. The implementation of data storage and retrieval in databases is then thoroughly explained.
You will learn about SStables, LSM trees, and B-Trees, as well as how they are employed in databases. Data warehousing and column-oriented databases are thoroughly discussed. The distinctions between OLTP and OLAP are presented in a tabular manner. There is a nice introduction to message brokers, protocolbuf, thrift, and avro.

15. Object-Oriented Programming with C++


The book’s goal is to provide a comprehensive enrichment of knowledge in the domain of object-oriented programming using C++ as the implementation language. The author has utilized simple language to convey important principles of object-oriented programming and to aid readers’ comprehension. The same ideas have been implemented in solved examples written in the C++ programming language. The book retains its original style of straightforward writing and includes plenty of solved examples, programming exercises, and additional practice problems.

If You ❤️ My Content! Connect Me on Twitter or Supports Me By Buying Me A Coffee☕👇🏼

Buy Me A Coffee

Source link

Striver's SDE Sheet Journey – #15 Majority Element (>N/2 times)

Problem Statement :-
Given an array nums of size n, return the majority element.

The majority element is the element that appears more than ⌊n / 2⌋ times. You may assume that the majority element always exists in the array.


Input : nums = [2,2,1,1,1,2,2]

Result : 2

Solution 1

using sorting,we can easily find the majority element in an array.
lets understand this approach step by step.

step-1 sort the array nums.

stpe-2 initialize three variables max = 0, count = 1, majEle = 0 .

step-3 run a loop from i=1 to n-1.

1. increase counting if the adjacent elements are the same..
if nums[i] == nums[i+1] then count++

2. if not nums[i] == nums[i+1], start recounting for new majority element.

3. if count > max then re-assign new max & majEle


class Solution 
    public int majorityElement(int[] nums) 

        if(nums.length == 1) return nums[0];

        int max =0;
        int majEle = 0;

        int count = 1;

        for(int i=0; i< nums.length-1; i++)
            if(nums[i] == nums[i+1])

                count = 1;

             if(count > max) 
                    max = count ;
                    majEle = nums[i];

        return majEle;


Time Complexity : O(nlogn) + O(n)
Space Complexity : O(1)

Solution 2

by using Boyer–Moore majority vote algorithm, we can solve this problem in O(n) time complexity

in this algorithm, we increase or decrease the count of the majority element, in the last, we will get our majority element.

step-1 initialise two variables majEle = nums[0], count = 1

step-2 run a loop from i=1 to n, then

1. if we found the majEle, increase the count by 1
2. if not majEle, decrease the count by 1
3. if count become 0 then, re-initialse majEle & count


class Solution 
    public int majorityElement(int[] nums) 

        int majEle = nums[0];
        int count = 1;

        for(int i=1; i<nums.length; i++)

            if(count == 0)
                majEle = nums[i];

            else if(nums[i] == majEle)

        return majEle;


Thank you for reading this article. save it for future use.
if you found something, let me in the comment section.

Source link

Web Development Trends

12 Web Development Trends That Would Rule 2022:
Web development is one of the technology sectors that has defined the road to ultimate success for every business during the last decade. The most important aspect of web development is its ever-changing capabilities, which enable you to establish solid connections with targeted customers.

No matter how modern, well-built, and efficient your web App maybe, if you fail to update it with the present trends, you may lose your users. In other words, your business may fall behind its competitors who are offering better experiences. Take a look at our curated list of trends given by our skilled web Application development team.

Progressive Web Apps (PWAs):-
Progressive web apps (PWAs) are not a new thing in the field of web app development trends. It has the power to function offline. Hence, many companies used it in their applications, for instance, Google Maps. More such examples are companies like Starbucks, Uber, Pinterest, and Twitter. They use PWA to improve user experience.

Another great advantage of using PWAs is you can extend your reach to smartphones and tablet users. As there are more than 5 billion mobile phone users today, this will be an added benefit for you.

Dark Mode UI:-
In recent times, low light and dark settings are becoming one of the most desirable trends in web development. The dark mode is loved by users as it comes incredibly handy when using an App during the day. Besides, it allows a visitor to adjust the display and make it dark at night. Due to this reason, many businesses are transitioning their applications to a dark or light mode UX. Apart from these, dark mode UI provides these advantages,

Reduces blue-light and eye strain
Saves battery life especially in devices that use an OLED or AMOLED screen
Accessibility for people with visual impairments
Single Page Application (SPA):-
Single-page applications (SPAs) are nothing but JavaScript-based applications. They load an HTML page in a user’s browser and dynamically update content without requiring a page refresh. Java development professionals and many tech giants including Twitter, Facebook, and Google adopted SPAs.

SPAs are cost-effective and take up less server space while providing users with information on a single page which makes it a valuable web application development trends among startups. Moreover, it offers better SEO optimization features, reusability, caching, and less complex implementation & debugging.

Voice Search:-
Since Google launched voice search in 2011, it gained widespread popularity. This functionality will be one of the widely spread web development trends in 2022. Alexa and Siri have already reached thousands of houses and will surely continue to grow rapidly. These voice-activated helpers automate our life’s little chores.

New products such as Google Home and Apple HomePod are entering the market to meet consumer demand. If you need to incorporate this feature into your existing App, our skilled App development team can come to your rescue.

Accelerated Mobile Pages (AMP):-
Accelerated Mobile Pages (AMP) is a dynamic technology that can improve page functioning while also retaining consumers. We can say PWA and AMP are very similar. Although it is one of the newer trends in web applications development, AMP pages are loaded for about 2 seconds. On the flip side, non-AMP pages take up to 22 seconds.


Despite the fact that we now have 5G internet technology and many firms choose to create native Apps to better user experience, the AMP plugin helps businesses save money on UX and reach their target audiences.

AI-Powered Chatbots:-
Chatbots help a business to maintain good customer relationships and enable to

Increase Customer Engagement
Reduce Customer Service Costs
Monitor Consumer Data to Gain Insights
Devise a Conversational Marketing Strategy
Balance Automation with Human Touch
Improve Lead Generation
Meet Customer Expectations
Achieve Scalability of Support
AI Bot

This technology is expected to be implemented in almost all web apps that interact with customers. Hence, we can’t exclude this from web app development trends to look out for in 2022. You can connect with our competent Python development team to incorporate this feature into your App effectively.


Source link

13+ Free Development Certification to get in 2021

Certification Course helps a person to grandstand his capability, responsibility for the calling, construct aptitude in his expert branch of knowledge, and assists with work progression. It’s anything but an assignment procured by an individual giving a sort of confirmation to the organization of his abilities of playing out a task.

So here in this post I am bringing 19 free certification you can earn in 2021.

Background Remover


Slazzer is an AI-based photograph editing application that can without much of a stretch eliminate or change the foundation in your pictures. This instrument is not difficult to utilize and is great for online advertisers who routinely manage photographs and are hoping to save time, cash, and exertion.

Key Features

Utilizing this tool is speedy and simple as you don’t need to manually edit the photograph while eliminating or changing the foundation. One more beneficial thing here is that the entire course of background editing essentially begins with transferring a picture and sitting tight for a couple of moments just to get the moment result.


Paid plan starts at $13 per month for 100 credits. The free version offers low-resolution images.**

Above were some free certification you can earn in 2021 for free. Alternatively I will ask you to visit the below websites to see a range of free certification in mane other fields too.

Want to add more? Comment down below

Source link

Some Javascript Methods: slice() & splice()

Hey everyone, my name is Dez and I am new to programming as well. I wanted to share my understandings of some javascript methods I have learned. If I messed anything up PLEASE feel free to correct me and I will change it. Also if you want to add some more methods or tips/tricks in the comments that will be awesome!

1.) slice()

Slice is a non-mutating method (this means it does not change the original array). This method extracts selected items from an array and returns the extracted items. The slice method looks like this array.slice(from, until); Now you might be confused with the “until” part. SO I will do my best to explain it because the until part was CONFUSING!
What I found was that the “until” part is NOT the end index, instead, it’s until ANOTHER element index. For example, let’s say I want to slice an array from index 2 to index 4 we will write array.slice(2,5) Think of this 5 as in “STOP AT INDEX 5 BUT DO NOT INCLUDE”. Now let’s create an instance and try to use slice to get what we wanted

EX 1-1:
myHobbies.slice example:

  • The following code is an array with my hobbies as elements
    const myHobbies = ["Muay Thai", "Boxing", "Programming", "Lifting weights", "Learning about Artificial Intelligence"]

  • Let’s say we can extract Programming, Lifting Weights, and Learning about Artificial Intelligence. We will write it as follows:
    myHobbies.slice(2, 5)
    This will extract my desired items and if I wanted to we can save them into a variable because the method RETURNS my selected items into a new array. So if I were to console.log what I wrote above I will get:
    ['Programming', 'Lifting Weights', 'Learning about Artificial Intelligence']
    Now if I were to console.log myHobbies I will get:
    ["Muay Thai", "Boxing", "Programming", "Lifting weights", "Learning about Artificial Intelligence"]
    This is because this method is non-mutating remember?

2.) splice()

Splice IS NOT THE SAME AS SLICE!!! A lot of devs get this confused because the names are similar. Now splice CHANGES an array by adding or removing elements from the array.

  • Removing Elements with splice()
    In order to remove elements using splice, we will need to provide the method with the index of the element along with the number of elements to be removed. It will be written as such: array.splice(index, number of elements); Where “index” is the starting point and number of elements is how many elements we want to be removed starting from our desired start point going up. Now if we fail to include a second argument every single element starting from your start point and up will be REMOVED. Now let’s see it in action

EX 2-1:
Now let’s say we have the same array as before which is const myHobbies = ["Muay Thai", "Boxing", "Programming", "Lifting weights", "Learning about Artificial Intelligence"]. Now let’s say we got injured and we are no longer interested in lifting weight. We also figured that we no longer want to learn about artificial intelligence. Now to remove these 2 elements from our myHobbies array we can use the splice method!
What this does is that it will begin on index 3 which is “Lifting Weights” and will REMOVE 2 elements. These elements will be the starting point and the next element. This means if we console.log myHobbies we will see [“Muay Thai”, “Boxing”, and “Programming”] Awesome right?

  • Adding Elements
    In order to add elements, we will need to pass them as the 3rd, 4th, 5th …nth parameter. Depending on how much you want to add of course. So it will look like this array.splice(index, number of elements, element, element, element)

EX 2-2:

Let’s look at our previous array again which is const myHobbies = ["Muay Thai", "Boxing", "Programming", "Lifting weights", "Learning about Artificial Intelligence"]. Let’s say we picked up new hobbies and we want to add them. In order to NOT remove anything, but add new elements we can do it like this.
myHobbies.splice(5,0, 'Machine Learning', 'Running','CyberSecurity')

Now if we console.log myHobbies we will see [ ‘Muay Thai’, ‘Boxing’, ‘Programming’, ‘Lifting weights’, ‘Learning about Artificial Intelligence’, ‘Machine Learning’, ‘Running’, ‘CyberSecurity’] NOTE: Notice how I put 5 as the index. This means I wanted to start on the 5th index which is “Learning about Artificial Intelligence” and add it at the end. You can begin in ANY index and add it in. This means you can throw in some elements in the center if you really wanted to.

Source link

WTF JavaScript: A Variable with Side Effects

JavaScript has many quirks and difficult-to-understand behaviors. There are hilarious talks such as WTFJS and WAT that make fun of JavaScript for its strangeness.

Since I work on refactorings, I have to consider many weird and sometimes funny sides of JavaScript. I will share some of the surprising behaviors that I encounter, so if you see them (which you hopefully never will), it might hint at what’s going on.

This blog post explores an innocent-looking statement:

// ... some code


You might intuitively think that nothing should happen here – the statement seems to do nothing because there is no obvious function call here.

However, it can do anything, for example, print “Hello World!” to the console.

// ... some code

helloWorld;           // prints "Hello World!"

How can this even be possible?

It turns out that global variables (in this case, helloWorld) are properties of the global object. And properties in JavaScript do not have to be simple values. They can be implemented using getters and setters, which can execute code. Since the global object inherits from Object.prototype in modern JavaScript engines, adding properties to Object.prototype creates properties on the global object.

Here, helloWorld is defined as such a getter:

Object.defineProperty(Object.prototype, 'helloWorld', 
  get()  console.log("Hello World!"); ,

helloWorld;           // prints "Hello World!"

Thankfully this can only happen with global variables, and not with parameters or local variables.

Object.defineProperty(Object.prototype, 'helloWorld', 
  get()  console.log("Hello World!"); ,

const a = helloWorld; // getter is evaluated, prints "Hello World!"
a;                    // does nothing

I learned about this strange behavior in a blog post about the globalThis polyfill. In the polyfill, a global property getter is used to access the global this object in different environments such as browsers, web workers, frames, Node.js, and ES modules. Have a look if you want to know more!

Source link

My first 100 followers on Dev

First of all, thanks to the Dev community for giving feedback on my posts and appreciating my content.

How it started

I always had a thing for writing. I had been writing Medium blogs about my travel for some time now. It brings me joy to share and express myself through words.

During my college, I made a YouTube channel and posted tutorials about CPU simulators & assembly programming. It made me realize that I love to teach. Last December, when I checked, my channel reached 300 subscribers, and I thought, let’s continue doing what I like.

I thought this year let me start contributing to the Dev Community and resume making YouTube videos. So during this New Year’s long weekend, I re-branded my YouTube channel and created a Dev account.

I’ve posted two articles on Dev and received more than 2k views with 150+ reactions and gained 100+ followers.

Where it’s headed

I’ve been a developer for four years now. Although I have a CS degree, I consider myself a self-taught engineer. I’ve grown so much in my career that at the age of 22, I’m an Eng. manager with five direct reports. I feel my experience will be a lot helpful for the community.

I plan to continue writing and making videos at least once per week. It would be an achievement to keep this going for a year.


  1. Improve my writing and speaking skills.
  2. Create content that I can be proud of
  3. Deliver one Dev post and a YouTube video per week.
  4. Earn the 4/8/16 week streak badges from Dev.

I hope this post was helpful to you. Should you have any feedback or questions, please feel free to put them in the comments below. I would love to hear and work on them.

For more such content, please follow me

Until next time

Source link

java traditional method to remove duplicate String

I just saw a post in dev someone solved same problem using collections in java. so i thought let me try the same problem to solve in traditional way`

  1. public class Main
    public static void main(String[] args)
    String s=”abbvcddgtttt”;
    char c[]=s.toCharArray();
    char cc[]=new char[c.length];
    int index=0;
    char same=” “;
    for(int i=0;i<c.length;i++)

    for(int j=i+1;j<c.length;j++)


    c[i]=’ ‘;

    if(c[i]!=’ ‘)


    for(char i:cc)



Source link