DEV Community: Codementor

Hosting virtual events for developers pt.2: Structure, slide decks, and event flow

jenniferfu0811 — Tue, 26 Apr 2022 07:52:28 +0000

In the last two years, virtual events have gained a lot of traction and popularity. By removing the geographical constraints, developer virtual events are more accessible as anyone with access to the internet can attend or host their own events.

The second part of this three-part blog series will provide you with our recommendations on how to:

Prepare for your talk,
Create slide decks, and
Host engaging developer events.

For more guidance on finding the right topic, target audience, event title, and event description, check out the first article. In this post, we'll cover:

Pick a focused topic and virtual event format

The best virtual events for developers are well-planned and executed. But before you can think about hosting an event, there’s some groundwork to do. Two crucial aspects of planning out a well-structured talk: picking a focused topic and coming up with a high level structure.

Pick a narrow topic for your developer event

You probably already have some ideas about what you want to talk about for your virtual event. The key is to decide what angle you want to take.

For technical developer events, you can talk about tech stacks, libraries, tools, best practices, or even bad practices you’ve seen. Your talks can also be career-focused, where you share about non-technical skills that developers should have to further their career.

Whether it’s programming-focused or career-related events, there are endless topics you can speak on. The key is to narrow your topic down so you can:

Explain your point of view and/or technical concepts in depth.
Keep your audience engaged by sticking to the time.
Allow enough time for the attendees to ask questions.

When in doubt, a good place to start is with what you know — and what you’re comfortable talking about. As Veerle, Managing Direct and Head of Data Science at Analytic Health, shared:

If you choose a topic that you’re already busy with on a day-to-day basis you will be able to talk practical as well and give meaningful examples (and it requires less time preparing because you already know most of it 😉).

Select a virtual format

Next up is choosing the format that suits your online event. Some common formats for developer virtual events include:

Presentations
Interviews
Live coding sessions
Workshops (e.g. debugging, code review, etc.)
Discussions (e.g. two speakers sharing different sides of a topic)

This is linked to topic selection: as you’re narrowing down the focus of your talk, the format of your talk should become clearer as well.

To keep your audience interested and engaged, here are some common formats and how long online events should be:

Come up with a high level structure

Now that you’ve picked your event topic and format, you can start forming your event’s high level structure and some details. Make sure the talk includes:

One overarching idea you want to share
Three to four points to support the main idea
Real-world examples (for both technical and career-related topics)

Short stories and anecdotes can also help you convey your ideas better. One way to break the ice is to start your online events with a short story that demonstrates how you’ve experienced the problem you’ll address. You can also end with a story that sums up your talk. But remember: if the stories aren’t directly relevant, cut them out!

To help you get started, we’ll use two examples — one technical and one career-related — to demonstrate the process of developing a high level structure. Feel free to treat the following examples as your event program template or virtual event planner.

Virtual events structure example: Technical topic

Let’s say you’re a front-end developer who works with JavaScript. You have come across dependency injection a few times and think that it’s a bad practice. Your point of view might be:

“JavaScript is not a purely class based language and is flexible and dynamic. Dependency injection forces you to use a class in JavaScript when you don’t need to.”

To help your audience understand your point of view and find better alternatives to dependency injection, the 3-4 main sections of your talk could be:

Define: What is dependency injection
Use cases/examples: What are some examples of dependency injection
Argument: Why you shouldn’t use dependency injection
Solutions/conclusions: What are the alternatives to dependency injection

Online events structure example: Career-related topic

If you want to tackle a broad topic like “How to improve your programming skills,” you have to spend a bit more time deciding on what to focus on. For demonstration purposes, let’s say you want to focus on junior developers, and from what you’ve experienced and seen, you think:

“As junior developers, ramping up our programming skills to fit the company’s needs is crucial. In addition to traditional class-based learning, finding mentors can help us significantly in our learning journey.”

In this case, the title of your online event might be be “The fastest way to learn programming as a junior developer.” Once again, you want to provide some basic information before you jump in. You also want to make sure to use real-world examples and pull from your own experience to make your talk more relatable and authentic. Here’s how you might structure this talk:

Opinion/examples: Why you need to improve your programming skills as a junior developer
Status quo: Learning resources for junior developers
Experience: How mentors fast-tracked my learning experience
Conclusion: Mix and match learning methods to improve your programming skills

Regardless of the topic you choose, it’s crucial to flesh out your experience with tangible real-world examples. A clear structure helps your audience to follow along. With 3-4 key points, you should spend no more than 5 minutes on each. If you’re unable to keep it under 5 minutes, cut down on the number of points you address. You can always host multiple online events and turn them into a series.

Put together great slide decks for virtual events

Why do you need slide decks for developer online events?

Slide decks are the main content that guides your audience through your online event. They serve multiple purposes:

Helps you remember key points
Provides visual cues for your presentation
Keeps things concise and on schedule
Delivers (only the) necessary information

Additionally, developers who attend tech conferences and talks often ask for copies of speakers’ slide decks before or after the presentation. As the presenter, you can decide if you want to share your slide decks. We'll walk through how to create a slide deck for developer online events in this section.

