Reflection of 2015 Goals

In 2015 I grew a lot as a frontend web developer. I developed a fully function GulpJS based build tool that a whole design team uses to rapidly develop eCommerce websites.  I also started working a lot more with JSON API’s and developing apps that consume API’s.

Below are the Goals I had for 2015 with a short summary of what I accomplished.

Contribute code to an existing open source project.

I had few lines of my code pull requested and add to the jquery-rss project. I would like to contribute even more to other projects especially WordPress and WordPress related projects.

Finish my WordPress starter theme & workflow.

I got the basics of my WordPress starter theme, Bonsai, up and running and built an eCommerce site with it. I would like to set it up even more and start using it to develop client sites as well as themes.

Develop a few WordPress themes and sites.

I developed two WordPress sites the last year. One for a relative which is not live and the other is Flywire. Flywire was originally created with AngularJS and Firebase for the backend. I had some concerns about my data in firebase and also wanted an easier way to edit my data so I migrated it all to WordPress and used custom post types, taxonomies and the WP-API to create the backend for the website.

Learn more about MVC JavaScript frameworks like AngularJS, Ember and React.

I learned a lot about AngularJS and built a full site with it (Flywire). I have recently been learning more about RiotJS.

Learn more about Node.js

I have been using a lot of node.js plugins such as GulpJS and some others. I would still like to learn more about the inner workings of NodeJS and eventually develop a project that runs on a node.js server.

Learn more about web components and Polymer.

I have started learning more about RiotJS which seems very similar to polymer as you can have custom elements and properties.

Continue to keep up to date with latest web technologies, frameworks, and ideas.

I have kept up to date with a lot of web design and development news ideas through podcasts, twitter, and reading articles.

Do more freelance & side projects.

The main side project I did in 2015 was Flywire. I did not do a whole lot of freelance projects in 2015. I would like to do more.

Write and share more. I want to keep this blog more up to date with my thoughts and what I am learning.

I did not write any blog posts throughout the year so this did not work out very well. However I did start sharing more on Twitter and discussing web design and development on Twitter.

Meet more people in the web development & design industry and keep in touch with them. This has been more difficult working remotely.

I went to the Pullman WordPress meetup once. I would like to start going more. I am starting a new job at the end of January so I plan on meeting more people in the industry there.

Continue to improve my web development & design workflow and become more efficient.

I have started using Sublime Text 3, command line along with Git every day that I work. Sublime Text 3 has helped a lot especially with the many color coding plugins it offers as well as custom macros to help with reusable snippets of code.

Keep an up to date projects & case studies page that includes projects I have worked on.

I did not do this at all in 2015. I would like to change this and keep my site up to date more often.

Create a site that generates passive income.

I started Flywire, however it does not currently have ads or any way of generating income. I plan to figure out some way to change this. I am also interested in developing more of my own websites in 2016.

Goals & Focuses for 2015

I have learned a lot in 2014 while becoming a front-end developer and working remotely full-time. In 2015 I plan on learning even more about front-end development.

Below are some of the professional goals I want to focus on and improve in 2015.

  • Contribute code to an existing open source project.
  • Finish my WordPress starter theme & workflow.
  • Develop a few WordPress themes and sites.
  • Learn more about MVC javascript frameworks like AngularJS, Ember and React.
  • Learn more about Node.js
  • Learn more about web components and Polymer.
  • Continue to keep up to date with latest web technologies, frameworks, and ideas.
  • Do more freelance & side projects.
  • Write and share more. I want to keep this blog more up to date with my thoughts and what I am learning.
  • Meet more people in the web development & design industry and keep in touch with them. This has been more difficult working remotely.
  • Continue to improve my web development & design workflow and become more efficient.
      • (Added 1/12/2015) Become proficient with keyboard shortcuts and not using a mouse/ menus.
  • Keep an up to date projects & case studies page that includes projects I have worked on.
  • Create a site that generates passive income.

What I learned this week #3

What I learned this week (and the past few weeks)

I have missed a few weeks of this blog post and I am making up by including what I have learned over the past few weeks.

  • I am more comfortable with command line Git and no longer need the windows GUI version.
  • I have started using gulp.js over the past few weeks as a build system to compile SASS, minify CSS/ JS, concatonate files, livereload, and much more.
  • Over the past weeks I learned a lot about roots wordpress starter theme and there well known theme wrapper.
  • I learned about WordPress’s coding standards and started implementing them (along with gulp.js) into my own starter theme, Bonsai.
  • I read through ThemeForest’s WordPress Theme Submission Requirements
  • I have learned a lot about front-end performance over the past view weeks while looking at the network tab in chrome inspector on various sites and tests.
  • I learned about the EU VAT laws in Europe that are making it so that digital goods and services will require business to pay taxes based on the consumers country (in EU)
  • filter: in SASS does not work (example, filter: grayscale(50%);)
  • I Learned about DPLOY, an FTP/SFTP deployment tool built in node.js
  • I learned that Angular-seed now uses a more scaleable folder stucture that rather than have a folder for /controllers, /views etc. they use a folder for each feature and have all of the files for that feature in that folder. I really like this approach and it could translate to any project that needs to scale.

What I want to learn

  • JS testing. Using Karma (or a similar testing runner) to test JS that I write.
  • Creating Gulp plugins.
  • Creating WordPress plugins.

What I learned this week #2

Second week of doing, “What I learned this week”. Writing these has helped me reflect on the past and will give me good insight into what I have done over the month and even the year.

What I learned this week

  • CSS class names and IDs don’t effect SEO. So CSS does not need to be as semantic as HTML. Video – AZPixels: Play nice with CSS tools and Methodologies
  • With HTML5, we can use multiple <h1> tags on a page and be fine with SEO. One example is using <h1> for the site title and another for a post title. In the past it was viewed to strictly only use one <h1>
  • console.table(myObject); can output a table in the Google Chrome console with the object properties and values.
  • I Learned quite a bit more about object oriented javascript by contributing to a few javascript plugins.
  • Doing a tweet with a . in front of a tweet will add it to your timeline and allow more people to see i instead of just having the person you replied to and their followers see it. Example
    .@rdallaire Check out this link!

     

What I want to learn

  • I want to start learning to do more things outside of internet technology.
  • Learn more about computer hardware. I used to have a desktop tower that I built and would keep updated with hardware and ever since using a laptop, I have lost that connection with hardware.
  • Optimizing websites as best as possible. Getting sites to load fast and not be heavy downloads on mobile devices. I currently do a bit of testing in this area, but there is a lot more that can be done.
  • To do more user research. I currently do a little bit using Google Analytics event tracking but more would be great. Investigating what converts on websites and what doesn’t and coming up with best practices and ideas.

What I learned this week #1

I’m going to start trying to blog more and doing a weekly post on what I learned throughout the week.

I’ve been trying to get back into blogging and a friend (Donald Plummer) had started writing about what he learned each week. I will try and make this a regular series of reflecting on what I had learned throughout the week and what I would like to learn.

What I learned this week

  • To use WorkFlowy as a Kanban Calendar to organize myself and what I am doing for the day/ month. I have been using it mostly as a personal organizer and have tried to keep work related projects out of it.
  • How to use HTML5 <video> to create a full page video background loop on a site (coming soon on the new portfolio).
  • How to setup a preloader that shows up before a page is loaded with jQuery.
  • How to make sure adblock plus doesn’t block your CSS file.

What I want to learn

  • How to setup Herkou (on Windows) and deploy my own AngularJS app to it. I have tried this once with no luck.
  • How to use MEAN.io and create apps with users, data that saves to the users, and permissions.
  • How to use GIT with all command line, or using the SublimeText 2 package.
  • Memorize JavaScript/ jQuery functions and syntax.
  • How to read articles quicker (speed read).

Create an Animated Return To Top Button

Learn how to create a simple back to top arrow that will stay in the bottom right corner of your screen when users scroll down on the page.asdasd

Here is what you will be making. Scroll down inside the box to see the arrow pop up in the lower right. When you hover the arrow it animates up using CSS. When you click the arrow it returns you to the top of the page.

