Forem: Codementor

JavaScript Tutorial: Removing A Specific Element From An Array

Codementor — Mon, 22 Feb 2021 04:50:22 +0000

Have you ever been stuck trying to remove a specific item from an array? Imagine this: you are working on a shopping cart delete feature where you need to delete an item that the user doesn't want anymore. How would you go about using JavaScript's native array methods to remove that product ID from your shopping cart array?

In this tutorial, we are going to look at how to remove a specific item from an array using JavaScript's native array methods: splice and filter.

Watch the tutorial here or click on the image below to get started.

Method 1: Splice Method

First off, what does the splice method do?

Splice changes the contents of the array by removing, replacing, or adding new elements. The return value of the splice method is a new array containing the deleted elements.

Let's take a look at what that means.

Splice mutates the original code

Below is our array filled with fruits and a unicorn. To remove an item using splice, the first parameter is the index of the item we want to remove. The unicorn is in index 2. The second parameter determines how many items you want to delete, which will be 1.

const fruits = ["🥝", "🍓", "🦄", "🍊", "🍋"];

console.log(fruits.splice(2, 1)) // outputs: ["🦄"]

console.log(fruits); // output: ["🥝", "🍓", "🍊", "🍋"]

Notice how the output of the splice function returns the unicorn in an array, whereas fruits array has changed to a unicorn-free fruit salad.

Something to be extra careful about is when using splice, the original array is mutated, meaning you are changing the original array.

But what if we don't want to mutate the original array?

Let's look back at the fruits array again. We don't know where the unicorn is. Here, we will be using the arrow function syntax in ES6. We're going to copy the array, find the index, and splice it!

const fruits = ["🥝", "🍓", "🦄", "🍊", "🍋", "🦄"];
const removeItem = (arr, item) => {
  let newArray = [...arr];
  const index = newArray.findIndex((item) => item === "🦄");
    if (index !== -1) {
     newArray.splice(index, 1);
      return newArray;
    }
};

console.log(removeItem(fruits, "🦄")); // output: ["🥝", "🍓", "🍊", "🍋", "🦄"]

console.log(fruits); // output: ["🥝", "🍓", "🦄", "🍊", "🍋", "🦄"]

We will create a function that takes an array and item as parameters.

First, to copy the array, we will use the spread operator. This way we won't mutate the data.

Next, we will use the findIndex method. This will find the first element that satisfies the condition function. But if it returns -1, then it means there wasn't the element that fit the condition.

To use the findIndex method, we will type in the condition we want it to satisfy.

Finally, to make sure we found the unicorn, we will check that the variable index does not equal to -1, before splicing it to remove the item.

Recall how the splice method's first parameter is the index you want to change, and the second parameter is how many elements you want to remove in the array. Finally, We will need to return the variable newArray to be able to get the output.

So here we see that the output for the removeItem function is an array of just fruits, and the original fruits array remains unchanged.

You might've noticed there was more than one unicorn in the above code.

Because findIndex will only return the first element that satisfies the condition, we are still left with another unicorn.

So if you need to handle duplicates, there's a more straightforward way we'll show you in the next method.

Method 2: Filter Method

Unlike splice which mutates the data, filter creates a new array with elements that fit the condition. We can also handle duplicates this way, as it checks against every single element in the array.

The filter method is very similar to findIndex, in that the first parameter is a conditional function.

When we output newArray, notice how both of the unicorns are removed, and when we console.log(fruits) again, it's still the original array .

const fruits = ["🥝", "🍓", "🦄", "🍊", "🍋", "🦄"];
const newArray = fruits.filter((item) => item !== "🦄");

console.log(newArray); // output: ["🥝", "🍓", "🍊", "🍋"]
console.log(fruits); // output: ["🥝", "🍓", "🦄", "🍊", "🍋", "🦄"];

Key Takeaways

Removing Duplicates

Filter can directly handle duplicates, while splice needs extra help.

Data Mutation

We need to be aware of the data mutation in these methods, for instance, splice changes the original array, while filter creates a brand new array.

There are many ways to remove a specific item in an array. Splice and filter are some of the common ways using native JavaScripts array methods.

We also shared the video tutorial on our Youtube channel here!

Learn JavaScript by building projects on DevProjects

Introducing DevProjects - Learn Programming by Building Projects

Codementor — Fri, 18 Dec 2020 10:23:50 +0000

“What are the best Python projects for beginners?”

“Where can I find JavaScript projects?”

Chances are, if you’re learning programming, you’ve googled a variation of the above questions at one point or another. Through Codementor, we heard that a lot of our users did too. We asked ourselves: does it really have to be this hard?

So we had many brainstorm sessions fueled by caffeine and sugar, and reached out to some mentors and users for feedback. We had one goal: to create a simple tool that anyone learning programming would find helpful.

After much discussion, we understood two things. First, one of the hardest things about learning programming is transitioning from theory to real world code; and two: it’s more interesting to learn programming with actual projects.

Enter DevProjects

Or, as our team affectionately calls it, Project Alpaca (because alpacas are social and inquisitive animals).

We intentionally designed DevProjects to help you seamlessly transition from “hello world” to real world programming. We also aimed to make this process easy, interesting, interactive, and best of all, fun.

DevProjects is a community where everyone learning programming has free and easy access to projects for learners. Users can learn through discussing the project with peers and mentors, as well as sharing and receiving feedback on their code.

What projects are on DevProjects?

DevProjects has a growing collection of curated projects for web development, mobile apps, and automation/tools. Project difficulties range from very beginner to the more advanced.

We worked with mentors and senior developers to design projects that would help you bridge the gap between theory and practice. Not only is each project specifically constructed to address problems you might face when applying your skills in the real world, the projects provide context and are limited in scope. This gives you a sense of how developers work with a product team or as a freelancer.

Other than the curated projects, why should I use DevProjects?

Learning programming is hard enough, especially when you’re stuck with a project and don’t know where to start untangling the mess.

But there’s no need to do it alone.

DevProjects is designed to be an open and interactive community. Users are encouraged to discuss the best way to approach a project with peers and mentors, and learn how to see a project from different perspectives. You can also share your code, receive feedback, as well as get code reviews and pointers on how to improve.

We designed DevProjects for you and others that are learning programming. Since learning programming is already a difficult task in itself, we wanted to help shrink the gap between theory and real world application. We hope that DevProjects will help you bridge that gap, and pave the way to your programming journey success.

Check out DevProjects if you haven’t already, and we’d love to hear what you think!

Learning Django Through Problem-Solving: How A Lawyer Built His Side Project

Codementor — Wed, 02 Sep 2020 09:20:18 +0000

“I’m not looking to be a programmer. I just want to build State of K, but at this point, I’ve probably already learned every topic in Django.”

