Day 53: In The Mix!

huevon

One of the most powerful features of SCSS is mixins. I mentioned in my last post that CSS preprocessors give writing CSS more of a programming feel and mixins in SCSS are a prime example of that. A prevalent concept in modern programming languages is Don’t repeat yourself (DRY) and mixins are a great way to properly handle code that has to be used in many parts of a project. Mixins are blocks of reusable CSS declarations that can be used though out a project.

Creating and using mixins is a simple process. Mixins are declared by using the @mixin directive, followed by the name of the mixin, and the reusable code is input within curly braces. To use a mixin, one must simply add the @include directive followed by the mixin name to the desired selector and the code defined in the mixin will be included when the SCSS is compiled to CSS. The next level use and creation of mixins is a bit more complex.

Mixins can be used with with more complex programming concepts. For example, arguments can be passed though mixins and default values can be defined for parameters. Conditional statements can also be used with mixins. A mixin can become as complex as the engineer(s) need them to be.

Until next time!

#StayCoding

Day 52: Sassy!

tenor

In the world of Front-End Development , use of a CSS preprocessor is of massive import. Today, there are many CSS preprocessors available for teams and engineers alike to use, such as LESS, Sass, SCSS, and Stylus. It is very common for Front-End Development frameworks, such as Bootstrap and Foundation, to be built using a CSS preprocessor. Preprocessors empower designers and programmers to optimize their CSS utilization by systemizing the process. The benefits of using a CSS preprocessor are many and they are definitely here to stay.

Preprocessors are very beneficial. While many will argue that creating CSS is not technically programming, using a CSS preprocessor gives creating stylesheets a programming feel. In almost all preprocessors selectors can be nested, extending the rules from parent selectors to their children. Reusable variables are also common in preprocessors, which allow for code to be more modular and readable. Like many programming languages, developers can utilize many built-in functions and, if they need a custom solution, create functions of their own. Once the code is processed into CSS, the resulting stylesheet is standardized and easy to read. Above all, CSS preprocessors are more programmer friendly than standard stylesheets.

In my own studies, I have decided to make SCSS my preprocessor of choice. In my opinion, SCSS has syntax more similar to vanilla Javascript, which I really like. Using SCSS has helped me be more efficient writing CSS. I really enjoy using partials, which make my code so much more organized, especially when stylesheets become really long. I also like that pure CSS is valid SCSS, so if I’m in a crunch I can find a way to solve an issue in CSS and it won’t break the rest of my code. I look forward to continue mastering SCSS!

Until next time!

#StayCoding

Day 39: Cascade!

moana

CSS, or Cascading Style Sheets, were invented to improve the presentation of the World Wide Web by Håkon Wium Lie. With CSS, Web Developers can add animations, manipulate text, use an image as a background, and much more. The possibilities with CSS are almost boundless. The end product really just depends on the preferences of the Designer/Developer.

There are many ways to invoke CSS. Within html documents, CSS rule-sets can be invoked inline, by using the style element. External style sheets can be invoked by using the @import rule, within the style element. The most common application of CSS is through external style sheets using the link element. CSS can be used with multiple style sheets and a mix of all the aforementioned methods, hence “Cascading” in the name. It uses a weight system to determine which rules to use.

css-syntax

Rule-sets, in CSS, are composed of selectors, properties, and their respective values. Selectors reference the html element to be modified. Properties declare the characteristic of the selector is to be changed. The values define how the property is modified.

I have used CSS for a long time, but it wasn’t until recently that I decided to fill in the gaps of my knowledge. In my pursuit of one day being a 10x Engineer, I have really enjoyed using shorthand CSS properties. There is so much to learn with CSS and I’m excited to continue learning about it. I’ll be getting into SASS and advanced CSS in future post!

Until next time!

#StayCoding

Day 24: What’s up DOC!

doc.gif

I have taken the past couple of days to brush up my knowledge of html and to familiarize myself with its newest features. In the advent of the web, Hypertext Markup Language, more commonly known as html, was the language used to create web pages. Since then, the web has become vastly more sophisticated, with the creation of CSS and Javascript, among other technologies. As the web has become more advanced, so has html as a markup language.

The most recent iteration of html, html5, has build upon the foundation of its predecessors with both the developers and users in mind. Prior to html5, developers were forced to use the div element very generously. Now, developers can use html elements such as header, article, section, and footer to markup their web content. Not only are these new elements helpful for teams of developers to create and keep html documents organized, but this also helps users who access web pages via accessibility devices. The html5 document declaration is also valid for XHTML.

