Forem: Marc West

Ruby on Rails

Marc West — Mon, 10 Feb 2020 08:42:21 +0000

Ruby is an object-oriented, coding language first released in 1995 by Yukiro Matsumoto. It was specially designed with a focus on productivity and simplicity. Some of its major selling points are that Ruby does not take long to learn, and it is open source so it can be modified according to the user’s specific needs. Although it was largely developed on Linux, it functions across all platforms, including Mac OS and Windows.

Built on the Ruby programming language, Ruby on Rails is a web framework that comes with everything you need to complete a website project out of the box - including the ability to manage logic and routing and handle applications. These useful tools also include database integration and controllers which makes it easier to integrate web development from front to back.

To get started with a rails application, you first need to install Ruby and Rails. After a lot of searching I came across this article which seemed to have all the steps I needed to get them running on Linux Mint 19.3. Once installed you can run the command rails new [app name] to generate a new application with all the files needed to get started including the Gemfile. The Gemfile is much like Node.js' package.json, and similarly it also has an install command which needs to be run, bundle install, to download dependencies. After that enter in rails s or rails server to run the built-in development server and you will be greeted in localhost:3000

A controller handles communication between models and views. It makes the model data available to the view so it can display that data to the user, and it saves or updates user data to the model. A controller is a Ruby class which inherits from ApplicationController and has methods just like any other class. When your application receives a request, the routing will determine which controller and action to run, then Rails creates an instance of that controller and runs the method with the same name as the action. To create a controller enter rails generate controller [ControllerName]. This will generate a controller file, helper file, and view folder for your controller as well as a few other helpful files like stylesheets. Functions in Ruby are declared with def followed by the function name and closed off with end. This function will determine what data is relayed to the about.html.erb page.

The information on the view is dynamically bound to the variables @title and @content

<h1><%= @title %></h1>
<p><%= @content %></p>

about.html.erb

To produce the about route go to routes.rb inside the config file. In there we need to make a get request to get the pages controller at the about view. That can be achieved with this syntax get 'about' => 'pages#about', as: 'about'

The final product will look like this

To create a model you can run rails g [Model]. This will create a model and also a migration file located in db/migrate. Run the migration file by entering rake db:migrate in the cli. The migrate file will be the template, in this example a post, of what will be saved to the database by the model.

React Native Modals

Marc West — Mon, 03 Feb 2020 14:17:30 +0000

When you first start making a React Native application, you naturally set out to create components and pages like you would in a regular React.JS app. This will work for a while when you're making and testing your components, but what about when you need those components to interact with or display on top of a screen or another component? Can you just place those components inside JSX elements and render them like in React.JS? Unfortunately, the answer is no. You have to do a little bit more to get the elements to interact the way you want them to in native applications. That's where modals come in. The Modal component is a basic way to present content above an enclosing view. There's a couple of different options when it comes to modals, but I went with react-native-modals when designing my application. In order to use the Modal component you will need to install the package -
npm install --save react-native-modals OR yarn add react-native-modals

So the only thing you really need to do to turn a normal component into a modal is to make it to where that component can be toggled in and out of view. For my first attempt at this I took the difficult path and built the entire modal into the component I wanted it to render on top of. This proved to be difficult, but not impossible. Because I was unfamiliar with the technology and not sure it would actually work, I imported the Modal tag in and began to fiddle around with it inside the component. This took several hours of trial and error; trying to shift the Modal tags up and down and screwing around with CSS until it finally resembled a working screen. The end result code-wise is kind of ugly to look at and takes up too many lines

I don't recommend doing this. It's overly complicated, especially when using the modal for the first time, and it kind of flies in the face of modular component structure. The good news however is that it does work.

My second approach to this problem was initiated much like the first. I wanted to jump in as quickly as possible and make something work because of an unreasonable deadline, which led to me trying to do the simplest thing I could think of: just stick my already built component that I wanted to be a modal in the screen I wanted it to display on wrapped in some Modal tags. Genius. This idea worked pretty much instantly, and I was able to get it to behave the way I wanted with much less tinkering than my previous exploit. To toggle the modal off I simply placed the toggle switch in the Modal tag's onBackButtonPress method, and it is toggled on by pressing the card title in the top level component.

The resulting modal looks and behaves exactly how I wanted it.

Basically what I learned is that you can make any component display and behave as a modal simply by encapsulating the code, or a previously constructed component, inside Modal tags. You can make this as complicated as you want, but the main takeaway is to stick to the basics of React. Keep your code modular and separated, and it will be easier to implement scary new technologies.

Making a Map for Your Native App

Marc West — Thu, 30 Jan 2020 08:28:48 +0000

Making a React Native app turned out to be much more difficult than I originally thought it would be, so I figured I would share some of what I learned and try to save you from some of the hellish nightmares I experienced when working with these poorly documented technologies. Unfortunately, almost every mobile app needs a map feature because these danged millennials nowadays don't know where anything is located anymore. Back in my day we used a real map or printed out directions from Map Quest, or we just got lost. And we were grateful dag-nabbit! Anyway, enough nonsense, let's get started.

First you're going to want to install Expo. Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, and deploy on iOS and Android. If Expo really makes building a mobile app easier I seriously do not want to know what the more difficult option is like. Go ahead and install Expo globally and init a new project.
# Install the command line tools npm install --global expo-cli

# Create a new project expo init my-map-app

Now you're probably going to need to install Watchman also. Watchman exists to watch files and record when they change. That sounds important, even though I'm not really sure what it means. Expo recommends using it if you're running on iOS, but I was running on Android and still had to download it, so just get it. The cli commands are as follows -
$ cd ~ $ git clone https://github.com/facebook/watchman.git $ cd watchman/ $ git checkout v4.9.0 $ sudo apt-get install -y autoconf automake build-essential python-dev $ sudo apt-get install libtool $ ./autogen.sh $ ./configure $ make $ sudo make install $ watchman --version

Almost started. Fantastic. Open up your new app in your favorite code editor, and let's get that map in there. From the cli run npm install react-native-maps --save-exact or yarn add react-native-maps -E if you're into that kind of thing. You now have everything you need to get a map on a phone screen. Sweet. This next step is kind of iffy, because who really knows if we need all this stuff? I don't, Expo doesn't, React sure doesn't - or at least they're not telling us. So wing it we shall! Follow my lead and import all this stuff -

You'll probably want your map app to know where you are, and for that it will need your permission to get your location. Luckily, Expo actually documents how to do that here (https://docs.expo.io/versions/latest/sdk/permissions/).
But who wants to read docs??? Here's the code -

BTW this example takes place solely in App.js, so don't be bouncing around all confused about where to put stuff. You'll only need to keep track of location and loading for this app, so just two simple useState() calls will do it for you -

And you also need a couple functions to handle loading and errors -

Alright let's wrap this up. Expo has a handy-dandy component called AppLoading that hides away the rest of the app while it loads the needed resources with startAsync, and after the resources have loaded it can perform a function with onFinish to get the app started. You'll want to pass the previously mentioned getLocationAsync to onFinish here, and use the location to set your state. It'll look like this -

Once you have the location you can render your map. You need to put the MapView component inside a ScrollView component and possibly inside a SafeAreaView component. It's an inexact science to say the least, but that's what I had to do.

If you can't get the location to come out right, don't worry, it's not you, React Native Maps hates everyone equally. Just mess around with it for a while and eventually you'll get what you need. The object that initialRegion is looking for is built like this -

So there you have it. A mobile app map. There's a lot of other stuff you can do with your map, but you'll obviously want to look elsewhere for advice. I'm currently trying to render a scrollable list of messages over mine, so if you have any good ideas let me know.

Intro to Redux in React

Marc West — Mon, 20 Jan 2020 05:50:16 +0000

Redux is a JavaScript library used to manage the state of an application. It is very popular and is commonly used in React applications, although it can also be used with other libraries such as AngularJS, Vue.js, Polymer, Ember, Backbone.js and Meteor. Redux maintains the state of an entire application in a single immutable state object that cannot be changed directly. When something in the application changes, a new state object is created using actions and reducers. I will be discussing some of the basics of Redux here.

