corinneling

How to add a npm package’s css to your site with webpack

• style loader & css loader
• copy webpack plugin

style loader & css loader

1. npm i --save-dev style-loader css-loader we have to use both of these loaders because the css-loader lets webpack parse the css and the style loader adds a <style> tag to the head of the html file so the css can be added to it
2. Add the style-loader and css-loader to the webpack rules array (we dont need to import it into the file)

corinneling

How to Host with A GitHub Pages Branch

I started hosting this beginner's guide site with a github pages branch because I am using handlebar templates to build out the pages. That way I can have a clean build for the project. My goals for hosting the beginners guide were to have all of the built HTML files in the root of the project, and to have a clean build where I could clean out the static folder before building the static assets into it each time. This is how I set that up with a GitHub Pages branch:

1. From the master branch create a gh-pages branch
   • git checkout -b gh-pages
2. Push up the branch
   • git push -u origin gh-pages
3. Run your build tasks. Mine is npm start. It runs a few npm scripts from the package.json, and compiles the static assets in a folder called dist
   • npm start
4. Navigate to the static assets folder

corinneling

How to Create a Tag for a GitHub Release

1. From the master branch create the tag
   • git tag -a tag_name -m 'message here'
2. Push up the tag
   • git push origin tag_name
   • Or push all tagsgit push --tags
3. In GitHub navigate to the releases tab, next to the branches tag
4. Select the Tags button
5. Click the group of three dots in the right corner

corinneling

Site Accessibility

Reviewed Page

Visual

Check item of it is meets standards and/or content is still readable

• Check color contrast with Color Ratio & Colorable

corinneling

Node JS Web Scraper

I this is part of the first node web scraper I created with axios and cheerio. I took out all of the logic, since I only wanted to showcase how a basic setup for a nodejs web scraper would look.

const cheerio = require('cheerio'),
      axios = require('axios'),
      url = `<url goes here>`;
 

corinneling

version: 2
jobs:
  build:
    environment:
      CC_TEST_REPORTER_ID: { CodeClimateId }
    docker:
      - image: circleci/node:7.10

    working_directory: ~/repo

corinneling

Dotfiles: Understand their purpose and how to set them up

One thing I had trouble grasping at first were dotfiles, and I know that is pretty basic, but all the articles I read skipped the initial, what and went into customization details. So, I am documenting the basics of what dotfiles are, how to see them, access them, set them up etc.

The Environment I'm working in

Mac, Bash, Terminal.app, Git

What are they:

corinneling

How to Sync A Forked Repo

One problem I had while practicing git was syncing up a forked repository. This can come in handy for open source projects and collaborating in teams without permissions to directly push onto an original repo. I'm interested in open source, so I figured it would be a good thing to learn, and a good thing to document (because I am sure the details will skip my mind later).

1. Make sure you are in the right place

   • That was my first mistake. I was in the wrong directory so I got this error when I tried to merge.

     fatal: refusing to merge unrelated histories

   • That happened because I was telling git to merge one repo (my dotfiles repo) with the other (my apprenticeship repo). Here's some documentation on that error

• An easy way to check where you are is the command: