DEV Community: Kailana Kahawaii

Before You Share Your React App, Change index.html

Kailana Kahawaii — Wed, 13 Jan 2021 22:06:41 +0000

React is a great framework to get a project up and running quickly. Running npx create-react-app my-app will give you a functioning website in seconds. That being said, it’s always a good idea to change your meta data before sharing your React app widely.

Doing so is easy!

Change meta data

Navigate to index.html in the public directory and find the head tag.

See that text Web site created using create-react-app? Let's change it.

In the meta tag, change content="Web site created using create-react-app" to a short description of your website.

This type of information is shared whenever you embed your website on a social media page, so creating a short and informative description will let your user know what kind of website they’ll be viewing.

Change the title

At the bottom of the head tag you’ll find the title tag. This title corresponds to the text you see on the browser tab.

Change the name of the React App to whatever you’ve named your website.

Further changes

There’s other boilerplate code you may want to modify in the index.html file and elsewhere. Personally, I find it useful to delete the image files create-react-app comes with (with exception to the favicon file).

A favicon is the 16 x 16 px image next to the title of your website (usually a logo). React uses their own logo, but you can easily delete that file and replace it with your own logo. Be sure to keep the file name the same for a quick change.

Summary

These quick changes can make a great impression when sharing your app. Not only are they descriptive (which is what search engines love), they also show that you pay attention to detail. The next time you share your app, be sure to make these changes.

Quick React Project: Calculate your TBR Goal

Kailana Kahawaii — Sun, 03 Jan 2021 02:30:43 +0000

I like to start my year off by setting a reading goal. This relatively quick project will calculate how long it’ll take to complete your reading challenge based on words read per minute and the average length of a book.

This project is perfect for those just starting React, or those who want to refresh their skills after taking a break.

Getting Started

Create a new project by using the Create New React App command.

$ npx create-react-app reading-challenge

After your project has been created, create a components folder in src and add two new files: Form.js and ReadingLog.js.

ReadingLog will be responsible for some of the styling and some of the content, but most of the meat of the project will be in Form.

You can also feel free to delete the files you don’t need.

Our display file

I’ve kept the display file super short. It displays a title and the form component.

import React from 'react';
import Form from './Form'; 

function Readlog(){

        return(
        <div>
                 <h1>How long will my TBR take?</h1>
                 <Form/>
        </div>
        )
}

export default Readlog;

This a good file to add styling to as you can wrap the form and other elements in it.

Figuring out the form

My first idea was to differentiate books based on children’s fiction, young adult fiction, and general literature. However, that kind of information can be hard to parse, even if you have a CSV file handy.

Instead, I went for an MVP version of that idea.

I researched the average length of a novel, which is 90,000 words. With this information, I only needed to figure out my WPM or words per minute. I used this speed reading test to calculate my speed.

With that in mind, the formula would look something like this:

minutes = Number of books x 90000 / words per minute

For the above formula, what kind of information would a user need to disclose?

number of TBR books
reading speed

This information can be held in state.

class Form extends React.Component{
    constructor(){
        super()
        this.state={
            books: 0, 
            wordsPerMinute: 0
        }
    }
[…]
}

Now, we’ll need a form for the user to put this information into. Since both of these variables are numbers, I’ve used type=“number” on the input form.

    render(){
        return(
        <div>
            <form>
                <label>Number of books on your TBR</label>
                <input
                placeHolder="enter the number of books"
                type="number"
                name="book"
                value={this.state.books}
                onChange={ (e) => this.handleChange(e) }
                />
                <label>Reading Speed (wpm)</label>
                <input
                type="number"
                name="wordsPerMinute"
                value={this.state.wordsPerMinute}
                onChange={ (e) => this.handleChange(e) }
                />
            </form>
        </div>
        )
    }

You’ll notice that there’s an onChange function being referenced here, so it’s a good Idea to write one.

    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

Fun fact: the brackets around [e.target.name] tells react that this code refers to a dynamic key name.

So we have a form, and we can change the state using the form.

Now, we need to actually calculate the number of minutes, hours, and days it’ll take to read all those books based on the user’s reading speed.

Time conversion

We have the reader’s wpm represented by this.state.wordsPerMinute, and we have their TBRs based on this.state.books.

let wpm = this.state.wordsPerMinute
let books = this.state.books

Glancing at our formula again, in order to calculate the minutes, we’ll need to multiply the number of books by 90000 and divide by the wpm. I’ve also used Math.floor so we get nice, whole numbers. This will give us the minutes it’ll take to read all those books (give or take).

 let minutes = Math.floor((books * 90000)/wpm) || 0

Note that || 0 will give the user a 0 instead of NaN value if they enter 0 into the input form.

With this information, we only need to do a couple more time conversions to calculate the days and hours.

    let hours = Math.floor(minutes/60) || 0
     let days = (hours/24).toFixed(1) || 0

Then, with those times, we can add a bit of dialogue to the state, that will be dynamically rendered when the user clicks a button. To do this we’ll need to write it into our function.

   this.setState({
            time:`It'll take about ${minutes} minutes to get through your TBR list if you read continuously. That translates to ${hours} hours or about ${days} days.`
        })

And we’ll also need to include it in our state:


class Form extends React.Component{
    constructor(){
        super()
        this.state={
            books: 0, 
            wordsPerMinute: 0, 
       time:’ ‘
        }
    }

The whole function looks like this:

  calculateTime = () => {
        let wpm = this.state.wordsPerMinute 
        let books = this.state.books
        let minutes = Math.floor((books * 90000)/wpm) || 0
        let hours = Math.floor(minutes/60) || 0
        let days = (hours/24).toFixed(1) || 0

        this.setState({
            time:`It'll take about ${minutes} minutes to get through your TBR list if you read continuously. That translates to ${hours} hours or about ${days} days.`
        })
    }

You can tie the form to an onSubmit function…

<form onSubmit={(e) => this.handleSubmit(e)}>

[…]

<input type=“submit”/>

…and write out the submit function.


handleSubmit = (e) => {
        e.preventDefault()
        this.calculateTime()
    }

Keep in mind that e.preventDefault() will prevent the form from doing an annoying page refresh.

Now, all that’s left to do, is add the dialogue from state (we’ll use a ternerary to conditionally render it after the user clicks the button).


<p>{this.state.time ? this.state.time : null}</p>

Altogether, our file will look like this

import React from 'react';

class Form extends React.Component{
    constructor(){
        super()
        this.state={
            books: 0, 
            wordsPerMinute: 0,
            time: ''
        }
    }

    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    calculateTime = () => {
        let wpm = this.state.wordsPerMinute 
        let books = this.state.books
        let minutes = Math.floor((books * 90000)/wpm) || 0
        let hours = Math.floor(minutes/60) || 0
        let days = (hours/24).toFixed(1) || 0

        this.setState({
            time:`It'll take about ${minutes} minutes to get through your TBR list if you read continuously. That translates to ${hours} hours or about ${days} days.`
        })
    }


handleSubmit = (e) => {
    e.preventDefault()
    this.calculateTime()
}

    render(){
        return(
        <div>
           <form onSubmit={(e) => this.handleSubmit(e)}>
                <label>Number of books on your TBR</label>
                <input
                placeHolder="enter the number of books"
                type="number"
                name="book"
                value={this.state.books}
                onChange={ (e) => this.handleChange(e) }
                />
                <label>Reading Speed (wpm)</label>
                <input
                type="number"
                name="wordsPerMinute"
                value={this.state.wordsPerMinute}
                onChange={ (e) => this.handleChange(e) }
                />
                 <input type="submit"/>
            </form>
            <p>{this.state.time ? this.state.time : null}</p>
        </div>
        )
    }
}

export default Form

Ideas for expansion

This works great, but I can’t help but feel that the number it gives could be more accurate. This stackoverflow discussion about book word counts seems like a pretty good place to start.

Summary

Even though it’s going on 9 months since I first picked up React, there’s still so much to learn. Quick projects are a good way to practice and improve on skills without feeling overwhelmed. It was also useful to review syntax like brackets around event.target.name.

Hope your reading challenges go well!

Here's my goal. I'd better get reading. 😂

Going from learning coding to learning to problem solve with Repl

Kailana Kahawaii — Sat, 02 Jan 2021 21:01:39 +0000

In a year of many challenges, there’s was one thing I could rely on in my software engineering journey. Repl.it!

I started seriously coding in January of 2020. Before then, I hadn’t really focused on any particular language or framework. My goal was to learn HOW to code. Yet, even when I was getting the hang of Ruby and Javascript, I hadn’t really learned how to step through problems and problem solve. This is probably one of the biggest misconceptions people have about coding: it’s a language, yes, but it’s also a tool to work through problems.

In March, I started to see the difference between learning the language and learning how to problem solve. It was also at this time that I didn’t have a lot of access to whiteboards, and trying to work my way through a notebook didn’t seem like the most intuitive way to code. It was also at this time that I started practicing algorithms and Repl.it became indispensable.

What is Repl?

If you’ve been coding for a while, you’ve probably heard of Repl.it. It’s a code sandbox with a minimalist interface. It allows you to save different files and also run them.

Many languages are supported and the console/environment interface allows you to focus on inputs and outputs.

Testing, testing, testing…

I’m the sort of person who needs to constantly test if something works. I use Repl for almost every algorithm I come across. It’s usually more reliable than the in-house coding sandboxes of many algorithm practice sites (do keep in mind the test cases, though!).

Not only that, but when I’m working on a web development feature, it’s useful to see the results without having to edit a file. Breaking the problems out into smaller steps also helps me to keep my Ruby and Javascript programs more organized when I actually do paste them to the code editor.

Not a swiss army knife

Repl is good for some things, like testing out an algorithm, and not good for others, like solid web development or working with a more complicated program. There have been moments when simply working in a code editor has done the trick.

When I explain Repl to people who don’t code, I often compare it to a calculator. It’s something I can use to put in inputs and generate outputs, but I wouldn’t use it to design a website or create an automation tool.

Also, there are moments when Repl is simply not powerful enough to calculate a particular test case. When I filled an array with 1000 values, it didn’t seem that the program could process that load. There have also been moments where it’s crashed completely, or has complained about syntax errors that weren’t there.

Stepping through problems

In a world where whiteboarding is difficult to accomplish over long distances, digital whiteboarding often comes to the rescue. Being able to print values and to the console has been invaluable in learning how to code.

It’s helped me go from learning the language of a code to learning how to code to solve problems.

Summary

If you’re just starting out, especially with algorithm types of problems, I recommend finding a digital whiteboard program that works for you. There’s many besides Repl, such as Code Sandbox (which is better for web development). I still use Repl any time I need a visual for a particular coding problem. It’s my go-to!

Are one-liners always the best solutions?

Kailana Kahawaii — Thu, 24 Dec 2020 00:37:23 +0000

Whenever I solved an algorithm on leetcode or codesignal, I liked to look at others solutions. For Codesignal in particular, a lot of the top voted solutions were one-liners. I loved looking at these clever solutions which seemed to both simplify the problem while also introducing sometimes complex answers.

This week, I encountered an opportunity to introduce my own one-liner solution. Unfortunately, it didn’t turn out how I wanted it to.

The Problem

Given an array of integers such as [1, 2, 2, 4, 4, 4] return the number of occurrences of the largest value. Since four shows up three times in this array, the answer would be 3.

One liner solution

After playing around with a few for-loop type solutions, it occurred to me that I could use Math.max to find the largest value.

Math.max(array)

However, this returned an error. I soon remembered (aka Googled) that the array would need to be spread in order for the method to work.

Math.max(…array)

With Math.max(…array), I was able to return the largest value, 4!

With that in mind, I only needed to compare the amount of times 4 appeared. There were several ways of doing this, but I settled on the filter method, which returns a new array for all the elements that match a given condition (in this case, each value that is 4).

arr.filter(num => Math.max(...arr) === num)

This returns an array [4, 4, 4], and so all that’s needed is to return the length of it.

arr.filter(num => Math.max(...arr) === num).length

In a repl, the results worked as expected with my sample array ([1, 2, 2, 4, 4, 4]). However, when I tried to submit the problem to the site, I was hit with a timeout error. It appeared that the solution took too long for arrays that were thousands of elements long.

Not only that, but this solution is creating another array that won’t really be used besides for the purposes of taking its length. Is there a more optimized way of doing things?

For loop solution

Not wanting to get hit by timeout errors again, I returned to my initial idea of using a for loop. I also decided on using a sorted array to grab the max value immediately.

let sort = arr.sort((a,b) => b - a); 
let count = 0;

There were a few things I needed to keep in mind for this sorted array and counter method to work. First, I needed to make sure to keep track of duplicate values. I decided a comparison would take care of this.

for(let i = 0; i < sort.length ; i++){
        if(sort[0] !== sort[i]){
            return count
        } 

        count++
    }

sort[0] represents the max value here since the array has been sorted in decreasing order.

Second, I needed to account for instances where the arrays were filled with the same value.

In the end, the solution looked like this.

