Discussion on Sass and CodePen

So today, I was learning about Sass(SCSS) from David and CodePen from Kristen. But what exactly are these programs and how do they work? First, Sass, Syntactically Awesome StyleSheets, is a preprocessor of CSS that allows the developer to have more control over their CSS codes. When CSS files start to get larger Sass allows those files and stylesheets to be maintained much faster. It can also perform functions like calculations, color, font, and nesting operations. It can then be saved as a normal CSS file for your website.

For those who want to try out Sass, click this link to everything set up by using Sass Basics. Note that you must install Ruby before you can have access(unless you have a Mac).

The next thing to talk about is CodePen. CodePen is a web-service that allows users to share code with other developers of the same service. They can also search for other developer’s codes for ideas and display their own code, acting as both a resume for those who would want to hire you and a portfolio. This link tells you a little more about CodePen and how it works.

Node.js

//assets.codepen.io/assets/embed/ei.js

Sources:

Codepen Hello

Sass Basics

David Diaz James

Kirsten Haugstad

 

More News on Git and GitHub

More on Git and GitHub

This Monday I have been using GitHub and how it’s used. It’s still a new experience, so I haven’t fully grasp on how it works. What I can talk about is what I learned and what you do on GitHub.

On Github, you create a repository that can store ideas or resources for your project. Then you can create a branch that can either be a master branch or as a feature, which is a part of the master branch. You can then make saved changes called commits, a description that explains to contributors why a particular change was made. Next is opening a pull request, requesting that someone will review and pull in your contribution and merge them into their branch, or even your own. They show changes called diffs, they are either added in green or subtracted in red. Lastly, you must merge your pull request into the master branch for it to be finished. The only real tricky part was following the instructions and knowing what is what.

For those of you who want to find my GitHub page, here is the link:

GitHub zelenenkic

To learn on how to set up your own repository, click this link:

Hello World! Repository Tutorial

Git and GitHub

According to sources, GitHub is a platform built by Linus Torvalds, to collaborate with public projects and protect confidential projects. This tool is open to anyone for use and they can use it track issue listings, form milestones, and discussing and reviewing current and new with team members.

All of this is under control by a system called Git. Git is a source code management system that thinks about its data, takes a picture, and stores it in reference to the current snapshot.

Developers can create projects for an organization, read-only given documents, basically the operator can give his partners little to more management on a project.

Sources:

Introducing Github

GitHub Features

1.3 Getting Started – Git Basics

Design

Web Design Book of Trends

The book that I just look over was called UXPin’s Web Design Book of Trends, where it talks about flat design and how it’s gaining momentum since 2010, due to its intuitive simplicity and user-friendly nature. This book cover different Web Design topics, such as card UI patterns, animation, color, typography, minimalism, and so on. Each chapter talks about how important the different design elements are when one goes into web design.

One of the chapters that I looked at, “Beautiful Animations”, talks about how designers are understanding the practical benefits of web design by adding animation to their works, which has slowly become a staple. The 12 staples of animation still holds true to web design, with timing being the most important. Animation effects should occur within 0.1 seconds of activation to make the interface look responsive. This applies to animations in tiny formats, like loading bars and counters, to primary features, like parallax scrolling and popups. Animation, a medium that stayed longer than web design, is no longer limited to just cartoons, and professional industries are now using it for practicality and not just a distraction. With technology evolving overtime, designers are finding new ways to manage it.

An example of a web page using page motion:

Source:http://www.hungercrunch.com/

Another website that talks about web animation at work:

Source:http://alistapart.com/article/web-animation-at-work

This article was written by Rachel Nabors and it talks about the various steps in making animated interfaces on a web page, and what the requirements are when making them on certain platforms.