Changing Jeykll Theme

I’m not sure if this is entirely normal, but I actually spent several hours last night looking for the perfect theme for my blog. I then reviewed how to change my theme and did so by forking and cloning it to a local repo and then copying and pasting my old posts over, changing the data in the _config.yml file, pushing it back up to my repo and deleting the old one locally. I didn’t really like the theme I was using anymore because of several reasons. It was very limited and didn’t include Disqus comments or Google Analytics although I’m sure I could have figured out how to add it on my own. Also, I found some styling bugs in mobile and just didn’t like the looks of the theme overall. I wanted something minimal, but with a bit larger and eye popping font. I think I achieved all of that with the Beautiful-Jekyll theme.

I also added my Free Code Camp Portfolio project as another page to the blog. I found that in order to do this and bypass the template engine in order to use your own HTML/CSS and not cause conflicts all you have to do is not add the YAML header at the beginning of the HTML file. I then added another button to the portfolio page that links back to the blog and the Flatt Dev logo on the portfolio page links back to the blog. I wanted the portfolio to retain all my original code and not include any of the template layout so as to showcase my own coding skills.

100daysofcode is going great so far, today was day 20. I have as mentioned, completed the FCC portfolio project and am moving on now to learning JavaScript. I downloaded the first book of You Don’t Know Javascript to my Kindle and have read the first chapter so far. I am also going to start a small project I saw on Traversy Media, where he showed how to make a bookmark app that saves bookmarks to local storage, using Vanilla JavaScript.

I also learned how to embed a youtube video into Markdown. And damn, it worked on the first try. That NEVER happens. haha. Here is how you do it, via Google and this website Adam Wade Harris

Sometimes, this stuff really is like magic. Other times, things don’t work and I’m left staring at the code with arms folded, cursing “#(#A))) why isn’t this #))(**(&### working??!!!!!!!!” and after I look at it awhile, and Google, I’m like, “Oh, my bad! I made a mistake. I see what I did. haha Sorry about that bro!” I talk to myself like that! haha Sometimes it’s as simple as missing a semicolon. Other times, it’s as simple as adding a class of img-fluid. Other times I have to really dig into it and figure out what it is I’m not understanding. It’s frustrating as hell, but when it works? Oh man, I feel like the smartest man alive!! haha

Git Merge Conflicts and Git Revert

In this post I am going to talk about my first git revert I did on one of my projects tonight after learning first hand about merge conflicts and not fully understanding what to do at the time. And then I will give a few updates on my Web Dev learning progress and where I’m going from here.

Git Merge Conflicts

So what happened was this. I had made a personal webpage project a week or so ago, my first one since learning HTML/CSS again after a few years. Then I created a branch called flex-box and I refactored the site and my Shaw Howe project using flexbox instead of inline-block and floats/clearfix. Great. All was well and I kept both branches for future reference. Last night I decided I was going to merge them and delete the flexbox branch, which I did. I got some merge errors but did what it said and I thought all was well.

Then at work last night, I was making some file edits on the Github website because I didn’t want to open up my laptop at the time. Figured I’d just pull the changes down to the local repo later. Fine. I forgot though that I had also made some edits and commits on the local repo the day before. Pretty sad when you have merge conflicts and you’re the only one working on the project. haha. So anyway, I knew I needed to pull my changes from the remote origin branch so I did:

git pull origin master

and I got an error stating that my repo wasn’t up to date and I couldn’t merge, which is what pull does after fetch. So I then:

git add "filename"
git commit -m "message"

and try to pull again but now I get errors talking about a merge conflict. I open up the file and I see all this weird shit going on like

<<<<<<<HEAD

FLEXBOX>>>>>>>

What the hell is that? I didn’t know. So I said screw it and was manually deleting all of that when I realized, “hey wait a minute this is what git is for,all I gotta do is revert back to an older commit and I should be good.” So I re watched the relevant

The Net Ninja