Ingram, a full-time lawyer and creator of State of K, the Q-and-A website where users can answer their own questions based on academic studies, started his programming journey with a very clear goal and a very vague idea of how.

“For many years, I had the idea of a site that I wanted to exist,” Ingram explained, “There are certain types of questions — empirical questions — where the best available answer comes from published studies, rather than someone’s opinion. But there are too many obstacles to understanding what those studies say. I wanted to solve that problem.”

Under normal circumstances, someone with barely any programming knowledge would choose to hire an expert developer to build their product. “I would liken it to a work of art,” Ingram explained, “You can’t commission an artist if you don’t know yet what you want the drawing to look like.” He went on to share that as he didn’t have a clear image of how the question-answer website would work, he wanted the freedom to be able to play around with the code. And as he had no idea what he would ask the developer to do, Ingram figured it would be easier to control the budget by building it himself.

So only equipped with the basic HTML and CSS learned at the turn of the century, he tried creating a website mockup by making a table with HTML “Because that’s what people did in 2001.” It got the job done, but he also quickly realized that his knowledge was outdated, and certainly not enough to bring the idea he had in his head to life.

After lots of research, Ingram theorized a “very complicated way” to build the website and set out to find a mentor or senior developer that could give him feedback. “The first person I met on Codementor told me my implementation plan was totally wrong,” he laughed. Luckily, it wasn’t all in vain as the mentor pointed him in the right direction: to learn Django.

And so he did. But as a full-time lawyer with limited free time, Ingram needed a way to learn code that could fit into his busy schedule. But traditional teaching methods weren’t a good fit: “With bootcamps, you need to be physically on site or adhere to their teaching schedule.” Instead, he started teaching himself by buying a book, watching Youtube videos, and purchasing several Udemy courses.

After a while, he realized he was making decisions that would have a butterfly effect on future decisions. He figured he could either continue puzzling together advice from YouTube videos, or work with a mentor that knew what they were doing and could help him make better decisions.

He chose the latter.

Ingram chatted with a couple of mentors and eventually found Jessamyn, a mentor he’s been consistently working with for years now. They started out working together a couple of times a week before increasing it to multiple times a week as his project (and budget) increased.

One surprising takeaway was how helpful working with a mentor was for learning the most basic things.

“It was like my 10th session, when Jessamyn asked off-handedly where I was saving my code,” he shared. And like most non-technical people, Ingram saved the project on his laptop. In that session, he learned about Git, how to use it, and how a programmer would actually run a project. “Of course, there are YouTube videos on how to use Git, but if you don’t know that it exists, you wouldn’t know to search for it in the first place.”

“I’m not interested in becoming a developer. I’m just interested in building a specific project,” he emphasized when we talked about his learning journey. With traditional learning models, the foundation building, while critical, did not fit into Ingram’s schedule. “The problem with the foundation learning model for me is that I don’t understand why the content will be useful until many months later by which time I’ve forgotten the lesson and have to relearn it. ”

He uses a goal-oriented approach when learning. “I usually know what I want to create,” Ingram said about his learning process. He spends time going through online resources and documentation — “the free official documentation for Python and Django have been the most useful” — before coming up with an implementation plan he shares with the mentor. “I try to do as much as I can on my own, and get Jessamyn’s approval early on,” he shared, “It’s an iterative process. Usually, if I’ve put enough thought into it beforehand, the concept works out the first time, but sometimes considerations that I never even thought of pop up once I start implementing."

However, with a demanding full-time job, there are days when he tries to shortcut the learning process: “It’s usually after I’ve pulled a couple of all nighters at work, or I reasonably believe that I won’t encounter a specific issue again.” During these sessions, he’ll learn by watching the mentor code and ask questions as she goes, which is much less demanding. “But I have to say, in almost every case, I end up encountering the problem again and have to spend more money and time to master what she did,” he said, “It usually pays to just pay attention and learn it properly the first time.”

It’s been four years since Ingram started on his programming journey, and State of K is steadily growing its user base. While his learning process can be described as “problem solving”, at this point, he’s “probably already learned every topic in the Django library and could apply that knowledge to other projects.” This has been echoed by his mentor, Jessamyn: “Ingram showed incredible growth as a developer over the several years I was actively mentoring him. He went from a novice to being able to develop quite complex features.”

"Have I learned Django more slowly than someone else? Definitely. But I've also done it while working a full-time job, which I think is also pretty great."

This post was originally published on Codementor.

[Dev Journey] He's Using His National Athlete Experience to Build A Language Learning App

Codementor — Wed, 12 Aug 2020 03:42:29 +0000

In this series, we're shining the spotlight on members of the Codementor community. They share their journey to becoming a developer — the highs, the lows, and the inbetweens. This story was written by Mitchell Gould, a national athlete turned tech entrepreneur.

When I was 10 years old, my father came into my room and asked "how would you like to climb Kilimanjaro?" I, of course, jumped at the idea, not having the faintest idea what a Kilimanjaro was or where it was located. My father never mentioned the topic again. But the seed was planted and if you keep reading, you will find out how IT enabled me to conquer that mountain.

I have been asked to write about how my varied background in a multitude of careers has helped me at being an entrepreneur. But after developing an aversion to labels at a very young age, I don't really think of myself as an entrepreneur.

My family moved from New York to Toronto when I was very young. I wanted to fit in, so I decided I would become a hockey player. This was Canada after all. But as luck would have it, my mother watched a hockey match shortly before I asked. And jaded by the blood and violence of the game, she, in classic mother fashion, replied with four words: over my dead body.

Instead, I was enrolled in figure skating and conned into believing that all great hockey players took figure skating lessons. When the kids at school found out, I was teased, ridiculed, and frequently beaten. I learned that I had to hide risky labels if I wanted to be safe. By ignoring the labels, I found myself focusing on the skills and practices associated with them.

This rejection of labels has had the positive side effect of helping me to be less judgmental of myself and others. I also believe it has freed me to pursue a multitude of careers in completely unrelated fields such as (in no particular order):

international competitor on Canada's National Figure Skating Team
brain researcher associated with the Canadian Aerospace Medical Research Unit
a Cordon Bleu certified chef at the renowned Olive and Gourmando Cafe
write and produce movies, one of which won the National Drama Prize
CELTA certified teacher at 3 universities in Chiang Mai, Thailand
graduate from the Information Technology Institute and build my own IT projects
buddhist monk in Cambodia as part of a project to restart Buddhism in rural communities.

What I find most fascinating is how each of these careers surprised me with challenges to develop myself, gain new skills I never would have imagined, and how these skills translated from one career to the other.

