DEV Community: malik

A Beginner's Guide: Glob Patterns

malik — Fri, 08 Nov 2019 02:02:25 +0000

This post was originally posted on malikbrowne.com.

Recently, one of my coworkers was having trouble because Jest wasn't running tests on a new folder he had created.

After some investigation, it turns out that the Jest configuration glob didn't include this whole folder of tests that weren't running! (Scary!)

Understanding how globs work was essential to understanding how to fix this problem, and there isn't a ton of documentation on it other than the Linux manual. Let's change that!

In this post, we'll go over the history of globs, how to use wildcard characters, and define the three main characters of wildcard matching.

What the heck are globs?

Globs, also known as glob patterns are patterns that can expand a wildcard pattern into a list of pathnames that match the given pattern.

On the early versions of Linux, the command interpreters relied on a program that expanded these characters into unquoted arguments to a command: /etc/glob.

This command was later on provided as a library function, which is now used by tons of programs, including the shell. Several different tools and languages have adopted globs, putting their little spin on it. It's quite the extensive list:

Node.js
Go
Java
Haskell
Python
Ruby
PHP

Now that we know a little bit about the history of globs, let's get into the part that makes it useful: wildcard matching.

Wildcard Matching

A string can be considered a wildcard pattern if it contains one of the following characters: *, ?, or [.

Asterisks (*)

The most common wildcard that you'll see is the asterisk. This character is used in many ways but is mainly used to match any number of characters (like parts of a string).

The three main use cases of asterisks that I've seen used are:

* - On Linux, will match everything except slashes. On Windows, it will avoid matching backslashes as well as slashes.
** - Recursively matches zero or more directories that fall under the current directory.
*(pattern_list) - Only matches if zero or one occurrence of any pattern is included in the pattern-list above

These use cases can also be used in conjunction with each other! For example, to find all Markdown files recursively that end with .md, the pattern would be **/*.md

Note: *.md would only return the values in the current directory, which is why we append **/ at the beginning.

Question Marks (?)

The question mark wildcard is commonly used to match any single character.

For example, let's say were given a list of files:

Cat.png

Bat.png

Rat.png

car.png

list.png

mom.jpg

cat.jpg

If you wanted to find all the files that had _at in the folder, you could conveniently use a pattern like ?at which would return the following results:

Cat.png

Bat.png

Rat.png

cat.jpg

Note: A cool thing about this pattern is that it didn't care about the case of the character. I've found this useful in scripts when trying to find files that I've marked with certain dates.

Character classes and Ranges ([)

The square brackets ( [, and ] ) can be used to denote a pattern that should match a single character that is enclosed inside of the brackets. These are called character classes.

An important thing to know is that the string inside of the brackets is not allowed to be empty. This can lead to misunderstandings of weird patterns like this: [][!]

This would match the first three characters in a string that had "\[", "\]", and "!".

For example, let's continue to use the same list we used in the previous example:

Cat.png

Bat.png

Rat.png

car.png

list.png

mom.jpg

cat.jpg

If you wanted to match only the title cased files in this list, you could use the pattern [CBR]at.

This would return the result:

Cat.png

Bat.png

Rat.png

Ranges

A cool feature that is available for globs are ranges, which are denoted by two characters that are separated by a dash '-'.

For example, the pattern [A-E] would match any starting character that included ABCDE. Ranges can be used in conjunction with each other to make powerful patterns.

A common pattern that you may have seen before is the pattern to match alphanumerical strings: [A-Za-z0-9 ]

This would match the following:

[A-Z] All uppercase letters from A to Z
[a-z] All lowercase letters from a to z
[0-9] All numbers from 0 to 9

This can be used for data validation in tons of different areas since ranges work in regex expressions as well!

Complementation

A feature worth mentioning is that globs can be used in complement with special characters that can change how the pattern works. The two complement characters that I see are exclamation marks (!) and backslashes (\).

The exclamation mark can negate a pattern that it is put in front of. In the character class example I shared above, we used the pattern [CBR]at.

If we wanted to explicitly filter the results we wanted, we could negate the pattern by placing the exclamation point in front of the class [!CBR]at.

Backslashes are used to remove the special meaning of single characters '?', '*', and '[', so that they can be used in patterns.

Why are globs useful?

I've found globs extremely useful for doing a lot of scripting and automation tasks in recent months. Being able to specify certain files recursively in a directory tree is invaluable - especially when working in CI environments where you don't have control over the names of root directories.

Something important that I want to note is that while wildcard patterns are similar to regex patterns, they are not explicitly the same for two main reasons:

Globs are meant to match filenames rather than text
Not all conventions are the same between them (example: * means zero or more copies of the same thing in regex)

Conclusion

Hopefully, this overview of globs provides some transparency when looking over different configuration files in the future. I know this is something that I struggled with understanding when trying to read webpack/typescript/jest configurations, so if this is helpful to you, let me know in the comments or on Twitter!

Useful Links/Resources

http://www.globtester.com/
https://en.wikipedia.org/wiki/Glob_(programming)
https://commandbox.ortusbooks.com/usage/parameters/globbing-patterns
http://teaching.idallen.com/cst8207/15w/notes/190_glob_patterns.html
http://man7.org/linux/man-pages/man7/glob.7.html

Helpful Terminal Commands for Beginners!

malik — Wed, 05 Sep 2018 05:39:12 +0000

This cheat sheet was originally posted on malikbrowne.com.

I love learning new commands and tools to optimize my workflow on my Mac. Since I have started working with more terminal-oriented applications, there are several commands that I use that I'd love to share with beginners and terminal lovers alike.

Note: This article assumes that you're using some type of UNIX shell, with a preference towards Mac. Some of these commands may not work on Windows CMD/Powershell.

Basic Commands

Commands in a shell can be used in a ton of different ways - but I'd say that the important ones to learn fall under three main categories:

Navigating and Working with Files & Directories
Manipulating Output for Input
Finding Things

Navigating and Working with Files & Directories

On a computer, files and directories (otherwise known as folders) are responsible for managing information. Here are some commands to make your life easier when working with files:

cd - navigate to different directories
pwd - see the name of the current directory
ls - lists all files in the current directory
mkdir - make a new directory
touch - make a new file
cp - copy a file
mv - move a file or directory
rm - removes a file or directory
zip - compresses files into a zip archive
unzip extracts files from a zip archive
chmod - Allows you to make a file executable and change permissions granted to it by your machine.
- In order to make a file executable, you can type chmod +x [name of file]
tar - Allows you to work with tarballs in a Linux command line. It has a long list of uses, including package management for systems.
- tar -cvf allows you to create a .tar archive
- tar -xvf allows you to "untar" a .tar archive
- tar -tvf list the contents of a .tar archive

Honorary Mention: sudo

sudo is a very widely used command in bash interfaces that allows you to run a command with administrative or root privileges.

For example, if you edit any files in the root directory (also known with the path /) of your machine without sudo privileges, you will be denied permissions to edit the file.

For your safety, there are a couple of things your computer will not allow you to do as a sudo'd command, i.e. running bash scripts.

Manipulating Output for Input

Often times when scripting the goal you are trying to achieve is to run filters through text, check output logs from a server, or run batch commands on multiple files.

Here are some commands that can be beneficial for manipulating file output:

cat - show a file's contents
head - displays the first few lines of a file
tail - displays the last few lines of a file
- Using the -f flag with tail will allow you to see updates to the file as they are coming in. This is extremely helpful for tracking log output from servers.
| - The pipe character take a command's output and uses it for the input of another command
* - matches zero or more characters in a filename
- There is actually a whole way of matching multiple files and names via globs!
? - matches any single character in a filename
> - stores a command's output to a file, and creates a new file if one doesn't already exist
- WARNING: This will override and replace all contents that were in the original file.
>> - concatenates a command's output to a file, creates a new file if none is found

Finding things

echo - show text or the compiled text of other commands. Great for testing commands out.
grep - allows you to find results line by line using some sort of pattern or regular expression.
ack - similar to grep, but has a better code search because it knows to search in places you'd expect it to search. (ignores version control directories, etc.)

Other helpful commands I've found

pbcopy - Copy selected text into your clipboard buffer
history - Prints the command history for your session
- This is really useful with grep and the pipe symbol, which will allow you to search through your history: history | grep [part of command]
pbpaste - Paste the selected text in the terminal from your clipboard buffer
curl - Allows you to make HTTP calls RESTful endpoint
kill - Kills a running process given a process id (pid)
killall - Kills all running processes of a certain type
lsof -i tcp:[port number here] - list all running processes on a specific port
- This one is particularly useful for when you get an error like:

    Error: listen EADDRINUSE :::3005
        at Object.exports._errnoException (util.js:1023:11)
        at exports._exceptionWithHostPort (util.js:1046:20)
        at Server._listen2 (net.js:1261:14)
        at listen (net.js:1297:10)
        at Server.listen (net.js:1375:9)
        at Object.<anonymous> (/path/to/node/server/server.js:15:34)
        at Module._compile (module.js:571:32)
        at loader (/path/to/node/modules/node_modules/babel-register/lib/node.js:144:5)
        at Object.require.extensions.(anonymous function) [as .js] (/var/www/html/gcsbpo/rocc/node_modules/babel-register/lib/node.js:154:7)
        at Module.load (module.js:488:32)

It provides an easy way to find out the pid to kill the running process.

Shortcuts/Tips & Tricks

!$ expands the final argument of the previous command. Useful for chaining commands on the same file
!! - repeats the last command executed
- These are thanks to Thomas
- ![number]: Repeat command from your history (you can see the available command-history using fc -l (or fc -l 1 to see all the contents of your history)
- !! [extra stuff]: Re-execute last command, tacking on at the end of the command.
- [extra stuff]!!: Re-execute last command, tacking on [extra stuff] at the beginning of the command. Very handy for executing something as a regular user that needs to be ran with sudo
- !!:s/[SEARCH]/[REPLACE]: Re-execute last command, replacing first substring [SEARCH] with [REPLACE]
- !!:s/[SEARCH]/[REPLACE]: Re-execute last command, replacing all substring [SEARCH]es with [REPLACE]es
clear - clears all output from the terminal, old output - can still be accessed by scrolling up
CMD + k - clears all output from the session, only previously called commands are retained
CTRL + c - Aborts the current running process and closes it.
CTRL + z - Pauses (SIGSTP) any the current running process
- NOTE: CTRL + C aborts the process, but CTRL + z leaves it idling in memory.
CTRL + a - Takes you to the beginning of the bash input
CTRL + e - Takes you to the end of the bash input
CTRL + u - Clears all input before the cursor
CTRL + r - Opens a prompt that will search the previous commands from your session

Conclusion

Learning how to navigate the terminal is definitely daunting at first, but after spending some time scripting you'll find that these commands can save you tons of time on a day to day tasks that you do.

Personally, I'm starting to reach the point where I navigate faster via Terminal than when I use Finder.

If you have any commands, shortcuts, or tips I should add to this post, please leave me a comment! Would love to add more.

A Beginner's Guide: Memoization

malik — Sat, 28 Jul 2018 19:02:24 +0000

This article was originally posted on malikbrowne.com.

Last week, I was browsing different articles for guidance on the new lifecycle methods in React v16.3. I came across this article that talks about how a lot of developers may be using getDerivedStateFromProps wrong.

If you're not familiar with React, the method simply allows a component to update its internal state, as a result of a change in its props. However, the article recommended to not do something that I would do all the time in my code:

Use getDerivedStateFromProps or componentWillReceiveProps to ensure that a component only performs an expensive calculation for a re-render when the inputs change.

However, an easier and more concise way of performing this can be done with a functional programming technique called memoization.

As a growing programmer interested in performance, I love to come across new functional programming techniques that help speed up the code that I write on a day to day basis. Memoization was something that I had heard other engineers talk about in different algorithm problems. However, I never took the time to see what all the hype was all about - mostly because it sounded really complicated.

In this post, I'm gonna explain what pure functions are, how memoization works, and how YOU can combine them in React components to make your code more performant.

Let's start off by talking about pure functions.

What is a pure function?

By definition, a pure function is a function that meets the following criteria:

It is a function that always returns the same result if the same arguments are passed in.
It is a function that does not produce any observable side effects to your application including:
- Network requests
- Data mutation
- Logging to files
- Change application state
It is a function that only accesses the data you pass into it, making dependencies easy to define.

Something that may help this idea click is an analogy from this article which compares pure functions to a coffee grinder.

A pure function is like a coffee grinder: beans go in, the powder comes out, end of story.

Benefits

There are a few benefits to pure functions - two of them being:

They can lead to more declarative programs which describe how different inputs relate to outputs.
They can increase the testability of your code, and make debugging your code less of a nightmare.

However, it's good to note that side effects, in general, are not bad - which means that we don't have to make every single function pure.

Example of a pure function

Let's say that we have a recursive function that returns the factorial of a number:

const factorial = n => {
     if (n === 1) {
          return n;
      }
    return n * factorial(n - 1)
}

// factorial(4)
// 4! === 4 * 3 * 2 * 1 === 24

If we pass in factorial(4), our calculations would be made and return us the result, 24, every single time.

Since we now know a pure function will return the same value every time, wouldn't it be convenient if our function could remember (or cache) our results? That way the next time someone wants to calculate factorial(100), we could save time and resources and just give them the already stored answer.

That, my friends, is memoization.

What is memoization, really?

By definition,

Memoization is an optimization technique used primarily to speed up programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

In layman's terms, this means the function will memorize the solution to a problem if you give it the same question. To achieve a simple solution of memoization, we can implement some type of cache in the form of a map, which our function could then refer to.

Here's what our factorial solution would look like with a memoized function:

// our original factorial function
const factorial = n => {
    if (n === 1) {
         return n;
     }
   return n * factorial(n - 1)
}
// a memoized function used to calculate our factorial
const scopedMemoizedFactorial = () => {
  const fakeCache = {};
  return (value) => {
    if (value in fakeCache) {
      // return the value from our fake cache
      return fakeCache[value];
    }
    else {
      // calculate our factorial
      const result = factorial(value);
      fakeCache[value] = result;
      return result;
    }
  }
}

Things to notice

scopedMemoizedFactorial returns a function which is called later. We can do this in JavaScript because functions are first class objects, which means we can use them as higher order functions and return another function.
The fakeCache can remember the values because of the closure it's implemented in
This only works because the function we're working with is pure, like we talked about before. If it didn't return the same value, our cache wouldn't return the right value for the output!

If you'd like to see an example of a general memoized function, check out this gist which shows a memoization pattern from JavaScript Patterns by Stoyan Stefanov.

Using Memoization in React

For our example, let's pretend we have a third party API that returns back some JSON about all of the users on our application. The data structure looks something like this:

[
    {
        name: "Malik",
        age: 24,
        company: "Meetup",
        // ...and a bunch of other fields like this
    },
    // ...and 996 other entries just like this
]

If you would like to see what the whole data set looks like, check out this link. (Thank you to JSON Generator for this!)

The requirements for our application is to create a search box that will filter through our list of users and return a sorted list of all users whose name matches a query.

The code without memoization would look like this:

class App extends React.PureComponent{
  state = {
    searchValue: ""
  };

  filterList = (list, searchValue) =>
    list.filter(member => member.name.toLowerCase().startsWith(searchValue));

  sortList = list =>
    list.sort((a, b) => {
      if (a.name < b.name) return -1;
      if (a.name > b.name) return 1;
      return 0;
    });

  handleInputChange = searchValue => {
    this.setState({ searchValue, inputChanged: true });
  };

  render() {
    const { searchValue, inputChanged } = this.state;
    const filteredMembers = this.filterList(data, searchValue);
    const members = this.sortList(filteredMembers);

    return (
      <div className="App">
        <h1>No Memoization Example</h1>
        <Search
          searchValue={searchValue}
          onInputChange={e => this.handleInputChange(e.target.value)}
          placeholder="Search for a member"
        />
        <div className="members">
          {members.map(member => {
            return <Member member={member} key={member._id} />;
          })}
        </div>
      </div>
    );
  }
}

Check out the code in action here.

This solution will work perfectly fine in most situations, but with large sets of data the application will slow down a lot.

This happens for two reasons:

Filtering large sets of data is an expensive operation
Other re-renders of the application will cause the function to call the expensive operation again.

Using the helper memoize-one we can easily add memoization to this example:

import memoize from 'memoize-one';

class App extends React.PureComponent {
  state = {
    searchValue: ""
  };

  filterList = memoize((list, searchValue) =>
    list.filter(member => member.name.toLowerCase().startsWith(searchValue))
  );

  sortList = memoize(list =>
    list.sort((a, b) => {
      if (a.name < b.name) return -1;
      if (a.name > b.name) return 1;
      return 0;
    })
  );

  handleInputChange = searchValue => {
    this.setState({ searchValue });
  };

  render() {
    const { searchValue } = this.state;
    const filteredMembers = this.filterList(data.slice(0, 50), searchValue);
    const members = this.sortList(filteredMembers);

    return (
      <div className="App">
        <h1>With Memoization Example</h1>
        <Search
          searchValue={searchValue}
          onInputChange={e => this.handleInputChange(e.target.value)}
          placeholder="Search for a member"
        />
        <div className="members">
          {members.map(member => {
            return <Member member={member} key={member._id} />;
          })}
        </div>
      </div>
    );
  }
}

memoize-one is great because it only stores the results of the last function call, so you don't have to worry about cache busting issues.

Important notes for performance

The idea of memoization is great and all, but keep in mind the main benefit of memoization: to store the results of expensive function calls.

I took our factorial solution and used the Performance Timeline API to time how long our function calls took (down to the microsecond):

// we use performance.now() to keep track of how long each call takes
const tick = () => performance.now();
const t0 = tick()

optimizedFactorial(5000); // calculated
const t1 = tick();
console.log(`The first call took ${t1 - t0}ms.`);
// The first call took 0.3999999971711077ms.

optimizedFactorial(5000); // cached
const t2 = tick();
console.log(`Our memoized call took ${t2 - t1}ms.`);
// Our memoized call took 2.2000000026309863ms.

optimizedFactorial(4999); // calculated again with different param
const t3 = tick();
console.log(`A call that wasn't stored in our cache took ${t3 - t2}ms.`);
// A call that wasn't stored in our cache took 0.3999999971711077ms

As you can see, on my computer the memoized call took over five times longer to get the same result. This is because, in order for our memoization technique to work, the computer needs to allocate memory for a new variable and instantiate it, which takes a chunk of time respectively before it can perform the calculation.

As a result, we can see that using the memoize technique in this solution would be a premature optimization - and would negatively impact the performance of our application.

Another thing to note is that this solution doesn't handle many pains in relation to "busting" a cache including:

Setting a max age or size
Exclusions for our cache

Both of these pains can lead to memory leaks in our application, which can be a nightmare to debug. Because of this, a lot of engineers tend to use memoization helpers which have already implemented solutions to the pains to handle those common issues. Some of these include:

In regards to memoization in React, this React blog post covers some of the main constraints. Since they used a similar example, I'll share them below:

In most cases, you’ll want to attach the memoized function to a component instance. This prevents multiple instances of a component from resetting each other’s memoized keys.

You will also want to use a memoization helper with a limited cache size in order to prevent memory leaks over time.

None of the implementations shown in this section will work if props.members is recreated each time the parent component renders. But in most cases, this setup is appropriate.

Conclusion

Memoization is an awesome technique, that if used correctly, can supercharge your applications. Using more functional programming techniques can lead to easier and more predictable code, with high testability.

I highly recommend trying out memoization in one of your application via a package called memoize-one.

If you have any questions about any of the concepts in this article, feel free to leave a question in the comments!

I'm always open to hearing from people in the dev community, so feel free to reach out to me on Twitter as well. Tell me your opinion on using memoization for performance!

See you in the next one.

Contentful and Netlify: The Dynamic Duo of Static Site Management

malik — Thu, 16 Nov 2017 16:33:29 +0000

Earlier this year I had a goal to step up my blogging game.

When it comes to blogging there are tons of platforms available for people to use. A blog could be using a static site generator like Jekyll, or a powerful content management system (CMS) like Wordpress or Drupal. Each of these tools has their own specific process for development.

Both of these approaches have their own strengths and weaknesses, and whatever solution a blogger chooses will come with its own set of constraints.

I was partial towards Jekyll, mostly because I didn’t really enjoy writing in PHP if I could help it.

I also considered writing all of my blog posts on Medium, and then porting it to my blog via Medium’s REST API. However, I wanted to be able to separate my technical writing from my future plans of writing about motivation and productivity.

After some good ol’ google-fu, I came across a combination of tools that really changed the game for me in an unexpected way: Contentful and Netlify.

What is Contentful?

Contentful is a powerful SaaS platform that provides developers and small businesses with a highly configurable CMS that lives independently from the user’s publishing platform.

I like to think of it as a easily-accessed cloud database for different types of content.

Using Contentful, a blogger can create models to represent different types of content they may want to include in their blog. I like to think of these models as entities which then have attributes that describe them.

As an aside, if you’re not familiar with the idea of entities and attributes in database design, I highly recommend you check out this video that covers how you can make visual models to describe a database. Modeling is an awesome tool for orienting your thoughts about a project before you’re first getting started.

Let’s dive into an example of a Contentful model.

In my opinion, a simple blog post can be broken down into several attributes. If you think about it, the main attributes are:

A blog title
Slug (unique path to the content)
Author of the post
Category
Post body (your content)
A featured image (an optional image that can be shown to readers as they scroll throw your posts)
Post published date

When you put all of these together, you have a basic skeleton of a blog post already done, without worrying about styling or formatting.

Here is an example of a model on Contentful. I use this as my standard scaffold for posts on my blog:

Awesome features of Contentful

When I first got started with Contentful, there were two features when describing a model that I found particularly useful:

Dynamic field entries
Field validation based on customizable criteria

Dynamic Fields

A good example of a dynamic field is the slug (the path to the specific post). For SEO purposes, it’s a best practice to put hyphens in between the words in your slug, because when you use spaces, it is encoded as “%20”.

This is because Google and other search engines only treat hyphens as word separators, and ignores alternatives like underscores and spaces.
If you’re interested in a little bit of history into why this became a standard, check out this video by Google's Matt Cutt on the topic.

For an example, let’s use spaces inside of our slug. When the browser encodes the URL, the result will look like this:

https://malikbrowne.com/blog/contentful%20and%20netlify%20the%20dynamic%20static%20site%20duo

Yuck.

The whole idea behind SEO is to make your content readable. Let’s take a look at another example with dashes:

https://malikbrowne.com/blog/contentful-and-netlify-the-dynamic-static-site-duo

This is much easier to read. It’s a minor difference in ranking, but there definitely is a difference.

As a convenience, Contentful will automatically convert your title into a properly formatted slug if you set the option “slug”.

Contentful also allows you to create new instances of each model you define. These individual units of a model are then considered the “content” itself by the CMS.

Field Validation

In a blog, you can’t really have a post without a body or title. Those can be set as required fields so that Contentful won’t publish a post unless they are filled.

Out of all the validation features they have, the one I use the most is image requirements. When working with multiple people on a piece of content, requirements can easily get lost in the mix, and if you’re not careful, bad images could break the layout and functionality of your site.

For example, to optimize loading times you may want to limit the file size of an image that someone sets as the featured image of a blog post, since Contentful doesn’t compress your images for you.

Contentful allows you to set multiple different image parameters:

Image file size
Image proportions (width and height)
Type of file (jpg, png, gif)

This is a really useful feature that allows you to have a lot of granular control when working with a group of editors.

If creating these complex models seems daunting, don’t fret. Contentful has plenty of basic content model templates available to users once they sign up.

On top of that, Contentful allows you to create up to 10,000 new content records in their system for free.

Talk about a free trial.

After you or a collaborator has filled out the content of a post and hits that green publish button, Contentful will make your content accessible via a convenient REST API.

This allows developers to query and manipulate all of the available models, assets, and content data that you provide.

Contentful also stores metadata about of your models, provides parameters for filtering your blog to allow pagination, and provides you with a basic markdown editor to write your blog posts if you don’t have a setup already.

(I personally use this application called Typora, it’s increased my productivity when writing Markdown by a ton.)

Markdown can be easily parsed down into HTML using a whole bunch of tools on the internet.

If you have any questions about the static site generators or either service, I'm more than happy to answer questions in the comments, or continue the conversation on Twitter.

After writing your posts, you can pull the information you need either through the previously mentioned REST API, or Contentful’s SDK.

The next issue you would need to think about is deployment.

That’s where Netlify comes in.

What is Netlify?

Netlify is an automation platform that focuses on providing the easiest flow for managing deployments, covering everything from continuous integration to CDN distribution and caching.

Some of my favorite features that Netlify offers are:

A global CDN that distributes your content across the globe
A fast native DNS service
Automatic deployments, bundled with one click rollbacks
Build automation

You can check out a list of all the awesome features that Netlify provides here.

Netlify makes the process extremely simple — you only have to push your code to Github.

When Netlify detects a change in your linked git repository, it will start the deployment by checking your package.json file in your Github repo for any build scripts. You can also specify which build script Netlify runs.

Another thing to note is that Netlify scales with your website, no matter how big it gets. Also, just like AWS you only pay for what you use.

Why use Netlify and Contentful together?

When I first created my blog, I was deploying my website manually, using react-snapshot to create the newly rendered HTML files (for SEO purposes), and dragging these production-ready files onto my FTP server.

Whenever I wanted to make CSS changes after testing on other devices, I had to rebuild my create-react-app project and then re-run react-snapshot every single time.

Let me tell you something: that got old. FAST.

This is where web hooks came in.

If you’re not familiar with webhooks, a webhook is a way for an application to provide other applications with real-time information. A webhook delivers data to other applications as it happens, which means you get data immediately.

In a normal API, you need to make a network request frequently to simulate real-time data. This is very inefficient, and is the reason why webhooks are growing in popularity.

Contentful allows you to set a webhook that gets called based on different actions a user can do in their application.
These actions include:

Creating or updating a new asset, entry, or content type
Publishing or unpublishing an asset, entry, or content type
Deleting an asset, entry, or content type

When any of these actions occur, Contentful will send out a request to a specific URL, telling all listeners that data has been changed.

Netlify can listen to this webhook, and trigger a build command when it receives a network request for this URL.

These are my personal webhook settings in Contentful:

With the help of Netlify and these webhooks in Contentful, everything that I had to do manually before is now done with a “git push” command, and the push of a button on Contentful.

I have also switched over to GatsbyJS, which does several things for me that I had to do manually before. This includes:

Providing a nice templating system for my blog posts
Creating a sitemap for search engines
Providing new HTML pages for ones that didn’t exist previously
Optimizing images on my website.

Powerful, helpful, and super intuitive.

Tools to use with Contentful and Netlify

There are tons of static site generators out there. But a real pain point that I faced when working with other development environments was that adding functionality was an extremely daunting process.

Most of the time, the solutions were either unidiomatic or unintuitive.

After doing some more research into the JAMstack, I came across these two projects that stood out to me as great tools for optimal server-side rendering:

Both of these tools are compatible with React out of the box, which gives your static site the potential to have the same functionality as a complex web application.

If you’re a developer and you’re looking to create a new blog, I highly recommend using these tools together with one of the static site generators I mentioned.

Thanks for reading :) If you liked this post, please let me know in the comments below. It'll let me know if I should write more articles like this on dev.to!

This post was originally published on malikbrowne.com. You can find more articles like this on my website!

*I’m always interested in hearing from people in the dev community, so feel free
to say hello to me on Twitter. Tell me your opinion on the JAMstack!

Three Job Sites for Finding Your Next Developer Job

malik — Wed, 25 Oct 2017 19:55:42 +0000

Whether you’re looking for your next gig, or you’re trying to break into the industry, you can’t deny that tech hiring situation is frustratingly difficult.

If you’re just starting your job search, let me give you a recent example of when I was trying to “break into the industry”.

For a little background, I don’t have a previous history in Computer Science and learned most of my skills through various online resources.

A little over a year ago, I had recently graduated college, and was starting down the job application grind. I remember working through applications on Indeed, Monster, and Dice – altering my resume and cover letter specifically for each company.

I did tons of research on each company I applied to, and made sure to give my due diligence and make sure I was a good fit for each position.

(You know, just like everyone says.)

Doing hard work doesn’t bother me as long as there is some sort of result, but the nail in the coffin is when you get back that generic rejection email:

Dear [candidate] Thanks for taking the time to meet with our team about the
[role title] at [company name]!

It was nice to read about your skills and accomplishments.

Unfortunately our team did not select you for further consideration. We will
keep your resume on file for future openings.

Regards,

[recruiter]

I even once received an email from a recruiter where they didn’t even bother changing out the template and left the fields in the email…

Kill me.

There are several startups that are trying to fix that exact problem. Here are three other companies that are trying to fix the tech hiring problem!

Please note that these are in no specific order, this is just the order that I found out about them!

Triplebyte

How it works: Employers and engineers of all skill levels are matched with companies. You take a quiz, then do a two-hour interview. Based on performance, you’re put on their marketplace.

My experience: Was very close to making it to the next stage, the interviewer was very friendly and made the interview process very simple.

Rating: 9/10 – Although I didn’t make it, Triplebyte’s process feels like what recruitment should be. Very helpful feedback as well. I’ll get more into details later.

The first job site on the chopping block is Triplebyte, a company founded on the belief that the current technical hiring process doesn’t do enough to help engineers show their strengths.

Their goal is to help people find great jobs by assessing their abilities without relying on things like the “years of experience” on their resume.

They actually have a whole manifesto on their view of hiring.

With support from some of the best angel investors in the tech startup scene, including:

Drew Houston the CEO of Dropbox
Sam Altman: President at YCombinator
Paul Graham, the co-founder of YCombinator

Triplebyte has managed to make a pretty big disruption in the tech recruiting space.

Things I like

Here’s how their process is different and why I highly recommend them for recent to 1-year grads:

They want to see what you do, and what you’re good at.
You get PERSONALIZED feedback and are encouraged to reapply every 4 months if rejected.
They take your feedback seriously and iterate on suggestions to improve the platform

I went through their process six months ago, so here’s a sum of their steps:

You take a quiz depending on what your interests are: front end, back end, dev ops, software engineering generalist

They have several different “paths” that you can take, and the questions are all related to that “path.” Naturally, I chose the front end path where I received a bunch of questions covering:

HTML and CSS
JavaScript concepts like hoisting and the this keyword
ReactJS core concepts and principles

If you do well, you go on to the next step:

Get called to set up a two-hour interview where they go over several different topics

This is a very in-depth interview, where the first hour is spent doing a coding challenge, and the second hour is spent answering a bunch of technical questions about web development in general. For my coding challenge, I had to make a kanban board based on a set of rules and restrictions they gave me.

I was still relatively new to React at this point (about four months), so I struggled with this part of the interview, but the interviewer made me feel comfortable about the whole situation.

The next hour was spent going over several different topics:

JavaScript: HTTP, local caching
CSS: CSS sprites, difference between classes and IDs, CSS specificity rules, building a responsive site
Security: Bloom Filters, XSS, CSRF

I felt I did a lot better on this section, as I read blog posts on a bunch of these topics. After a few days, although I got rejected, I got probably the most detailed feedback from an interview I had ever gotten. Here’s the feedback they gave me, maybe it will help you prepare for an upcoming interview:

Hey Malik!

Unfortunately, we’re not going to move forward with your application right now. Interviewing is a messy process, and we know that we’ll inevitably make mistakes as we iron out our process. We also believe in giving the people we interview honest feedback.

You talked well about CSS. And you were friendly and we enjoyed talking to you.

Here are the areas where we thought you could improve. You didn’t make much progress on the Kanban project. You had a lot of trouble with small-scale coding in Javascript. Your code was occasionally unidiomatic or inelegant. We didn’t see the depth of knowledge that we look for in front end programmers: you didn’t show very deep knowledge of Javascript, HTTP, security, and data structures.

To move forward with candidates who don’t have much industry experience, we need to see exceptional strength. You did well in many parts of the interview, but we didn’t see the exceptional strength in an area that we require.

Here’s our advice.

You’ll do better in front-end focused interviews if you’re more productive at quickly implementing front-end features. You already know how to do this, but practicing it more will help you get faster and better at it. It makes sense to both practice building out small apps (so that you’re comfortable with how the basics of your framework works) and also try building out more complicated features.

Practicing small scale programming will be useful. On several occasions in the programming problem, you got stuck on minor programming bugs that aren’t directly related to front end development. To get better at this, you could try practicing small problems from sources like LeetCode. It’s particularly useful to read how other people solved particular problems after you solve them – often other people spotted cool solutions that you didn’t think of. This kind of practice is useful for your programming in general and particularly useful in the context of interviews.

We recommend you study algorithms more deeply. If you want to study algorithms some more, The Algorithm Design Manual is a particularly good and practically oriented algorithms textbook, and it’s freely available on the internet. Reading the third chapter, which is about how to think about data structures, would be really helpful. There are also many algorithms MOOCs: doing one of these would be good practice. You also might enjoy the advice about studying algorithms on *this page. In particular, you should know the runtimes for all the methods on the collections classes available in your language.*

And again, we know this isn’t a perfect process and we’d love to hear your honest feedback on how we might have improved it. We’re also happy to hear any other questions you have.

Best,

Triplebyte Team

It's... it's beautiful.

Things I don’t like

There wasn’t much to dislike. The only thing that was mildly displeasing was that the two hour interview was a bit long for my taste, but I know several people that didn’t really mind.

There’s not much more you could ask for an interview. If all of the above sounds even slightly interesting to you, definitely give it a try.

Up next, we have a company you may have heard of already, Hired.

Hired

How it works: Experienced engineers are matched with companies. There are “auctions”, and employers bid on you.

My experience: Didn’t make it to the auction stage, but I have friends with more experience that have gone through it, and received a few on-site interviews

Rating: 8/10 – They have a few things I don’t like, I’ll go over them below.

Please note that they’re not the best platform for inexperienced engineers!

Hired is an opportunity network that intelligently matches experienced engineers to fulltime and contract opportunities at innovative companies.

Located in San Francisco, they have matched tons of engineers with new and exciting companies and opportunities. Since 2012, they have expanded to a bunch of different locations including:

Los Angeles
San Diego
Seattle
Denver
Austin
Chicago
New York (represent!)
Boston
Washington D.C.

They also plan to expand internationally, placing candidates in a bunch of other locations like:

Paris
London
Sydney, Australia
Melbourne, Australia
Toronto

So basically, tons of options – especially if you’re looking to relocate.

Their timeline can take up to seven days to get you approved.

The way it works is you create a profile that gives a strong outline of your career experience and your skill set. (Make sure you’re specific with that!)
Once you’ve done that Hired will review your profile, and if you are accepted they will place you in their “marketplace.”

Since I haven’t made it past the auction phase, you can check out this blog post for a more detailed description of what it’s like.

Things I like:

Companies that are interested in you are really interested in you.
Salary offers are amazing, ranging from $100k – $125k
If you get hired, you get a bonus (who doesn’t like money?)

Things I don’t like:

They don’t give a good reason to why you are rejected. No feedback can suck if you’re not sure how you could do better.
Some of the companies are kind of boring and try to low ball you.
You’re still assigned a “recruiter”, who manages all your interviews accordingly.

If you’re a developer with at least a year or two under your belt, you should definitely try out Hired.

Last but not least, we have a service available from a company that everyone applying for tech jobs knows, but didn’t know the service existed: Indeed Prime.

Indeed Prime

How it works: Engineers are matched with companies. You fill out a profile, and if your skill set matches, they go straight into a phone screen.

My experience: Didn’t make it to the auction stage, but I have friends with more experience that have gone through it, and received a few on-site interviews

Rating: 7/10 – Better than spam applying for jobs, but I like the effort the other alternatives give.

I’m sure everyone has heard of Indeed. If you don’t, you really need to** crawl out from under the digital rock you’re stuck under**.

Indeed is currently the world’s #1 job site with over 200 million unique visitors every month from over 60 different countries.

But for some reason, a lot of people I meet haven’t heard of Indeed’s free job matching service, Indeed Prime.

Just like Hired, Indeed Prime allows you to fill out a profile, and submit it to be reviewed. After about 2–3 days, Indeed will get back to you letting you know whether you have been accepted or not. (I heard back in less than 24 hours so they’re very responsive!)

An awesome part about this is that if you already have an Indeed account, you can use that prefilled information on your prime account, taking some time out of the process.

After a week of your profile being approved, your prime profile will be live to potential employers! The response time from these companies are really fast, I was able to reach the technical interview stage with multiple companies in the span of the first three to four days.

Overall, the process is pretty straightforward. Since the companies are picking you, and you have to be approved to make it into the candidate pool, you already know that there is initial interest.

Indeed Prime is simple and straightforward, and definitely worth giving a shot. If you’re interested in upping your Indeed game, you should try it out!

There are a whole bunch of other resources that are available like Vettery, underdog.io, or WhiteTruffle. However, from my time interviewing for jobs, the aforementioned services really stood out to me as awesome, and all shared a common goal.

If you’ve applied through one of these services before, please share a comment below! I’d love to hear about different people’s experiences with these platforms.

In my next blog post, I plan to talk about using LinkedIn and AngelList to find more jobs that you’d be interested in.

Thanks for reading :) If you liked this post, please let me know in the comments below. It'll let me know if I should continue this series on dev.to!

This post was originally published on malikbrowne.com. You can find more articles like this on my website!

I’m always interested in hearing from people in the dev community, so feel free
to say hello to me on Twitter. Tell me how your job hunt is going!