See the Pen Return to Top Arrow by rdallaire (@rdallaire) on CodePen

 

FontAwesome Icons

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Take a look at the FontAwesome website for all the icons and more examples.

I use the FontAwesome chevron-up in this example. If you want to use the exact same code you will need to include the following in your <head> so that the class=”icon-chevron-up” will work properly.

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

HTML

Place this HTML anywhere on your page. I usually place this at right before the end body tag.

<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>

CSS

This can be placed anywhere. I usually place it in my global.css or main.css

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

 

jQuery

You will need to include the jQuery library to use this script. Here is the newest version at the time of writing this article. You can visit http://jquery.com for the latest version.

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

 

This can also be placed anywhere. I usually have a global.js that includes all my JS and jQuery. You could put it between <script> tags in your <head> if you wanted.

$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});
$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});

Making updates to websites

I recently updated my portfolio. I added in some of my more recent web design work and removed the older work. With the design update to my portfolio, I also updated my blog design.

I recently updated my portfolio. I added in some of my more recent web design work and removed the older work. With the design update to my portfolio, I also updated my blog design.

I have chose to make it as simple as possible with only the features that are going to be useful to both myself and the (very) few readers. I also am initially launching the new design with the intention of slowly updating the design and features over time. I have noticed that websites are never finished and always changing. Amazon is a great example of a large scale website that makes small changes instead of doing a complete redesign.

How Amazon makes design updates

Most people haven’t noticed, but Amazon has slowly implemented design features on their website over the past few years that have changed user experience for the better. This is because with smaller changes, their users will be able to adapt better to using the site rather than having to explore a completely new site.

Other (Non Design) Updates

I have recently started playing the trading card game Magic: the Gathering thanks to the sealed league we started playing at work. It is the first trading card game I have actually played and it has been really fun. One great thing about learning to play is that there are lots of resources online including simulators that allow you to play the game with other people over the Internet. The program I have been using to play online is Cockatrice and I would definitely recommend it to any one that plays Magic.

Let me know what you think about the new site design and blog in the comments.

Blog is back & This Week In Tech with Kevin Rose

Something happened to my blog a few weeks ago (I think it might of been hacked) where the admin username was changed and the CSS for my custom theme was removed. I am just now recovering the blog and I’m going to use a WordPress theme until I can make my own again (No, I did not have any backups of my site). This had made me learn my lesson about backing up files and I will now start backing up my important files more often.

I have always been a fan/ follower of Kevin Rose from TechTv to TheBroken to Diggnation. I just happen to find Kevin was one of the hosts on Leo Laporte’s This Week in Tech. Kevin got to talk a little bit about the transition from his app development company Milk, to now working at Google Ventures as an investor for Google.

In this episode the group also discusses

  • The Downtown Project where Zappos.com is planning on buying part of downtown Las Vegas for their headquarters and as a ‘company town’
  • App.net and paid social networks
  • Samsung’s copying iPhone technology (and a funny video talking about it)
  • and more

Redesign Process of Palouse Food Bank Website

A group of other DTC (Digital Technology and Culture) WSU students and I were placed into a group to do a redesign of the Palouse Food Bank website.

UntitledThe site that was presented to our group before the redesign process was a default WordPress theme (Twenty Ten) that had been slightly customized with a background image , header image, and a few widgets such as the Facebook one. A few of the pages that were available on their website had little or no content, so our group also looked at the redesign as a chance to re vamp the site architecture for easier usability.

Our process started by looking at other non profit websites and recording what we liked about the sites and what we didn’t like. After looking at various sites and determining specifically what we wanted on the site, we drew up a few different wire frames and decided on one. We then recreated this wire frame in Adobe Illustrator with their logo to show the client how the site would look and work.

After we got approval for the wire frame we then went into Adobe Photoshop and started creating the layout of the website. After many revisions we came to a final layout (below) and then coded it into HTML, CSS and added a few jQuery scripts such as a slider that would show statistics from the website.

I am currently working on integrating the final layout into WordPress so that the client would be able to easily update content if needed without the need of someone that had knowledge of HTML.

I will post an update of when the WordPress theme is done and the site is live and being used.