For example, as a chef, you would expect to spend your time cooking things like Veloutés, Cassoulet, or Confit de canard. But I actually spent a great deal of my time solving problems. Like the time our food supplier missed our delivery, and I had to source and balance five boxes of portobello mushrooms while riding a bike in a Canadian snowstorm. Or when the water was accidentally left running in the espresso machine overnight and we had to deal with the espresso flood the next morning.

As a skater, I practiced how to throw my weight into the air to achieve enough momentum to complete 2.5 rotations and land safely. I had to overcome fear and have complete trust in myself. This turned into a life philosophy. I never would have predicted that doing a double axle would help me to confidently launch myself into so many different careers and projects.

My current project, code named 'ProvenWord', is a direct consequence of teaching English in Thailand for 3 years. I witnessed firsthand, the difficulty of learning to write in English, something I took for granted as a native English speaker. I partnered with a friend who has over 20 years of proofreading experience, to develop an application that helps non-native English learners improve their writing.

In competitive ice skating judges would immediately evaluate your performance and hold up a score from 0 to 10. I found that this kind of direct and immediate feedback to be very powerful (and, at times, painful). ProvenWord draws significantly from this experience. Our system instantly evaluates a client's writing, categorizes their errors (e.g. verb, punctuation, capitalization etc.), and presents the results in a visually stunning graphical interface. Clients gain a clear picture of where they need to focus to improve their writing are are provided with interactive learning tools designed for each error category.

Of all the careers, jobs, and projects that I have been a part of, ProvenWord has proven to be the most challenging. We literally had no money when we started this project. My skills in IT were quite limited and/or outdated. The scope of the project kept growing and went well beyond my pay grade. But this sounded like an awesome challenge to me, so I decided to up my IT abilities, and for that I needed help. A lot of help.

It took me quite a while to find the resources, learning platforms, and coding legends I wanted to learn from. I'm also a very slow learner, so I found myself taking many courses on the same topic from different teachers, exposing me to an array of coding styles and ideologies.

While courses and resources gave me a solid foundation, nothing was as powerful or effective as working with a mentor. I have to give a shout out to the people at Codementor for building this platform with access to so many incredible developers. That's not to say I found the right mentors the first time. It took me a few sessions until I connected with mentors with a good balance of patience, pedagogy, and expertise that resonated with me.

I initially worked with mentors to fix specific bugs, but more often than not, the mentor would point out the larger problem that needed to be fixed. Mentoring sessions went from 'bug fixes' to developing high level strategies and best practices that would take my coding skills to a whole new level. I learned how to take a step back to think about the problem, how the structure could be adjusted, and more importantly, I learned how to solve the problem when it came around next time. I remember there was one time I had to scrap my entire code after a mentoring session. Rather than band-aiding the existing code, my mentor asked what I was trying to achieve. He then took a step back and taught me how to look at all the other ways of writing better code with the same function. I finished that mentoring session feeling like Keanu Reaves in The Matrix, like I was plugged in and getting an upgrade. I was excited, fired up, and motivated to go back to work and apply this new found knowledge.

That's the feeling I get after every fruitful mentoring session. Finding the right mentor allowed me to up my game and skillset. They opened my mind and taught me things I didn't even request in the initial communication. Working with the right mentor can be highly motivating, but that doesn't mean I didn't prepare beforehand. I learned that to get the most out of mentoring, I needed to be clear about what I wanted from each session. This forced me to think deeply about each problem and document it precisely. Sometimes this preparation was enough for me to solve the problem myself. Other times, the document with code samples, pseudo code, and other information helped my mentor prepare for our session, and would be able to more efficiently, come up with a strategy or solution.

Now back to the Kilimanjaro story.

I was attending the Information Technology Institute in Ottawa, Canada when I met Yvonne. She was a refuge from Rwanda and a truly brilliant woman. We quickly became close friends and helped each other get through the grueling course load.

We graduated just after the 2000 dotcom bubble burst and there were no jobs for freshly graduated IT students. With no choice and nothing to lose, we setup shop in a room of my Montreal apartment and built websites, designed business cards, fliers, and did whatever we could to get by.

One day Yvonne walked into the office and told me she was going to Nairobi, Kenya to see her family. A quick Google search showed me where Nairobi was: 4 hours north of Arusha, Tanzania - the staging city for climbing Kilimanjaro. Taking this as a sign from the universe, I contacted my friend, Adam, who was then working somewhere in Nigeria. Coincidentally he wanted to quit his job and was up for an adventure. So I booked a flight and fulfilled my childhood dream, only without my dad (he was proud of me anyway).

Remote Career Summit 2020 (June 25th)

Codementor — Mon, 22 Jun 2020 05:35:40 +0000

We're holding the Remote Career Summit 2020 on June 25!

Don't miss this opportunity to hear from the leading companies in remote work, attend workshops, and possibly even find you next remote role at the career expo.

It's free to attend (sign up here). Check out the information below.

We’re still adding new information and speakers — watch this space!

Introduction

Here at Arc, we love remote work — our day job is helping expert remote developers find great projects and organizations, after all. So when the COVID-19 pandemic forced a lot of people and companies to suddenly go remote, and the economic outlook began to look a bit shaky, we wondered how we could help. Could we help people “do remote better” and help people connect with job opportunities?

The answer we stumbled upon over a few team video chats was this: holding the world’s biggest virtual Remote Career Summit. This day-long event is part remote work conference, part virtual job fair.

We’re collaborating with some of the world’s top remote work experts and companies to bring you this unique opportunity to launch — or grow — your remote career. The best bit: there are still more talks to be announced 🎉

If this sounds as exciting to you as it does to us, welcome aboard!

Two-In-One Event

The Remote Career Summit 2020 is a two-in-one event, comprising a Career Conference and a Job Fair.

Whether you’re a developer, a designer, or a marketer, there’s something for everyone. We’re collaborating with some of the biggest names in the tech and remote working worlds to bring you insights. You’ll come away with new knowledge about:

Landing your first remote job
Online collaboration best practices, and
How to stand out as a candidate in the remote hiring process.

Intrigued? Check out the details below.

Career Conference Speaker Schedule — Main Stage

Arc — State of Remote Jobs

9:00-9:20am (PT)
In this opening keynote, Arc & Codementor Founder/CEO Weiting Liu walks us through the state of remote jobs in 2020, including key stats and insights.

Automattic x Buffer x GitLab — Under the Hood: Working at the World’s Biggest All-Remote Companies

9:30-10:30am (PT)
Join three of the biggest brands in remote as they have a conversation with Laurel Farrer of Distribute Consulting. You’ll learn what makes these companies tick — and what they look for when hiring. From remote processes to collaboration and cultural fit, don’t miss this opportunity to hear and compare remote expertise.

Doist x MURAL x Virtual Work Insider — How to Get Hired for Remote Work

10:35-11:15am (PT)
From the key skills you need to succeed at remote work and a look into the hiring process of remote companies, to tips on how to capture a recruiter's attention and the number one piece of advice job-seekers need to hear right now... don't miss this chance to hear how to stand out as a candidate.

DHH (Basecamp & HEY) & Tammy Bjelland (Workplaceless) — Building a Calm and Ethical Workplace

11:30am-12:10pm (PT)
This fireside chat promises wide-ranging insights on remote work management, integrating remote work into a previously-colocated company, and why trust and great writing skills help unlock calm productivity.

Roundtable — Diversity, Inclusion, and Remote Work

12:20-1:10pm (PT)
Join speakers from Career Karma, Under Armour, Workfrom, and Cota Capital as they discuss diversity and inclusion, and whether or not embracing remote work is a way to create more inclusive workplaces.

Dribbble x Creative Market — Management, Scaling, & Remote Culture: Dribbble’s Balancing Act

1:15-1:50pm (PT)
So your company’s fully-remote. Now what? Learn from the CEOs of Dribbble and Creative Market as they discuss building and scaling remote teams, preserving and refocusing culture, and management dos and don’ts.

Roundtable — Nail Your Next Interview: Tips for Job-Seeking Developers

2:00-3:00pm (PT)
Join speakers from Shopify, Zapier, and Help Scout for this must-listen session on getting hired as a remote developer. Whether it's technical interviewing, remote hiring processes, developer portfolio preparation, or self-improvement tips, it's all here.

Roundtable — How Design Teams Successfully Collaborate and Hire Remotely

3:10-4:10pm (PT)
How do remote design teams make decisions? What tools are they using? How do they hire? Learn the answers to these questions — and more — during this session with speakers from Microsoft, Dialpad, Coinbase, UnitedHealthcare, and Litmus.

Rand Fishkin (SparkToro) — Get Hired in Marketing... in 2020

4:15-4:45pm (PT)
What skills do marketers need in 2020? In this data-driven presentation, SparkToro CEO Rand Fishkin breaks down the must-haves and must-knows for current marketing job-seekers.

Ryan Choi (Y Combinator) — Why Work at a Startup

4:50-5:30pm (PT)
Thinking about working at a startup? What should you know? How can you assess a startup, and whether it's a good fit for you and your career? Y Combinator's Ryan Choi gives an insider's look into why you should — or shouldn't — work at a startup.

Arc — Closing

5:30-5:40pm (PT)

Talks, Q&As, and Workshops

Fernando Angulo (SEMrush) — Building Your Online Presence as a Marketer

12:00-12:30pm (PT)
SEO, influencers, and personal branding. How can you tie it all together to build your online presence as a marketer? Join SEMrush's Head of Communications to find out!

Caro Griffin (Skillcrush) — How to Land Your First Remote Job in Tech

3:30-4:00pm (PT)
So you want a remote job. That's great! But... where do you start? Skillcrush's Caro Griffin is here to help, with this presentation on how to find remote jobs.

Vinayak Ranade (Drafted) — How to Leverage Your Network

4:00-4:30pm (PT)
Spoiler alert: networking still matters, even for remote jobs. Get actionable tips on how to leverage your network from the CEO of Drafted.

Virtual Job Fair

The virtual Job Fair will be running in parallel to the Career Conference talks, and available at all times.

At the Job Fair, you can:

Discover companies still hiring in the Employer Expo
Chat with company reps to ask questions and learn more
Connect with other professionals and grow your network

What Are You Waiting For?

If you haven’t signed up for your free attendee ticket yet, now’s the time! Grab your ticket here.

Are you an employer looking to have your brand represented at the job fair? Click here.

Let us know in the comments below if you have any questions.

Look forward to seeing you there!

10 Performance Optimization Techniques for React Apps

Codementor — Thu, 12 Mar 2020 09:56:03 +0000

Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. While this will lead to a faster user interface without specifically optimizing for performance for many cases, there are ways where you can still speed up your React application. This post will go over some useful techniques you can use to improve your React code.

1. Using Immutable Data Structures

Data immutability is not an architecture or design pattern, it’s an opinionated way of writing code. This forces you to think about how you structure your application data flow. In my opinion, data immutability is a practice that revolves around a strict unidirectional data flow.

Data immutability, which comes from the functional programming world, can be applied to the design of front-end apps. It can have many benefits, such as:

Zero side-effects;
Immutable data objects are simpler to create, test, and use;
Helps prevent temporal coupling;
Easier to track changes.

In the React landscape, we use the notion of Component to maintain the internal state of components, and changes to the state can cause the component to re-render.

React builds and maintains an internal representation of the rendered UI (Virtual DOM). When a component’s props or state changes, React compares the newly returned element with the previously rendered one. When the two are not equal, React will update the DOM. Therefore, we have to be careful when changing the state.

Let’s consider a User List Component:

state = {
       users: []
   }

   addNewUser = () =>{
       /**
        *  OfCourse not correct way to insert
        *  new user in user list
        */
       const users = this.state.users;
       users.push({
           userName: "robin",
           email: "email@email.com"
       });
       this.setState({users: users});
   }

The concern here is that we are pushing new users onto the variable users, which is a reference to this.state.users.

Pro Tip: React state should be treated as immutable. We should never mutate this.state directly, as calling setState() afterward may replace the mutation you made.

So what’s wrong with mutating state directly? Let’s say we overwrite shouldComponentUpdate and are checking nextState against this.state to make sure that we only re-render components when changes happen in the state.

 shouldComponentUpdate(nextProps, nextState) {
    if (this.state.users !== nextState.users) {
      return true;
    }
    return false;
  }

Even if changes happen in the user's array, React won’t re-render the UI as it’s the same reference.

The easiest way to avoid this kind of problem is to avoid mutating props or state. So the
addNewUser method could be rewritten using concat:

   addNewUser = () => {
       this.setState(state => ({
         users: state.users.concat({
           timeStamp: new Date(),
           userName: "robin",
           email: "email@email.com"
         })
       }));
   };

For handling changes to state or props in React components, we can consider the following immutable approaches:

For arrays: use [].concat or es6 [ ...params]
For objects: use Object.assign({}, ...) or es6 {...params}

These two methods go a long way when introducing immutability to your code base.

But it’s better to use an optimized library which provides a set of immutable data structures. Here are some of the libraries you can use:

Immutability Helper: This is a good library when it’s comes to mutating a data copy without changing the source.
Immutable.js: This is my favorite library as it provides a lot of persistent immutable data structures, including: List, Stack, Map, OrderedMap, Set, OrderedSet, and Record.
Seamless-immutable: A library for immutable JavaScript data structures that are backward-compatible with normal arrays and objects.
React-copy-write: An immutable React state management library with a simple mutable API, memoized selectors, and structural sharing.

Pro Tip: React setState method is asynchronous. This means that rather than immediately mutating this.state, setState() creates a pending state transition. If you access this.state after calling this method, it would potentially return the existing value. To prevent this, use the callback function of setState to run code after the call is completed.

Additional Resources:

The original post, 21 Performance Optimization Techniques for React Apps, is published on the Codementor Blog

2. Function/Stateless Components and React.PureComponent

In React, function components and PureComponent provide two different ways of optimizing React apps at the component level.

Function components prevent constructing class instances while reducing the overall bundle size as it minifies better than classes.

On the other hand, in order to optimize UI updates, we can consider converting function components to a PureComponent class (or a class with a custom shouldComponentUpdate method). However, if the component doesn’t use state and other life cycle methods, the initial render time is a bit more complicated when compared to function components with potentially faster updates.

When should we use React.PureComponent?

React.PureComponent does a shallow comparison on state change. This means it compares values when looking at primitive data types, and compares references for objects. Due to this, we must make sure two criteria are met when using React.PureComponent:

Component State/Props is an immutable object;
State/Props should not have a multi-level nested object.

Pro Tip: All child components of React.PureComponent should also be a Pure or functional component.

3. Multiple Chunk Files

Your application always begins with a few components. You start adding new features and dependencies, and before you know it, you end up with a huge production file.

You can consider having two separate files by separating your vendor, or third-party library code from your application code by taking advantage of CommonsChunkPlugin for webpack. You’ll end up with vendor.bundle.js and app.bundle.js. By splitting your files, your browser caches less frequently and parallel downloads resources to reduce load time wait.

Note: If you are using the latest version of webpack, you can also consider SplitChunksPlugin

4.Using Production Mode Flag in Webpack

If you are using webpack 4 as a module bundler for your app, you can consider setting the mode option to production. This basically tells webpack to use the built-in optimization:

    module.exports = {
      mode: 'production'
    };

Alternatively, you can pass it as a CLI argument:

webpack --mode=production

Doing this will limit optimizations, such as minification or removing development-only code, to libraries. It will not expose source code, file paths, and many more.

5.Dependency optimization

When considering optimizing the application bundle size, it’s worth checking how much code you are actually utilizing from dependencies. For example, you could be using Moment.js which includes localized files for multi-language support. If you don’t need to support multiple languages, then you can consider using moment-locales-webpack-plugin to remove unused locales for your final bundle.

Another example is loadash. Let’s say you are only using 20 of the 100+ methods, then having all the extra methods in your final bundle is not optimal. So for this, you can use lodash-webpack-plugin to remove unused functions.

Here is an extensive list of dependencies which you can optimize.

6. Use `React.Fragments` to Avoid Additional HTML Element Wrappers

React.fragments lets you group a list of children without adding an extra node.

class Comments extends React.PureComponent{
    render() {
        return (
            <React.Fragment>
                <h1>Comment Title</h1>
                <p>comments</p>
                <p>comment time</p>
            </React.Fragment>
        );
    } 
}

But wait! There is the alternate and more concise syntax using React.fragments:

class Comments extends React.PureComponent{
    render() {
        return (
            <>
                <h1>Comment Title</h1>
                <p>comments</p>
                <p>comment time</p>
            </>
        );
    } 
}

7. Avoid Inline Function Definition in the Render Function.

Since functions are objects in JavaScript ({} !== {}), the inline function will always fail the prop diff when React does a diff check. Also, an arrow function will create a new instance of the function on each render if it's used in a JSX property. This might create a lot of work for the garbage collector.

default class CommentList extends React.Component {
    state = {
        comments: [],
        selectedCommentId: null
    }

    render(){
        const { comments } = this.state;
        return (
           comments.map((comment)=>{
               return <Comment onClick={(e)=>{
                    this.setState({selectedCommentId:comment.commentId})
               }} comment={comment} key={comment.id}/>
           }) 
        )
    }
}

Instead of defining the inline function for props, you can define the arrow function.

default class CommentList extends React.Component {
    state = {
        comments: [],
        selectedCommentId: null
    }

    onCommentClick = (commentId)=>{
        this.setState({selectedCommentId:commentId})
    }

    render(){
        const { comments } = this.state;
        return (
           comments.map((comment)=>{
               return <Comment onClick={this.onCommentClick} 
                comment={comment} key={comment.id}/>
           }) 
        )
    }
}

8. Throttling and Debouncing Event Action in JavaScript

Event trigger rate is the number of times an event handler invokes in a given amount of time.

In general, mouse clicks have lower event trigger rates compare to scrolling and mouseover. Higher event trigger rates can sometimes crash your application, but it can be controlled.

Let's discuss some of the techniques.

First, identify the event handler that is doing the expensive work. For example, an XHR request or DOM manipulation that performs UI updates, processes a large amount of data, or perform computation expensive tasks. In these cases, throttling and debouncing techniques can be a savior without making any changes in the event listener.

Throttling

In a nutshell, throttling means delaying function execution. So instead of executing the event handler/function immediately, you’ll be adding a few milliseconds of delay when an event is triggered. This can be used when implementing infinite scrolling, for example. Rather than fetching the next result set as the user is scrolling, you can delay the XHR call.

Another good example of this is Ajax-based instant search. You might not want to hit the server for every key press, so it’s better to throttle until the input field is dormant for a few milliseconds

Throttling can be implemented a number of ways. You can throttle by the number of events triggered or by the delay event handler being executed.

Debouncing

Unlike throttling, debouncing is a technique to prevent the event trigger from being fired too often. If you are using lodash, you can wrap the function you want to call in lodash’s debounce function.

Here’s a demo code for searching comments:

import debouce from 'lodash.debounce';

class SearchComments extends React.Component {
 constructor(props) {
   super(props);
   this.state = { searchQuery: “” };
 }

 setSearchQuery = debounce(e => {
   this.setState({ searchQuery: e.target.value });

   // Fire API call or Comments manipulation on client end side
 }, 1000);

 render() {
   return (
     <div>
       <h1>Search Comments</h1>
       <input type="text" onChange={this.setSearchQuery} />
     </div>
   );
 }
}

If you are not using lodash, you can use the minified debounced function to implement it in JavaScript.

function debounce(a,b,c){var d,e;return function(){function h(){d=null,c||(e=a.apply(f,g))}var f=this,g=arguments;return clearTimeout(d),d=setTimeout(h,b),c&&!d&&(e=a.apply(f,g)),e}}

Reference and Related Articles:
"Array" Methods,
Handling Events

9. Avoid using Index as Key for map

You often see indexes being used as a key when rendering a list.

{
    comments.map((comment, index) => {
        <Comment 
            {..comment}
            key={index} />
    })
}

But using the key as the index can show your app incorrect data as it is being used to identify DOM elements. When you push or remove an item from the list, if the key is the same as before, React assumes that the DOM element represents the same component.

