DEV Community: Aden Eilers

Choosing Technology for Solo and Team Projects

Aden Eilers — Sat, 11 May 2024 21:19:43 +0000

Modern web development offers a plethora of frameworks, libraries, and products, each catering to different project needs. However, the choice between these tools varies significantly depending on whether you're working solo or as part of a large team. Let's delve into how the selection process differs and why it's crucial to align your choices with your project's scale and priorities.

Solo Projects: Prioritizing Speed and Simplicity

When working on solo projects, speed is often paramount. Since the success of these endeavors is uncertain, rapid iteration and quick development cycles are key. Unfortunately, many developers overlook this and opt for heavyweight frameworks like Next.js and complex AWS configurations, inadvertently slowing down their progress.

For solo endeavors, simplicity reigns supreme. Vanilla HTML or lightweight solutions like Astro offer swift development experiences without sacrificing functionality. Pairing these with easily manageable databases like SQLite streamlines the entire development process. Moreover, hosting everything on a single VM, such as an EC2 instance or a budget-friendly Digital Ocean server, further expedites deployment.

Large Team Projects: Balancing Scalability and Collaboration

In contrast, large team projects necessitate a different approach. While speed remains important, scalability and collaboration take precedence. Frameworks like Next.js, React, Vue, and Angular offer robust ecosystems and extensive community support, facilitating collaboration and ensuring maintainability over the long haul.

Despite the allure of scalability, it's essential to temper expectations. The reality is that many projects, even those undertaken by large teams, may not achieve widespread success. Thus, expending excessive effort on scalability might be unwarranted. Instead, focusing on rapid development and iteration, possibly with more lightweight solutions, can better align with the project's uncertain trajectory.

Personal Experience: Learning from Past Projects

Reflecting on past experiences with Next.js for personal projects, it's evident that prioritizing scalability over development speed can backfire. Projects that took too long to build often resulted in minimal user engagement, highlighting the importance of swift iteration and adaptability, especially in solo endeavors.

In conclusion, whether you're embarking on a solo project or collaborating with a large team, the choice of web frameworks and tools should be carefully considered. Prioritize speed and simplicity for solo endeavors, opting for lightweight solutions like Vanilla HTML and Astro, while balancing scalability and collaboration for larger team projects with frameworks like React, Vue, or Angular. By aligning your choices with your project's scale and priorities, you can optimize your development workflow and increase the chances of success.

What frameworks/libraries/products do you guys use for your personal projects, and do they differ from what you use at work?

Future Programming Languages

Aden Eilers — Tue, 23 May 2023 05:36:46 +0000

I have been having this random thought regarding the future of programming languages for the past week or so. This article is just me rambling about my thoughts.

A long time ago, C was considered a high-level language. At the time it was being compared to Assembly and the like. Now we have JavaScript and Python etc... which are the high-level languages of our current time.

So, what will a future high-level language be? Here is my un-informed opinion.

I think a number of high-level languages will be born out of AI. There have been small hints at this future based on some of the early uses of chat-GPT.

If you ask chat-GPT to write a program 100 times, you will likely get many different responses. One option to negate this, is to set up your own template language specific to your chat instance. I saw this in a Fireship video a while back. Essentially, you can set up a syntax similar to yaml that helps chat-GPT generate code more specific to how you want it structured. In reality this is basically a markup language not really a programming language.

Could a full-blown programming language work like this? I don't see why not. Imagine you open your text editor and start typing some code, but when you compile it, an AI model interprets it to do what you want. In this case, the compiler is just the AI model. Or maybe the AI model could run the program as you type, possibly show a real time result of your code like how many markdown editor's work.

One prediction I have heard regarding the future of AI, is a single universal AI chat model that connects to many services. This allows you to control dozens or hundreds of programs from one chat box. For instance, all the services used inside a company, or all your social media accounts being controlled by a single text terminal. When you type out your instructions, the chat model does whatever it needs to do to make your request happen in the given service.

I can imagine the power of a programming language that can precisely control 100's of services at any point. Like one line of code could do something in Salesforce, and the next line could send emails throughout the company while another generates cost reports. The ease of automation would be extraordinary.

Who knows.

Maybe the next high level programming language is just the English language? (Thought provoking way to end the article)

Leave your thoughts in the comments. I am interested to hear them.

What did this week: 5/15/22

Aden Eilers — Mon, 16 May 2022 03:39:42 +0000