How to organize your slides

If you’re a veteran speaker or have attended a lot of developer conferences and online events, you're probably already familiar with creating engaging slide decks. But if you’re not sure how to organize your slides, here’s a general guideline for how your slides can be organized:

Introduction slides

1st slide: Title of your talk
2nd slide: Short self-introduction
3rd slide: Agenda of the event

Main section slides

~3 slides for each main section
First slide: Title page for each section of your talk
The other 2~3 slides:
- Questions, statements, or definitions
- Technical concepts or supporting stats to build up your case
- Sample code with the important parts highlighted
- Memes, gifs, data visualizations, and illustrations that convey your point

Wrap up slides

~1-2 slides
Bullet point summary of what was covered in the talk
A list of resources for your audience
A meme or gif to close up the talk (if relevant)

Here’s a short list of some do’s and don’ts for building a great slide deck:

You can always find slide deck templates to help you spend less time on design and more on delivering quality content for your online events!

Create engaging online events experience

Now that you’re finished with all the prep work, it’s time to host your online event! Here are some tips for every step of your online event to help you succeed.

Before the virtual event starts

For your audience to be able to follow, see, and hear you throughout the entire duration of your event, make sure your environment is optimized for hosting online events:

Your Internet connection is stable
Your camera and mic work, and set at a suitable distance/angle
You’re at a spot that’s well-lit and quiet
Your background isn’t distracting

Before your online event officially starts, join the virtual event meeting room to test out the software to make sure everything runs smoothly. If possible, ask a friend to join you virtually to double check the video and sound quality. Additionally, feel free to share your slides with your audience ahead of time so they can familiarize themselves with your talk and come up with questions before the event.

Starting your online event

Before you officially start your talk, you might want to give the attendees 2-3 minutes to join. About half of the audience will join either early or on-time, while the other half will join within 3-5 minutes of the official start time. While you’re waiting for other attendees to join, here are some things you can do to keep your audience engaged:

Play some background music to lighten up the mood
Let your audience know you’ll start the event in 2-3 minutes
Ask the attendees a question or two verbally and in the chat, some examples include:
- Where is everyone joining from?
- What do you hope to learn from this event?
- What is the biggest challenge you’re currently facing at work?
Explain how you’ll run the event and Q&A to your attendees
Post important information and announcements in chat (e.g. code of conduct, Q&A format, GitHub repo, links, etc.)

Once you’re ready to start, turn off your background music and let the crowd know the online event will be starting soon.

During your virtual event

For the most part, you’ll be focused on presenting and speaking. But since you’ll also be answering questions and hosting the event, there are some additional things you want to keep in mind.

For presenting:

Be careful not to speak too fast
Make sure you’re engaged and excited
Avoid mic static but make sure your audience can hear you
Try not to read off of your screen
Speak to your audience like you would at in-person events

For hosting:

Admit attendees if your virtual meeting room is not public
Keep an eye on the chat for incoming comments and questions
Default your attendees to mute if you don’t want intrusions during your talk
Use your phone’s timer to pace yourself

For Q&A:

If you’d like all questions to be answered at the end of the talk, remind your audience that you’ll address the questions at the end and ask them to add their questions to chat if they’d like to. If you want your virtual event to be more interactive, pause at the end of each section to ask the attendees if they have any questions.

Regardless of the format you choose, when it’s time for the last question, remember to let the event attendees know.

Ending the online event

After you’ve answered the last question, you can naturally segue into the closing part of the virtual event.

Thank the audience for joining and send them important links in the chat (e.g. social media, GitHub repos, future online events, etc.). If there are any unanswered questions, remind the attendee to post their questions in the event page comment section. Before you officially end the meeting, make sure to let the crowd know that the event is over. Here are some friendly phrases you can use to end the talk:

That’s all for today, thanks for joining me and feel free to comment on the event page with any questions!
That’s it for our event today, feel free to message me on Twitter if you have any questions!
That’s a wrap for today! Thanks for joining and see you soon.

Once attendees start leaving the virtual meeting room, you can end the meeting for all. There are some other follow ups to do after you finish your online events, but for now, take a break, go on a jog, or celebrate a bit for successfully hosting a great online event!

Wrap up & next steps

We’ve just walked you through preparing for and hosting a developer online event. By narrowing down your topic and setting the high-level structure, you’re able to focus your talk so it conveys your knowledge and sharing in the most effective way. You can also share the event recordings so other developers can continue to learn and be inspired by the event.

In the next and last part of this three-part series, we’ll share more about promoting your online events and engaging with your audience after the event. If you’re not sure how you can promote your events to the right developers, the last blog post will provide you with some tips and walk you through how Codementor Events will help with that.

If you’re ready to share your experience with other developers, create events and become a Codementor Events speaker now!

Hosting virtual events for developers pt.1: Audience, topic, event title, & event description

jenniferfu0811 — Tue, 11 Jan 2022 03:59:22 +0000

Most developers have attended at least a few tech events or virtual conferences. Some of you may have sat in your seats and thought to yourself “I have the expertise to talk about this as well.” With the rise of virtual events, you can share your knowledge and experience more easily with more developers.

Before you decide where to host the virtual events, make sure the platform has your target audience. For instance, Codementor Events has a vibrant developer community with 100K+ developers. If you’re looking for virtual events platform with developer audiences, this platform is suitable.

Before we dive into the details of planning your virtual event, let’s start by talking about why you may want to speak at virtual events. We’ll then walk through deciding on the right topic for the right audience and how you can make your event title and descriptions relatable and attention-grabbing.

Why should I speak at developer virtual events?

Similar to writing blog posts or contributing to open source, speaking at online events is a way for you to share knowledge. Not only are developer virtual events great for knowledge sharing, they’re also great for community building and personal growth.

Own and reinforce your knowledge

Regardless of seniority and years of experience, every developer has something unique to offer. Whether it’s how you found a job after finishing a coding bootcamp or how your team uses microservices for back- and front-end, you’ll have unique perspectives, knowledge, and tips to share. The best way for you to validate what you know is to teach it to someone else. Preparing and speaking at virtual events give you the opportunity to articulate and solidify your knowledge.

Practice sharing your experience and knowledge with others

Some dev teams have regular sharings, where every developer is encouraged to share something new they’ve learned. However, not every developer has built-in communities to do so. The process of prepping, speaking, and getting feedback at your own virtual events gives you the opportunity to refine your knowledge and practice sharing concisely and effectively.

Help others learn from your experience via virtual events

No matter where you are in your programming journey, there are developers who are either in the same place as you or want to be where you are. Sharing what you know about technical tools, libraries, languages, and best practices can help other developers ramp up their technical skills exponentially.
Sharing your career progression, blockers, and resources can help others grow in their careers and remove feelings of anxiety and uncertainty. Regardless of the nature of your virtual event topic, as long as you know who can benefit from your online event, there are no irrelevant experiences.

Build your personal brand and network

If you’re interested in broadening your network and building a more prominent online presence, hosting virtual events on reputable platforms can go a long way. You’re likely to gain a dozen or more LinkedIn, Twitter, and GitHub connections with other like-minded developers who have resources to share, common interests, or want to learn from you.

Developer virtual events are one of the most accessible ways for developers to connect, learn, and share knowledge and experience. To maximize the benefits of virtual events for both you and your virtual attendees, identifying the right audience, topic, event title, and event descriptions is crucial. We’ll address each of these aspects in the following sections.

How do I choose the right topic for my virtual events?

While all experiences are valuable, your experience may speak to some more than others. As such, it’s important to identify the kinds of developer you think would benefit from your virtual events sharing the most. By narrowing down on your target audience, virtual event ideas, and cadence, you’ll be able to share your knowledge with the right group of developers.

To help you narrow in on developers who will learn from your talk, here are some ways you can think about different groups of developers:

Career stage: aspiring, junior, mid-level, senior developers, tech leads, etc.
Types of developer: front-end, back-end, full stack, DevOps, Android, iOS, etc.
Industries & products: B2B, B2C, fintech, e-commerce, healthcare, etc.

Let’s say you want to take the technical route and share about Node.js. Front-end, back-end, and full stack developers can all benefit from this topic. With that said, it's too ambitious and ineffective to try to capture front-end, back-end, and full stack developers’ pain points in one talk.

We'll choose back-end developers as the focus for this topic. Here are some potential event topics that are focused:

7 Steps to learn Node.js as a beginner
Live coding: Build a chat app using Node.js
Scaling enterprise software with Node.js

The first topic can be helpful for aspiring and junior developers. The second and third topics can apply to junior, mid-level, or senior developers based on how you frame your talk. If you have more than one idea, try framing them into a series of talks rather than cramming it all into one. In the next section, we’ll talk about the steps to writing a clear and informative event title for event planning.

What does a good event title look like?

Depending on the nature of your topic, the title of your virtual events can vary widely. For instance, if you want to host a technical talk, your virtual event title should include:

the key technologies,
tech concepts,
or tech stacks you’ll share about. On the other hand, if you’re planning a more career-related talk, your title should address the issues, pain points, or challenges you’ll speak to.

We’ll use a career-focused topic to illustrate how you might go from a general topic to a specific title for your talk.

Let’s say you’re a tech lead and want to share insights on how to be a good tech lead. With “tech lead” as the central theme, here are a few virtual events titles that captures different facets of being a tech lead:

Effectively managing a 15+ people developer team
How to interview and find the right developers for your team
Personal time management for tech leads

While all three topics are relevant to tech leads and aspiring tech leads, focusing your talk on one specific topic will allow you to dig deeper into each pain point and deliver precise advice to your audience at virtual events.

Regardless of the topic you choose, here are some tips on coming up with a relevant and eye-catching virtual event title when you're doing event planning:

Clearly state the tech stacks (for technical events)
Highlight the problems you'll provide solutions for
Provide the concepts, tools, or solutions you’ll be sharing
Concisely summarize what the audience can expect
Google for title inspirations

Now that you’ve caught the attention of your audiences’ eyes with the right event title, the next thing is to write a compelling event description to encourage attendees to join your virtual event.

How to write an event description for developer virtual events

Not many virtual event platforms provide structures for writing event descriptions. We've created the following structure to help you attract attendees effectively. To make your event description more scannable and enticing to potential event attendees, here’s the structure we suggest:

About the talk:

The purpose of this section is to connect with potential virtual attendees by highlighting the problems they’re faced with and the solutions you’ll offer.

Present the problem you’ll address with a short anecdote in the first sentence.
Use another 1-2 sentences to expand on the pain points, how you can help your audience tackle them, and who would benefit from the event.

This talk will cover

Use 3-4 bullet points to list out the agenda of your talk.
Be specific about what each section will address
Highlight unique formats you'll use for your online event (e.g. live coding, code review, debugging, workshop)

About the speaker

Include your current role and company for your headline
Highlight relevant work experience or other projects in your bio (e.g. open source advocate, career counselor, lecturer, etc.)

From deciding your virtual events topic and target audience, to coming up with your event title and event description, the goal is to attract developers who would benefit from your knowledge and experience. The three different sections attract event attendees through stories and pain points, clear content of the talk, and the experience and passion you can bring them.

In the next section, we'll walk through two event description examples to help concretize event description writing more.

Event description examples for inspirations

To help you write the description for your talk, here are two virtual event description examples:

Tech talk event description example

Source: Codementor Events - Best Virtual Events for Developers

Sylvana’s virtual event description is a great example for a tech talk because it speaks to the challenges of adopting TypeScript as a React developer, flesh out the benefits of using TypeScript, and offers live coding as a solution to help React developers pick up TypeScript faster. Furthermore, the speaker’s bio makes her relatable and trustworthy.

Get some inspiration from Sylvana's event website here.

Career talk virtual event description example

Source: Codementor Events - Best Virtual Events for Developers

Rahul’s virtual event description is also a great example, especially for a career related talk. The “About the talk” section features anecdotes that speak to the challenges of imposter syndrome and ends with an encouragement. “The talk will cover” clearly presents what the audiences can expect. Rahul’s speaker bio also shows both his professional background and passion for helping people succeed in their careers.

Combined, the event description is effective, short, and sweet. Visit the event website to check out Rahul's event description.

Conclusion: What’s next?

There are many benefits to speaking at a developer virtual events, but the primary goal is to make programming knowledge more accessible to all. If you’ve never spoken at developer virtual conferences or virtual events before, the thought of public speaking may be a little daunting. However, with this blog series and some practice, you’ll be able to share your experience confidently and host successful online events in no time.

If you’re ready to share your experience with others, and speak at an event virtually, become a Codementor Events speaker now! If you’re not quite ready yet, we’ll walk you through preparing for your talk and hosting successful virtual events in the next part of this three-part series.

Submit your virtual event ideas to Codementor Events →

A Step-by-step Tutorial for Building a Temperature Converter Website

Christine Shu — Wed, 22 Sep 2021 08:50:02 +0000

Building coding projects is one of the best ways to learn coding and build your portfolio. However, sometimes a simple project spec may not be enough to help you build your project. This tutorial will walk you through how to build a Temperature converter website, one of the most popular projects on DevProjects.

You’ll build a simple tool to convert between different temperature units. To follow along, check out the project spec on DevProjects!🚀

Introduction

While Kelvin is the SI Unit of temperature, people generally prefer Fahrenheit or Celsius unit type to measure temperature. We're going to build a temperature converter that will convert Fahrenheit, Celsius, and Kelvin units to each other, using the most popular CSS framework called Bootstrap 4.6 and JavaScript library - jQuery.

Here is the live demo of Temperature converter website.

Project Overview

In this tutorial, we will create a temperature converter and walk through how the website works. We will deploy this project on GitHub using GitHub pages, a hosting service by GitHub that allows you to publish static websites online directly from repositories. The tutorial will guide you through the step-by-step process of setting up the GitHub repositories before publishing the website. The suggested text editor is VScode, but you can choose any other text editor you like.

⭐ Why Bootstrap

We are using this library because of its variety of components. Additionally, the bootstrap grid system is based on Flex, which provides us with full responsive support for any website. You can read more about it on its official website.

⭐ Why jQuery

While other powerful libraries and frameworks have emerged, jQuery is very beginner friendly and is the best library for practicing and getting started in JavaScript libraries.

jQuery is a small, fast, and feature-rich library. It saves developers a lot of time by completing complicated tasks with just a few lines of code.

⭐ What you need

VSCode or any other text editor
Any browser of your choice
Basics knowledge of jQuery and Bootstrap
A GitHub Account for deployment

Recreate this project on DevProjects. Try it now!

Setting up the project environment

Create a new folder named Temperature Converter and open the folder in VScode. Initially, our workspace will look like this:

Hover the mouse on the sidebar to find the icon for creating new files or folders
Create a sub-folder named assets and the following files: index.html, style.css, and script.js.

Assets
In this folder, we'll store all icons and any other media used in our project.

Index.html
To create the structure of the website.

Style.css
To add custom CSS styling in our project.

Script.js
This is like the brain of our project, In which we write JavaScript code to make our website work.

Open the index.html type doc then press enter, A boilerplate will appear as shown below:
Open the index.html type doc then press enter, A boilerplate will appear as shown below:

a. Set up Bootstrap 4.6 CSS

Visit Official Bootstrap 4.6.0 Documentation and copy the CDN link of the CSS and JS Bundle. Alternatively, you can also use this Boilerplate in your index.html

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Tempreature Unit Converter</title>
      <!-- ---------------Bootstrap 4.6-------------------------------------- -->
      <link rel="stylesheet"
         href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
         integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
         crossorigin="anonymous">
      <!-- ---------------Custom CSS-------------------------------------- -->
      <link rel="stylesheet" href="style.css">
   </head>
   <body class="d-flex align-items-center">



      <!-- All body content will come here -->




      <!-- ---------------jQery-------------------------------------- -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
         crossorigin="anonymous"></script>
      <script
         src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
         crossorigin="anonymous"></script>
      <!-- ---------------Custom JS-------------------------------------- -->
      <script src="script.js"></script>
   </body>
</html>

Why not build this project yourself? Build this project for free.

Let's Start Building

The project will be divided into 5 steps:

Step 0 : Create HTML structure with Bootstrap classes

Create the container, then make our card-group. The card-group will contain both input-card and result-card. The structure code will look something like this:

<div class="container">
  <div class="row">
    <div class="card-group col-12 col-md-10 offset-md-1 my-md-auto">
      <!-- Input and Result Section will come here-->
    </div>
  </div>
</div>

Add the input & result card section with custom CSS class inputSection to enter input values, and resultSection to display the result value.

<div class="card inputSection col-12 col-md-6">
  <div class="card-body">
    <form>
      <div class="row px-3">
        <div class="col-12 col-md-11 px-4">
          <span class="card-title d-block">Enter Temperature</span>
          <label for="degreeInput" class="py-sm-2">Degree</label>
          <div class="input-group">
            <input type="number" class="form-control" id="inputDegree" name="inputDegree" placeholder="Enter Degree" value="0" />
            <div class="input-group-append">
              <select class="form-control" id="selectInputDegreeType">
                <option value="C" selected>&deg;C</option>
                <option value="F">&deg;F</option>
                <option value="K">K</option>
              </select>
            </div>
          </div>
          <label for="selectConversionType" class="py-sm-2">Convert In</label>
          <div class="input-group d-inline-block">
            <div class="input-group-append">
              <select class="form-control" id="selectConversionType">
                <option value="F" selected> Fahrenheit (&deg;F) </option>
                <option value="C">Celcius (&deg;C)</option>
                <option value="K">Kelvin (K)</option>
              </select>
            </div>
          </div>
          <button type="submit" class="convertBtn
                                btn btn-lg
                                col-12 col-md-6
                                offset-md-3
                                mt-4
                                rounded-pill
                                d-flex
                                justify-content-center
                                align-items-center
                                text-white"> Convert&emsp; <svg class="mt-1" xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 21.367 20.826">
              <path id="Icon_awesome-arrow-right" data-name="Icon awesome-arrow-right" d="M9.085,4.042l1.059-1.059a1.14,1.14,0,0,1,1.617,0l9.271,9.266a1.14,1.14,0,0,1,0,1.617L11.76,23.137a1.14,1.14,0,0,1-1.617,0L9.085,22.078A1.146,1.146,0,0,1,9.1,20.443l5.747-5.475H1.145A1.142,1.142,0,0,1,0,13.823V12.3a1.142,1.142,0,0,1,1.145-1.145H14.85L9.1,5.678A1.138,1.138,0,0,1,9.085,4.042Z" transform="translate(0 -2.647)" fill="#fff" />
            </svg>
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="card resultSection col-12 col-md-6">
  <div class="card-body d-flex justify-content-center
                align-items-center">
    <div id="resultValueSection">
      <div id="convertedDegree">32</div>
      <h3 id="degree">&deg;</h3>
      <h3 id="convertedUnit">F</h3>
    </div>
  </div>
</div>

By finishing the two steps above, we’ve completed the structure part.. Your output will look something like this:

Doesn’t look like our final design? Don’t worry. In the next step, we use custom CSS to style and design our website.

Useful references

Step 1: Add custom CSS styling

Use the reference code to add styling or add your own custom styles.

Your result will look something like this:

On small screens or mobile:

On medium to large screen or PC:

Now that we've completed all our styling work at this stage, simply add JS functionality and then the project is ready to deploy.

You can build this project yourself! Start the project now.

Step 2: Create convert functions for all three units

It's time to create the functions that will convert our input degree to the desired unit. First, let's understand how this works.

Our function will take two arguments: input temperature value and output temperature unit type. The function will check the output unit type, apply the formula according to the output temperature unit type, and return the converted value.

Fahrenheit Converter ( °F ⇒ °C or K )