It's always advisable to use a unique property as a key, or if your data doesn't have any unique attributes, then you can think of using the shortid module which generates a unique key.

import shortid from  "shortid";
{
    comments.map((comment, index) => {
        <Comment 
            {..comment}
            key={shortid.generate()} />
    })
}

However, if the data has a unique property, such as an ID, then it's better to use that property.

{
    comments.map((comment, index) => {
        <Comment 
            {..comment}
            key={comment.id} />
    })
}

In certain cases, it's completely okay to use the index as the key, but only if below condition holds:

The list and items are static
The items in the list don't have IDs and the list is never going to be reordered or filtered
List is immutable

References and Related Articles:
Consider providing a default key for dynamic children #1342,
The importance of component keys in React.js,
Why you need keys for collections in React

10. Avoiding Props in Initial States

We often need to pass initial data with props to the React component to set the initial state value.

Let's consider this code:

class EditPanelComponent extends Component {

    constructor(props){
        super(props);

        this.state ={
            isEditMode: false,
            applyCoupon: props.applyCoupon
        }
    }

    render(){
        return <div>
                    {this.state.applyCoupon && 
                    <>Enter Coupon: <Input/></>}
               </div>
    }
}

Everything looks good in the snippet, right?

But what happens when props.applyCoupon changes? Will it be reflected in the state? If the props are changed without the refreshing the component, the new prop value will never be assigned to the state’s applyCoupon. This is because the constructor function is only called when EditPanelComponent is first created.

To quote React docs:

Using props to initialize a state in constructor function often leads to duplication of “source of truth”, i.e. where the real data is. This is because constructor function is only invoked when the component is first created.

Workaround:

Don't initialize state with props which can be changed later. Instead, use props directly in the component.

class EditPanelComponent extends Component {

    constructor(props){
        super(props);

        this.state ={
            isEditMode: false
        }
    }

    render(){
        return <div>{this.props.applyCoupon && 
         <>Enter Coupon:<Input/></>}</div>
    }
}

You can use componentWillReceiveProps to update the state when props change.

class EditPanelComponent extends Component {

    constructor(props){
        super(props);

        this.state ={
            isEditMode: false,
            applyCoupon: props.applyCoupon
        }
    }

    // reset state if the seeded prop is updated
    componentWillReceiveProps(nextProps){
        if (nextProps.applyCoupon !== this.props.applyCoupon) {
            this.setState({ applyCoupon: nextProps.applyCoupon })
        }
    }

    render(){
        return <div>{this.props.applyCoupon && 
          <>Enter Coupon: <Input/></>}</div>
    }
}

References and Related Articles:
ReactJS: Why is passing the component initial state a prop an anti-pattern?,
React Anti-Patterns: Props in Initial State

Conclusion

There are many ways to optimize a React app, for example lazy loading components, using ServiceWorkers to cache application state, considering SSR, avoiding unnecessary renders etc.. That said, before considering optimization, it’s worth understanding how React components work, understanding diffing algorithms, and how rendering works in React. These are all important concepts to take into consideration when optimizing your application.

I think optimization without measuring is almost premature, which is why I would recommend to benchmark and measure performance first. You can consider profiling and visualizing components with Chrome Timeline. This lets you see which components are unmounted, mounted, updated, and how much time they take relative to each other. It will help you to get started with your performance optimization journey.

For more tips, head over to the Codementor Blog to read the original post, 21 Performance Optimization Techniques for React Apps.

3 hours left to win a $75 Amazon giftcard!

Codementor — Tue, 13 Aug 2019 03:34:05 +0000

Share your experience as a remote developer or technical leader in our 5-minute “State of Remote Developers” survey. The survey closes in 3 hours!!

👉 SURVEY HERE

Two $75 Amazon giftcards are up for grabs and winners will be contacted by the end of the week. 🎉

1 week left to win a $75 Amazon giftcard!

Codementor — Thu, 08 Aug 2019 06:50:53 +0000

Share your experience as a remote developer or technical leader in our 5-minute “State of Remote Developers” survey. The survey closes EOD Monday, August 12th!

👉 SURVEY HERE

Two $75 Amazon giftcards are up for grabs and winners will be contacted mid-August. 🎉

“State of Remote Developers 2019” Survey (win an Amazon giftcard!)

Codementor — Tue, 23 Jul 2019 08:55:25 +0000

Share your experience and complete the 5-minute “State of Remote Developers” survey before Monday, August 12th! In our final report, we'll compare insights on how remote developers work and what support they need to excel, with the perspective of technical leaders.

SURVEY HERE

You'll be entered to win a $75 Amazon giftcard. Two winners will be contacted mid-August.

In your opinion, what is the one biggest obstacle that prevents companies from adopting remote work?

What it Means to be a Woman in Tech in 2019

Codementor — Fri, 08 Mar 2019 10:27:49 +0000

Today is International Women’s Day!

Last weekend, 60 minutes aired a segment on girls in computer science and closing the gender gap in tech — without referencing any (of the many) women-led efforts. Reshma Saujani, Founder of Girls Who Code spoke out about this in a recent blog post, and how the media tends to overlook the contribution of women in tech.

“Contrary to what was said in the program, introducing girls to computer science earlier on (i.e. kindergarten) isn’t enough to close the gender gap in tech. Girls need support systems all along the pipeline, and tech companies need to do their part to root out harassment and discrimination,” Reshma says.

For this post, I wanted to put female developers in the spotlight and highlight their experiences in the tech industry. There are many amazing role models out there making progress, big and small, that should be shared and celebrated. Let’s hear what they have to say!

Being a role model

Research done by Stanford's Computer Science department concludes the lack of role models as one of the main reasons why women no longer choose to pursue Computer Science.

Perhaps part of the issue here is visibility. Aside from Ada Lovelace, there are several notable female developers that have made a significant impact on software development as we know it today, but most developers may not have ever heard of them.

The women we spoke to also named other inspiring female developers, including Gwen Barzey (a black Toronto women who was one of the first programmers in Canada), Linda Liukas (co-founded Rails Girls and helped make programming “more approachable”), Sandi Metz (author and speaker who’s “passionate about advancing the craft of programming”). These role models are not only trailblazers who have shown that they’re integral to this field, they’re also advocates whose stories help empower others.

Whether you’re a junior or senior developer, you can inspire others even if you feel like you haven’t done something that’s unconventional. Being a guide for other women who are in, or interested in, the tech industry can make a small but significant impact.

If you’re reading this, you can still be a role model to other women, even if you’re not a developer or a women! Some developers told us that they were inspired by people like Malalal Yousafzai, Melinda (and Bill) Gates, Michelle Obama, and others. A few were also greatly inspired by the male figures in their lives, whether it's their father, spouse, peers, or colleagues in more senior roles.

