In One Ear

My memory sucks. This is a place for me to document and hopefully retain some of the stuff I learn everyday. 

[berthakuo]

How to Resize an Image

<img> is a replaced element Replaced element - CSS: Cascading Style Sheets | MDN

The size of an image is not affected by the dimensions of its container. In order to adjust an image size, you must define the height and width properties of <img> Once those values are defined, object-fit and object-position can be used to specify how to position the image within <img>

//to get an image to fill it's container, set the height and width to 100% img { height: 100%; width: 100%; display: block; //default is inline object-fit: contain;  

[berthakuo]

An Overview of NPM

In order to use NPM, make sure the following is installed node -v npm -v

NPM stands for node package manager. It allows you to manage (install, uninstall, update) project dependencies. When you add a dependency to your project using npm install, it adds the dependency’s code to the node-modules folder. If you specify —save, it also records the dependency’s name and version in your package.json file.

Package.json file contains your project’s meta data including a list of the dev dependencies.

“devDependencies”: { “browser-sync”: “^2.26.3”, “gulp”: “^4.0.0”, “gulp-sass”: “^4.0.2” }

There is also something called package-lock.json. I tried reading up on it but it was over my head. My main take away is that this also needs to be tracked (aka don’t gitignore).

npm init

Generates a package.json file when you start a project

npm install

Use this after you checking out a project repository 

Installs the version of the dependencies listed in package.json so updates to the dependency don’t end up breaking your code

npm install dependency-name –save

Installs new dependency and adds it to your package.json list

Note If you are only using “build” dependencies (e.g., GULP), there is no need to push it to the server. Therefore, you can add “node-modules/“ to your gitignore folder. However, this means you need to run npm install everytime you check out your repository because it does not contain your dependencies.

Don’t install Bootstrap using npm because you need it on the server-side and therefore can’t ignore it.

References https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/ https://medium.com/@tanya/what-the-heck-is-npm-b8168f61e3b5

[berthakuo]

How to push your project up to GitHub

You’ve created a project folder locally and want to push it up to GitHub

In GitHub, create an empty repository

You can only push to another repository. You cannot push to your GitHub account and assume it’ll create a folder with the same name as your local folder. 

Define this repository as your remote repository. 

git remote add origin https://github.com/username/repo-name

To check if this remote was successfully defined

git remote -v

This will list all the remote servers associated with this repo. Origin is the default name for remote.

Push your local folder up to the remote repository

git push -u origin master

Resources

https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes

[berthakuo]

How to Use EditorConfig

EditorConfig allows you to define the indentation style (spaces vs. tabs) in your code. To use, first install the EditorConfig plugin into your text editor (Sublime). Next add an .editorconfig file to your project’s root directory. It’s in this file that you will define your preferred indentation settings.

root = true

[*.{css,html}] indent_style = space indent_size = 4

What this says is  

yes, I’m am located in the root of the directory

each indent (tab) will be rendered as four space characters

these settings should be applied to all css and html files

This is great because it ensures consistent indentation style in your directory even if multiple people are contributing to the project or if you copy and paste someone else’s code. 

Note: If you add an editorconfig file to a project, the existing files should update their indentation size. However, it won’t convert existing tab characters to space characters. If you are using Sublime Text, go to the bottom right hand corner of the screen and select “convert indentation to spaces”. 

Resource https://stackoverflow.com/questions/26350689/what-are-hard-and-soft-tabs