Store

Redux believes in maintaining a 'single source of truth'. That means that there is only one place in the application where all of the state is stored. Conveniently, in Redux this is called the Store. The Store, like almost everything in JavaScript, is an object, and this special object comes with some helper methods in order to register event listeners, dispatch actions, and access the state in addition to holding the state tree of the application. In order to create a Redux Store you need to call createStore() and pass it the reducer, the [preloadedState], and the [enhancer].

Arguments

reducer (Function): A reducing function that returns the next state tree, given the current state tree and an action to handle.

preloadedState (any): The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced reducer with combineReducers, this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your reducer can understand.

enhancer (Function): The store enhancer. You may optionally specify it to enhance the store with third-party capabilities such as middleware, time travel, persistence, etc. The only store enhancer that ships with Redux is applyMiddleware().

Returns

(Store): An object that holds the complete state of your app. The only way to change its state is by dispatching actions. You may also subscribe to the changes to its state to update the UI.
from redux.js.org

Actions

Actions are objects that describe changes that happened in the application. Actions are the only way to send data to the Redux Store, which means that all data collected from user interface events, network callbacks, or other sources must be dispatched as actions. Actions have to have a type field which specifies which action is to be performed by the reducer. The actions do not actually change the state, they just send information to the reducer.

Reducers

Reducers are functions that accept an accumulation and a value and return a new accumulation. They are used to boil a collection down to a single value. Reducers are common in computer programming, and most of us have used the built in versions already, such as Array.prototype.reduce() in JavaScript (which should not be ripped off of the Array prototype to reduce a string). In Redux, the collection being reduced to a single value is the state, and the values being accumulated are the actions. Reducers take the previous state value and the action being dispatched to it and return a new state for the application.

If your application has more than one reducer they can be combined with the aptly named combineReducers() helper function into what is conventionally called the rootReducer. combineReducers() merges all of the reducers in the app into one root reducer. Every reducer is responsible for its own part of the app state, and the state parameter is different for every reducer. This makes it much easier to understand and follow where code is coming from and to maintain file structure.

Building a Pokedex with Next.js

Marc West — Mon, 13 Jan 2020 05:29:53 +0000

Next.js is a React framework for JavaScript created by Zeit which allows you to build server-side rendered single-page web applications. We're going to be using Next.js to create a Pokedex application. All you need to get started making an application with Next.js is npm version 5.2 or higher, and you can simply run the create next app command in the cli, passing the name of your app as the second parameter.

npx create-next-app pokedex

You should see this message Installing react, react-dom, and next using npm..., and then a success message. Your newly created app now has everything necessary to start. Entering npm run dev in the console will get your development page up and running on http://localhost:3000/, and upon visiting the site you will see this Next.js welcome screen -

Back inside your code editor, you will see a pages folder that was automatically generated for you when the application was created. This is where the top-level React components will be. Inside this folder is the index.js file, which is currently being rendered on localhost:3000. For our Pokedex application we won't need anything below the closing </Head> tag, nor will we need to import the Nav component. It should now look like this -

Now, to get our pokemon we'll be using the pokemon api found here - https://pokeapi.co/. Next.js has a unique lifecycle hook, getInitialProps that allows us to access route related data such as request and response and use that data in our app as props. Like all lifecycle hooks, we just need to tell it what we need it to do; in this case, catch us some pokemon! Start by importing axios and then below the Home functional component in index.js craft your getInitialProps method to reach out to the pokemon api and give you back all 964 of the critters. You can now pass the retrieved data to the Home component as props and, using regular JavaScript, map the captured pokemon to your site.

Resulting in -

--missing section--
Sweet! Next you're going to want to display the individual pokemon and their information on their own page. Inside the pages folder, create a new folder named pokemon. In your new pokemon folder, make a file called [number].js. This odd looking naming convention is unique to Next.js. It signifies to Next.js that you will be creating dynamic routes for each of your pokemon. Craft your getInitialProps here with query being passed as the parameter. The query will contain the number in the url for the corresponding pokemon you wish to display. You can then use that number to make your axios call to the pokeapi for the specific critter you need and display their data. I've chosen to display the name, default image, and shiny image for each pokemon.