This function will only convert the Fahrenheit temperature value into Celsius or Kelvin. So whenever the user enters a °F value, we have to call this function. The reference code is shown below:

// Fahrenheit Converter
function fTo(inputDegreeValue, conversionDegreeType) {

    let temperature = '';

    switch (conversionDegreeType) {
        case 'F':
            temperature = inputDegreeValue;
            break;
        case 'C':
            temperature = eval((inputDegreeValue - 32) * (5 / 9));
            break;
        case 'K':

            temperature = eval((inputDegreeValue + 459.67) * (5 / 9));
            break;

    }
    return temperature;
}

Celsius Converter ( °C ⇒ °F or K )

This function will only convert the Celsius temperature value into Fahrenheit or Kelvin. So whenever the user enters a °C value, we have to call this function. The reference code is shown below:

// Celcius Converter

function cTo(inputDegreeValue, conversionDegreeType) {

    let temperature = '';

    switch (conversionDegreeType) {

        case 'C':
            temperature = inputDegreeValue;
            break;
        case 'F':
            temperature = eval((inputDegreeValue * (9 / 5)) + 32);
            break;
        case 'K':
            temperature = eval(inputDegreeValue + 273.15);
            break;

    }

    return temperature;
}

Kelvin Converter ( K ⇒ °F or °C )

This function will only convert Kelvin temperature value into Fahrenheit or Celsius. When a user enters a K value, we have to call this function. The reference code is shown below:

// Kelvin Converter

function kTo(inputDegreeValue, conversionDegreeType) {

let temperature = '';

switch (conversionDegreeType) {
    case 'K':
        temperature = inputDegreeValue;
        break;
    case 'F':
        temperature = eval((inputDegreeValue - 273.15) * (9 / 5) + 32);
        break;
    case 'C':
        temperature = eval((inputDegreeValue - 273.15));
        break;

}
return temperature;
}

Got stuck on the project? Find a Javascript expert here!

Step 3: Receive user input and send output on webpage

This is where DOM comes in. Whenever user click submit button, the output should appear in the results section. We'll do this by creating a function, convertInputDegree(). This function will take the user inputs, check the type of input degree unit, and call the function we created in step 2.

If the user has entered a Celsius degree unit and wants to convert it into Kelvin, the function will take the input degree value and input degree unit and call the cTo() function. Then the cTo() function will check the output unit type and returns the appropriate result. The result will be stored in a variable resultValue and the value will be pushed into the result section.

As we want the input value when user submit the form but default behavior of form after submit button is clicked to take the input values from user level to server level and page will be redirect to the current URL by appending the input values as query string parameters and value of the input field will revert back to 0.

That's why on form submission we are calling convertInputDegree() instead of it's default action.
```
// On Form submission prevent the default action and call the function to update the result

$('form').submit(function (event) {
    event.preventDefault(); // to prevent the default action
    convertInputDegree()
});
```

Create convertInputDegree() function to update results.

function convertInputDegree() {

    let inputDegree = parseInt($('#inputDegree').val());
    let selectInputDegreeType = $('#selectInputDegreeType').val();
    let conversionType = $('#selectConversionType').val();

    let resultValue = "";

    switch (selectInputDegreeType) {

        case "C":
            resultValue = cTo(inputDegree, conversionType);
            break;

        case "F":
            resultValue = fTo(inputDegree, conversionType);
            break;

        case "K":
            resultValue = kTo(inputDegree, conversionType);
            break;

    }

    // To prevent NaN
    if (isNaN(inputDegree)) {
        $('#convertedDegree').text('');
        return;
    }

    // To update the Degree Unit
    $('#convertedUnit').text(conversionType)

    // To update the Degree Value
    if (conversionType === selectInputDegreeType) {

        $('#convertedDegree').text(inputDegree);
    } else {

        return $('#convertedDegree').text(resultValue.toFixed(2));

    }

}

Got questions? Find a Javascript expert to help you.

Step 4: Update results in real-time

We’re almost finished building our temperature converter! However, there’s one but if the users have to click the submit button again and again, it will provide a bad user experience. We can fix this by updating the output value in real-time. To do this, we can call the function convertInputDegree() when users select a different input or output unit. The code should look like this:

// Realtime Update
$('#inputDegree').on('input', () => convertInputDegree());
$('#selectInputDegreeType').change(() => convertInputDegree());
$('#selectConversionType').change(() => convertInputDegree());

Result

Once we've completed all of the above steps, this is what the final preview will look like:

Want to build this project? Start building now!

Time to deploy

The last thing to do is to deploy the website using GitHub pages. In order to use GitHub pages, we have to make a GitHub repository for this project first.

1. Create a GitHub repository

Open your browser and go to https://github.com/ and make sure you're logged In.
Click on the + icon on the navbar in the top right corner:
Click on New repository in the drop-down box:
Enter the name of the repository, keep everything default, and click Create repository on the new page:
Our repository has been created. Copy the highlighted line to VSCode:

2. Initialize Git in your project

Open a new terminal in VSCode and type this command. This command will:

git init
git add .
git branch -M master
git commit -m "Your message"

Sync our online GitHub repository with local repository

git remote add origin https://github.com/karan-kmr/Temperature-unit-converter.git

Command to push or send your files to the online repository:
```
git push -u origin master
```
Refresh the GitHub repository page:

All of our project files have been pushed to our GitHub repo.

There are only two more steps to making our website live! 💪🏼

3. Setup GitHub Pages

Here are the steps to setup GitHub pages for your project:

Go to Settings
Scroll down and click on pages
Change branch from none to master
Click on Save button
Our site is live 🎉

If the steps above aren't clear enough, here's a video to help you out:

@Demo

Here is the Project Demo and Source Code.

Recap

Here are some of the things we created in this tutorial:

A full structure using Bootstrap classes.
A fully responsive website.
A temperature converter that allows users to cover from Fahrenheit, Celsius, and Kelvin to each other.
A website that updated the output in real time

Congratulations! 🎉 You've successfully created a temperature converter website.

JavaScript Splice: What is JavaScript Splice and What Can It Do?

jenniferfu0811 — Tue, 03 Aug 2021 05:18:39 +0000

Imagine that you have a list of restaurants that you want to try out, and after finally getting dinner at one of them, you don’t just want to cross the restaurant off your list, but you want to remove it completely.

So you remove the restaurant that you’ve tried, and now your original list only has the restaurants you’ve yet to try. Right here, we’ve described one of the things JavaScript splice can do.

What is the JavaScript splice method and what can it do?

Okay, let’s back up a little bit. We’ve described what JavaScript splice can do, but what is it exactly?

The JavaScript splice() method is a built-in method for JavaScript array functions. Splice modifies the original array by removing, replacing, or adding elements. The return value is a new array containing the deleted elements. If no elements are removed, an empty array is returned. The basic syntax for JavaScript splice is:

Array.splice(start, removeCount, newItem, newItem, newItem, ...)

How to remove elements from an array with JavaScript splice

To simply remove an element from an array using JavaScript splice, you would need to know the index number of the element you would like to remove.

Going back to the example we brought up at the beginning of this tutorial. Say our restaurant bucket list consisted of A, B, C, and D, this would be the original array. The restaurant that we tried would be D. To remove D, we would need to know its index number. Since the array index starts at 0, the index would be (X-1). In this case, the index number would be 3.

Now, we can use the JavaScript slice method to remove the restaurant we’ve already visited from the original array:

const restaurants = [“A”, “B”, “C”, “D”]

console.log(restaurants.splice(3, 1)) // output: [“D”]
console.log(restaurants) // output: [“A”, “B”, “C”]

Here, we can see that the original array has been spliced into two: the original array with the remaining elements, and the return value is an array with the removed element(s).

To learn more about how to use JavaScript splice to remove elements from an array, check out this blog post.

How to add elements to an array with JavaScript splice

You can add new elements to an array using JavaScript splice as well. Keeping the full splice syntax in mind, you can add new elements by defining the number of elements you’d like to remove as “0” and before declaring the new elements.

For example, let’s add E to our array.

const restaurants = [“A”, “B”, “C”, “D”]

console.log(restaurants.splice(3, 0,”E”)) // output: []
console.log(restaurants) // output: [“A”, “B”, “C”, “E”, “D”]

This also works if you’d like to both remove and add elements to your array. For example, let’s remove D from the above array and add F and G in D’s location.

const restaurants = [“A”, “B”, “C”, “D”]

console.log(restaurants.splice(3, 0,”E”)) // output: [“D”]
console.log(restaurants) // output: ["A", "B", "C", "F", "G"]

Splice vs Slice: What is the difference between the two JavaScript methods?

One confusion that many JavaScript developers might have is splice vs slice: are they the same? If not, what is the difference? They sound awfully similar!

While both splice and slice are built-in JavaScript methods and sound very similar, they actually play different roles. Both JavaScript splice and slice can be used to manipulate items in an array.

However, as mentioned above, the JavaScript splice method directly modifies the original array, and, if there are any, returns an array of the removed elements. On the other hand, the JavaScript slice method does not modify the original array, but returns a new array that is a “section” of the original array. You can define the “start” and “end” of the selection that you want the slice method to return.

After reading this article, you should have a basic understanding of how to use JavaScript splice. While it looks simple, don’t underestimate all the magic that the splice method can do. If you want to learn more about what you can do with splice, find a mentor to help you master JavaScript step by step!

How to Create An Array in Python and other things you need to know about Python Array

jenniferfu0811 — Thu, 29 Jul 2021 03:40:50 +0000

Arrays are a powerful and useful module. In Python, there are two ways you can create an array: using the Python Standard Library or the NymPy package.

If you’re just starting out or would simply like to create an array with simple data types, the array module from the Python standard library would suffice. However, as Python is being widely used for data science, num.py array can often be seen as the de facto standard as it’s more flexible and robust.

In this tutorial, we’ll focus on using the array module in the Python standard library.

What is a Python array and what can they do?