video on Youtube and I checked out an older commit to make sure it was what I wanted, because some other weird changes had taken place too with my container widths and such. I reverted back to it using git revert and all was well.

It was then that I started reading up on the original merge issue and found out that those original weird changes in my file was git telling me what the conflict was. It was showing me the changes from both branches that were in conflict with each other. Oh well, that was done and the branch deleted. So the issue was that when I tried to pull the changes down from the remote origin it wouldn’t work because my local branch wasn’t up to date. And when I tried to make it up to date, there were merge conflicts because my origin and master branches had conflicting edits. I could have fixed it by just manually fixing the file but I did a git revert and fixed it that way.

Moral of the story. Be careful. Don’t edit files on Github origin and local master branches at same time unless you’re careful. What you should do if you are going to edit your files online, make sure to do a git pull first thing before you edit your files locally, that way you’re up to date and there won’t be any conflicts. Then you can edit and commit locally and push back up to origin. Then you can edit online if you ever need to and pull it back down to master local branch. But when you mess up and have edits in both master and origin branches, conflicts will arise and when you don’t know what you’re looking at you’ll think your local file got corrupted.

So that was funny but a learning experience. And what’s really funny is that that is actually how we learn, by making mistakes and googling and learning. Thank goodness for Stack Overflow, huh? I don’t think there’s an issue I’ve ever come across that didn’t pop up on stack overflow via a google search.

Updates

I am also going to school at the local community college getting my 2 year degree in Computer Information Technology - Programming. I’m currently taking Intro to Statistics and Intro to Computer Programming and Logic, both online with all exams taken on campus. Have had 2 exams so far, one in each class and I got a 94 in Stats and 98 in Programming. The latter consisted mostly of computer technology history, some binary number conversions and analyzing what a particular assembly language program was doing and how it worked. I really enjoyed learning the basics of Assembly because it teaches you about memory and the hardware architecture of the chipset. Cool.

This week in Programming we have a webpage project to create a webpage using HTML/CSS and it has to include some information about our hobbies and interests and must include at least 3 to 5 photos, a few links and at least one ul or ol list. My solution can be seen at:

CITC1301

Yesterday I completed the Build a Tribute Page project on FreeCodeCamp. My solution can be seen at

Dr Sheldon Cooper

It was my understanding that we were to complete the project using only bootstrap so I tried to do that as much as possible using very little custom CSS. What I found was that I don’t like Bootstrap all that much. For starters it doesn’t use best practices, clutters your HTML with a lot of non semantic classes and doesn’t allow as much styling options. For example, with milions of colors to choose from, Bootstrap only gives you like 6 color options. But I did it and it’s a very basic solution, nothing fancy. My next project will be to complete the Build a Personal Portfolio Webpage from FreeCodeCamp.

I also need to work on getting better organized. That’s always been one of my biggest issues to date. I started the #100daysofcode challenge and have that downloaded from Github to a local repo and I try to update that on a regular basis. I also want to add some files to that repo where I can add resources I’ve come across and a progress folder detailing my exact curriculum I’m following as I complete each learning resource and project. I’m kind of doing both FreeCodeCamp and The Odin Project and have also taken great notice of a learning guide on Github that P1xt put together from a thread he originally had on Reddit. It can be found at

P1xt

He has several different guides but the one I want to work through over the next two years is the one on Web Development with Computer Science. My plan is to learn as much Web Dev as I can, on the JavaScript side of things instead of Rails while obtaining my 2 year degree in computer programming over the next two years, which will also allow me to take part in an internship towards the end of my degree and when I’m done with all of this I would love to get a job somewhere in Oak Ridge TN, maybe the lab? That would be quite awesome. My only concern is my age. I’m currently 45 and will be 47 when I get done with my degree, however various people have assured me hiring managers do hire career changers at my age. Who’s gonna tell me I can’t do it anyway? I’m the only one that can hold myself back.

Peace!!!

Learning CSS Flexbox and Progress Update

For the past week or so I’ve been working through Shay Howe’s HTML/CSS Tutorial and last night I completed it. Instead of just reading through it though and trying to retain as much as possible, I actually coded his example website along with the tutorial making sure never to use copy and paste except for color codes and long paragraph sections. All the code was done by hand, code along style.

My Thoughts

Shay Howe’s tutorial is a really great resource for a birds eye view of HTML and CSS and it gets you to build a pretty complex multi page website for a Styles Conference complete with a schedule of events and a Google map of the location.

My iteration of the website can be seen at Styles Conference

To build out the full website there are about a dozen or more speakers to include on the speakers page along with their bios. I did not build out all of the speakers as I figured after doing a few of them I would know how to do it and it’s not a real production website anyway.

This tutorial was also written before Flexbox and CSS Grid layout and also does not go into frameworks like Bootstrap at all. This was how websites were built prior to all of that but but with CSS involved, one didn’t have to use HTML tables anymore to build layouts. You do use tables though to build the schedule page.

You also create a grid for the layout of major sections and then use floats and inline block to move the elements within the grid, however this is not the new CSS Grid implementation that everyone is now talking about in 2017.

The way this was done prior to Flexbox and all of that was done by first defining the grid as follows:

.container,
 grid {
	margin: 0 auto
	width: 960px;
}

.container {
	padding-left: 30px;
	padding-right: 30px;
}

.col-1-3 {
	width: 33.3%;
}

.col-2-3 {
	width: 66.66%
}

.col-1-3,
.col-2-3 {
	display: inline-block;
	vertical-align: top;
}

.grid,
.col-1-3,
.col-2-3 {
	padding-left: 15px;
	padding-right: 15px;
}

This is quite a lot but essentially its saying that an element with a class of col-1-3 will take up 33.3% of the page and an element with a class of col-2-3, twice that or 66.66% and sets some styling to the grid and sets display to inline block so that elements follow each other inline and don’t stack up on the page.

There’s also a clearfix added to the CSS due to the use of floats.

Now in the HTML you can layout the page like this:

<section class="row">
	<div class="grid">

<section class="teaser col-1-3">
	<h5>Speaker</h5>
	<a href="speakers.html">
		<img src="assets/images/home/speakers.jpg" alt="Professional Speaker">
		<h3>World Class Speakers</h3>
	</a>

	<p>Dadadadadada Lorem Ipsum </p>

	</section><!--

--><section class="teaser col-1-3">
      etc etc

Notice how we had to comment out the spaces between the teaser sections. This was because of the way we were doing the layout with inline-block. Without this commenting out in between, then the sections would have spaces between them and would then wrap to next line if they overflowed the line. Using inline block allows us to layout the 3 teaser sections on same line next to each other instead of the default block behavior where they stack up below each other however if we don’t comment out the spaces in between then it wont’ all fit on one line and the third section will wrap to next line.

As they say in web developement circles, this all worked but it was “hacky”. It was a hack, a way around the limited layout capabilities of CSS at the time. They didn’t have to use tables or anything but if you wanted to layout sections on the page like this you had to use inline block and the comment hack.

With Flexbox this would all be done away with quite simply.

The logo of the page is floated to the left and the navbar is set to inline block and text aligned to the right. Because of the use of the float we have to apply the clearfix (yet another hack) to the nearest parent element by adding the group class to it.

This was all great and you can have a look at the finished website and it’s all quite nice and works. As I said this was the way layouts were done before Flexbox and CSS Grid. You had to hack around the limitations of CSS at the time.

But then with Flexbox things became so much easier and after familiarizing myself with it, what I decided to do was to create another branch in my repo and call it flex-box. On that branch I refactored the website using flexbox instead of the old inline blocks and grid layout. With the use of flexbox all of that can be deleted. Mine still has some of the old code in it though because I just wanted to demonstrate my new found knowledge of Flexbox.

You can look at my repos and the two branches by going tomaster and flexbox.

But watch what we can do now. We can delete that entire section in the CSS creating the grid, we can delete the clearfix because we aren’t using floats anymore and we can delete the old group class for the clearfix and the row class and grid class. Pretty amazing. And watch what we do now. Like the old Outkast song So Fresh and so Clean haha.

Now we just set a flex container around the elements we want to layout and then the elements inside the container become flex items. For my nav bar at top for example:

	<nav class="primary-nav">
		<ul class="nav">
			<li><a href="index.html">Home</a></li>
			<li><a href="speakers.html">Speakers</a></li>
			<li><a href="schedule.html">Schedule</a></li>
			<li><a href="venue.html">Venue</a></li>
			<li><a href="register.html">Register</a></li>
		</ul>
	</nav>

Then in the CSS:

 	.nav {
 		display: flex;
 		justify-content: flex-end;
 }

And that’s it. The nav bar links now are side by side in the header and align to the right side of the screen and then we can apply some margin and padding properties to align it precisely how we want.

There’s actually a whole lot more involved with Flexbox than that and a whole lot more that you can do. This is just scratching the surface but you can see how powerful it is and how we no longer have to use floats and clearfixes or inline-block and comment hack.

Some great resources I used to learn Flexbox were:

1. Understanding Flexbox by Ohans Emmanuel
2. The Net Ninja Flexbox Tutorial vids on Youtube. I can’t recommend all of his vidoes enough. I have also gone through his Git/Github tutorials and they are quite simply amazing. He’s currently doing a series on the new CSS Grid implementation.
3. MDN
4. CSS-Tricks A Complete Guide to Flexbox

After this, my plan going forward is as follows:

1. I am going to do the video code along series by Wes Bos called What the Flexbox
2. Do the first couple front end development projects on FreeCodeCamp
3. Re do the Google home page project from the Odin Project

And then I’m gonna move on to Javascript.

Things I’ve learned over the last couple of weeks:

1. Git/Github
2. HTML/CSS
3. Flexbox
4. Beginning CSS Grid
5. Bootstrap
6. I also spent an evening tricking out my Sublime text editor with cool plugins/packages and installed an in editor tutorial on keyboard shortcuts and I’ve begun using them.

How to Contribute to Open Source Projects on Github

Last night I contributed to my very first open source project on Github and it was such an amazing feeling that I want to talk a bit about it and walk through the steps involved. Backstory: I was searching on Github for people to follow and one person I was familiar with was Ohans Emmanuel. I knew that he writes great CSS guides and I had conversed with him briefly on Twitter about one of his paid guides. One of his free ones goes into detail about Flexbox and is entitled Understanding Flexbox. As I was looking through this great resource on Github I happened to notice that many of the chapter links in the README.md file were not working. I said, “hmmm, this would be an easy fix, all Id have to do is correct the Markdown in the file. I wonder if he knows the chapter links aren’t working.” So I submitted an issue about it but instead of waiting for a response I figured I’d go ahead and fix it and if for some reason he didn’t want me to or if there was a reason he wanted the links not working for now, all he’d have to do is not accept my pull request and not merge it. I had never contributed to anything on Github up to this point and was unsure of the etiqutte and all involved. So here was the process by which I fixed the links and submitted a pull request.

1. I went to the project page and forked the project by clicking the fork button. This made a branch of the project into my account.
2. Then I went to my command line and did the following:

mkdir Understanding-Flexbox
cd Understanding-Flexbox
git clone "URL of the fork"

I obtained the URL by going back to the fork and clicking on the clone or download button and copying the URL.

Now I had a copy of the entire project on my local machine and could open the readme file in my editor as follows:

cd Understanding-Flexbox
gedit readme.md

I edited the Markdown of the links to point to the correct URL’s of the relevant chapters and saved the file.

Next step is to push the changes up to my fork on Github.

git add --all
git commit -m "Fix broken chapter links"
git push origin master