Almost done! Back in index.js there's just a few changes to make to tie it all together. Once again import Link, this time to link us to the pokemon pages. Add a <Link href={/pokemon/${i + 1}}> tag to the return statement inside your map function which renders the pokemon list. This will tie the corresponding pokemon to the query in [number].js.

That's it! Now head to your browser to catch some pokemon. Clicking on a pokemon will dynamically route you to that pokemon's page and show you their details.

I hope you enjoyed building a Pokedex using Next.js, and if you really liked your app, they also make it very easy to deploy at zeit.co. With a few simple steps you can have your Pokedex on the web for free.

tl/dr https://pokedex.marcdwest.now.sh/

mongoDB or SQL?

Marc West — Mon, 16 Dec 2019 05:16:07 +0000

MongoDB is a popular cross-platform NoSQL document-based database that was released in 2010. Maybe you are wondering if mongoDB is the right database for your current project, and the answer to that is simple: it depends.

MongoDB is great at doing some things and not so great at doing others. Deciding whether you should use mongoDB or an SQL database is something you should do early in the planning stages of a project. Choosing the wrong option can have damning ramifications for your project and produce catastrophic results. So, when should you use mongoDB?

MongoDB's strengths lie in its versatility. Unlike SQL databases, with mongoDB data is stored in collections of JSON-like BSON objects called documents. This means that it allows you to create and use databases without having to map-out and design a rigid schema. MongoDB is a great choice if you have heterogeneous data because the document system allows for adding unique information to a single document. Additionally mongoDB can store complex datatypes within a document allowing for nested objects and arrays. However, versatility isn't mongoDB's only strength.

If Node is your forte, mongoDB may be easy for you to pick up. It is frequently used in Node applications because of its familiarity and compatibility with JavaScript. Plus, the native query language for mongoDB is designed to emulate JavaScript. This means if you know JavaScript, then you already know how to query a mongoDB database. MongoDB also offers a cloud database, mongoDB Atlas, to make managing your data even easier. But for all its positives, mongoDB still leaves room for SQL in modern applications.

Let's take a look at how you might store some data in mongoDB vs an SQL database.

SQL

mongoDB

{
  "_id": "5cf0029caff5056591b0ce7d",
  "firstname": "Grap",
  "lastname": "Pina",
  "contact": {
    "email": “grap@banas.com",
    "phone1": "5045554727",
    "phone2": "5045557462",
  },
  “dept": ["mgmt", "sales"]
}

Now we'll check out some example queries.

SQL

INSERT INTO users (username, password, email) VALUES (‘Grap’, ‘mamagrapmaidnname’, ‘grap@banas.com’)

mongoDB

db.users.insert({
    username: 'Grap'
    password: 'mamagrapmaidnname',
    email: 'grap@banas.com'
})

While mongoDB can technically handle foreign keys, SQL is still king when it comes to highly-correlated data. If your database could be expressed well in a giant Excel spreadsheet, you should consider SQL over mongoDB. The atomic nature of data in an SQL database, that is - each cell of data contains exactly one item (a string, a number, etc), indexing data in SQL databases allows for fine-grain sorting that can't be achieved with complex datatypes in the mix. Lastly, in a broad sense, SQL queries tend to be slower on small data sets, but when your records number in the millions, SQL will blow mongoDB out of the water.

So where does that leave us? Well, although it isn't a total replacement for relational databases, mongoDB may be a better option for some projects. Consider using mongoDB if you need a more flexible, schema-less solution for working with unstructured data, but if you need to perform multi-row transactions on highly-structured data sets, you're probably better off sticking to SQL. Figure out which one is best for you before committing.

Callbacks and Promises

Marc West — Mon, 09 Dec 2019 05:07:54 +0000