Python arrays are data structures that can store multiple items of the same type, for example, you can have an array of strings. When you’re working with multiple items of the same data type, arrays make it easy to store, organize, remove elements, and manipulate the values.

This can sound confusing if you’re just starting out with Python arrays. So here’s another way to think about it: say that you’re organizing your bookshelf and have a list of book titles. You might want to store this list in a place you can easily access should you ever want to organize the titles, remove, or retrieve certain information. In Python, this list of titles would be stored in an array.

A common confusion you might encounter is the difference between Python array vs list. The key difference is the types of values that the two can store. While arrays can only store items of the same data type, lists can store a variation of different data types. Taking the bookshelf example from above, if your bookshelf also contains decorative items, such as potted plants, your list of bookshelf items would need to be stored in a Python list.

How to create an array in Python

Now that you know what an array is, the next step is to create a Python array. Let’s start with a simple example: to create an array in Python, you’ll need two parameters: data type and value list. Data type is the type of value that you want to store. Continuing the previous book list example, the data type here would be books, while the values would be the book titles.

Your basic syntax would look like this:

a=array(data type,value list)`

Using the bookshelf example:

a=array(books, [Harry Potter, Game of Thrones, Narnia, The Hobbit, The Little Prince])

How do you access an element in a Python array?

Each element in the array has an index number, starting with 0. This allows you to access an element in an array. The basic syntax will look like this:

Array_name[index value]

Using the previous example, say you want to access the second element in the array.

a=array(books, [Harry Potter, Game of Thrones, Narnia, The Hobbit, The Little Prince]) 
a[1]=Game of Thrones

How can you know a Python array length?

By understanding how the index number works, you can also figure out the Python array length. As the index number starts from 0, the Python array length will be 1 more than the last index number. Another way is to use the len() function to figure out the Python array length:

a=array(books, [Harry Potter, Game of Thrones, Narnia, The Hobbit, The Little Prince])
len(a)=5

How to remove an element from a Python array?

There are quite a few ways to remove elements from a Python array.

If you would like to delete an element based on their index number, you can use Python's del statement:

a=array(books, [harry potter, game of thrones, narnia, the hobbit, the little prince])
del books[2]

In the above example, you are deleting the third element from the Python array, “Narnia”. To use this method, you need to know the index number of the element you’d like to remove.

But what if you’re not sure where the element you’d like to remove is? In this case, you can use Python’s remove() method:

a=array(books, [harry potter, game of thrones, narnia, the hobbit, the little prince])
del books[harry potter]

By using the remove() method, you’ll be able to locate and remove a specific element without needing to know its index number.

If you want to learn more about what you can do with Python arrays, you can check out this tutorial or find a senior developer to help you master Python step by step!

We covered the basics of Python arrays in this article, but this is just the tip of the iceberg. Once you’re familiar with the array module from the Python standard library, you can expand to learn more about using arrays with the NumPy package, which is often seen as the standard array function in Python and in data science nowadays.

More resources on Python arrays:

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. 🎉

DEV Community: Codementor

Hosting virtual events for developers pt.2: Structure, slide decks, and event flow

Pick a focused topic and virtual event format

Pick a narrow topic for your developer event

Select a virtual format

Come up with a high level structure

Virtual events structure example: Technical topic

Online events structure example: Career-related topic

Put together great slide decks for virtual events

Why do you need slide decks for developer online events?

How to organize your slides

Introduction slides

Main section slides

Wrap up slides

Create engaging online events experience

Before the virtual event starts

Starting your online event

During your virtual event

For presenting:

For hosting:

For Q&A:

Ending the online event

Wrap up & next steps

Hosting virtual events for developers pt.1: Audience, topic, event title, & event description

Why should I speak at developer virtual events?

Own and reinforce your knowledge

Practice sharing your experience and knowledge with others

Help others learn from your experience via virtual events

Build your personal brand and network

How do I choose the right topic for my virtual events?

What does a good event title look like?

How to write an event description for developer virtual events

About the talk:

This talk will cover

About the speaker

Event description examples for inspirations

Tech talk event description example

Career talk virtual event description example

Conclusion: What’s next?

A Step-by-step Tutorial for Building a Temperature Converter Website

Introduction

Project Overview

Setting up the project environment

Let's Start Building

Step 0 : Create HTML structure with Bootstrap classes

Step 1: Add custom CSS styling

Step 2: Create convert functions for all three units

Step 3: Receive user input and send output on webpage

Step 4: Update results in real-time

Result

Time to deploy

1. Create a GitHub repository

2. Initialize Git in your project

3. Setup GitHub Pages

Recap

JavaScript Splice: What is JavaScript Splice and What Can It Do?

What is the JavaScript splice method and what can it do?

How to remove elements from an array with JavaScript splice

How to add elements to an array with JavaScript splice

Splice vs Slice: What is the difference between the two JavaScript methods?

Related links:

How to Create An Array in Python and other things you need to know about Python Array

What is a Python array and what can they do?

How to create an array in Python

How do you access an element in a Python array?

How can you know a Python array length?

How to remove an element from a Python array?

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

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