Was not really sure what I wanted to write about, so I thought I would just write about a few of my thoughts I had this week.

Heroku's free tier
I just switched the front end for my Vue app myCodingStats to Vercel. It was originally hosted on Heroku. On the free tier of Heroku, if a site does not get any requests for 30 minutes, it will sleep. this results in a five second spin up time when someone goes to the site. It is definitely not ideal for the frontend of your site. I am keeping the api hosted on Heroku though. It seems fine if there is a bit of a delay when you first login, as long as you are able to get to the frontend quickly. If I was to remake the whole site, I would likely use Vercel's Edge and serverless functions for my api.

Next.js build time
I worked on my main three projects this week, one written in React, one in Vue, and another in Next. I always serve them locally using whatever command I have in package.json for 'dev'. After switching back and forth between them, I was amazed by how fast Next ran. It would take a few seconds, as opposed to a few minutes. I know that the recent version of the Next compiler was written in Rust, so I am guessing that is why it is so fast. If I was starting a new project, I would likely choose Next, for this reason and others.

I did a quick comparison of the three projects. Here was the time it took to build the project after serving them locally in 'dev' mode:

Vue: 01:36
React: 01:45
Next: 00:02

Leave a comment if you have any feedback.

Website: https://www.aden-eilers.com/
Github: https://github.com/fig781

Project showcase: Country Currency Information Search

Aden Eilers — Sun, 01 May 2022 04:54:30 +0000

View live: https://fig781.github.io/vue-country-currency-information/
GitHub Repo: https://github.com/fig781/vue-country-currency-information

I wanted to briefly show a project I made two years ago. This was the first project I built with Vue.js. It definitely helped me understand the basics of the framework. If you are just starting to learn a framework, then I recommend making a project like this. The project pretty much touches on all the basics of the framework (state, events, methods, computed properties, watchers, data fetching etc...).

The site uses the forex api from https://fcsapi.com/. They have a good free tier that works great for a simple project.

Overall, I think the project looks good. I am a big fan of the button design and the box-shadow effect on all the buttons and cards. I would definitely improve the look of the information cards if I was to do it over again. They definitely look unfinished.

Leave a comment if you have any feedback or questions.

My Site: https://www.aden-eilers.com/
GitHub: https://github.com/fig781

JavaScript arrow functions

Aden Eilers — Sun, 24 Apr 2022 23:53:44 +0000

What is an arrow function in JavaScript?
Arrow functions are an alternative way of writing functions in JavaScript. There are a few limitations compared to the traditional function that will be discussed in this article.

// Traditional function declaration
function myFunc(myParam) {
  return myParam + 1;
}

// Arrow function declaration
const myFunc = (myParam) => {
  return myParam + 1;
}

Arrow functions can often be shortened substantially.

// If there is one parameter, then you do not need to include
// the parenthesis. 
const myFunc = myParam => { return myParam + 1; }

// If the functions contents can fit on one line, then you can
// remove the 'return' keyword and '{}'. 
// In this case, the 'return' is implied.
const myFunc = myParam => myParam + 1;

It is common to use arrow functions with the built in array methods.

const arr = [1, 2, 3, 4, 5];

const arrMap = arr.map(v => v + 1);

const arrFiltered = arr.filter(v => v > 3);

arr.forEach(v => console.log(v));

The limitations of Arrow functions.

Arrow functions do not have their own binding of this. As a result, you generally will not want to use them as methods in your objects. A few more things to know:

They don't have their own binding to arguments, or super
They cannot be used as constructors within classes.
They likely will not behave as expected with the keywords call, apply and bind.

Since the arrow function does not have its own binding of this, it cannot reference other attributes or methods in objects. this in an arrow function will always reference the global scope.

const obj = {
  value: 1,
  myFunc1: function () {
    console.log(this.value, this);
  },
  myFunc2: () => {
    console.log(this.value, this);
  },
};

obj.myFunc1(); // 1, obj{...}
obj.myFunc2(); // undefined, Window{...} or the Global object

For more info, reference the MDN documentation: MDN Docs

Leave a comment if you have any questions or feedback.

Intro to Website Accessibility with CSS

Aden Eilers — Sun, 17 Apr 2022 04:14:55 +0000

What is website accessibility?
Some users on your sites will use screen readers, only use a keyboard to navigate, use screen magnification, use speech input software, or use an older version of their browser. In CSS there are a number of ways you can make your sites accessible to these users.