In synchronous programming, all operations happen in a sequence with each operation firing after the result of the previous one is obtained. When a function is called that performs a long-running action, the rest of the program has to stop and wait for it to return before continuing. This can be highly problematic in JavaScript because we are frequently dealing with user-interfaces and servers. User inputs and server requests are unpredictable, and we need our programs to continue to perform operations while waiting on their results. Because JavaScript is single-threaded and synchronous by default, we have to use a few special tools if we want to perform these asynchronous tasks. Two of these tools are async callbacks and promises.

Callbacks

The original way of dealing with this dilemma is with asynchronous callbacks. A callback is basically a function passed as an argument to another function to be executed upon the completion of an asynchronous operation. These callback functions can either be defined functions or anonymous functions created on the fly, but typically they need to be able to either handle an error, passed in as their first argument, or pass on their collected data or result.

In this example we are passing the callback function as the last parameter in getStatusCode, and then we define it anonymously on the next line passing it err and the expected data to be retrieved as data. After request.get completes the resulting data or error will be handled by our callback function.

This all seems pretty clean and simple, and it can be, but because we have to handle both the result and error possibilities in all of our callbacks, things can get pretty messy when dealing with nested callbacks. If you're not careful you could have something that looks like this 'callback hell' pattern -

fs.readdir(source, function (err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function (filename, fileIndex) {
      console.log(filename)
      gm(source + filename).size(function (err, values) {
        if (err) {
          console.log('Error identifying file size: ' + err)
        } else {
          console.log(filename + ' : ' + values)
          aspect = (values.width / values.height)
          widths.forEach(function (width, widthIndex) {
            height = Math.round(width / aspect)
            console.log('resizing ' + filename + 'to ' + height + 'x' + height)
            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function (err) {
              if (err) console.log('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})

Promises

Introduced in 2015 with ES6, promises offer us a cleaner and more efficient way of handling asynchronous code than their predecessor the callback. A promise is an object that contains a callback function carrying both resolve and reject outcomes. This allows us to use the promises' provided methods .then() and .catch() to handle what happens upon success or failure rather than having to pass in a callback function.

Here we construct getFiles to return a new promise. If there is an error, the promise will reject. If there is no error the promise resolves, and we are given a promise object with .then() and .catch() methods. Now when we call createFile, because it returns a promise, we no longer pass it a callback. Instead we can chain on .then() and .catch() to perform the respective success or fail responses. It may not seem like much on this small scale, but this allows us to chain on many .then() calls followed by a single .catch() rather than falling into a nested callback pattern.

Inheritance and Subclassing

Marc West — Mon, 02 Dec 2019 07:40:24 +0000

In programming, inheritance is the process by which an object or class receives methods and properties from another object or class. There are many different ways of accomplishing this across both classical object-oriented programming and JavaScript, but the purpose is basically the same: to give us the ability to reuse code to pass on properties, rather than than having to rewrite and redefine our methods whenever they are needed elsewhere. Subclassing also allows us to create specialist objects by customizing inherited properties from the object's super-class and adding new methods as well.

Classes work differently in classical object-oriented programming than they do in JavaScript, and if you're a beginner like I am, with no coding experience outside of JavaScript, it can be a little difficult to understand these differences. In languages like Ruby, Java, PHP, Python, C#, C++, and others, classes are a special data-type used to instantiate objects. In stark contrast to JavaScript, Ruby only has one way of creating new objects - by first declaring a class, and then calling the new() method on it. This newly created object will inherit most, but not all, of the class's properties. Most noticeably missing from the new object's properties is the new() method, which is reserved exclusively for classes.

In JavaScript the rules for creating objects are slightly more relaxed. Pretty much everything in JavaScript is an object, and objects can be created in many ways, including function results and methods. The simplest way to make an object is to just declare it -

All objects are instances of Object and inherit all properties and methods from the Object.prototype. Properties can be inherited via the prototype chain - as exemplified here using the Object.create() method -

Properties and methods can also be passed along in a more familiar way to classical programmers by using the new ES6 class keyword and assigning our new class a name -

Now if we want to build a more specialized object we define a new class that extends the previous class. We can then add new properties and methods to this sub-class while retaining the super-class properties. If we want, we can even alter properties to our new sub-class's needs -

JavaScript allows us to customize even more by not restricting us to extending only from the super. We can also simply extend a sub-class of another super-class and inherit the properties of both -

Although this it similar to creating classes in object-oriented languages, it is really just another way that JavaScript allows us to create objects and pass along methods and properties that will need to be repeated in your code. Unlike in other languages, JavaScript is not restricted to using only this method to produce objects, this gives it more flexibility to make specific changes to code without having to completely rewrite it, which allows us to save space and also reduce time spent searching for bugs in our code.

An Intro to jQuery

Marc West — Mon, 25 Nov 2019 14:15:16 +0000

jQuery is a lightweight, "write less, do more" JavaScript library. Released in 2006, it's purpose is to offer you a much easier way to traverse and manipulate the HTML DOM, or Document Object Model, handle events and CSS, and simplify AJAX calls. jQuery replaces a lot of common JavaScript functions that require many lines of code to run with simple methods that can be called with a single line.

First, in order to use jQuery you need to bring it in to your web page. This can be accomplished by either downloading a local copy or by using the content delivery network (CDN). Downloading is usually recommended for larger projects and production while accessing jQuery with a CDN is a simple way to use it in smaller projects. Either way you choose, make sure to include a link to it in the HTML file using the <script> element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Although it is not unique to jQuery, the dollar sign $ is one of its most recognizable features. Indicating the following code is going to be jQuery,it is essentially another variable for jQuery, and is used to distinguish it from regular JavaScript.

// bling example
$(function() {
  $( "p" ).text( "Bling!" );
});

// jQ example
jQuery(function() {
  jQuery( "p" ).text( "Same thing!" );
});

After calling jQuery with the dollar sign $, you pass it the DOM element you wish to access and then the method you want to perform, i.e., $("selector").action(). There are different ways to access different elements on the DOM:

$("tags") - nothing precedes tag name
$(".class") - class name is preceded by dot
$("#id") - id name is preceded by pound symbol / hashtag

There are tons of different methods you can perform with jQuery, but I'll go over just a few of the most commonly used.

text() - The result of the .text() method is a string containing the combined text of all matched elements. $("h3").text() will return a string of all text in h3 tags.
prop() - Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element. $("#button1").prop("disabled", true); will disable the button's functionality
addClass() - Adds the specified class(es) to each element in the set of matched elements. $("#button2").addClass("btn-primary"); will add the class of btn-primary to the elements with the button2 id.
css.() - Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element. $("button").css("color", "red"); will change the text color of all button tags red.

jQuery also gives you to simplified method to make AJAX (Asynchronous JavaScript And XML) requests. AJAX requests allow you to load and manipulate remote data on your website. jQuery lets you specify authentication details, request parameters, and the data type you want back in calls to the server. These calls are chained to success or fail callbacks which you use to handle the data you are sending or receiving.

$.ajax({
  type: "POST",             // specify type of request
  url: "/players/submit",   // url location
  data: {
    name: "Drew",           // data you wish to send the server
    team: "New Orleans"
  }
})
  .then(function(msg) {     // success callback
    alert("Data Saved: " + msg);
  })
  .catch(function(xmlHttpRequest, statusText, errorThrown) {    // error callback
    alert(
      "Your form submission failed.\n\n" +
        "XML Http Request: " +
        JSON.stringify(xmlHttpRequest) +
        ",\nStatus Text: " +
        statusText +
        ",\nError Thrown: " +
        errorThrown
    );
  });

These are just a few of the jQuery methods you can use to affect your code and make your page more dynamic, and as you can see they are quite simple to implement. This makes jQuery a great tool for JavaScript beginners especially. Overly-complicated JavaScript functions get replaced by easy to learn one-line methods, allowing you to write simpler, cleaner, easier to read code. If you are a JavaScript beginner, like myself, jQuery is a great tool for you to learn to help you build your programming skills.

AngularJS Factory Vs Service Vs Provider

Marc West — Mon, 19 Aug 2019 05:42:50 +0000

AngularJS is a JavaScript based framework used to design single-page component-based web apps. For beginners, such as myself, it can be a little confusing as to what logic and data should be put in the controller, or what service should be used instead. Typically controllers should not be full of persistent because they are instantiated only when needed and then discarded. That just leaves the many service methods you have to choose from.

Factories

Factories are the most frequently used method for registering a service. The reason for that being that they are easier to write and use, and your business logic and other data is never exposed to the rest of the app. The factory method takes two parameters: the string you want to name the factory, and the factory function which will declare and return the object. Any properties attached to the new object will then be available to other parts of the app through a controller. Because the service is wrapped in an instance of an object, the internal logic and data remains unexposed.

Service

Very similar to the factory is the service. The main difference between the two is that the service method uses a constructor function to register the service. Services are instantiated in AngularJS with the 'new' keyword, which means properties are added using the 'this' keyword, and the service constructor returns 'this'. When passed through to the controller, the properties on 'this' will be available in that part of your app, but, because of this all of the internal logic of a given service is exposed to the rest of the app.

Providers

Providers also do basically the same thing, but with a little more work involved and a few bonus features. Providers are the only service that can be passed directly into the .config() function. This allows alterations to be made to portions of the service before it is made available to the rest of the app. Also the only properties on the provider that will be available to the controller will be the ones assigned to this.$get. This allows the programmer to keep internal logic hidden or exposed as they see fit.

This is just a brief rundown of a few service methods available to you in AgularJS, and there's obviously a lot more detail involved, but this should help clear up some of the uses. You will probably want to use a factory most of the time, use a service for simpler logic, and use a provider when you need more customization options.

Big O Notation

Marc West — Mon, 12 Aug 2019 02:56:00 +0000

Time complexity in computer science is the amount of time it takes for a machine to process an algorithm. Specifically we are interested in how processing time grows in relation to input size. Because processing time can differ for varying inputs of the same size, time complexity notation is factored considering a worst-case scenario. Since this can involve some very complicated mathematical computations, we use Big O notation as a shorthand for various levels of time complexity. Let's take a look at some of the common types of complexity we expect to see in programming, from best to worse performance.

Constant Time O(1)

Constant Time means that no matter what the input size, the time it takes for the algorithm to run will remain the same. A familiar example of a constant time algorithm is looking up a value in an array at a known index.

Logarithmic Time O(log n)

Logarithmic Time means that as the size of your input grows, the processing time grows, but at an ever-reducing rate. A good example of this is a binary search tree. The reason for this being that the search field is reduced by half at every search cycle.

Linear Time O(n)

Linear Time means that as the input size increases, the processing time increases at a consistent rate. Common occurrences of linear time algorithms would be any function that may potentially have to loop over the entire input. Many higher-order functions such as map, filter, and forEach are examples of linear time algorithms.

Quadratic Time O(n^2)

Quadratic Time is when processing time increases at a rate which itself increases multiplicatively. Common examples of this are nesting a loop within a loop. Put in simpler terms, as input increases in size, processing time increases by the size of the input raised to some power.

Exponential Time O(c^n)

Exponential Time algorithms are when processing time increases exponentially as the size of the input grows. One common example of this is brute-force cracking of a password. This means that as input size grows, processing time increases by some constant raised to the power of the size of the input.

There are many other types of time complexity that we won't discuss here, but understanding these few examples is crucial in developing performant algorithms in your programs. We should all strive to improve the time complexity of our applications.

Object.create()

Marc West — Mon, 05 Aug 2019 05:31:29 +0000

The Object.create() Method

Object.create is a newer method in JavaScript that can be a more simple and efficient way for you to create objects. Although there are many ways to accomplish making new objects and assigning them properties, the Object.create method is unique because it lets you bypass making a constructor function by allowing you to set any existing object as the prototype for a new object.

This method takes two parameters: the first being the object being used as the prototype, and the second an optional properties object which is used to set specific properties on the new object. When the new object is returned it will have all the properties of its prototype plus its own properties, either given through the properties object or added later with dot or bracket notation.

in conclusion, Object.create is a quick and easy way to create new objects. With the seemingly endless ways to make new objects, Object.create simplifies the process. Even with its awkward optional second parameter, it is an easy way for programmers, especially newcomers like myself, to create new objects and keep track of their inheritance.