Category: UXD

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.

Improve Your Graphic Design

The list of lists of things to do and learn keeps going, ever growing. Like in this case, 20 New Tutorials for 2017 to Improve Your Graphic Design.

How to is the name of the game;

    • create a geometric pattern
    • dynamic gradients
    • optimise and export SVGs
    • create digital particle waves
    • create an editable retro text style
    • making quick selections for masking
    • quick and easy duotone text effect
    • endless picture within a picture illusion
    • vintage film title text effect

     

  • Good Graphic Design is Key to Communicating Your Message.

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

This years TYPOGRAPHY post

This years TYPOGRAPHY post. Every year I make a couple of posts about typography. Here is my first for 2017, and its like the old Sears Christmas catalog. Its got a little bit of everything in there to drool over.
 
http://blog.invisionapp.com/free-typography-resources/

  • Free typography education
  • Free downloadable fonts
  • Typography inspiration
  • Font identifiers
  • Visual font calculators
  • Font pairing resources