Category: Web

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

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.

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;
}
}

7 Tips to Clean CSS You May or May Not Know

  1. Clean VS. Messy Code – If you are making a CSS intensive site, sitting and staring at a mess of code can rack your brain. However, if you use comments, you can make it easier for yourself, and/or other people.
  2. Comments – Comments can easily explain code that you used to anybody viewing the code, and are not valid code. For instance, if you wanted to let people know the color codes for different Hexadecmial Values you can make a “Guide” using comments. An example of this would be something like

    /************************************************
    *************************************************
    COLOR GUIDE

    # Dark Grey (Text): #333
    # Dark Blue (Headings, links): #000066
    # Mid Blue (Header): #333399
    # Light Blue (Top Navagation): #CCCCFF
    # Mid Grey: #666

    *************************************************
    *************************************************/

    This is obvious to the reader but the browser does not “see it”.

  3. Shorthand – If you have have to change five or so lines of code just for thing to happen, it may frustrate you. That is why depending on what you are styling, you can just go to one line of code and change what you want. For Example: Instead of typing

    body {
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    }

    You can type:

    body {
    margin: 20px 20px 20px 20px;
    }

  4. Master CSS – To save loading time, you can create a Master CSS file. What this allows you to do is import multiple CSS files to one and use only that in your HTML. This way, the page only has to load one file as apposed to countless numbers of them.
  5.  Structure Template – If you are planning on making many websites using a similar design, you may want to use a template to reduce coding time, if you have already coded it.
  6. Unnecessary Line Breaks – If you have too much white space, it will take longer for the page to load, and is actually not as clean as less white space. If you only have one expression in a set of brackets, just use one line.
  7. Remove Unused Selectors – If you forget about a selector, or refer to it somewhere else, you should delete it. It causes the page to load slower and uses unneeded lines of code that may or may not do anything.

 

Also from watching the CSS Visual Optimization course on Lynda.com, I leaned that I need to comment more and use less white space.

Top 4 types of Website Designs

Flat Design

Flat Design websites are so atractive because of the minimalist approach. As in, there is not too much stuff going on that it is unbearable, but it is not too little that, it looks bland.
The three website styles I would take from for a personal chef would be, tioluchin.com, risotteriamelottinyc.com, and aquaceutic.pl

This is why for each of them:

  • tioluchin – the loading bar on the side of the page
  • risotteriamelottinyc – The menu
  • aquaceutic – the slanted homepage
My three favorite tags on awwwards.com are:
  • Animation – The sites share an animated aspect, such as interactivity. Sites that involve animations such as mediaelection.com are what would go in this category. These sites appeal to me because, I enjoy the interactivity and find most to be aesthetically pleasing.
  • Graphic Design – These sites are all specifically made to be aesthetically pleasing. mediaelection.com is also included in this category because it is very graphically pleasing. The graphic design sites are great for sites that you want to show off your artwork and things of that nature.
  • Minimal – This type of website is usually pretty bland, but not so bland, you just leave the site. A good example of this is trefectamobility.com. It has a nice simple design. I like this style because of how simple and sleek it is.

aquacetutic-pl_slanted_homepage risotteria_melotti_nyc_menu tioluchin-com_sidebar

7 important tips and tricks to creating an amazing website!

The Five Best Things I have learned about coding.

In no particular order the coding tips I have learned are:

  • Characters Encoded – If it is a special character, it’s encoded.
  • Hierarchy – Title tags are reserved for real content, and follow a clear hierarchy.
  • IDs – Used anytime an element appears only once on the page and cannot be targeted any other way.
  • JAVASCRIPT – jQuery (the most beautiful JavaScript library) is served from Google. Only a single JavaScript file is loaded. Both scripts are referenced at the bottom of the page.
  • Valid – The markup adheres to W3C validation. Tags are closed, required attributes used, etc.

I have not been doing enough commenting, which I should. Commenting helps clarify bits of code, for someone else, or for yourself. You may have hundreds of lines of code, but if you want one specific bit of coding, your best bet would be to add some commenting.

The two things I needed to look up while learning more about this.

jQuery- as they say on their website, jQuery Logo

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

W3C – The World Wide Consortium is defined as,w3c logo

The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C’s mission is to lead the Web to its full potential. Contact W3C for more information.

Meaningful CSS: Style Like You Mean It (Discussion 10/02 – 10/04)

Meaningful CSS

Jeffrey Zeldman said “In a site afflicted by classitis, every blessed tag breaks out in its own swollen, blotchy class. Classitis is the measles of markup, obscuring meaning as it adds needless weight to every page.”

Semantic Coding

Semantic Coding is defined as “a specific type of encoding in which the meaning of something (a word, phrase, picture, event, whatever) is encoded as opposed to the sound or vision of it. Research suggests that we have better memory for things we associate meaning to and store using semantic encoding.“

ARIA

ARIA is a technical specification published by the World Wide Web Consortium (W3C) that specifies how to increase the accessibility of web pages, in particular, dynamic content and user interface components developed with Ajax, HTML, JavaScript and related technologies. On 20 March 2014 WAI-ARIA 1.0 became a completed W3C Recommendation. The Author mentions it because it, along with other additional platforms, are included in the new age of coding.

Microformats

Microformats are HTML for marking up people, organizations, events,locations, blog posts, products, reviews, resumes, recipes etc. Sites use microformats to publish a standard API that is consumed and used by search engines, browsers, and other web sites. See what-are-microformats for more.

While looking around on the site this article was originally published, I found a good article about Graphic Design. If you are like me, then you are talented in some fields of web design, but you struggle in the graphic designing department. This article helps you understand what to do and how you can make it easier on you and a designer to work together.

Just remember, if you are bogged down with too much stress, take a break, relax, and keep an open mind.