    let sort = arr.sort((a,b) => b - a)
    let count = 0;
    for(let i = 0; i < sort.length ; i++){
        if(sort[0] !== sort[i]){
            return count
        } 

        count++
    }
   return count

This solution did pass the tests.

One liner vs for loop

Although the one liner was a lot less code, it ended up being significantly slower than the for loop solution. Using console.time, the execution time was 76.631ms for a 100 element array.

Compared to the for loop, which took 0.319ms, that’s a LOT longer.

Summary

I’m sure there’s solutions out there that account for shorter execution times and less code. Knowing how the time complexity of each method in a one-liner can affect the overall performance of a function is something important to keep in mind.

You can find this problem on hackerrank.

Matrix Looping: Now with a single loop

Kailana Kahawaii — Sat, 19 Dec 2020 01:00:35 +0000

I’ve worked with matrix problems before and had always been curious how to cut down on their run time. The ways I’ve usually gone about solving a matrix problem was to write a nested loop in order to extract the values. However, that method leaves you with a On^2 runtime, which isn’t the most efficient.

The problem

Today, I came across a problem that asked me to approach matrix problems different.

Basically, I was tasked to find the sums of the diagonals of the matrix. Given a range of numbers from 1 to 9, the sum from the top left is 1 + 5 + 9 = 15 and from the top right is 3 + 5 + 7 = 15.

My first instinct to traverse the array was a nested for loop that would give me access to all of the values.



let (i = 0; i < matrix.length; i++{
    let (j = 0; j < matrix[i].length; j++){
    //add up the totals
    }
}

However, I quickly realized that wasn’t necessary. After, I don’t need all of the values, I only need the diagonals.

Visualizing the pattern

At this point, it was helpful for me to write down the values as the program would view them: as indexes in an array.

For the top left values, we can access them with matrix[0][0], matrix[1][1], matrix[2][2].

For the top right values, we can access them via matrix[0][2], matrix[1][1], matrix[2][0].

This step proved to be so helpful to understanding the problem. If you look at the pattern for the left values, we can see the values increment by 1 each time. For the top left, the first part increment by 1, and the latter half decrement by 1.

Since all of these values are incrementing (or decrementing) by the same value, we can use just one for loop.

One for loop

Tackling the left side of the problem is easy given what we already know from the pattern above. We just need to start at 0,0 and add 1 each time. This can be done with a for loop as we traverse each row of the matrix.



for (let i = 0; i < matrix.length; i++){
    left += matrix[i][i]
}

The first half of the right side is the same. We can use i to increment each row of the matrix.

For the second part, we’ll need the length of the matrix and/or row (assuming this matrix has the same number of rows as it does columns).

Why do we need the length of the row? We need to start at the end of the row, which is the length of the row.

With this in mind, let’s look at the pattern again: [0][2], [1][1], [2][0].

Since the length of our rows is 3, we’ll need to subtract 1 in order to start at 2. Then we can minus i each time. Since i starts at 0 on the first iteration, we’ll end up with 2.

Here’s the full problem. I’ve changed the variables slightly to make the code DRYer.



let row = arr.length

  let left = 0, let right = 0

for(let i = 0; i < row; i++){

    left += arr[i][i]

    right += arr[i][row - 1 - i]

  }

Summary

Instead of using a nested for-loop to pull out the values, we can use a single for loop to pull only the values we need. This cuts down the runtime to O^n.

Probably the most helpful method to approaching a problem like this is writing down the values as the program would see them. That way, you’ll be able to see the pattern (and realize that one loop would do just fine).

You can find this problem on hackerrank.

Participating in a virtual hackathon

Kailana Kahawaii — Tue, 15 Dec 2020 20:30:45 +0000

2020 is the year of the virtual well, everything. Virtual hackathons are quickly becoming a way for professionals, students, and everyone in between to connect and build software projects. After having participated and couple myself, I thought I’d share my experiences.

Choosing a hackathon that’s right for you

Many organizations host virtual hackathons. Just look the eventbrite page! That’s a lot to choose from, so it may be helpful to break hackathons into three basic categories.

Corporate
Companies put on these hackathons for their employees. A lot of times, they involve cross-functional teams working together to build a new feature or work with a specific non-profit organization. These hackathons are generally not available to the general public.
Competition
Just like any competition, these hackathons involve teams coming together and building a product or feature in a fixed amount of time. These tend to be what most people think of when they think of hackathons. Winning one of these can net you anything from recognition to substantial financial prizes.
Civic
These are the hackathons I like to participate in. Join a nonprofit organization and build a product or feature that addresses some sort of social need. Most projects don’t end when the hackathon ends either. You become part of a community creating great, civic tech software.

Before you join

For competitive hackathons, the planning and building phase happens during the hackathon. However, for other types of hackathons, it may be a good idea to check in with the team before the hackathon starts. After all, you don’t want to spend the whole day trying to get the environment to work on your computer when you could be building a feature. That’s why it’s good practice to reach out to the project lead a few days before starting the hackathon. They often have a good idea or feel for the architecture, or can get you in touch with someone who does.

It’s also a good time to figure out what part you’d like to work on. While some projects just have a single engineering team, others have multiple teams.

Day of the hackathon

You’ve signed up. You’ve met with the team. Now it’s time to get to work on a feature. Project leads usually have a set agenda about what they want to accomplish during the hackathon day. In the morning, you’ll probably get a brief introduction to you project and the other projects in the hackathon. If you haven’t signed up with a specific team with that point, it’s a good time to join up with a project that speaks to you.

After getting set up with a project, you’re generally tasked with some feature to work on. Most hackathons have your team work in a separate video conference “room” where it’s easy to ask for help should you need it. You may also have access to a messaging app, like a Slack channel. These messaging systems are invaluable when someone leaves the room as it keeps everyone in the loop. Slack especially lets people share code samples and other media that just isn’t optimized through most video conferencing software at this point.

At the end of the day, your team may be asked to present what features you worked on. It’s the best time to share the progress you’ve made with your group. It may also be a good time to share contact information so you continue to work on the project.

After the hackathon

Sometimes you don’t always finish a feature during the hackathon day. You may be tasked to work on it at a later date. Your team may have a set time to meet, or may check up with you every now and then.

It’s isn’t just about software engineering

Hackathons aren’t just for developers. Many projects also need designers, writers, strategists, and other subject matter experts to get off the ground.

Pros and Cons

The ability to join a hackathon from anywhere is a pro as much as a con. Sometimes, participants can simply just drop off the call and disappear. Other times, it’s the time difference itself that can be a hurdle. However, the ability to meet others from all over the country or the world is invaluable when building a software project.

The video conferencing software itself can also be buggy or hard to work with at times. Every team has their own way of navigating this, and, if they’ve participated in a hackathon before, they likely have ways around these glitches as well. As mentioned before, a messaging app is a great way around this.

As easy as it is to meet people from around the world, it’s much harder to chat with people on other teams. An inperson event allows you to bump shoulders with others that just doesn’t happen at virtual events. Some hackathons provide working lunches or social times to meet others, though it’s usually awkward to chat with another person while forty or fifty people are also on the call. I’ve found that reaching out to someone after the hackathon can work, but again, it wouldn’t be the same as meeting in person.

Why participate in a virtual hackathon

If you love thinking about and creating software, hackathons are the place to ignite your passions and connect with others. A virtual hackathon is a great way to build your skills, connect with others in the industry, all the while navigating our (new) remote world. If you’ve been considering participating in a virtual hackathon, now’s a great time to jump in. It may also be the only time some of these hackathons host online events, so don’t wait!

What’s the difference between MVC and OOP?

Kailana Kahawaii — Sat, 12 Dec 2020 20:46:19 +0000

I received an interesting question during an interview. Until then, I had known of both of these concepts, but I’d never really compared them to one another.

At a high level, MVC (model view controller) and OOP (object orient programming) are both patterns.

Object Orient Programming

Many programming languages contain the idea of an object. These objects contains information and procedures. Objects can be tied to classes, a category or template that makes objects similar or different from one another.

There are four main principals of OOP:

Abstraction: The process that makes each object different from one another.
Encapsulation: Classes contain their own attributes and procedures. These aspects aren’t shared by other classes. This is also known as data hiding.
Inheritance: Some objects can inherit procedures or attributes from other classes.
Polymorphism: An object’s data type or class means that the programming language will have to process the object differently. For instance, a string is treated differently than an integer in many languages.

Not every programming language is truly OOP. Javascript, for example, doesn’t really have classes, though they can be created.

Model View Controller

Unlike OOP, MVC is what frameworks are built upon.

Model: The template for each instance of a class.
View: What the user sees. The client-facing instrumentation of a program.
Controller: The routing protocols of a program.

Each of these aspects operates in a different capacity to “show” you this webpage. It’s also easy to see these files in action. When I was first learning about MVC, I would build Rails apps to study the concept.

To illustrate, I created an app to simulate a flower shop.

Under app, there’s a directory for models, views, and controllers.

The models contain information about methods and the relationships of each table in the schema.



class Customer < ApplicationRecord
    has_many :orders 
    has_many :flowers, through: :orders 

    validates :name, presence: true 
end

The above code sample represents the customer model. Each time a new customer is created, it follows the methods in the models. This is also where some of the OOP concepts come into play. The models act as templates for the objects they create. This Customer model inherits from the ApplicationRecord class. It also has relationships with the other models, but the other models do not necessarily share the same methods.

This model correlates to the CustomersController.



class CustomersController < ApplicationController

    def index 
        @customers = Customer.all 
    end

    def show 
        @customer = Customer.find(params[:id])
    end

    def new 
        @customer = Customer.new
    end

    def create 
        @customer = Customer.new(customer_params)
        if @customer.valid?
            @customer.save 
            redirect_to @customer
          else
            render :new
        end
    end

    def edit
        @customer = Customer.find(params[:id])
    end

    def update 
        @customer = Customer.find(params[:id])
        redirect_to @customer 
    end

    private 

    def customer_params 
        params.require(:customer).permit(:name)
    end
end

The controller takes care of the routes of our application. Each of the methods relates to a different page a user might see when they access the application. The controller works like the machinery used to change a train track. With each change, a different route is selected and a different set of procedures is applied.

Finally, there’s the views. Each view correlates to the controller methods we saw in the earlier example.

For instance, in the show route, a user will see information about their account.



<h1>Your Account Information</h1>
<%@customer.name%>

Ideally, we would like the information of that particular customer to be displayed. Where is that information held?

It’s in the table.



class CreateCustomers < ActiveRecord::Migration[6.0]
  def change
    create_table :customers do |t|
      t.string :name

      t.timestamps
    end
  end
end

The table is like a spreadsheet of the data (at least, when you’re using a database like SQL). By looking at it this way, it’s even more obvious what role the controller plays.

In order to grab information about that particular customer, it will go through the controller, see this method:



 def show 
        @customer = Customer.find(params[:id])
    end

And use that to pull information from the database to be displayed.

Summary

While both OOP and MVC are concepts, the implementation of them happens in different ways. OOP is the concept that governs how objects (data) is created and managed. MVC is the set of procedures used to display that user to the user.

They’re important concepts, but not every language (or even framework) will necessarily follow them to a T. Think of OOP and MVC as patterns, not rules. If you’re just starting out, there’s a big change you’ll come into contact with these two concepts many, many times.

Getting Started with Technical Writing

Kailana Kahawaii — Sat, 05 Dec 2020 21:25:37 +0000

I’ve connected with many professional and aspiring technical writers over the months and have received a lot of advice. This guide is meant to answer some of the most frequently asked questions I’ve encountered in networking.

Please note, this article is specifically targeted towards software technical writing.

What is technical writing?

How-to guides, documentation, white papers, and a myriad of other informative writings are considered technical writing. Technical writing can also appear in other writing-heavy professions, such as UX, instructional design and marketing writing.

How do I start?

Do you have a goal in mind for starting technical writing? If you simply want to get better at it, there’s many online resources. Some of my favorite free resources include idratherbewriting.com and the Google technical writing guide. If there’s a field you’re interested in, consider writing articles and posting them to Dev.to and other article hosting sites. If you have a specific company you want to apply for become familiar with their docs. Perhaps test out their software if it’s available then write about it.

What's something that mostly all technical writers agree with?

Besides understanding their subject and audience, many technical writers agree that their writing should be inclusive. That means staying away from metaphors that may be confusing for other cultures, and avoiding offensive language and terms.

What do I need to know before getting into technical writing?

A strong command of the English grammar (or whichever language you’re writing in) is important. My big mistake when I first started was thinking I had to know everything about everything before writing. In fact, it’s better to focus on a specific part of the software or program you’re writing about. That focus will help you immensely.

Is there a specific degree I need to get to become a technical writer?

Most of the job ads I’ve seen require a Bachelor’s degree. Indeed corroborates this. Some of the most popular majors include Engineering, Computer Science, and English. There are also specific technical writing programs and credentials one can obtain. That being said, I’ve spoken to technical writers whose experience has usurped degrees and majors.

Besides writing, how can I enhance my technical writing?

Learning how to use documentation software can be important. Some teams also look for the ability to create diagrams or code samples. Also, some of the most listed languages and software include XML, JSON, Github, and HTML.

What’s something many technical writers are learning right now?

Github is very popular right now. I attended a webinar about Github basics this past summer. From those coming from a software engineering background, the good news is that you probably know all of the Github basics.

In addition, API documentation is exploding in popularity. Working with Postman, and knowing how to understand JSON, can be very important when pursuing these types of jobs.

Is there free software I can use to practice API documentation?

I’ve used Stoplight.io to practice API documentation. Swagger is another popular tool. Keep in mind these resources are free to start.

What’s the best advice you’ve gotten about technical writing?

Joining the community Write the Docs has been an invaluable learning experience. I’ve met with so many professionals and I’ve learned their perspectives and views on the profession. In addition, I’ve been able to attend workshops and other webinars that I wouldn’t even have known about if I hadn’t joined this community.

I have a take home project for technical writing. How should I prepare?

If the company has docs, read them. If not, try to understand as much about their reader base as possible before sitting down to write. Writing to the audience is something many hiring managers are looking for and you want to demonstrate you know that audience well. There’s a big difference between writing to an engineering audience vs. a non-technical audience. Knowing how to adjust your writing is an important skill that will take you far.

How do you find the motivation to start writing?

When I was just getting started, I generally wrote about things I was passionate about. I also wrote about ideas that I didn’t see much documentation for (like dynamically controlled forms). In addition, a lot of the writing I do on Dev.to helps me to reinforce the skills I’ve learned. That’s not to say that pinpointing these sources will work 100%, but I’ve found that other technical writers have used these three methods when just starting out and building a portfolio.

How do I build a portfolio?

Identify the type of role you want to pursue, then write articles, documentation, and other samples to show your expertise in those areas. Try to include samples that speak to both technical and non-technical audiences. If there isn't a specific role you're going for, try to fill up your portfolio with samples you can see yourself writing on a frequent basis. In addition, if your writing was featured, or has many views, point that out in your portfolio or resume.

Summary

Technical writing is as much a skillset as it is a career. Perhaps the best piece of advice I can offer when pursing both the skill and career is to join a community and just start writing.

Happy writing!

A Couple Ways to Build Dropdowns in React

Kailana Kahawaii — Sat, 28 Nov 2020 18:52:27 +0000

Dropdown menus remain a fundamental way of building forms on the web. React has several ways of building these dropdown. In this article, I’ll cover two ways of creating these essential forms.

These two methods are among the most popular that I came across while building my own forms.

Using HTML tags

You can use standard HTML tags to build a select form. To do this, you can wrap option tags in a select tag.

<select value={this.state.weight} onChange={this.onSelectChange}>
         <option value="8 to 12 pounds">8 to 12 pounds</option>
         <option value="12 to 14 pounds">12 to 14 pounds</option>
         <option value="14 to 18 pounds">14 to 18 pounds</option>
         <option value="18 to 20 pounds">18 to 20 pounds</option>
         <option value="20 to 24 pounds">20 to 24 pounds</option>
        </select>

Here, the values correspond to the labels. I found this method the easiest to use, especially for a small set of data. Specifically, it was easier to tie the selected option to state while using the class constructor. This method works well with the classic React methodology.

Using map

Another way of building a dropdown menu is by mapping through those options. Here, the option tags are still wrapped in the select tag, but instead of listing each option, we use the map function to show each item.


    const renderselect = () =>{
      return(<select>
      {items.map(item => (
        <option
          key={item.value}
          value={item.value}
        >
          {item.label}
        </option>
      ))}

     <

What does it map through? There are several options you can use. For example, you can use hooks to map through the values. If you have an object or an array of these values, you can also use those.

In the example below, I’ve used the useState feature to show state.

const [items] = useState([
      {label: "8 to 12 pounds", value:"8 to 12 pounds" }, 
      {label: "12 to 14 pounds", value:"12 to 14 pounds" },
      {label: "14 to 18 pounds", value:"14 to 18 pounds" },
      {label: "18 to 20 pounds", value:"18 to 20 pounds" }, 
      {label: "20 to 24 pounds", value:"20 to 24 pounds" }
    ])

Hooks make for a cleaner code base, but sometimes can abstract things too much. Those familiar with hooks, and those planning to use redux, as well as those with a larger set of data to add to their forms, should consider using this method.

Summary

You can also create a dropdown menu using CSS and conditionally rendering the menu on click. This, however, would require a lot more code to get up and going. On the other hand, it is a more intuitive way of styling your dropdown menus.

Dropdown menus are one of the most popular types of forms on the Internet. I covered two ways to create these forms in React. There are many ways to build these types of forms, but they seem to rely on these two methods: either listing your options by tags or by mapping through a list of options. Which way is your preferred method?

In case of case and other mnemonics for remembering syntax

Kailana Kahawaii — Fri, 20 Nov 2020 04:15:52 +0000

When I first started learning a foreign language (Japanese in my case), I kept track of the words through rote memorization. But in college, I learned a different way!

My professor had a good way of drilling vocabulary and grammar structures into our heads: by creating phrases so senstaional it’d be hard to forget. Even now, I can remember some of those bizzare analogies. Masaka, massacre — no way, there’s been a massacre.

Code really is just another language after all, and it helps to remember syntax and structures with a fun mnemonics device.

Markdown

I struggled for the longest time to remember the order for linking a… link. Finally, someone suggested SR, square round, Sally Ride, and it just stuck.


[square](round)

Case Statements

Case statements are a bit different in most languages but the structure remains the same: a case declaration, a when condition, a result for each condition, and a result for all other conditions.

Although I knew the structure, I would often forget to pass in the argument through the declaration (as some languages expected). Now, when I get an error, I just remember in case of case.




case some_value

when object = 1

    puts “object is one”

when object = 2

    puts “object is two”

else

    puts “object is not one or two”
end

Ruby

Mnemonics are especially helpful in Ruby, which uses (mostly) descriptive language to define its methods.

Take and Drop

Given an argument, drop removes an amount of elements equal to the given number. This is different from take, which takes the amount of elements and returns them.


[1, 2, 3, 4, 5,].take(1)



=> [1]



[1, 2, 3, 4, 5,].drop(1)

=>

[2, 3, 4, 5]

tr

The tr method replaces characters of a string with other characters of a string. I like to think of it as directly translating the characters, as opposed to substituting a sequence (in which case you would use gsub).


“I swear”.tr(“swear”, “*****”)



=> “I *****”



“You got grit”.tr(“gt”, “12”)



=> “You 1o2 1ri2”

Strings

You likely know about strings in Ruby. But, if you wanted to use Heredocs you’d need to construct it using the <<- operator. I’ve always thought <<- looks like a fallen pine tree, and what do you make documents (paper) from? Trees!




document = <<-HERE

This is my text.

HERE

Ranges

For array ranges, two dots indicate the range is inclusive while three means the range is exclusive.


>>arr[1..3] # .. inclusive

=> [5,1,2]

>>arr[1...3] # …threexclusive

=> [5,1]

Conclusion

There are a bunch of tricks for remembering syntax and procedures. What are some of yours?

Working with styled-components in a React App

Kailana Kahawaii — Sun, 15 Nov 2020 01:11:24 +0000

Finding out about the styled-components library was a game changer for me. Although I had used CSS, SASS, Bootstrap and a retinue of other ways to style my applications, Styled just made sense for a React application.

First of all, when you build with the styled library, you break your styling up into components (sound familiar?). Each component can then be styled individually.

Why Styled-Components?

Learning CSS is a given for web development, but it’s sometimes not as intuitive. When I was first starting out, I used style libraries like Bootstrap to do a lot of the heavy lifting for me in order to get a web app up and running as quickly as possible. Of course, I knew that I’d eventually have to learn CSS.

The good thing about Styled is that it doesn’t take away the CSS, like Bootstrap or MaterialUI might do. What it does do is organize components in a way that makes sense for React.

Creating a new styled component is as simple as declaring a component.

const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
    padding: 8px; 
`

Getting Started

To get started, install the styled library.

npm install --save styled-components

Then, add styled-components to the top of your file.

import styled from 'styled-components'

The components themselves are just, well, components.

const Div = styled.div`
    padding: 8px;  
`

From there, there’s two ways to generally go about styling your application. Either, you can make a separate filed (or files) to store style information, or you can write the styles directory onto the files you’re styling.

Depending on how large your application is, you’ll want to choose the organizational strategy that works best for you.

I’ve found that declaring the styled components directly on the components makes sense for my smaller applications or when you’re just getting started. If you find that you’re repeating components, then it’s time to create a separate file for those.

Refactoring

I’ll be using the writing application I’ve built as an example. Currently, there are three articles for getting started if you’d like to build it yourself and follow along. Feel free to take a look at the repo as well.

Currently there’s a lot of repeated components in this application.

See anything familiar?

In order to clean up some of this, I’m going to create a new file named Styles.js.

I’ll import styled from ‘styled-components’ at the top and then export each component.

Then, I’ll export the components.

export const Title = styled.h3`
    padding: 8px; 

`

Now, instead of declaring each styled component at the top level of the app, I can import the components.

import {Title} from './Styles'

The Title component is preserved and the code is cleaner!

What to Refactor

There were a few components in my application that were unlikely to be repeated elsewhere. For instance, the timer function:

Ultimately I decided to keep these functions and components where they originated from. Why? It’s obvious what these things do when you are looking at the component they originated in. Containing them in a separate file may lead having to hunt down these styles unnecessarily.

Summary

Styled-components is a library that utilizes CSS and with React component ideologies. It's a great resource to work with if you're transitioning from libraries like Bootstrap to CSS. It is also flexible enough to be used throughout an application or as its own separate file. Want to learn more CSS but need a more intuitive way of doing so? Styled-components may be for you.

Build a Countdown Timer for Writing

Kailana Kahawaii — Fri, 06 Nov 2020 19:10:12 +0000

Nanowrimo has started, but it’s easy to lose motivation. This countdown tool will put a figurative fire under our fingertips and hopefully inspire you to write a tiny draft to get started with that momentous writing project.

Getting Started

In my last article, we built a random plot generator to generate a random plot. But we didn’t actually create a place for us to write about that scenario. In order to challenge ourselves, we’re going to create a timed challenge component which will allow us to get our initial ideas on the page.

I’ll be using the Random Plot Generator component, so go ahead and read that article if you’d like to follow along.

First, create a component that will render the form we’ll use to write on.

This form will hold information in state, so we’ll make it a class component.

import React from ‘react’ 

class ChallengeForm extends React.Component{
    state={}

    render(){
        return(
                   <div>form goes here</div>
        )
    }

}

export default ChallengeForm

In order to keep the styling consistent, I’ll use the styled components library. If you haven’t already, install the styled library.

npm install --save styled-components

I know I want a form, so I’ll build a Form with styled.

const Form = styled.form`
    width: 100%;
`

We’ll also need to build a text field for us to actually write something.

Here’s the styling I used. Note that styled components should be OUTSIDE of the class declaration.

const TextField = styled.textarea`
    display: block;
    border: 1px solid lightgrey;
    border-radius: 2px;
    width: 750px;
    height: 500px;
    padding: 8px;
    margin: 8px;
`

Now, in the render method, render that form and textarea.


<Form>
    <TextField/>
</Form>

Of course, we still can’t see the form. In our Random Plot Generator Component we need to import the Challenge Form component and render it.

Rendering the Form

We’ll work in our Random Plot Generator component for this next part. Refer to the article to get a feel for how it’s set up.

import ChallengeForm from './ChallengeForm'

[…]

render(){
    return(
        […]
        <ChallengeForm/>
        )
    }

Here is our page so far.

Conditionally Render the Challenge

We can start writing ideas now, but there is a reason we called it the Challenge Form. To create the challenge aspect, we'll first need to conditionally render this form.

We’ll change the render in our Random Plot generator to conditionally render the form.

First, let’s add the form flag to our state.

class RandomPlotGenerator extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            […]
            form: false
        }
    }

Then, in the render, write a ternary to render the form if it is true.

{this.state.form ? <ChallengeForm/>: null}

In order to make it true, we’ll need to write a button. Let’s add the button to the sentence that’s generated.

Create a new styled button.

const Button = styled.button`
    margin: 8px; 
    padding; 8px;

    &:hover {
        color: blue;
        cursor: pointer;
      }
`

Then, render that button in the renderRandomPlot function.

    renderRandomPlot = () => {
        return this.state.sentences.map((sentence, idx) => 
             <Container key={idx}>
                 {sentence}
                 <Button onClick={this.onChallengeClick}>Challenge</Button>
             </Container>
        )
    }

Finally, change the state so that the form toggles between true and false.

  this.setState(prevState => ({
            sentences: [...prevState.sentences, sentence],
        }))
        }

Now we can show and hide the form at the click of a button.

Now that the form is conditionally rendered, let’s make a timer to count the time we have to write.

Building Countdown Functionality

We’ll want to make a header to tell us how much time we have left. It would also be nice if, when we run out of time, the header blinks to let us know.

Styling the Countdown Headers

To do this, we need to import keyframes from the styled library.

Do this in the Challenge Form component.

import styled, { keyframes } from 'styled-components'

Then, make a Title h3 styled component.

const Title = styled.h3`
    padding: 8px; 
`

We’ll also write a function for our component to blink.

function blink() {
    return keyframes`
      50% {
        opacity: 0;
      }
    `;
  }

const TimesUp = styled.text`
    color: red;
    animation: ${blink} 1s linear infinite;
`

Both this styled component and the function are outside of our Challenge Form class.

Keep Track of Time in State

Before rendering the title, we’ll add minutes and seconds to our state.

state = {
    minutes: 5, 
    seconds: 0
    }

We’ll use Set Interval to count down the seconds.

I used Charlie Russo’s Building a Simple Countdown Timer With React to build out this functionality. Check it out!

In the Component Did Mount lifecycle method, use this code to create the timer.

    componentDidMount() {
        this.myInterval = setInterval(() => {
          const { seconds, minutes } = this.state    
          if (seconds > 0) {
            this.setState(({ seconds }) => ({
              seconds: seconds - 1
            }))
          }
          if (seconds === 0) {
            if (minutes === 0) {
              clearInterval(this.myInterval)
            } else {
              this.setState(({ minutes }) => ({
                minutes: minutes - 1,
                seconds: 59
              }))
            }
          }
        }, 1000)
      }

    componentWillUnmount() {
        clearInterval(this.myInterval)
    }

Conditionally Render the Countdown

Finally, render the countdown timer component. When the timer hits zero, our timer will blink to let us know time’s up.

   <Title>   
                    { minutes === 0 && seconds === 0
                        ? <TimesUp>Time's Up!</TimesUp>
                        : <h1>Time Remaining: {minutes}:{seconds < 10 ? `0${seconds}` : seconds}</h1>
                    }</Title>

And our countdown is complete!

We can be mean and make it impossible to update the form after that, but that probably isn’t going to fly with many writers. Instead, let’s add an analysis tool that tells us how many words and characters we typed in that time period.

Building an Analysis Button

We’ll create a simple button style for our analysis button.

const Button = styled.button`
    padding: 8px; 
    margin: 8px;
`

We’ll also render that button underneath our form. Let’s also attach an onClick event to it.

<Button onClick={this.analyze}>Analyze!</Button>

Analyze will conditionally render a word and character count, so we’ll need to add a flag to our state.

 analyze: false

Upon clicking the analyze button, we’ll set the state to true.

 analyze = () => {
        this.setState({
            analyze: true
        })
    }

In order to count the words, we’ll need to make them part of our state.

words: ''

Our count words function is a simple regex expression that counts words and returns only alpha-numeric characters.

  countWords = () => {
        let str = this.state.words
        const matches = str.match(/[\w\d\’\'-]+/gi);
        return matches ? matches.length : 0;
    }

Finally, we’ll tie the analyze function to the button and conditionally render the word and character count.

<Button onClick={this.analyze}>Analyze!</Button>
                    {this.state.analyze ? <p>{`You wrote ${this.countWords()} words and ${this.state.words.length} characters.`}</p> : null}

This will tell us how many words were written in our challenge.

Summary

Great! We created a timer and text area to challenge ourselves to write a short story. We also created the ability to analyze the amount of words written in that time period.

There are many ways this challenge can be expanded upon. What about creating multiple plot ideas and multiple challenge forms? Or creating a backend for saving our writing projects so we can come back to them later.