html5 also includes updated element attributes, embedded video, and animations. Forms, in html5, can now input email, date, telephone number, and time types. All of these attributes can help search engines when they index html pages to assist the users in finding more relevant information to their query. Previously, developers would have to employ a service like Adobe Flash to embed a video into a webpage. With html5 video, Flash and other services are now optional for embedded video for now. Canvas, an html5 feature that requires Javascript, can be used to create vector images in a web application.

Both the web and html have come along way, since their creation. Hypertext markup language 5 can now be combined with CSS to create responsive web pages. The most advanced features of html5 require the use of Javascript, such as Canvas and the  Geolocation API. This is only really scratching the surface of html5 (I will cover more advanced features of html5 in a later blog post).

Not all browsers have transitioned to completely support html5. A browser that does not support it may not recognize html5 elements and the content is ignored. To address this issue, html5 shiv was created. Shiv creates  in Javascript, so that the browser can natively recognize and style. Thanks to Josh Hibbert, I have this awesome Sublime Text 3 html5 shiv snippet.

Until next time!

#StayCoding

Day 19: Phase 1 Concluded

I am very pleased to say that I have concluded the first phase of my studies.The entire purpose of this study period is to level up my skills as an Engineer and I can honestly say I feel I have succeeded.I feel my stronger in my ability to use Sublime Text 3, git, and Zsh. Throughout this phase, I also published two Node.js projects that use the Twitter API to Github that I’m very proud of. The entire purpose of this study period is to level up my skills as an Engineer and I can honestly say I feel I have succeeded.

I have added many valuable tools to my belt in this short period of time. I am more efficient as an Engineer because of Sublime’s speed, the availability of snippets, and the ability to create snippets. In git, I have learned to explicitly create branches in locations other than the currently checked out branch, which is useful for thinking ahead on projects. Adding to my Z shell scripting skill has given me the ability to be more self reliant, I can now setup MEAN stack web servers without having to wait for one of my colleagues from ops to spin one up. Undoubtably, my skills have become more valuable over phase 1.

The primary objective of Phase 2 will be to further hone my Front End Development skills. These next few weeks will include studies in html5, CSS3, and Javascript(ES5). Let’s get it!

#StayCoding

Total Study Time Day 0-19: 159 Hours.

Day 15: Gitter

Spicegit

I’ve spent the last 8 days becoming more thoroughly acquainted with git, so I took it upon myself to dig deep into the .git directory and its contents. After looking around and doing some googling, I decided it would be pretty cool to build something that would be triggered by a git hook. After tweaking Tweetly, my command line tool to send tweets, it struck me that it would be cool to tweet a link to the repo of whichever project I am working on with the commit message. Git has really blown me away with it’s potential for making project collaboration, not only more contained, more seamlessly efficient.

The appeal of Github is social coding. Not only is Github a place to share our code, but its a place to share how we code. I believe the importance of this has been reinforced by various tech giants making some of their largest projects open source. The topic of making project team workflow more friendly is a topic that comes up. In the book Eloquent Ruby, Russ Olsen says “Good Ruby code should speak for itself, and most of the time you should let it do its own talking.” While that isn’t necessarily exclusive to Ruby, I believe it empowers each engineer and team when we communicate conscientiously. The quality of collaboration becomes more important as a project grows and teams (or communities) that collaborate well succeed.

I wanted to create a tool that would take the messages from commits and share them to another social platform. Gitter is a executable JavaScript file created to allow users to tweet their commit messages while they work with ease. I believe Gitter gives teams an opportunity to be more transparent and maybe even help unemployed talent land get recognition!

Until next time!

#StayCoding

Day 10: Branching out

groot

Git’s notoriety revolves around the fact that it is a distributed version control system and that is made possible because of branching. In Git, branches keep a record of the code a developer commits to differentiate it code previously designated as the code to be shared. A distributed version control system allows users to ship a master version of the software they are developing and retain a private version to develop different features on branches. The mastery of branching and merging have been my focus the past couple of days.

At first, it was difficult for me to grasp Git commands. I love working from the command line, but working with Git branching commands were not intuitive to me at all. However, after some visualization by drawing out what each command does on my white board and practicing them with repetition, they finally all stuck. I’m very comfortable setting up Git on a machine that doesn’t have it, creating repositories, setting up remote repositories, branching, and merging. I look forward to using Git to empower me and to be more in control of my workflow.

I do have one gripe about Git. In my opinion, if there is a command to create and checkout to the new branch, there should also be an option to merge and delete a branch as well. I understand that if such a command did exist and it was used carelessly, the results could be catastrophic. For those of us that are careful, however, it would save a lot of time.

Until next time!

#StayCoding