Not being afraid of failure

A common challenge that's faced — one that not only resonates with women developers but also many developers who are just starting out — is the dreaded imposter syndrome, when you feel like you are undeserving of your role and have an overall lack of confidence.

As Jaime Gunther, software engineer at Envato, puts it:

When you’re a developer, particularly a junior, everyday is a huge learning experience. You are solving problems and debugging issues and it can get frustrating. In those moments of frustration it’s really easy to fall into the trap of not feeling good enough, not feeling capable etc.

Mary Kate Fain, software engineer at Promptworks, believes that "overcoming fear and self doubt is a greater challenge than learning any one programming language or skill". She believes this issue goes back even further, and cites Reshma Saujani (author and founder of Girls Who Code), who said that girls are taught to strive for perfection, rather than encouraged to be brave.

We don't learn how to deal with failure, which prevents us from tackling new challenges and leads to self handicapping. — Mary Kate Fain

The key to overcoming this, according to Jaime, is to "acknowledge the situation, take a deep breath, realise that everyone has those moments, and be kind to yourself."

Capitalizing on your strengths

Being a female developer makes you “automatically memorable”, according to Sheena, a Python mentor on Codementor. Figuring out your strengths helps you learn how you can use them to gain a higher sense of confidence and boost your career as a developer.

Quote by Monica Olinescu. Senior Developer, Technical Lead, and Mentor

If you’re feeling lost and not sure where to start, Jellene Khoh recommends to “learn a framework if you want to get a job, learn to handle data if you want to go far.”

Even if you don’t have a background in tech, Jay Strawn at Utility NYC (and previously a literature major), says that “finding a way to use the skills I already had and apply them to tech really helped me learn and grow in my career.”

Mentoring others

Most of the female developers I spoke to had mentors that played a key role in their career growth. Not all mentors did something innovative, nor were they all women.

Mentoring is often a two-way street. Mentors I’ve spoken to in the past have also learned a lot from their mentees and feel a sense of pride when they see their mentees succeed. In 2019, the rest of the Codementor team and I hope to encourage and see more women developers to be mentors in this space.

For Jessamyn Smith, being a mentor has helped put an end to her biggest challenge in the workplace.

Not being afraid of asking questions

When you start your first job as a developer, sometimes you don’t really know what you’re getting into until you start being more hands on. For Jadwiga Pokorska, who was previously a software engineer at Google, the size of the organization (and similarly, their codebase) meant that she had to get comfortable with asking others for help, like where something is in the code — even if it seemed like a “stupid” question.

If you're in a project and you feel like something is not clear or not addressed completely, do speak up. More often than not, you're not the only one feeling this way and clarification will help everybody. — Karolina, Python mentor

Sylvia, Codementor team's first female developer, shared that a big challenge she faced in her first job was having to work with a development team that lacked proper software development processes and documentation, which required constantly communicating with stakeholders about requirements. This also meant having the courage to ask questions and keeping people accountable to help put an end to working inefficiently.

Belonging to a supportive community

As Mary Kate puts it:

Find your community. Having people to help me debug, show me what to learn next, teach me, inspire me, and encourage me when I'm down has made all the difference. Find out if you have a local women's tech organization, and attend all the meetups and classes you can. You'll learn skills you need, and the more importantly meet the connections that will keep you going.

Surround yourself with people who have the same interests or background as you. There, you can interact with people who have been in your shoes, meet potential mentors, listen to inspirational talks, and much more.

Celebrating how far we've come

International Women’s Day should also be a time to celebrate how far we’ve come to help push us forward.

So, what’s the best part about being a women in tech? Here are some of their responses:

“[It has] opened a number of doors for me in companies that valued diversity.” — Monica
“Problem solving. When I (finally) fix a difficult bug, I hear the Indiana Jones theme tune playing in my head.” — Sarah
“Meeting the other amazing women in tech. The women who I meet have fought their way into these spaces, and are smarter and braver than most other people I know. Every time I get to meet another female technologist it gives me hope, and revitalizes my own desire to succeed.” — Mary Kate
“Mentoring other people who belong to demographics that are underrepresented in tech.” — Jessamyn
“I can prove that not only men can do engineering.” — Wenyun at Codementor
"Women in the tech community are extremely supportive and, while there might not be many of us, our dedication and genuine desire to help makes up for what we lack in numbers." — Diane at GitKraken

I hope this post can inspire more women — and other underrepresented groups in tech — to feel encouraged, help one another, and come together to break the mold. For those who already in tech, keep up the great work!

Lastly, a special thanks to all of the female developers who shared their experiences with me. Happy International Women's Day!

This post was originally published on Codementor's blog: https://www.codementor.io/blog/women-in-tech-2019-6ev3m997u3

7 Ways to Stay Motivated When Learning to Code

Codementor — Tue, 26 Feb 2019 04:19:23 +0000

Staying motivated is one of the hardest things to do when you're just starting out with programming. Programming is hard, so it's easy is to feel discouraged when you can't figure out why your code isn't working. You start struggling to wrap your head around complicated algorithms, or more advanced and abstract concepts. It can be really frustrating that progress seems like no progress at all.

To help figure out the best ways to stay motivated, I asked several experienced software developers about this topic, and here's what they told me.

I hope these tips help you in your journey as they did for me! 🙂

1. Make sure this is actually something you want to do

There are few things more frustrating than doing something that has no point in the end.

If coding is not something you want to do, then leave it to those who do. One of the first "learning hacks" for teaching yourself how to code is knowing why you’re doing this. When your code is in knots and nothing is going your way, those are the times when remembering your purpose for learning code will help push you forward so that you can stay motivated and ease any frustration that you may have.

Motivation is good, but not the answer to keep you going in the long run. Become passionate about what you do.

Sure you don’t need to be obsessed with all things code, nor do you need to be extremely passionate about coding from the start, Let's be real — these things don’t really happen overnight. It often comes after spending some time learning and understanding code, as well as creating simple things from scratch.

2. Start small, celebrate the little things, and build, build, build!

A good mentor of mine told me if you want to create a flying car, then start with making some wheels into a skateboard, enjoy the skateboard and turn that into a bike and so on.

Learning to code is super easy — said no one ever. Learning to code can certainly be a daunting task to many, but one of the most helpful ways to learn and stay engaged it is to start small. What this means is that you should first learn the basic syntax of the language, then start writing some code to practice. Once you’ve gotten a hang of it, go ahead and pat yourself on the back!

Take things one at a time so that you are focused on mastering bits of information or concepts. As you stack up those building blocks and celebrate those small wins, take a step back and you’ll see that you’re really onto something.

Build a personal low-risk project that tackles a new idea or puts a new twist on an old idea