At this point, I went back to the fork on Github and verified that all links now work and point to each relevant chapter. All that was left was to submit a pull request so that Ohans could merge my fixes up to the main project.

On the main project page I clicked on the submit pull request button and filled out the title and message letting him know that I fixed the broken chapter links and thanking him for letting me contribute.

The next morning I woke up to a message from Ohans saying he hadn’t noticed the broken links and thanking me for fixing them. I thanked him for letting me contribute even if in such a small way and let him know this was my first Github project contribution. I then went to the main project page and saw that the links now worked.

None of this may seem like a big deal to most people who have been doing this for awhile, but it was exciting for me being my first open source project contribution and now I’m listed on the project as a contributor. Also, I thought this would be a good opportunity to blog about it and giving a short tutorial on the process of submitting a pull request for those who may be even greener at web development than I am.

And to Ohans, I thank you again for allowing me to contribute and for giving me the opportunity.

Jekyll Blog Setup

Last night I spent a few hours learning how to set up a Jekyll blog and deploying it with Github Pages. I had wanted to start a blog about my experiences in learning web development, but I haven’t actually blogged in quite some time. In my research I came across Jekyll and read this article on Smashing Magazine Build a Blog With Jekyll and Github Pages. What I liked about the concept of blogging with Jekyll was the control I would have over it and the fact that I could host it for free with Github pages. I would also be able to practice my Git skills and the blog would have version control. Since I needed to set up a blog again anyway, now seemed like a good time to learn Jekyll. Other sources I used to help me in this process were:

• Hongkiat-How to Create a Blog with Jekyll - A Beginner’s Guide

• Jekyll Documentation - Quick Start Guide

Things learned or reviewed through this process:

• Git, Github and Github Pages
• Linux (Ubuntu)
• Jekyll
• Ruby?
• Markdown

The first step in this process was to install Jekyll from the command line as follows:

sudo gem install jekyll

and then to check the installation using:

jekyll -v

However, upon doing this I received errors stating that it could not find the gem so I tried, as per the Jekyll quick start documentation:

sudo gem install jekyll bundler

which also did not work. Consulting Google I found I had to do this first:

sudo gem install pygments.rb
gem install bundler
bundle install

and then the install again and this worked.

The second step was to:

jekyll new myblog
cd myblog
bundle exec jekyll serve

This created all the files and folders needed along with the minima theme which is installed by default. I later figured out how to install a new theme, which I did by installing the Rifyll theme, which I will discuss further later.

Another way to install a Jekyll blog on your machine is to fork and clone a theme repository into your myblog folder. That’s how I installed the theme, but not before realizing that by cloning it into the myblog folder it was installing it on top of the already installed minima theme and had to manually rm the minima theme folders and files.

The third step to creating a blog was to change any layout settings in the _config.yml file

Fourth step was to create a blog post in the _posts folder using standard jekyll file naming convention as follows.

2017-09-14-Blog-Post-Title.md

Markdown can be used to format the post. Once the file is saved, you can run:

jekyll serve

and point your browser to localhost:4000 to see the blog.

Oh, the very first thing that needs to be done before anything else is to cd to the myblog folder and run:

git init

This will set up git version control on the blog and is needed in order to push the blog to your repository.

Speaking of your repository, you need to head to your Github account and make a repository by clicking the + symbol in upper right hand corner and setting the name of the repository which has to be in the form of username.github.io Trying myblog did not work as username didn’t either. Trusty Google pointed me in the right direction. Then copy and paste the repository name and head back to the command line and run the following:

git clone git@github.com:yourusername/yourusername.github.io.git

Now, after writing a post in the _posts folder with the proper YAML heading as can be found by reading Front Matter

Then you can:

git add --all
git commit -m "commit message"
git push origin master

and voila your blog will be live at username.github.io

Pat yourself on the back because you’ve created a blog and learned and practiced git commands in the process. The entire process may have taken several hours with googling error messages but you can be proud you’ve done something, created a blog from scratch, that most people using Wordpress.com will never do.