Focus styles
Use rem for font sizing
Browser prefixes

Focus Styles
Users who use only a keyboard to navigate will often use the Tab key to traverse websites. When Tab targeting different elements, the focus pseudo class is used to show which element is currently selected.

When I first started web development I would disable the focus outline because I thought it looked ugly, not knowing what it was really for. This is definitely a bad practice. A good alternative to disabling it, is the set your own focus behavior. This way elements that are focused will still be accessible to Tab users, and the focus outline or border will fit the color pallet of your site.

*:focus {
  outline: none;
  border: 2px dotted blue;
}

Use rem for Font Sizing
The rem value will always be equal to the root elements font-size. If the default font size is 16px, then 1rem = 16px. If the default font size is not explicitly set, then 1rem will be equal to the browser default font size.

If a user adjusts the font-size of their browser, then font-size set with rem will scale appropriately. Font sizes set with px will not be adjusted, which is bad for accessibility.

.my-class {
  font-size: 1.5rem; 
  /*default font-size = 16px, so 1.5rem = 24px*/
}

Browser Prefixes
Not all CSS properties are available for all browsers. For example, the property text-align-last is not supported in any version of Safari. A good site for checking the availability of CSS properties on browsers is https://caniuse.com/.

You can use browser prefixes in your CSS to make these newer CSS features compatible with older browsers. Here are the four most common ones:

-moz- for Firefox
-webkit- for Android, Safari and Chrome
-o- for Opera
-ms- for Internet Explorer

.my-class {
  -moz-text-align-last: right;
  -webkit-text-align-last: right;
  -o-text-align-last: right;
  -ms-text-align-last: right;
  text-align-last: right;
}

You can also use an autoprefixer package to make this process easier.

This article covered a few of the main ways to make your site more accessible with CSS, but this article only scratches the surface. A resource I recommend is the Web Content Accessibility Guidelines (WCAG) https://www.w3.org/TR/WCAG22/

Leave a comment if you have any feedback or questions.

A good way to practice HTML and CSS for a technical interview

Aden Eilers — Mon, 11 Apr 2022 02:52:15 +0000

I recently had a technical front end interview. I did not do as well on the CSS portion of the interview as I had hoped. As a result, I have been practicing my CSS skills over the last week. I found a site called https://www.frontendmentor.io/ that has been a great practice tool.

If you are just getting started with frontend web developer, or are practicing for an interview, then I highly recommend this site.

I have been going through the newbie and junior challenges. I am able to get this done in an hour or two, similar to the length of an interview.

There are often different ways to do the same thing in CSS, so I found that re-doing the challenges in different ways is a good way to learn. For example, do a challenge with display flex, then re-do it with display grid.

Here were a few I did recently

Project showcase: Learnfluent

Aden Eilers — Mon, 04 Apr 2022 03:28:43 +0000

This was the first real web project I ever built. I thought it would be cool to show it off.

This is a Chrome extension I created a few years ago. It is designed to help people learn a new language. Each day you are given a new word from the language of your choice. Currently French, Spanish, German and Russian are the language options. There are 30 words total and one is shown each day.

More info on how to get started on Chrome extension development: https://developer.chrome.com/docs/extensions/mv3/getstarted/
Link to source code: https://github.com/fig781/chromeExtensionWordADay
Link to download: https://chrome.google.com/webstore/detail/learnfluent/diffhlcafbihhmocdaknniaddfjefigh

Website accessibility with HTML

Aden Eilers — Sat, 26 Mar 2022 23:52:04 +0000

What is website accessibility?
Some users on your sites will use screen readers, only use a keyboard to navigate, use screen magnification or use speech input software. In HTML there are a number of ways you can make your sites accessible to these users.

Website language
Semantic HTML
Proper HMTL headings
Image alt attribute
Aria labels

Website Language
In your HTML document you can declare the language used on the web page. This will be used by browsers and search engines. You can specify the language of the HTML document, and the language of individual elements.

<!DOCTYPE html>
<html lang="en">
<body>
  <p lang="fr">Ce paragraphe est défini en français.</p>
</body>
</html>

Semantic HTML
Semantic HTML is the use of HTML tags to convey the meaning of the information on the page rather than simply presenting it. A few tags that demonstrate this are <h1>, <button>, <article>, <footer> and <header> to name a few. This is important for screen readers, or users who only use a keyboard to navigate the site.

<!-- Bad example -->
<div>
  <div>Header</div>
  <div>Click Here</div>
  <span>Article information</span>
</div>

<!-- Good example -->
<section>
  <h1>Header</h1>
  <button>Click Here</button>
  <article>Article information</article>
</section>

Proper HTML headers
Screen readers use header tags to navigate the site. These header tags are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. These header tags are used to show the relationships between different sections.

Image alt attribute
The alt text is displayed if the image cannot be displayed. The text should describe the image if the image contacts information. You can leave the alt text blank if the image is for decoration and does not contain information. If the image is used for a link, then the alt text should explain where the link goes.

<img src="profilePic.png" alt="User profile image">
<a href="https://twitter.com">
  <img src="twitterIcon.png" alt="Link to Twitter">
</a>
<img src="background.png" alt="">

Aria labels
The aria-label attribute is used to provide meaning to HTML elements where that meaning is missing. For example, usually a button will have meaning based on the text in-between the button tags, but in some cases this is not done. The aria-label is intended for interactive elements only.

<button aria-label="Close">
  <svg></svg>
</button>

Here is some more info about accessibility in HTML: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

Leave a comment if you have any feedback or questions.

Linked List in JavaScript

Aden Eilers — Mon, 21 Mar 2022 00:16:00 +0000

What is a Linked List?
A linked list data structure involves a series of Nodes linked together. Each Node will have a data value and a reference to the next Node in the list. In the last Node, the reference will be set to null. Linked lists are not commonly used in front end web development, but they are still very popular for interview coding problems.

Here is a simple implementation of a Linked List

class Node {
  constructor(data, next = null) {
    this.data = data;
    this.next = next;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
  }

  // Inserts a Node into the Linked List
  insertFirst(data) {
    this.head = new Node(data, this.head);
  }

  // Returns the number of nodes
  size() {
    let node = this.head;
    let count = 0;

    while (node) {
      count++;
      node = node.next;
    }

    return count;
  }

  // Returns the first Node
  getFirst() {
    return this.head;
  }

  // Returns the last Node
  getLast() {
    if (!this.head.next) {
      return null;
    }
    let node = this.head;
    while (node) {
      if (!node.next) {
        return node;
      }
      node = node.next;
    }
  }

  // Removes all Nodes from the Linked List
  clear() {
    this.head = null;
  }

  // Removes the first Node from the Linked List
  removeFirst() {
    if (this.head) {
      this.head = this.head.next;
    }
  }
}

Here it is in use:

let list = new LinkedList();
list.insertFirst(1);
list.insertFirst(2);
list.insertFirst(3);
// list = {
//   head: {
//     data: 3,
//     next: {
//       data: 2,
//       next: {
//         data: 1,
//         next: null
//       }
//     }
//   }
// }

list.getFirst() // { data: 3, next:... }
list.getLast() // { data: 1, next: null }
list.size() // 3
list.removeFirst() // { head: { data: 2, next:... }}
list.clear() // { head: null }

You will notice that a Linked List in JavaScript is simply a series of nested objects. The list will always start with a head, and the last node reference will be null.

If you are preparing for coding interviews, here are a few coding challenges involving Linked Lists

Leave a comment if you have any questions or feedback.

JavaScript var, let and const

Aden Eilers — Sun, 13 Mar 2022 15:52:45 +0000

What do the key words var, let and const do?
These key words are used to declare variables in JavaScript.

var firstName = 'Bob';
let lastName = 'Bobson';
const age = 20;

Both let and var can have their values changed after declaration and can be initialized without a value. Variables declared with const cannot change, and a value must be assigned when the variable is declared.

var firstName = 'Bob';
let lastName = 'Bobson';
const age = 20;

firstName = 'John'; // Runs without issue 
lastName = 'Smith'; // Runs without issue
age = 80; // Causes TypeError: Assignment to constant variable.

// Variables declared without assigning a value

let firstName; //Runs without issue
var lastName; // Runs without issue
const age; // Causes SyntaxError: Missing initializer in const declaration

A few things to note about const

If the variable is an Object, the object attribute values can be changed and additional attributes can also be added. The variable cannot be reassigned.
If the variable is an Array, the values in the array can change, but the variable cannot be reassigned.
You will sometimes see const variables written in all caps const PORT = 8080. This is a stylistic choice.

// Objects
const obj = {
  firstName: 'Bob',
};

