DEV Community: davidrpolk

From JavaScript to C#/.NET Pt.1

davidrpolk — Fri, 08 Nov 2019 18:54:37 +0000

Let's Learn Some C#!

In this series I'll talk about what it's like to learn C#/.NET coming from a JavaScript background. My first focus in software engineering was JavaScript! Recently I've been expanding my skills and have ventured into learning C# and the .NET framework. So as I make my journey through .NET and C#, let's talk about similarities and differences between C# and JavaScript.

What is .NET?

In order to understand what exactly we're dealing with here, it's helpful to understand what the .NET framework is and what it's used for. .NET is a software framework developed by Microsoft. It was originally intended to be proprietary for development of software for the Windows platform, although early on, they changed course in favor of a community/open-source style development environment(today in the form of .NET Core/ASP.NET). For developing .NET applications, the 2002 version of their Visual Studio started compiling code into a Common Intermediate Language, instead of into machine code. Before this version of Visual Studio, IDEs(Integrated Development Environments) compiled to machine code. What that means is that languages had to be compiled into machine code that was specific to whatever computer you were developing applications for.

Example:
If you were to write an application for computer with processor X, you would have to write it differently in order to write the same application for processor Y and so forth..

By using a Common Intermediate Language, it's possible to write the application once and then compile it to the intermediate language, then have each platform compile that to its platform specific machine code. Thanks to this feature and the standardization of the Command Language Infrastructure(the specification for converting intermediate language to machine code), .NET is no longer solely for developing applications for the Windows platform. Developers can also develop for Mac OS and Linux systems as well mobile and web applications. Woot! Interoperability!
.NET also supports programming in multiple languages such as C#, VB.NET, C++, J#, F# and more.

C#?

No, it's not a musical note. It's a programming language! Most importantly, it's an object/component-oriented(class-based) and strongly typed language. I say these are important because it's where you will notice the most difference when comparing C# to JavaScript. While JavaScript is object-oriented, it isn't class-based and isn't strongly typed, unless you consider TypeScript.

Class-Based

In a class-based language like C#, *everything* is part of a class. Would you like to create a function to do literally anything? You have to put it on a class. Would you like to declare a variable for a simple value? It goes on a class. Would you like write something to the console?....you guessed it...**goes on a class**. Coming from JS, this took a little getting used to, but it's not such a big change once you do it a few times. Here's an example of a simple program that writes to the console. Ignore the parts that don't make sense yet, as I'll cover them as the series goes on!

Example:

using System;

namespace hello_C_
{
    class Program
    {
        static void Main()
        {
            Console.WriteLine("Hello C#!");
        }
    }
}

You may immediately notice a few foreign keywords: "using", "namespace", "static", "void". If you've used TypeScript(which is actually a great transition from JS to C#), some of these might already be familiar.

In the next part the series, I'll go into these keywords and more as we continue exploring C#!

do
{
Coding();
} while (Life.Length > 0)

Markdown part 2

davidrpolk — Mon, 21 Oct 2019 03:17:02 +0000

This is a continuation of my first blog about Markdown! If you don't know what Markdown is, or what it is used for, please checkout the first part in this series.

---------------Links--------------

Where would blogs be without using links? Let's take a look at making links:

Markdown:

[This is an inline-link!!!](https://dev.to/)

![this would be alt text for an image link](https://babykittenpicturelink.net)

HTML:

<a href="https://dev.to/">This is an inline-link!!!</a>

<img src="https://babykittenpicturelink.net" alt="this would be alt text for an image link">

Output:
This is an inline-link!!!

You can also create reference text for links. This could be useful for using the same link in multiple places. You could even use different clickable text for each instance.! The reference text is not case-sensitive and it can be used with images as well as links.

Markdown:

[This is the text you would click on][ReFeRenCe]

[reference]: https://www.mozilla.org

Output:
This is the text you would click on

--------------Blockquotes--------------

A tasteful way to use a quote is by using Blockquotes(although you could really use them for anything). They can really another layer of depth to a post.

Markdown:

>I am meaningful text from another source. I'm adding legitimacy to this article.

HTML:

<blockquote cite="https://someurl.url">I am meaningful text from another source. I'm adding legitimacy to this article.<blockquote>

Output:

I am meaningful text from another source. I'm adding legitimacy to this article.

You can even use paragraphs and nest Blockquotes within a Blockquote.

Markdown:

>I am a quote.
>
>I am taking up more space because I have a lot to say.!

>It's me quote again.
>>..and also me, a quote in a quote!!

Output:

I am quote.

I am taking up more space because I have a lot to say.!

It's me quote again.

..and also me, a quote in a quote!!

If you want to add any other Markdown style inside of your Blockquote, you totally can!

Markdown:

> #### A Header Inside of a Blockquote!
>
> - Now I'm making a list.
> - Even more list.
>
>  *I'm* super stoked about **Markdown**.

Output:

A Header Inside of a Blockquote!

Now I'm making a list.

Even more list.

I'm super stoked about Markdown.

There's more you can do with Markdown, but that's all I'll cover in this article. Next time you write a blog, try out some Markdown!!!

while (life.left.length > 0) {
life.do = coding();
}

Markdown

davidrpolk — Mon, 21 Oct 2019 01:22:30 +0000

If you've ever written a blog here on dev.to or on another platform that is geared toward posting text, you have probably used Markdown in one way or another. Markdown was released in 2004(15 years ago!!!). It was developed by John Gruber. It is a light-weight markup language used for things like posting text on discussion forums(or blogs like this one) and creating readme files in repositories. The output of Markdown is equivalent to what simple HTML can do. So, if you are familiar with HTML, it'll be easy to get used to using Markdown, since it is basically just shorthand for HTML. Taking a little time to learn the syntax is totally worth it to add some style to your blogs and forum posts. !

Let's Write Some Code

Since there's an HTML way to do what Markdown does, I'll provide the HTML version of all examples, for clarity. It's worth noting that in a Markdown article you can also write HTML tags.

---------------Headers---------------

If you want to create a Header using Markdown it's as simple as adding '#' in front of the text that you want to be the header

#This is an h1 Header

<h1>This is an h1 Header</h1>

Output:

This is an h1 Header

You can add additional '#'s in order to get all 6 different header sizes.

##This is an h2 Header

###This is an h3 Header

####This is an h4 Header

#####This is an h5 Header

######This is an h6 Header

<h2>This is an h2 Header</h2>

<h3>This is an h3 Header</h3>

<h4>This is an h4 Header</h4>

<h5>This is an h5 Header</h5>

<h6>This is an h6 Header</h6>

Output:

This is an h2 Header

This is an h3 Header

This is an h4 Header

This is an h5 Header

This is an h6 Header

--------------Emphasis---------------

Adding emphasis to your text is just as easy as creating headers!

*italics* or _italics_ **bold** or __bold__ ~~strike-through~~

<i>italics</i> <b>bold</b> <s>strike-through</s>

Output:
italics or italics bold or bold ~~strike-through~~

---------------Lists-----------------

You can easily create lists also:

1. Ordered Item List

2. Another item*Unordered List+Unordered List-Unordered List`

<ol> <li>Ordered Item List</li> <li>Another Item</li> </ol> <ul> <li>Unordered List</li> ... </ul>

Output:

Ordered Item List
Another item

Unordered List
Unordered List
Unordered List

With that bit we've got a great start on adding some styling to our posts. A little bit of style can go a long way, so please check out the second part of this series here.

while (life.left.length > 0) {
life.do = coding();
}

TypeScript: What, Why and How

davidrpolk — Mon, 14 Oct 2019 05:09:57 +0000

Typescript is Just JavaScript right?

TypeScript is a relatively new addition to the software development landscape. Released by Microsoft in 2012 as an extension to their Visual Studio, it has grown to enjoy a large community of users. Yes, TypeScript is in fact a superset of JavaScript. TypeScript is even designed to compile down to ES5 JavaScript(it also supports compiling to earlier ES versions). If you are familiar with JavaScript, you'll only need to know a few things to understand what is going on in TS code. Keep that in mind if you feel put off or intimidated by starting to use TypeScript. Transitioning to TS from JS is as simple as I will outline in this article.

Why Use TypeScript?

The development of TS started in order to address JavaScript's shortcomings when used to create large-scale applications. JS was not initially created to do many of the things that it has grown into doing. If you had told developers in the 90s that it would one day do something like run a server, you would have likely received some very strange looks. But, the diversity of uses for JS continues to grow. To deal with this growing complexity, Microsoft decided to incorporate some useful features from other languages like the C family, Java, Pascal, etc.

Type Annotation

The most important and useful of these features are centered around being able to declare the 'types' of variables and also of function return values. What this means is that upon variable or function creation, you can make a further declaration about what kind of data that variable or return value is supposed to be. This is called type annotation and allows for important features like static type checking.

Variable Type Annotation:

const aNumber: number = 1;
const anotherNumber: number = 2;
const aString: string = 'yay TypeScript';
const anotherString: string = 'is great.';

console.log(aNumber + anotherNumber);//logs 3
console.log(aString + ' ' + anotherString);//logs 'yay TypeScript is great.'

In order to annotate a variable, you make the declaration as you would in plain JS and then add a colon ':' after the variable name followed by the type that variable will be bound to. Types can be basic JS data-types such as 'string', 'number', 'boolean', or even 'null' and 'undefined'. The type 'object' can also be used, but be careful because TypeScript uses JavaScript's definition of objects, so 'null' and arrays will also be counted as 'object'. Arrays can be annotated using 'Array<T>', where 'T' can be any type. For example 'Array<number>', would be an array of numbers. There is also an alternative syntax for making an array annotation. You can make a type annotation and follow it with square brackets like 'string[]', which would be an array of strings.

As well as variable type annotation, TS also supports type annotation for the return value of functions.

Function Return Type Annotation:

function someFunc(num1: number, num2: number): number {
  return num1 + num2;
}

Just like annotating other types, a function's return value can be annotated with a colon. This is achieved by adding the colon after the closing parenthesis of the function's parameter list. An important type for function returns is the 'void' type. Assigning a function's return type to 'void' declares that the function does not return a value. A simple example of this would be a function whose only action is calling a 'console.log()' on a value.

function logValue(logMe): void {
    console.log(logme);
}

Once annotations are made, any variable or return that has a value other than what was annotated will throw an error at compile time. Here is where the value of TS starts to become apparent. Imagine writing a large application in plain JavaScript. There are hundreds of .js files in your repository. Unfortunately, an unforeseen bug has made its way into your code and now you have to find it..... It's not a situation that any developer would envy! A valuable tool for avoiding such a situation is TS throwing type errors at compile time. In other words, with thorough type annotations it becomes much more difficult to write 'bad' code.

Interfaces

An extension of type annotation is the ability to create Interfaces. An Interface is basically an object with annotated properties. By defining not only the types of an object's properties, but also the names of those properties, a developer can be quite specific about what objects are supposed to be. In this example, we define a simple interface in our function's definition:

function getName(objWithName: { name: string }): string {
return objWithName.name;
}

By defining the interface in this way, the function can only take in objects with a 'name' property that are type annotated as 'string' and the function must return a string. An Interface created in this way can take in an object with any number and type of properties as long as there is at least one 'name' property that has a 'string' type value. Interfaces can also be declared using the 'Interface' keyword and annotating the Interface's properties.

interface Location = {
  latitude: number;
  longitude: number;
}

function locationToString(coordinates: Location): string {
return `${coordinates.latitude},${coordinates.longitude}`;
}

Here we are creating an Interface that defines an object that has latitude and longitude properties that are both numbers. Assigning the parameter 'coordinates' to the type 'Location' requires that the 'locationToString' function take in an object that contains the 'latitude' and 'longitude' properties and that both properties are numbers. The return value has also been annotated to be a 'string' type. The ability to define Interfaces as a type allows for very specific definitions of objects. Because Interfaces are used for defining objects, they can be used for defining anything that JavaScript considers an object. Specifically, Interfaces can be used to define functions and arrays as well as object literals.!

As you can see, the more details we add about the types of variables, properties and return values, the more strict our code becomes about what can be done with it. This idea is the core concept behind TypeScript. It's all about using specificity to help reduce errors.

Type Inference

Another useful feature of TS is its ability to 'figure out' the most likely type for the return values of functions. Basically it works something like this: If a function takes in two parameters that are both type annotated as 'number', and the function does arithmetic operations to those numbers, TypeScript will make a guess at the return value being a number. This feature can allow a lot of code to be statically verified with only fewer annotations.

Linting

Another powerful aspect of developing with TypeScript is the way it can be used with a linter. Linters are extremely helpful software development tools that go through your code and point out errors(as you are coding!). The format for what constitutes an error can be configured, so that you can define the style and depth of your linter. The @typescript-eslint/parser package, for example will give type errors as you type them! On top of that, TypeScript files that are open in Visual Studio also give you amazing features like showing function definitions on mouseover and if available, even displaying documentation! Example:

TypeScript is a powerful addition to the JavaScript family. The features I've covered here are only a fraction of everything that TypeScript has to offer. The usefulness of it is apparent and its incorporation into large projects, like libraries and frameworks(Angular and RxJS to name a few), makes it a 'must learn' for any serious JavaScript software developer. Thankfully, the time it takes to learn TS in order to incorporate it into your code is very short.!

Oh and did I mention?...TypeScript is open-source. :D

Asynchronicity in JavaScript, a Short History

davidrpolk — Mon, 07 Oct 2019 13:39:22 +0000

Asynchronous City!

If you work in web development, I'm sure you've dealt(probably with plenty growing pains) with asynchronous actions. Adding time as an element of coding adds to an already complex task. There's no point in lamenting it though, because asynchronous behavior is absolutely vital to any modern web(especially) app. There was a time, though that this wasn't the case! Let's take a look at where we were and where we are now.

Back in the day...

Early in the internet days, when browsers were first becoming widespread, most web pages were served as complete HTML pages. Every time a user performed an action, a completely new page was rendered according to the user's input. Even if only one piece of information on a page changed, an entire 'new' page had to be sent from server to client. This led to the same information being sent over and over. Yikes...Fortunately for us, that didn't last.

Early Asynchronicity

In '96, Microsoft introduced the iframe tag in Internet Explorer(yeah, the browser we all love so much). It could load or fetch data asynchronously. A few years later, their Outlook Web Access team conceptualized a scripting object that contained methods responsible for asynchronously transferring data between web browsers and web servers. The Outlook Web Access team's idea came to fruition as part of the second version of the MSXML(Microsoft XML Core Services)library in the form of XMLHttp(Extensible Markup Language HyperText Transfer Protocol). The MSXML library shipped with Internet Explorer in '99.

XMLHttpRequest(XMR)

Shortly after Microsoft's efforts to create XMLHttp, Mozilla created a JavaScript wrapper for Microsoft's XMLHttp interface. This wrapper(XMR object) as a JavaScript object later became the defacto standard in all major web clients. It become so ubiquitous that the World Wide Web Consortium(W3C) published a Working Draft specification for the XHR object in 2006. The standardization that came along with this led to cross-browser JavaScript libraries that allowed developers to use the XHR object indirectly and more succinctly. The most popular of these libraries was(is) jQuery. According to builtwith.com, jQuery is used on more websites than any other JavaScript library(by far).

jQuery and further asynch development

jQuery and libraries like it made asynchronous web development more accessible and because of that, it became more common. One drawback in this time period, though, was the manner in which responses from asynch requests were dealt with. In order to handle action after action, many callbacks would have to be nested inside of each other, possibly creating what is affectionately referred to as callback hell. Of course APIs were written to deal with this, but as a part of ECMAscript 2015, a newer, more efficient approach became native to JavaScript:

Promises

Promises are a modern way to deal with asynchronous actions in a clear and concise manner, and since they are native to JavaScript, they are widely available in cross-browser support! If you are unfamiliar with Promises, they are definitely worth incorporating into your knowledge base.

while (life.left.length > 0) {
life.do = coding();
}

Common Abbreviations You'll Encounter When Developing Software

davidrpolk — Mon, 30 Sep 2019 12:47:05 +0000

So Many Abbreviations!

Whether you are communicating or reading about tech, you will inevitably come across abbreviations that you may or may not recognize. Abbreviations can be fun and helpful for specificity or to cut down on communication time. So, here's a list and some brief explanations of what each abbreviation stands for.

The List, Alphabetically

AJAX - Asynchronous JavaScript and XML

This dev tech was created to make asynchronous web applications possible. Thanks to AJAX, a client can make requests and run other processes before(or while) receiving a response.

API - Application Program Interface

An interface for simplifying client/server communications. The idea is that a request formatted a certain way will receive a response formatted to fit the request.

ASCII - American Standard Code for Information Interchange

A standard for character encoding for electronic communication. Most modern character encoding is based on this.

bash - Bourne Again Shell

Most widely used CLI shell.

bin - Binary

.bin or /bin(especially in UNIX-like file paths) just means binary!

BIOS - Basic Input Output System

Firmware for starting up hardware for booting. A newer version of BIOS is:

UEFI - Unified Extensible Firmware Interface

Serves the same purpose as BIOS.

bit - Binary Digit

Abbreviated as 'b'. This is your 1 or 0.

byte - By Eight

A group of eight bits.

CAPTCHA - Completely Automated Public Turing Test to tell Computers and Humans Apart

Yes, these are those annoying little tests that many web apps make you pass, in hopes of weeding out any malicious automated users.

CDN - Content Delivery Network

A group of servers that host the same information but in different locations, to minimize users' access time.

CLI - Command Line Interface

Interface that utilizes text commands.

CRUD - Create, Read, Update and Delete

The four basic operations of persistent data storage.

CS - Computer Science

The science of all things to make computers do what they do.

DBMS - Database Management System

The software used to manage databases. Examples would be MySQL, PostgreSQL, MongoDB, etc..

DOM - Document Object Model

A language independent interface that creates a tree structure out of HTML/XML documents. Each tree node/object represents a part of the document. It's how the web happens!

ECMA - European Computer Manufacturers Association

A standards organization for information and communication systems. ECMAScript is the scripting-language specification on which JavaScript(among others) is based. Currently their official name is "Ecma", not "ECMA".

EOD - End of Day

Usually a reference point for finishing work.

FIFO/LIFO - First In First Out/Last In First Out

Commonly used when describing certain data structures(queues, stacks, etc..)

FS - File System

How an operating system organizes its files.

GNU - GNU's Not Unix

Recursive acronym for an operating system and collection of software that are open-source. GNU led to the bash and Linux.

HDD - Hard Disk Drive

A form of persistent memory that is a disk that spins in order to perform CRUD operations.

HTML - Hypertext Markup Language

The main document type for creating web pages.

HTTP(s)—Hypertext Transfer Protocol (Secure)

The foundation for communication on the world wide web. The secure version encrypts data before it is sent.

IDE - Integrated Development Environment

Software used for developing software.

IoT - Internet of Things

A system of interrelated devices that can transfer data without human input. Example: a smart appliance that sends and receives information without user input.

IP - Internet Protocol

The principal communications protocol for relaying data around the world via networks

ISP - Internet Service Provider

The entity responsible for giving you a pathway to access the internet.

JSON - JavaScript Object Notation

A common data format, with a diverse range of applications, like AJAX systems. It is human-readable and is an open standard file format.

LAN - Local Area Network

A computer network that connects computers that are within a limited area, like computers in one building.

MAC - Medium Access Control

In networking, a sublayer that controls hardware responsible for transmission medium(wireless, wired, optical)

OOP - Object-Oriented Programming

Programming style based on the idea of "objects" that can contain data, in the form of fields(properties, attributes).

PaaS/Iaas/SaaS - Platform/Infrastructure/Software as a Service

Cloud based services that provide previously localized services like providing the infrastructure to build and maintain apps or access to apps themselves.

POSIX - Portable Operating System Interface

An IEEE group of standards for maintaining compatibility between operating systems.

REST - Representational State Transfer

A style of building software that defines formats for creating web services.

SASS - Syntatically Awesome Style Sheets

A stylesheet language, compiles to CSS. It's something like 'CSS+'

sbin - Superuser Binary

In UNIX/UNIX-like systems, it contains fundamental utilities such as init, usually needed to start, maintain and recover the system.

SDK - Software Development Kit

Set of dev tools to work with a particular application.

SSH - Secure Shell

A cryptographic network protocol for operating network services securely over an unsecured network.

su - SuperUser

In UNIX/UNIX-like systems, the highest level of user access.

tl;dr - Too Long; Didn't Read

This is how we all feel when we want that ONE tidbit of information but it's hidden in an unnecessarily verbose explanation.

UI - User Interface

The means by which a user interacts with a device.

UX - User Experience

A benchmark for gauging a user's overall experience of using a product.

URI - Uniform Resource Identifier

A string of characters that unambiguously identifies a particular resource.

URL - Uniform Resource Locator

AKA 'web address', is a reference to a web resource that specifies its location on a computer network and a mechanism for retrieving it.

VPN - Virtual Private Network

A simulated network whose connected members share IP addresses, thereby masking each individuals' identities.

That's all for now. I will be extending this more very soon.!

while (life.left.length > 0) {
life.do = coding();
}

UX !== UI

davidrpolk — Mon, 23 Sep 2019 05:12:34 +0000

Understanding UI and UX can drastically change the way you view front-end design. In this article, let's explore what both mean and go over some general guidelines!

UI

User Interface

The user interface is simply what a user sees and can interact with in order to accomplish tasks via an application. The buttons, input fields, clickable text/images, menus, etc., are all pieces of the user interface. If you're using a bash terminal, the interface would be text commands. Or, on Windows(or another similarly laid out OS), the interface would contain some things like menus and windows and images that represent files and folders. The interface is absolutely vital to any application because the greatest application ever designed would be useless without a way to interact with it! Consequently, the UI is worth devoting serious consideration and development time when writing an application. At some point, you've more than likely used an app with a poorly designed UI, and probably ended up feeling frustrated or disappointed, which leads us to...

UX

User Experience

The frustration that comes from using an ineffective UI is part of UX. All of the time users spend using an app ends up leaving each user with their own experience, or general take-away. In every day life, we all have our own unique experiences, even when doing things that millions(or billions) of other people do. Using an app is no different. Focusing on UX is focusing on what it feels like to use an app. Is it rewarding? Does the UI make you feel overwhelmed? Are the colors off-putting? Does that fade effect evoke an aesthetic response? Would a user enjoy using the app again? These kinds of questions are the center-piece of UX. Again, the greatest app ever created won't have many users if it is troublesome to use. The end goal here is to create apps that are valuable to users and give users a pleasant experience.

Some Guidelines

You are not the user!

Just because you enjoy a feature/layout/design element doesn't mean that everyone else will feel the same way. It's extremely difficult to know how people will interact with an app, so don't make assumptions based on your experience. This mistake is called false-consensus and it's easy to make. The only way to overcome this is by testing with a number of a different people.

Keep it simple

According to a 2015 Microsoft study the average attention span of a modern human is around 8 seconds. Overly complicated designs that have a learning curve, will negatively impact UX.

Keep the user informed

Being aware of what an app is currently doing or of interface functionality is extremely important for UX. If a page is loading, but no information is presented to convey that the page is loading, users will be left unsure of what is happening. Imagine never seeing a loading screen, or download progress bar. It would be very unsettling! Similarly, make sure that UI elements are intuitive(icons in a navigation bar for example) or labelled(like with text popups on hover). Don't leave users hanging.

That's all for now. Happy coding!

while (life.left.length > 0) {
life.do = coding();
}

Changing to a Linux Based System

davidrpolk — Mon, 16 Sep 2019 13:48:28 +0000

A Little Background

So I've been in school for programming(focusing on javascript) for about 4 months now. Until yesterday, I'd been running Windows 10 and using VSCode with WSL. Now, don't get me wrong... This setup, with the proper hardware seems like it could perform well enough to get the job done. Unfortunately for me, I came into school on a shoestring budget and have been using a cheap HP laptop to get all my work done. After the last few sprints though, I'd had enough of sitting and watching my computer spin as it tried to make out what was happening in VSCode as well as running two servers. Wasting what now seems like countless hours on this frustrating activity, I decided to make a few changes...

Upgrades

Upon first searching into switching to a Linux base, I noticed that there are a lot of options. Where to start...Eventually, based on a recommendation, I settled on the current version of Mint Xfce.

https://www.linuxmint.com/download.php

Mint provides a stable, open source OS with a ton of options. Although I did have a setback with an incorrect driver for my wireless adapter(if you have an HP laptop and make this switch, be prepared to deal with troubleshooting without a wireless adapter!), it was a pretty easy and fun installation. Mint offers three versions of their distribution(a what?..see next section), basically a "small, medium and large" of interface styling, ranging from as sleek and modern as possible(Cinnamon), to very basic and efficient(Xfce). I settled on Xfce, because it performs the best and I'm not too picky about styling.

Things to get used to

You may have come across the word 'distribution' or 'distro' when reading about Linux based systems. If you're switching from an Apple or Windows OS, it's a bit confusing, because so much of their environments are proprietary. The easiest way to understand a distro is by thinking of it as software collection made up of contributions from many different people. Because Linux distros are open-sourced, there can be as many contributors as desired by whoever is organizing/maintaining the distro. This obviously has some great advantages like having a community that not only uses a product but also creates it. Considering that open-sourced communities are not based on profit, you can safely assume that the people involved actually care about user experience.

Another aspect that took a little adjustment for me was how much control you actually have over everything. For example: The concept of being able to choose how every little thing looks is appealing to think about...but it's easy to forget how many small details actually go into create something like the view of a window. It's great to have options. Just remember that the more options you have, the more you have to know and decide upon.

Evaluation

In short, I absolutely love having switched to an Ubuntu18/Mint19 distro. The flexibility and performance FAR exceed what I was experiencing using Windows 10. Of course, making this switch is a personal choice, and it does require some effort and learning. But, the most rewarding things in life require effort and learning! Unless you are using OSX or Windows because of a particular constraint(you need certain software or your company/cohort uses a particular OS), I advise you to give a Linux distro a chance. There are over 500 current distros with active communities, and each is geared toward a very specific use. What's the worst that could happen?

while (life.left.length > 0) {
life.do = coding();
}

Intro to React Lifecycle Hooks

davidrpolk — Mon, 19 Aug 2019 03:02:30 +0000

This post is a simple introduction to the concept of lifecycle hooks in React! The focus here will be on what lifecycle hooks are and what they do. If you are already familiar with the topic, then you won't get much out of this. But, if you are a beginner, this post will help you understand what you might use lifecycle hooks for.

Lifecycle

Lifecycle simply refers to how long a React component exists in the DOM. If you're unfamiliar with the basics of React components: https://reactjs.org/docs/react-component.html
Otherwise, I'll assume you understand the basics but want to know a little bit more....

After a component is created and inserted into the DOM, if it is at some point removed, then it is destroyed. This action ends its lifecycle. So, lifecycle simply refers to the rendering, re-rendering(however many times it happens) and eventual removal and deletion of a component.

Hooks

A hook is a function/method/action that you can attach to a specific action/moment. The idea of a hook isn't unique to React. They're a concept that is widely used in coding. Basically the idea is that if something happens, you can attach some code to it. Example: If a component is rendered for the first time then do.....something().

Some Basic React Lifecycle Hooks

componentDidMount()
This hook lets you attach functionality to a component that has been mounted to the DOM. It's a good place in the lifecycle to make external requests for data that in turn update the component's state. In other words, sometimes you have components that need data that may take time to get. If the entire page is dependent on that data being loaded, everything will be paused until it happens. This hook allows you to do something like load static data and then update the component once the external data becomes available.
If you use gmail, you may be able to see something like this happening when your inbox loads. The inbox info will load, but the hangouts section in the bottom left corner will take a moment to populate...The element for hangouts exists, but it's blank, until the data has been gathered.
componentDidUpdate()
If a component is ever updated, this hook allows you to activate functions that will respond accordingly. If a components props or state changes then you can use componentDidUpdate to make changes at that moment.
componentWillUnmount()
This allows you to attach functions to a component at the time of its removal from the DOM. Suppose that a component is dependent on a background process in order to function correctly, like a clock being displayed. If that component's lifecycle ends, the process will remain running in the background. In this example, componentWillUnmount would allow you to attach code to the clock component to end the clock background process.

Conclusion

That's all for my intro to lifecycle hooks! There are more hooks that can be used to increase the functionality/efficiency of your webpage/webapp, but these are a good place to start in order to start understanding the concept.!

Objects Making Objects

davidrpolk — Mon, 12 Aug 2019 04:06:45 +0000

In this post, I'll be giving a little info on Prototypal Inheritance in JavaScript. Since it's a defining feature of the language, it's kind of important to understand. The examples given here will be kept simple, focusing more on overall concepts.

Constructor Functions

Using a Constructor is probably the most common way of taking advantage of Prototypal Inheritance. In this case, new instances of objects get created using a Constructor, which passes on its Properties to the new instance.

This example uses a pseudoclassical instantiation pattern. It's not the only way to do this same thing, but the concept is the same for functional and class instantiations.

Because of inheritance, if we tried to access a property or method that "bobject" doesn't contain, the lookup gets delegated to "bobject"'s prototype(the object that created "bobject"), in this case, the constructor function "Bob". If "Bob" didn't have the property or method we were looking for, the lookup would get delegated to "Bob"'s prototype, and so on...until the chain ended with finding what we were looking for, or with "null"(which would make the lookup fail).
This delegation has nothing to do with instantiation pattern and constructor functions aren't the only way to take advantage of inheritance.

Object Concatenation

Yes, concatenation isn't just for strings and arrays! It's possible to concatenate objects using "Object.assign()".

As you can see in this example, our newly created object, "bobCat" contains the properties and methods of the objects that created it. Unlike our other example, this one doesn't assign a "constructor"(other than the global Object) to "bobCat".

Closure

It might not seem obvious at first, but using closures is actually a form of inheritance. Since closures are created by a function that is referencing something outside of its own scope, any lookup for that reference will be delegated to the object containing the function!

In conclusion, Prototypal Inheritance is a key feature of JavaScript and should be treated accordingly!

while (life.left.length > 0) {
life.do = coding();
}

Shortcuts(Windows/VScode)

davidrpolk — Mon, 05 Aug 2019 01:29:59 +0000

If you happen to end up being on a computer for long periods writing code, there are shortcuts to accomplish what you're already doing!! By using the mouse less and the keyboard more, you can actually lower the amount of time it takes to do what you're trying to do. In this post I'll address a few extremely useful keyboard shortcuts.....

NO.1: Ways to Move Stuff

Sometimes you need to move a line of code or sentence or whatever from one place to another...most obviously this can be done by selecting the text you want with a mouse/trackpad and copying it and moving it. But...

If you want to copy something you can use Ctrl+C and you'll capture the text you've highlighted or you can use Ctrl+X to cut the text. Ctrl+P will paste any copied(Ctrl+C) or cut(Ctrl+X) text to where your cursor currently is.

Moving text is another way to accomplish a similar thing. If you highlight text and want to move it to another line you can use Ctrl+arrowUP/arrowDown. This will move your highlighted text up and down as a whole and can be useful for repositioning.(may be app specific)

Also, sometimes you need to Tab lines in order to maintain correct spacing. Multiple lines that have been selected can be indented with Tab. If you want to "UnTab" you can select lines and press Shift+Tab and your lines will be "UnTabbed".!!

NO.2: Highlighting

Mouse highlighting is the most obvious way to make a text selection. Adding the shift key to selecting with the mouse can add chunks of text to what you are selecting. Try selecting a space and holding shift and then selecting another space...all intermediate text will be selected! This can be done more than once but only works in one direction, up or down.

Without using the mouse, if you want to select words, you can use Ctrl+left/right or up/down arrows to move between words/text divisions. If you combine Shift with Ctrl, text can be selected by word/text division!

Need to select everything on the window where you're currently working? Ctrl+A to the rescue!

NO.3 Saving and Dealing with Files

It's become ubiquitous for apps to use Ctrl+S to save your work. Use it often. Don't underestimate this simple and useful shortcut.

Often it is necessary to reload webpages you are working on..this can easily be accomplished with Ctrl+R(or Ctrl+Shift+R for cache refresh) in a browser.

If you are working between multiple windows/apps(which let's face it, you are), you can easily switch between them with Ctrl+Tab. This can be much faster than reaching for the mouse and navigating through a taskbar or desktop.

Have you ever been looking for a particular bit of text or name of a function/variable/etc and been annoyed at everything you had to search through? Use Ctrl+F! This will open a find search, which will search every file/page you open for the text you specify. Open all the files you want and open a Ctrl+F search and switch between your files...You will find what you're looking for!

Want to find an app? Press the Windows button and start typing the name of an app you want to use and you'll be pointed right to it....much faster than looking for icons to click on!!!

Speaking of searching....Ctrl+P will open a file search in VS Code or DevTools. This is similar to using the Windows button, but within the app you're currently using.

NO.4 Don't forget about..

Don't forget about the console! You can access the console view in most browsers by using Ctrl+shift+J(or Ctrl+shift+I for the element inspector). If you are a developer(which I'm assuming you are), you can access the console view and do a variety of things to get information about or manipulate the page you currently have loaded.

If you need to undo your last action, of course you can use Ctrl+Z. Conversely, if you want to redo an undone action, use Ctrl+Shift+Z.

Here's a recap of everything we've covered, for easy reference:

Ctrl+C/Ctrl+X - Copy/Cut
Ctrl+P - Paste
Ctrl+arrowUp/arrowDown - move highlighted text
Tab/Shift+Tab - Indent/"Unindent" text
Ctrl+arrowKey - move the cursor by text division(usually a space)
Ctrl+Shift+arrowKey -select text by division
Ctrl+A - Select all text
Ctrl+S - Save file
Ctrl+R/Ctrl+Shift+R - Reload page/Cache reload page
Ctrl+Tab - Switch between open windows
Ctrl+F - Find text on current page
Windows button - search computer(useful for starting apps)
Ctrl+P - File search
Ctrl+Shift+J - Open the console in a browser
Ctrl+Z/Ctrl+Shift+Z - Undo/Redo

That's all for now.!

The shortcuts presented here are not complicated or advanced but are extremely useful and should be integrated into your everyday workflow.

while (life.left.length > 0) {
life.do = coding();
}