DEV Community: noelle

Framework vs Library

noelle — Mon, 15 Nov 2021 04:53:16 +0000

test

Webpack vs Babel

noelle — Mon, 08 Nov 2021 04:35:28 +0000

What is the difference between Babel and Webpack?

Webpack is a modular build tool that has two sets of functionality — Loaders and Plugins. Loaders transform the source code of a module. babel-loader transpiles JS code given the presets. Plugins are the core of Webpack. They can do things that loaders can’t. Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environment. Basically, Babel makes JS code easier for humans to read and write.

Tail Call Recursion

noelle — Mon, 01 Nov 2021 03:52:04 +0000

What is tail call recursion/optimization?
Tail Call Optimization is related to a specific type of optimization that can occur with function calls. According to Kyle Simpson, a tail call is a function call that appears at the tail of another function, such that after the call finishes, there’s nothing left to do.

Tail code optimization takes a recursive function and generate an iterative function using “goto” internally, and then execute it. It does not limit the stack calls because there are none and the function is not a recursive function more. The performance of this iterative function is equivalent to its recursive function.

In other words, tail call optimization means that it is possible to call a function from another function without growing the call stack. This is useful for large code bases.

Acronym

noelle — Sat, 23 Oct 2021 03:58:39 +0000

As I continue to blog, I will come back and edit this post with short description and additional acronyms.

Programming

HTTP - HyperText Transport Protocol
URL - Uniform Resource Locator
XML - eXtensible Markup Language
IDE - Integrated Development Environment
CLI - Command Line Interface
AJAX - Asyn Javascript And XML
HTML - HyperText Markup Language
JSON - JavaScript Object Notation
CSS - Cascading Style Sheet
SQL - Structured Query Language
ECMAScript(ES) - European Computer Manufactures Association Script
ASCII - American Standard Code for Information Interchange
REGEX - Regular Expression
API - Application Programming Interface
OAuth - Open Authentication
SDK - Software Development Kit
NPM - Node Package Manager
TDD - Test-Driven Design

Conventions / Patterns / Techniques

CRUD - Create, Read, Update, Delete
REST - Representational State Transfer
OOP - Object Oriented Programming
MVC - Model Views Controller
BEM - Block Element Modifier - naming convention for CSS classes.
CMS - Content Management System
ORM - Object Relational Mapping
DRY - Don't Repeat Yourself

Visual Learning Resources

noelle — Mon, 18 Oct 2021 03:58:35 +0000

Visual Explanations

Lydia Hallie

Lydia's notes are one of my favorite resources to for ... Lydia does an excellent job of explaining JS under the hood with the aid of gifs.

Code Analogies Blog

Visual explanations of JavaScript, HTML, CSS & other web concepts concepts. Writter ___ takes real world systems and relates them to a variety of complex programming --. He uses custom drawings and gifs to further illustrate his anologies making his blog easy to understand and almost conversational.

Better Explained

Better Explained gives in-depth and straightforward explanations for complex computer science and mathematics topics. The blog focuses on the "why's" instead of the "what's" and shows an intuitive side to math.

Visual Git Reference

This page gives brief, visual reference for the common commands in git.

Flexbox Flowchart/Infograph

A comprehensive visual guide to CSS Flexbox. This complete guide explains everything about Flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).

Tools

Keycode

Keycode is app that does one thing: displays Javascript Event Keycodes when you press the corresponding key on the keyboard. It's niche, but the clean layout and simple design makes the app great for visual learners

Factor Calculator

Let's you enter a number and the calculator will output a factor tree.

VisuAlgo

![Visualgo image]
Visualize algorithms and data structures through animation.

Javascript Equality Table

Google Web Font Typography Project

Scroll through and see Google fonts paired together and decide which looks best for your project.

RegExr: Learn, Build & Test Regex

A Regular expression tester with syntax highlighting, contextual help, cheat sheet, reference, and searchable community patterns.

Bonus Tools

Focus Mate

Book a time slot for a virtual study buddy.

Coffitivity

Coffitivity recreates the ambient sounds of a cafe to boost your creativity and help you work better.

Cheatography

A collection of cheatsheets & quick references. Intuitive design and great layouts for creating your own notes.

Issue Tracker

noelle — Fri, 15 Oct 2021 15:02:56 +0000

For my final project, I'm making an issue tracking app with a Rails API backend and React and Redux frontend. Out of everything we've learned at Flatiron thus far, React has been my favorite. I love the simplicity, scalability, and that at the end of the day, it's really just javascript.

My issue/bug tracking project is unique because while I'm building out the app, I'm using it to track the bugs I'm encountering in the my project. No need for a seed file this time!

In my app, a user can create a bug and update its status to be 'In Progress' or 'Done'. The component will change color depending on the action state its in. I added a stateless component to the bottom of the items-list container that acts as a legend to clue the user in to what the color changes mean. In the navigation bar, I also have stateless components that act as routes to navigate the user around the app.

I really like this project because it's something that I can use every time I code, and will be able to continue building out and improving on naturally as my issue/bug tracking needs grow.

List App

noelle — Fri, 15 Oct 2021 15:02:32 +0000

My Javascript project was a simple list app that allows a user to create and delete lists and add in tasks. This was an app I'd been wanting to make for awhile and was glad I finally got a chance to do so with this project.

After working with Rails so much in the last project, it was very easy to set up the backend and I spent the bulk of the project working with the frontend and navigating the dom. It took me awhile to decide on a file structure and I ended up doing a lot of testing a long the way. One thing that really helped me was finding a simple way to clean up my test data and start fresh with my original seeds. Up until you build out an apps delete functionality, the database can get messy with test data.

I used the following simple code to fix this problem:

Add 'ModelName.delete_all' to your 'db/seeds.rb' file for every model's data that you want to gone.

My seeds file looked like this:

--> db/seeds.rb

List.delete_all
Item.delete_all

// seeds data goes on the lines below

Then run the following code in the terminal

--> terminal
rake db:seed

That's it! The database was just completely cleared of all data and then repopulated with seed data. Having this command handy was a really helped me during this project because I could test and debug in browser without having to build out delete right away.

Kombucha Thoughts

noelle — Fri, 15 Oct 2021 15:01:43 +0000

For my Rails project I made a web app for kombucha drinkers to keep track of what they've drank, review and rate their drink experience, and then be able to view what other users think of the kombuchas as well.

When I started this project, Rails felt like a blur. I understood the parts of the program individually, but didn't fully understand how it all fit together. So I took it slow and tried to really understand what was happening behind the "magic".

I choose not to use the popular Authentication Gem Devise in an effort to better understand the Login/Signup/Logout process and application of dreaded OmniAuth. Much to my surprise, it turns out OmniAuth isn't very complicated, but just very specific. Specific to the provider (ie. Github, Google, Facebook, etc.) and specific to the exact code/formatting you need to use. For example, I ran into a bug in my .env file where I accidentally added a space between CLIENT_ID and CLIENT_SECRET and it completely haulted my progress for hours.

In my project, I added Google and Github OmniAuth functionality. The implementation of OmniAuth is just more of what we've already been doing - sifting through a hash for specific key/value pairs which we assign to variables, and if all validations pass, we'll set the user's id to be the session id and log the user in.

Here is how I got to the OmniAuth users hash:

Explore the OmniAuth hash by placing a byebug in SessionsController#omniauth

SessionsController

def omniauth
byebug
end

Dont forget to add byebug to your Gemfile if it is not already there


 # Gemfile

gem 'byebug'


<br>
2) Once I hit the `byebug` I accessed the OmniAuth request via the `request` keyword (similar what we'd think of as `params`).  I referenced omniauth  by calling on the `.env` part of the request. So the full command to get to the user hash looks like this:
<br>
<br>

pp request.env['omniauth.auth]


<br>
_^^ TIP: `pp` stands for "pretty print" and it will format the hash so it's "human readable"_

<br>
<br>
3) I then added that code to my `SessionsController` in a `private` method so I could easily access my user hash. 
<br>

private 

def auth
    request.env['omniauth.auth']
end

Tab Less

noelle — Fri, 15 Oct 2021 15:00:36 +0000

For my Sinatra Project I created the app Tab Less. The goal of this app is to have a temporary place to put open browser tabs, thus allowing me to clear my cache, shut down my browser/computer, and free up memory. I don’t know about you, but I use browser Bookmarks specifically for webpages I've already read, vetted, and plan to reference later in life. This leaves a gap in my system - where do I save potential Bookmarks, before I have a chance to read and vet them? I need some sort of "pre-bookmark", a "bookmark limbo", an interim tab location. Tab Less is my first step toward solving this problem.

A running theme I'm finding with my projects is that the setup is the most tedious and time consuming part. At this stage in my journey to code, I don't know what I don’t know. I spent a lot of time researching project file structure, what each part does, and why certain chunks of code are necessary. This was really important to me. In the real world, there are no "labs to pass" or the "learn submit'" command to streamline pushing to Github - we have to be able to set up and finish tasks on our own and from scratch. After I had a good understanding of the project set up on my own, I opted to use the gem Corneal to scaffold my files. Corneal was great and gave me a solid foundation to build my project on.
This was my first time using the Flash gem and it was a huge help for communicating errors to the user. I also found a quick simple way to validate user form submissions by adding the required keyword in the `` tag.

/views/login.erb

<input type="email" name="email" id="email" required>

The keyword required prevents the user from submitting a form unless the required field is filled out. This error is communicated to the user by adding a red border to the form field and the text "Please fill out this field". Simple, elegant and efficient.

I'm happy with the way my Sinatra project turned out and am excited to take things to the next level with Rails.

Why Software Development

noelle — Fri, 15 Oct 2021 14:58:44 +0000

Do you remember those personality/career tests administered to students back in high school and college? One of my consistently “recommended professions" was software engineering. At the time, I didn't think much of it. Art always came naturally to me so I just assumed that was were I belonged. I end up starting a business and through that experience I discovered a layer of strengths and passions I didn’t realize I had.

I love nothing more than analyzing and solving a complex problem that has no obvious solution, as well as the challenge of creating a systems that highlights efficiency. Curiosity is the driving force in my life and the desire to get to the root of how and why things work. Software development is endlessly fascinating and moving at such a rapid pace that there is no shortage of knowledge to gobble up.

I looked into coding over the years, but always thought I'd have to go back to get a four year degree. The structure of bootcamps solved this problem and well, the rest is history!

CLI Project

noelle — Fri, 15 Oct 2021 14:56:32 +0000

Working through this my first programming project was tough in the beginning, but once I got rolling it was pretty fun and great practice.

The beginning was tough for two reasons. First, I found it hard to decide on a topic that met the project requirement, had a beginner friendly API, and was something that I am actually interested in. I just kept mentally twirling in indecision. The good news is, the more I learn the easier this step will be because I'll better understand my capabilities, the scope of the challenge, and well, APIs. Second, I found it challenging to figure out how to set up my files, environment, dependencies, etc. To connect the dots I watched some Flatiron videos, Googled around, and took very detailed notes to try and understand how and why these pieces were necessary for the puzzle.

I really enjoyed implementing my methods and writing the logic of the program. This is where I had the most fun, felt comfortable, and got into a good flow. All in all, I learned a lot & am excited to tackle Sinatra.