GitHub Update

As St. Patricks Day approaches I reflect I was at WordCamp last year about this time and decided it was  time for a GitHub update.

GitHub Update I created my GitHub account back in 2012, and never really knew what to do with it. I mean, I didn’t have code that was so magical or wonderful that it needed to be shared with the world. And the years rolled by; 2012 became 2013, then 2014, and 2015 came and went. Then in 2016 I took part in an amazing program at General Assembly(GA), a coding school, called Web Development Intensive (WDI).

HTML 3.2 Compliant Web Page Logo
HTML 3.2 Compliant Web Page Logo

Now remember I have been building web pages since before HTML 3.2 can out, because I remember when it came out, or at least I started using it sometime in 1998. And I started building pages to the new 4.01 standard in 2000. So the WDI was a reboot for me. I had dealt with the buzz word Dynamic HTML, and XHTML phase, and then HTML 5 came out in for real in 2014.

HTML5 standards compliant
HTML5 standards compliant

I had tolerated JavaScript back in the early days because it would work in Netscape and IE, where as my beloved VB-Script only worked in IE. I was starting to use CSS back in 2000, but by 2011 CSS3 was here to stay, and growing. MY Basic JavaScript days were gone with jQuery, a cross-platform JavaScript library designed to simplify the client-side scripting of HTML, having taken its place in my tool-set some time back in 2012. All this adds up to still nothing worthy of adding to GitHub.

Along came 2014, the year of JavaScript fatigue. Every time I turned around, every MeetUp I would go to there was something new, that I was aware of, but didn’t really know. NodeJS with its V8 engine, Angular JS was replacing Backbone, Gulp was taking over from Grunt. And in 2016 I took part of the WDI at GA, and got me back on track.

GitHub Update 2018

ProGit BookcoverFinally I learned how to work Git and GitHub. In 2016 I had 210 contributions, and then had a lag. Bounced came back in 2017, after the WordCamp 2017 with a pledge to do 100 Days of Code.
I had 409 contributions in 2017.

So my “State of the Union” GitHub Update is that I made 421 contributions in 108 repositories in the last year.

JavaScript fatigue

  • Ember,
  • Angular,
  • React,
  • Express,
  • Grunt,
  • Bower,
  • npm,
  • Broccoli,
  • Gulp,
  • Lodash,
  • Underscore,
  • rxjs,
  • Knockout,
  • SocketIO,
  • Threejs,
  • D3,
  • Backbone,
  • Ionic,
  • Angular2,
  • React Native,
  • Redux,
  • Alt,
  • Reflux,
  • Webpack,
  • Bluebird,
  • Express,
  • Mocha,
  • Jasmine,
  • Chai,
  • Less,
  • Sass,
  • Postcss.

Creating Slideshows

Let me show you how-to create a Slideshow with HTML, CSS and JavaScript. A slideshow, also known as a Carousel, is used to cycle through elements such as text blocks or images. I am going to put together the 3 steps to building a very simple slideshow

Build the HTML


<div class="slideshow-container">
  
<div class="mySlides fade">
    
<div class="numbertext">1 / 3</div>

    <img src="img1.jpg" style="width:100%">
    
<div class="text">Caption Text</div>

  </div>


  
<div class="mySlides fade">
    
<div class="numbertext">2 / 3</div>

    <img src="img2.jpg" style="width:100%">
    
<div class="text">Caption Two</div>

  </div>


  
<div class="mySlides fade">
    
<div class="numbertext">3 / 3</div>

    <img src="img3.jpg" style="width:100%">
    
<div class="text">Caption Three</div>

  </div>


  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>




<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

Next Add CSS:

Style the next and previous buttons, the caption text and the dots.

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

/* Next and previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with some see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

Finally Add JavaScript

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n &gt; slides.length) {slideIndex = 1}
if (n &lt; 1) {slideIndex = slides.length}
for (i = 0; i &lt; slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i &lt; dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

How To Create a Modal Box is next up in my stack of quick-steps creation. Meanwhile, if you can’t wait, there is one out on w3schools.com

Learning CSS Grid

As you know CSS grid has moved us from the old ways into a much better way of seeing CSS positioning. I want to share a quick link and not here.
Learning CSS Grid is a nice website, a bit like the Bootstrap site where you can scroll down and see the sample and example code right there to use.

I really like the refrences
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Of course the Guides and External Resources catch my eye.
Positioning items against lines is a codePen I like as well, http://codepen.io/winkerVSbecks/pen/VbpBrY

Mastering Responsive Typography

I am so excited my buddy Zell came out with a class Mastering Responsive Typography. As you know he has written two books, Automating Your Workflow and Learning Susy, which I have written about in the past. Well NOW, I get to learn about Mastering Responsive Typography. Recently I came across responsive logos, and thought how am I going to tackle this new design mindset, as well as setting pages so while the blocks look right, the font or typography is usually small and hard to read. I want it to be small screen, but sort of normal size font. I know in the past I learned a lot about this from his blog, Everything I know about Responsive Web Typography. The other one I had read a couple of years ago, kind of left ya hanging. Good ideas in The Lazy Person’s Guide to Responsive Typography, but I wanted more.

Mastering Responsive Typography Lessons

First, you’ll learn the fundamentals to good typography. You’ll learn how to choose a good font-size, how to set your text properly, so it looks good on any device. You’ll also gain confidence that your typography choices are sound even if you don’t have a great eye for design.

Second, you’ll learn the technical aspects to typography.

He says “… wrote Mastering Responsive Typography because it’s something I wish I had when I started to learn web typography. Although there’s a ton of information out there, only a few ones are truly gems. These gems were incredibly hard to find. I often drowned in the vast amount of information out there on the internet.

In short, Mastering Responsive Typography is right for you if:

  1. You want to understand and internalize design principles to help you design better-looking websites without the help of a designer.
  2. You want to code in a simple and efficient manner while utilizing everything you’ve learned.
  3. You want to learn things quickly so you can produce work you’re proud of.

Mastering Responsive Typography(https://gumroad.com/l/ZpmBL)

 

I tell you what, from what I have seen of his book this course will be worth it. I am excited to see if I can make it happen.

Automating Your Workflow Architecture

Automating Your Workflow with Gulp by Zell Liew
Automating Your Workflow with Gulp by Zell Liew

Last nights SASS Meetup was about Modular Awesomeness, so of course I went. Anthony Daniel’s presentation was an overview a powerful new approach he has come up with to developing workflows, architecture, and components using GulpJS, SASS, Flexbox, and PostCSS at the Big Nerd Ranch. I had heard about Flexbox, and Gulp and wanted to see them in action. I got very excited about learning more about workflows, since my Monday & Tuesday parallax project was a bit wonky.

My buddy Zell Liew had written a book, Automating Your Workflow, which I shared with them, and a Learning Susy book, so I figured this was a perfect place to see the other side in action. I remembered that about 6 months ago, I had seen a blog somewhere comparing Suzy and Flexbox somewhere. The presentation was like biting off more than we could handle in one setting, and we discussed how to do a more simple example set and show only one topic of the 3 main ideas he was trying to present on in future presentation, and that there was enough material to do all three. I hope Anthony comes back with one of the topics more refined. Meanwhile on to Susy designs.

 


Website Layout Tools Compared: Flexbox Vs. SusyLearning Susy
By Zell Liew

Yes, you should check out the book. Even a couple of samples was worth the time to see inside this mindset and methodology of how to make ultra flexible layouts easily with the Susy framework.

Some notes that don’t really relate to this meetup, but fits
(http://www.slideshare.net/webbeh/atlanta-drupal-users-group-april-2015-sasstronauts-advanced-sass-topics)