Learning to code gives you the tools to build things that can potentially change the world. Build things, test what you’ve learned, and keep going at it. There are many resources available online to help inspire you, or, you can even join events like hackathons. Having a project, whether it’s all to yourself or with some friends, can be a great way to keep your drive. If you're stuck on what side project ideas, here's 40 to choose from.

3. Get a mentor

Get training or regular mentoring by an expert in the language of choice or technology you aspire to master

Most developers can probably tell you how much they’ve gained when learning from a mentor, whether it’s a senior colleague or even an acquaintance in the field. Having a mentor means avoiding those common mistakes and roadblocks that slow down your learning process. Mentors have all “been there, done that” and can provide invaluable advice and motivation taken from their real-world experience.

After finding that mentor, the possibilities for you to grow as a developer are endless. Make the most of your mentorship through pair programming, mock interviews, or even get a referral. Mentors are, without a doubt, the most reliable motivators that will guide you to the finish line.

4. Maintain a Portfolio

Once you’ve built more and more things, don't forget to keep a collection of your work. Whenever you’re feeling lack of motivation, you can always refer to this and see how far you’ve come. If you’re not quite sure what you should include in your portfolio, here's how to build a great tech portfolio and here’s a list of the most important things to include.

Don’t just maintain a portfolio for the purposes of finding a job though, you should be proud of what you’ve accomplished so far!

5. Just do it. Or just do nothing.

I try to keep in mind that the shortest distance between me and my goal is just to do the damn thing.

Sometimes, you just have to stop over-thinking and over-complicating things and just do it.

On the other hand, you can just “Do nothing about it. That’s right, forget about whatever is bothering you”.

Keep in mind that it’s easy to burnout after a few hours of binge-watching tutorials or non-stop programming. It’s important that you allocate some time for getting rest in order to recover, recharge, and reset.

And who knows, maybe you’ll even be able to solve the issue in your dreams! (Seriously though, it happens.)

6. Keep a good balance

It can be easy to forget that there’s a world outside of your computer, so make sure that you’re consistently taking a break away from your computer (or even from electronics for that matter). Spending a ton of time on the same issue without making progress can easily lead to frustration, stress, and eventually, a burnout. Instead, meet up with your best buddies, spend some time with your family, or anything to get your mind off of whatever you’re working on, even if it’s for a few hours. Your brain will thank you for it.

Programming is a very introverted activity, so getting enough human contact can also be a challenge, especially for those people, like me, who were drawn to programming because they are themselves introverts. Making sure that I get enough social contact has been a challenge, so I started taking acting and improv classes.

7. Be a part of a supportive community

No matter what programming language you're learning, there's probably an online community out there for you. There, you can connect with your peers or developers more experienced than you that have been in your shoes before.

For beginners, I'd recommend CodeNewbie and freeCodeCamp are great places to start. There's also female-oriented communities such as Ladies Learning Code.

Lastly, there’s always Reddit (e.g. r/learnprogramming/), with subreddits for practically every programming language.

Conclusion

I hope these tips will help you maintain your motivation for programming, and maybe even help you motivate your peers. You can do it! 💪🏻

A special thanks to Rick van Hattem, Yad Faeq, Andy Maleh, Matthew Johnson, Marcos Rodriguez, and Christoph Wagner for providing awesome quotes.

This post has been updated and was originally published here: https://www.codementor.io/codementorteam/7-secrets-to-staying-motivated-when-learning-to-code-a2dy7hqar

How do you stay motivated? Is there anything that works or doesn't work for you? Let me know below!

Forem: Codementor

JavaScript Tutorial: Removing A Specific Element From An Array

Method 1: Splice Method

Splice mutates the original code

But what if we don't want to mutate the original array?

Method 2: Filter Method

Key Takeaways

Removing Duplicates

Data Mutation

Introducing DevProjects - Learn Programming by Building Projects

Enter DevProjects

What projects are on DevProjects?

Other than the curated projects, why should I use DevProjects?

Learning Django Through Problem-Solving: How A Lawyer Built His Side Project

[Dev Journey] He's Using His National Athlete Experience to Build A Language Learning App

Remote Career Summit 2020 (June 25th)

Introduction

Two-In-One Event

Career Conference Speaker Schedule — Main Stage

Arc — State of Remote Jobs

Automattic x Buffer x GitLab — Under the Hood: Working at the World’s Biggest All-Remote Companies

Doist x MURAL x Virtual Work Insider — How to Get Hired for Remote Work

DHH (Basecamp & HEY) & Tammy Bjelland (Workplaceless) — Building a Calm and Ethical Workplace

Roundtable — Diversity, Inclusion, and Remote Work

Dribbble x Creative Market — Management, Scaling, & Remote Culture: Dribbble’s Balancing Act

Roundtable — Nail Your Next Interview: Tips for Job-Seeking Developers

Roundtable — How Design Teams Successfully Collaborate and Hire Remotely

Rand Fishkin (SparkToro) — Get Hired in Marketing... in 2020

Ryan Choi (Y Combinator) — Why Work at a Startup

Arc — Closing

Talks, Q&As, and Workshops

Fernando Angulo (SEMrush) — Building Your Online Presence as a Marketer

Caro Griffin (Skillcrush) — How to Land Your First Remote Job in Tech

Vinayak Ranade (Drafted) — How to Leverage Your Network

Virtual Job Fair

What Are You Waiting For?

10 Performance Optimization Techniques for React Apps

1. Using Immutable Data Structures

2. Function/Stateless Components and React.PureComponent

3. Multiple Chunk Files

4.Using Production Mode Flag in Webpack

5.Dependency optimization

6. Use React.Fragments to Avoid Additional HTML Element Wrappers

7. Avoid Inline Function Definition in the Render Function.

8. Throttling and Debouncing Event Action in JavaScript

Throttling

Debouncing

9. Avoid using Index as Key for map

10. Avoiding Props in Initial States

Conclusion

3 hours left to win a $75 Amazon giftcard!

👉 SURVEY HERE

1 week left to win a $75 Amazon giftcard!

👉 SURVEY HERE

“State of Remote Developers 2019” Survey (win an Amazon giftcard!)

SURVEY HERE

What it Means to be a Woman in Tech in 2019

Being a role model

Not being afraid of failure

Capitalizing on your strengths

Mentoring others

Not being afraid of asking questions

Belonging to a supportive community

Celebrating how far we've come

7 Ways to Stay Motivated When Learning to Code

1. Make sure this is actually something you want to do

2. Start small, celebrate the little things, and build, build, build!

3. Get a mentor

4. Maintain a Portfolio

5. Just do it. Or just do nothing.

6. Keep a good balance

7. Be a part of a supportive community

Conclusion

6. Use `React.Fragments` to Avoid Additional HTML Element Wrappers