DEV Community: Sneha Jalukar

Writing Arrow Functions in Modern JavaScript

Sneha Jalukar — Mon, 25 Jan 2021 15:14:36 +0000

Background

When I started learning JavaScript, one of the most confusing things -- especially when I was looking at snippets of code online -- was understanding how arrow functions are composed.

If you haven't written JavaScript code in a few years, or are new to functional programming, this may look strange at first, but don't let that intimidate you!

I hope this post serves as a quick and useful reference.

While a traditional function in JavaScript will look like this:

function(a,b){
  return a+b;
}

Writing that as an arrow function would take that code snippet down to one line, as you'll see shortly.

How do you convert traditional functions to arrow functions? Just remember FABR!

Functions - Drop the word "function"
Arrow - Add the arrow
Brackets - Remove the brackets
Return - Remove the word "return"

Step 1: Drop the word "function"

The first thing you'll want to do is drop the word "function" from the word, as the ==> characters imply this is already a function.

Step 2: Add the arrow

Once you drop the word "function" then you'll also want to add ==>.

Continuing to work with the function we started with, it would look like:

(a,b) ==> { 
return a+b;
}

Step 3: Remove the brackets

After this step, our almost-complete arrow function will look like:

(a,b) ==> return a+b;

Step 4: Remove the word "return"

Finally, all that's left to do is take out the word "return" and we're done converting this to the arrow function syntax!

(a,b) ==> a + b;

Conclusion

I hope this post serves as a quick reference or good refresher if you're new to the world of JavaScript / web development.

For more examples, the MDN Web Docs are a great place to look: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions.

Stay safe, and stay curious!

How to build your own academic website at Oakland University

Sneha Jalukar — Tue, 20 Oct 2020 20:46:18 +0000

Preface

Are you an engineering student or faculty member at Oakland University? Then, read on. This post is for you!

It took me a while to discover the ability to create a website under the secs.oakland.edu domain. After multiple days of trial and error, I was able to set up a personal website: http://secs.oakland.edu/~jalukar. I'm writing this post to make it easy for students and staff within Oakland University's School of Engineering & Computer Science to easily create their own websites!

You might be asking - why make your own website?

It's a great way to showcase your work to employers.
You can represent yourself in a professional way. Having a website on a .edu domain is a universally trustworthy sign.
Building/coding a website is a great way to prepare yourself for the modern workforce, especially if you are in the engineering field. You'll undoubtedly learn some HTML, CSS, JavaScript and you'll learn how to work with some network engineering tools.

Part 1: Requirements

First and foremost, you must have an Oakland University SECS account to get started. If you're new to the university, you may need to request it at this link:

https://oakland.edu/secs/technology-office/

In addition, you should have the following software utilities downloaded:

Visual Studio Code (or any text editor of your choice)
SonicWall Connect Tunnel (scroll down on this page to download)
Download a FTP Client (Cyberduck or Filezilla are great free options). I personally have had a great experience using Cyberduck.

Part 2: Building your website!

This is the fun part -- you can now build a website! You will be using HTML, CSS, and potentially some JavaScript to get your website working. If you don't know what that means:

Watch this video for an introduction to HTTP, HTML and CSS. You can fast-forward to ~30 minutes if you just want to learn how to make a website).
Reference this presentation, which I created a few years ago to teach beginners how to make websites.

If you've worked with these languages before, there are plenty of templates to get started with! If you need inspiration, check out the links below for some free starter templates (just be sure to give credit where it's due if you end up using something).

You can open up these templates in any text editor (Visual Studio Code is a great one to get started with), and customize the design/content to fit your own needs.

Part 3: Connect to the Oakland University VPN

NOTE: If you're connected to a WiFi network on campus, you can skip this step. Otherwise, assuming you're off-campus, you'll need to be connected to a VPN for this to work!

Before you use an FTP Client to put your website's code on Oakland University's server, you are required to connect to the OU VPN! The easiest route would be to use Connect Tunnel (the program mentioned above).

Simply follow the instructions here for an overview.

After selecting "add configuration," enter remote.secs.oakland.edu as the server URL
Select SECS as the login group on the next page
Enter your username and password on the next prompt

Congrats, you're connected to the VPN! If you have issues with this, double-check the spelling for everything you typed, as everything is case-sensitive. If you are still having issues, use the link on this page to reset your SECS password.

Part 4: Time to put it on the web

Now that you are connected to the Oakland University VPN, it's time to open Cyberduck (or the FTP Client you prefer). You can follow the steps below

Click "Open Connection" or the "+" button to configure a new connection
Select "SFTP (SSH File Transfer Protocol) from the dropdown
For the server, enter login.secs.oakland.edu
Enter your SECS username and password
Press "connect" or double click on the connection on the main dashboard to connect with this configuration

If you have trouble connecting, first make sure you're connected to the OU VPN or connected to a campus network. Then, double-check all of your settings. If that doesn't help, you'll need to go to the technology office for assistance.

Once you're successfully authenticated, create a folder called public_html in the directory you are in. From here, simply drag/drop or upload the HTML/CSS/JavaScript files for your website to this directory and view your website at http://secs.oakland.edu/~username.

[Optional] If you would like to connect via SSH from your terminal, you can use the steps below.

Open terminal or command prompt on your computer.
Type ssh username@login.secs.oakland.edu
Enter your password

That's it - you're connected! Now you can use git and other linux commands, and clone projects right into to your working directory.

Closing Notes

Congratulations, you now have a fully functioning website on an oakland.edu subdomain!

If you want to go further, you can upload your resume to the public_html folder (you can then link to it like this). According to documentation, the SECS web server allows you to add PHP, Perl, and Python files and also connect with a MySQL database.

Have fun coding!

Note: If you have a suggestion for how to improve this article, or if you were confused anywhere, shoot me a message. My goal is to make this as beginner-friendly as possible!

5 things to know when starting out with React

Sneha Jalukar — Sat, 03 Oct 2020 18:36:57 +0000

When I started my Software Engineering Internship this past summer, I knew I wanted to work with front-end technologies - and React was one of the first things that came to my mind.

However, I didn't know where to start. With things changing very quickly in the JavaScript community it was hard to know what to do first.

After an extensive learning process, I finally began to understand the tools available to me. Now, I want to share them here so that new developers can become productive more quickly. Here are the five things you should do / know when first starting out with React!

1. Introducing JSX: HTML and JavaScript together?

From React's own documentation:

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

JSX stands for JavaScript XML. It's a syntax extension to JavaScript and it is used in React projects - meaning it is compiled into JavaScript. It may look just like a templating language at first, but it also adds all of the capabilities of JavaScript.

At a high level, JSX is actually compiled to JavaScript through a "transpiler" called Babel. JSX in a React project provides syntactic sugar for the React.createElement() function. If you use the tool at https://babeljs.io/repl, you can easily see what your JSX code is compiled into.

For example, if you use JSX in your React application you could write:

<div className="sample-class"> 
  <h1> Hello World </h1> 
</div>

The implementation of the code in raw JavaScript becomes:

React.createElement(
  "div",
  {
    className: "sample-class"
  },
  React.createElement("h1", null, " Hello World ")
);

Furthermore, when getting started with React, something important to know is that the React DOM uses the camelCase property naming convention instead of HTML attribute names.

Something that specifically confused me when starting out was the fact that the class attribute in HTML is referenced as className in JSX (because of class being a reserved word in JavaScript). JSX is closer to JavaScript than HTML - knowing all of the syntactical features within JSX will set you up for success when working more in-depth with React.

2. Immutability is a key concept

When learning JavaScript and getting in-depth into concepts in React, there is no way to get around the importance of immutability. So what is immutability? Well, it's the opposite of mutable, which means changeable / able to be modified. So, immutability in the context of development means something's value cannot be changed or modified (such as a variable or object).

For example, take the following object

const object = {
  foo: 'bar'
};
object.baz = 'qux';

In the example above, we are modifying the object by directly adding a new key value pair (baz = qux). A better approach keeping immutability in mind would be:

const object = {
  foo: 'bar'
}
const modifiedObject = {
  ...foo,
  baz: 'qux'
}

I'll point you to the Redux documentation for a more detailed overview of why Redux requires it (which is often used alongside React).

Immutability has performance benefits (due to reduced memory usage) and it causes less bugs. In contrast, mutation of variables can often go unnoticed and produce unexpected side effects. Dave Ceddia gives an in-depth overview of the importance of immutability here if you want a great starting point.

3. Props: How Data Flows In React

Without going into too much detail, the concept of props (and learning how data flows in React) is one of the most fundamental concepts you will want to learn. You can think of props like you think of attributes in HTML.

Props (short for properties) are a way to pass arguments into components. Props are passed in one direction, down into components.

For example, let a child component be written as follows:

class Navigation extends React.Component {
  render() {
    return <h2>Link to: {this.props.tile}!</h2>;
  }
}

Then, the parent component could reuse the Sidebar component as many times as needed:

class App extends React.Component {
  render() {
    return (
      <div>
      <h1>Navigation</h1>
      <Navigation tile="Home" />
      <Navigation tile="About Us" />
      <Navigation tile="Contact Us" />
      </div>
    );
  }
}

The syntax will look different in functional components, but the approach is similar. One important thing to know is that props are read-only, and components that receive props must never modify them.

This directly leads into the concept of state. While props are read-only, state comes in if you need to keep track of data that can change.

When getting started with React, you'll want to familiarize yourself with Props and State, and get comfortable with how data flows in React applications.

4. Class-based Components vs Functional Components

When I first started researching React, I was scouring through documentation, videos and articles available online. I shortly found out that in 2019, React 16.8 introduced a new feature called Hooks, in which you can use state and other React features without writing a class.

If you're just getting started with React today, It's important to understand the difference between class-based components and functional components so you aren't confused when looking at guides and documentation online.

At a general level, class-based components are the original way of using lifecycle methods and incorporating state into a React application. Functional components are "stateless", but allow for the use of "hooks" to where you can reuse stateful logic without changing the component hierarchy.

Amelia Wattenberger wrote a wonderful guide here, if you want a starting point to explore the topic more.

5. Install developer tools!

There are a few tools that are incredibly helpful to use when first starting out with React projects. Because logic is split into reusable components, the developer tools allow you to visualize the component tree within a React application (as well as props and state assigned to each component).

Also, be sure to install useful packages/extensions in your IDE/Text Editor to make it easier to work with React! If you use VSCode you can use this React Extension Pack. Other major text editors (like Atom) will have similar extensions readily available to get you started right away. The syntax highlighting feature goes a long way in making React code more readable, particularly because React is typically written in JSX.

In Conclusion

Like anything hard, getting used to the paradigms used in React takes time. I hope this helps as a starting point for those just getting started with using the library.

If you have any suggestions for how this article can be improved, feel free to reach out!