Author: David Brickman

Contributing to an Open Source Project on GitHub

Contributing to an Open Source project on GitHub can be a lot like working in a real world office. For example, one person may pull the code from a project and proceed to add a feature or fix a bug. Next, rather than push it back up, they create a pull request where the supervisor or another team member is able to verify the code, and if accepted pull it to the repository.

Now, you may be asking yourself, “What do pulling the code from a branch, and pull requests mean?” In this article I will go through the steps one goes through once you are ready to make changes to a project.

Pull request

A pull request allows you to let other members of the project know that you have pushed a branch. In the example above, this would be for the boss to go over what you have done. This is very useful because, if something is not right, or the boss needs more from the update, they can deny it for revisions.

After initializing a pull request, you’ll see a review page that shows a high-level overview of the changes between your branch (the compare branch) and the repository’s base branch. You can add a summary of the proposed changes, review the changes made by commits, add labels, milestones, and assignees, and @mention individual contributors or teams.

Pulling the Code from a branch

You can use a branch to isolate development work without affecting other branches in the repository. Each repository has one default branch, and can have multiple other branches. You can merge a branch into another branch using a pull request. You can use branches to: Develop features, fix bugs, or safely experiment with ideas that will not effect others’ work.

The user must have write access to a repository to create a branch, open a pull request, or delete and restore branches in a pull request. In repositories where you have owner or admin access, you can change the default branch.

 

Click here for more information on:

Pull Requests

Branches

10 Semantic Tips

10 design tips for a semantic website

  1. Standardize objects – Make things that are similar use the same class tag.
  2. Use comments – Make sure you and anyone else looking at the code understands what is going on.
  3. Semantics can be described as – describing with out specifically saying what it is.
  4. You have to be sure there is only one of something on a page to use ID tag instead of Class tag.
  5. If you have two tags on an object, the second one will override the first.
  6. Part of being semantic is keeping your code clean.
  7. Screen readers read from top to bottom according to the code.
  8. You should use labels on your text fields even if you will kick it off the page later.
  9. You can use a tag multiple times and style it differently by specifying the area of the code IE:

h4 {   color: red; } .p3 h4 {   color: green; }

Making the only difference being it is green instead of red, in the p3 class.

  1. <small> is meant for extremely small text such as copyright info.

dewantara-academic

Ever Wonder Why Looks Are So Important?

If you have ever wondered why looks are so important, look no further! In this post I will go over three of the main ways to improve the credibility of your site.

Have an About Page

Having an about page is useful because, it can tell visitors to your site about your company, and you personally. It allows for the visitor to feel safer, as they know more about you and your company’s intentions.

Update your content regularly or hide dates

If you update your content regularly, more people will visit more frequently, especially if it is quality content. If you update regularly, visitors will see that you care about your content, and therefore probably them.

Watch spelling, grammar, and typos no matter how insignificant they may seem

Even if it is something as insignificant as spelling insignificant as insingificant, or even There vs. Their. This can make you seem like you don’t worry about small things, which could end up being big things in the end.

I got my information from Prove It: What Makes You Trust a Website? – Lorelle VanFossen.

I recommend you check out this article for more information on how to make your website look and feel more trustworthy.

5 Things about creating a predictable and harmonious spacing system

Predictable and Harmonious spacing is useful because it not only makes everything look better, but it also is used to deliberately for improved readability and consistency in product.

2 practical steps to create a predictable and harmonious spacing system.

  1. Baseline grid – Determine line-height of your body text and know your baseline grid number.
  2. Geometric progression – Pick a limited number of values from the geometric progression of your baseline grid number’s factors and multiples.

Rule of 3Cs

  1. Rule for containers – Apply uniform inset spacing inside all containers in your UI.
  2. Rule for content – Content is stacked vertically. Tackle the header stack first, by trying to get to a margin value that works consistently across all headers.  Solve the leaf -node stack next, by addressing spacing needs for paragraphs, lists, form, tables.
  3. Rule for components – Apply uniform inline spacing for all adjacent components in your UI. Make exception with smaller spacing only for components that are associated together.

When positioning elements vertically, the designer has to make decisions that never should be left to chance or be random. Too often, designers rely on vertical increments made possible in Photoshop by holding shift and arrows keys: “I use 5 or 10px, it depends.” This approach is acceptable horizontally, as columns are multiples of 10, but it doesn’t conform to any typographic reality.

— Robert Bringhurst (Author of “The Elements of Typographic Style”)

 

All of the information I gathered here, has come from Priyanka Godbole and prototypr.io

Click here for the article!

Top 5 things I recently learned about Google Analytics and SEO

Here is my list of the Top 5 SEO tips

Google Analytics

Google analytics (or GA) is a great tool that allows you to see how many people come to your website, as well as how many are new or repeat viewers.

This is a recent example of my current sessions by people.
This is a recent example of my current sessions by people.

G A also has many other functions that allow you to ensure that your website is running smoothly.

Broken Link Checker

If you have broken links on your site, it can confuse your audience, and leave a bad taste for your site. This can happen when, for instance, you have a YouTube video linked on a page, and the video has become no longer available. It can also be caused by changing the URL to a page on your own website, which leads us to our next tip.

Safe Redirect Manager

A safe redirect manager can help you automatically send people to the right page, if there is a problem with it. Depending on the situation it may show one of these error messages.

These are the redirect messages.
These are the redirect messages.

For example, if you permanently move a page to another place, it will give a 301 and then instantly redirects them to the proper URL.

Black Hat vs. White Hat

This info-graphic should help explain the differences between Black and White Hat Tactics. Black Hat Tactics can severely effect your reputation and make it difficult to get back your good reputation.

seo white hat vs black hat infographic By MarketingZen.com

OpenGraph and Twitter Cards

The main reason for including these in your code, is that if someone shares your link on Twitter or Facebook, it will show an image and a small description for your site. Depending on how you have it set up it may show one image for everything, or it may be an image from your article.

The benefits of learning how to code layouts with CSS

  1. Why did designers start using frameworks like Bootstrap for layout? – Designers started using frameworks like Bootstrap Because, as web developers kept using HTML for styling they over used it, and turned to CSS to separate style from content.
  2. What does the author think is wrong with that? – Jen Simmons says that, developers have gotten bored of how Bootstrap, and other frameworks, made every site look almost exactly the same.

The skills that are demonstrated in Rachel Andrew’s video lessons.

  1. Define a grid – This video shows how you can make a grid layout with CSS. Also unlike felxbox, the grid only takes up as much space as it needs. Flexbox would expand two columns to make up for a lost one while grid does not.
  2. The fr unit – fr unit stands for Fraction Unit, and allows for grids to be responsive.
  3. Repeat Notion – The Repeat Notation allows you to keep your code dry and convenient.
  4. minmax – minmax is a notation that sets the minimum and maximum width of an element.
  5. grid auto-placement and order – It only makes a visual order change, whereas it stays in the original logical order.
  6. auto-fill and auto-fit – auto-fill automatically fills in the rows with as many tracks as possible even if it does not have anymore. auto-fit does basically the same except it does not add extra space and fits the view-port.
  7. Auto-placement and packing modes – Auto-placement automatically places elements where they can fit, and can cause random holes in the grid, to fix this we use packing modes to instantly find the easiest to place thing and put in any spot. Also, 1/-1 means left edge to right edge.
  8. Line-Based positioning – allows you to make a definite grid and you can leave white-space if you want to.
  9. Named Lines – The names allow you to adjust your grid easier when you make a media break-point.
  10. Aligning and justifying grid items – Justify allows you to define items to their starting or ending point.If you use align and justify center, it will be directly in the center of each component.
  11. Aligning and Justifying the grid – When you use align or justify content, you are basically using flex-box, except you have more control over what or where you want.
  12. Grid Template Areas – allows you to layout your grid how like, with start/end points and by using names of your elements in the order you want. A very straight forward way of working.
  13. Magic Lines and Magic Areas – You can use the grid template areas to overlay items/text and easily maneuver the grid.
  14. Nested Grids – Allows to make a grid item a grid itself, just like a flex container can become a flex item, using flexbox.
  15. Subgrid and display: contents – Display contents removes boxes applied to the item being effected.
  16. Stacking and z-index – allows you to overlap items in the grid, which can make it more visually pleasing and make more interesting layouts
  17. Anonymous Items – acts as if something around words, is a grid item.
  18. Absolute positioning and grid items – Absolute positioned items are taken out of the grid, however the grid itself can become an absolute positioning tool.
  19. The grid-template Shorthand – Allows you to keep your code dry by only having to change a rule in one element and makes it easier to do so.
  20. Feature Queries and Grid – allows you to change how your layout works depending on if the browser supports grids or not.

The two patterns on Grid by Example site that I would like to use in my redesign of the Discography page are: Thumbnails with section titles and Responsive listing with thumbnails.

 

Thumbnails with section titles – This one is probably my favorite, because of the clean design, and responsiveness. It also would go really well with my Discography page.

 

Responsive listing with thumbnails – This one is better for when one of the things in your grid is supposed to be more prominent.

Ethan Marcotte’s Responsive Design

Ethan Marcotte said that he wanted to make each screen size look different. It is none more apparent than the difference between Mobile and Tablet Portrait. They each have a specific design that is both very similar but different and the same time.

 

This is an example of the code for Mobile on the site.

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}

Whereas with this example of the tablet in portrait mode, It has many more bits that effect the layout.

@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0;
}
}