obj.firstName = 'John'; // Runs without issue
obj.lastName = 'Bobson'; // Runs without issue
delete obj.firstName; // Runs without issue
obj = {}; // Causes TypeError: Assignment to constant variable.

// Arrays
const arr = [1, 2, 3];
arr.push(4); // Runs without issue
arr = []; // Causes TypeError: Assignment to constant variable.

Understanding scope
There are three types of scope in JavaScript. The scope of a variable determines which other parts of the program can access it.

Function Scope
Block Scope
Global Scope

Function Scope
Variables declared within a function will have functional scope. Whether you declare a variable as either var, let or const, it will only be accessible within the function it was declared in.

// Function Scope
function doSomething() {
  var firstName = 'Bob';
  let lastName = 'Bobson';
  const age = 20;
}
doSomething();

console.log(firstName);
console.log(lastName);
console.log(age);

// The three variables are not accessible outside of 
// the function so they cause a ReferenceError

Block Scope
You can create block scope by wrapping your code in {}. Both let and const are not accessible outside of the block they were defined in. On the other hand, var is accessible outside of the block it is defined in.

// Block Scope
{
  var firstName = 'Bob';
  let lastName = 'Bobson';
  const age = 20;
}

console.log(firstName); // Will run
console.log(lastName); // Causes ReferenceError: lastName is not defined
console.log(age); // Causes ReferenceError: age is not defined

Block Scoping can also be seen in for-loops.

for (var x = 0; x < 10; x++) {
  console.log(x);
}

console.log(x);
// Runs without issues

for (let x = 0; x < 10; x++) {
  console.log(x);
}

console.log(x);
// Causes ReferenceError: x is not defined

Global Scope
These are variables declared outside of the functional scope and block scope. They can be accessed globally in the JavaScript program. It is advisable to declare a limited number of variables like this. Having many global variables in a JavaScript program can often lead to unforeseen bugs as the program becomes more complex.

var firstName = 'Bob';
let lastName = 'Bobson';
const age = 20;

// Function Scope
function doSomething() {
  console.log(firstName);
  console.log(lastName);
  console.log(age);
}
doSomething();

// Block Scope
{
  console.log(firstName);
  console.log(lastName);
  console.log(age);
}

// Prints the variables without any errors

Key Takeaways

Do not use var, use let and const instead. Since var is not block scoping, it can lead to unforeseen bugs in your program.
Use const when you know the value will not change. Use let when the value will change

More info can be found on the MDN docs:

Leave a comment if you have any questions or feedback.

Spread Operator in JavaScript (...)

Aden Eilers — Mon, 07 Mar 2022 01:14:05 +0000

What is the Spread Operator?
This syntax is used to succinctly pass multiple values from either an Array or Object to an expression where elements are expected. Examples are the best way to show this.

Arrays

Combining arrays

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combinedArr = [...arr1, ...arr2];
//  combinedArr = [1, 2, 3, 4, 5, 6]

let arr1 = [1, 2, 3];
let arr2 = [4, ...arr1, 5, 6];
//  arr2 = [4, 1, 2, 3, 5, 6]

Copying an array

let arr = [1, 2, 3];
let arrCopy = [...arr];
//  arrCoppy = [1, 2, 3]
//  changing arr will not effect arrCopy

Objects
Merge Objects

let obj1 = { id: 1, name: 'Aden' };
let obj2 = { birthday: '2022-02-04', hairColor: 'Brown' };
let combinedObj = { ...obj1, ...obj2 };
//  combinedObj = { id: 1, name: 'Aden', birthday: '2022-02-04', hairColor: 'Brown' }

Note: Merging objects with like attributes may not behave the way you expect

let obj1 = { id: 1, name: 'Aden' };
let obj2 = { id: 2, name: 'Bob' };
let combinedObj = { ...obj1, ...obj2 };
//  combinedObj = { id: 2, name: 'Bob' }

A Common use case in React

import { useState } from "react";

const App = () => {
  const [input, setInput] = useState("");
  const [list, setList] = useState([]);

  const addButtonClick = () => {
    // We use the spread operator to add 
    // an item to the end of the array
    setList((list) => [...list, input]);
  };

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => {
          setInput(e.target.value);
        }}
      />
      <button onClick={addButtonClick}>Add</button>
      <ul>
        {list.map((item) => {
          return <li key={Math.random()}>{item}</li>;
        })}
      </ul>
    </div>
  );
};

export default App;

More information about the spread syntax can be found in the MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Leave comment if you have any questions or feedback.