The Big Ol Blog

A Web Developers Book Of Secrets

As I have been growing as a developer something major has occurred to me. It is not about how much you know that makes you a great web developer but more of what you have experienced being one. For example, if you have a task at hand that requires you to do something you have done in the past, remembering the obstacles and what made it work will give you an edge. A website like CSS-Tricks makes me think of this as its inception was so Chris could keep up with common things he found while becoming better at CSS. For myself, this spreads out to all different types of projects as a freelance developer.

I recently started keeping snippets that pertain to what I do too commonly. Ironically as I do enjoy SEO so much that if people find it and use it great but if not fine too as I am using it for me. Book fo secrets normally seem to be magical but really its the worth to the people that know how to use it. I think all developers and marketers should consider doing this.

Why More Work?… Not Really!

I have heard a time or two that if you read it, write it, and explain it then you know the subject. This means as you are developing your book accomplishing those three things is just going to happen. This is about the same as going to a conference coming home and blogging about it. The difference this is from that is you are just writing down what you normally do, and instead of the recall pause, you have the source right there.

Satisfaction Of Progress

I recently did this for a hero image and the HTML, CSS that is commonly being used by myself was improved because when I was documenting it I saw improvements. I have used this 3 times in the last month no joke! I am about to move the “Snippet” thought into reality on this site too. I can see how much is there and it’s worth that easy access for me and my fellow developers and marketers.

Examples Of What’s In My Book of Secrets

  • Google analytic dashboard templates for specific clients
  • Citation lists for local businesses
  • Webdev tools on inspect element
  • CSS for (buttons, images, hero images, etc)
  • WordPress Templating Hacks
  • PHP snippets to aid in content flow
  • EMMIT shortcodes to help my development speed
  • Server Configurations
  • Common command-line codes
  • and some other awesome items

Conclusion

I am just sharing my ah-ha moment with the world and hope that maybe some other people’s development lives will be improved. The examples above are just some and building by the day if you might be interested check back and see what I have to offer….or what I offer it is my book of secrets. I really do think that we all grow as a team and no by ourselves and by reading other blogs this is what inspired me.

Arrow Functions Are Not Always Needed

I wanted to start off my first post of 2020 with a personal concept that I have seen recently and that is although JavaScript is ever evolving and fun new ways of getting the job done get people excited. This does not mean it is the only way in my opinion and why I am writing this. As I am learning to code you come across other’s syntax, and if you are posting to the world to see why not make it read like a story. Instead you can get people who are “Arrow Funciton Happy” and can make things hard to understand.

What are Arrow Functions

“An arrow function expression is a syntactically compact alternative to a regular function expression” – taken from https://developer.mozilla.org/

I think that this states its a COMPACT ALTERNATIVE which means at times this is the way to go and others not so much. In a section below I will speak of the pros and cons of using arrow functions all the time.

Arrow Function Example
Basic Example To get the point across

Now the example above is perfect and yes that could have been a let or a const but still. In this case, it is on a single line and easy peasy to read. That is the thing for me I am getting used to using them and really like it but when reading other code it can get intense.

When to use Arrow Functions

With what is stated above it is important to know that things are created for a reason. Arrow Functions can create clean code and some codebases may even enforce you to use them at times. If a function is being applied over and over again then the use of an arrow function is going to be your way to go.

For example, if you have an array of values that you want to transform using a map, an arrow function is ideal:

const stuff = ['bike', 'bread', 'shoes'];
const downcasedStuff = stuff.map(stuff => stuff.toLowerCase());

Another place arrow functions make for cleaner and more intuitive code is in managing asynchronous code. To manage this you will need to have promises which will need to functions defined which is an ideal location for an arrow function.

These are just a few of the places where some arrow functions can come in handy. Don’t get me wrong my frustration is not being able to read them……A personal problem yes.

Cons of Too Many Arrow Functions

Not using them is going to come into play with objects and methods because if you do not have the entire thing mapped out then you will run into problems with testing and readability as well. Also if you are chaining function calls. For example, if you have anonymous functions that are repeated called finding them with no definition can turn into a nightmare.

Rant Over!

Well, the reality is that Arrow Functions are actually pretty awesome and useful it done right. My examples of when not to use them may not even be 100% on. I think that using them wisely to save time is smart, and the better I get at reading them and writing them I will be a bigger fan. All in all, as I wrote this I learned why to use them and when not to.

Track Calls With Google Tag Manager For CRO

SEO TIP: Using the Google Tag Manager to track mobile calls for a site personally is a great way to track CRO that you are doing for a client.

Why track calls with google tag manager

Using Google Analytics to the fullest potential can really let you see how people are acting on your site. One area that is not always used though is the simple clickable number with some tracking applied. When you have a service-based business that wants to know if your work is doing anything, and having call data to prove that yes it is can really assist in your efforts.

Basic Google Tag Manager Set Up For A Phone Number

1. Go to Google Tag Manager

2. Create an account

3. Fill the following out (account name, container name, and choose Web)

4. Install the 2 provided snippets of code

5. Set up the TRIGGER First (when you get to the RegEx part the value is .* not just *

6. When setting up the Tag Type for GA in the next step

7. Set up the Tag (name it accordingly)

8. Final Screen

9. Now let’s check Google Analytics to make sure it’s firing

10. A common mistake is people forget to publish the container after they make the tag which I did while writing this post so save yourself 30 minutes of searching and publish. This will also allow you to see if there are any errors in your set up.

How This Helps SEO

By using this as a tool for a business you can really show that if a call normally turns into a lead or any conversion placement of the number on various pages or areas of a site can drive that revenue. A big example of this is when working with a dentist’s office and the topic came up if the price was worth it. I could show that by having this one metric along with other basic traffic information I showed that my efforts not only brought more visitors but brought in more money to the practice. One of the fun parts that SEO brings is that you have to consistently keep testing out ideas and processes, but sometimes finding all the failures is what makes you a better marketer.

Conclusion

Post like this where we dive into the strategy to track calls with google tag manager, a city + keyword approach to drive traffic, or even SEO image optimization, all of these are things that I hope helps someone else like me. Stay tuned for another post coming up soon for Goals and how they help determine marketing ideas in Google Analytics.

Learn To Code With Freecodecamp

I wanted to give a shoutout as a life long learner to freeCodeCamp.org. Before I start I want to make sure that any reader knows I have a Bachelors’s degree in CS, have been working as a front-end developer (engineer) whatever for over 6 years, and have also taken a lot of online courses. No matter what having a resource like freeCodeCamp.org allows me to review and learn the material at any time.

Things Are Not Free Donate

Every time you logon it gives you the opportunity to either donate monthly or a one time, or free. The thing is I have been compelled to donate just in an effort to not only continue helping me grow but other future devs too. The community of freeCodeCamp.org helps it grow to new heights every day, and you can literally go from zero to hero in basically any direction of development.

What Can You Learn…Everything

How To Approach The Platform

If you are a new developer I would recommend just starting from the beginning and doing about 30 minutes to an hour a day if you have time. The courses are laid out great from Javascript fundamentals, Bootstrap, even SASS to build up your CSS. Another great aspect is you can turn on the music and just go because there are no videos.

For the more experienced developers out there that think this is just for a newbie, you are wrong. I wanted to get up to date with my ES6 and BOOM! I went through that section in about a week just a little at a time letting it settle in, and then I ran into a project that was going to be REGEX heavy and once again Freecodecamp.org to the rescue.

You can never learn enough and if you do know how to empty your cup of knowledge you may have the opportunity to find new ways of doing things.

“Empty Your Cup So That It May Be Filled…”

Bruce Lee but from a Zen Proverb

Benefits of Learning To Code With Freecodecamp

  • Learn at your own pace
  • Experience does not matter all material is relevant
  • Forces you to look things up for answers
  • Certificates for personal gratification
  • Motivation for projects
  • AMAZING COMMUNITY OF PEOPLE

I love to write about my trials in learning to code and be the best programmer I can be. From posts like personal growth through online learning or fundamental design tips, I am just reflecting and hoping that it also helps someone else grow.

Fundamental Design Tips For A Front-End Developer

I am not a designer nor is this post supposed to turn you into one. I recently have been getting more interested in how I can design better sites as I develop them. Recently I have been speaking about JavaScript and SEO, but more times than most I have to design little elements while building. Many times when you are the sole front-end developer on a project there are times when a designer is not involved, so its all up to you. I think just like anything the fundamentals are key to understanding and being better at said task.

Post Highlights:

Color Theory:

Color theory, in short, is the psychology behind how colors work to the human mind and overall psych. Knowing how to use these can assist in getting certain objectives across. An example of this is if you are contacted to design a site that is for a finance company then there are certain colors that you would want to pick to use based on trust, success, money, etc.

Colors can envoke certain feelings!

  • (Red) love, energy, intensity
    • Ads will use this to push these emotions (cars, lingerie, etc)
  • (Yellow) joy, intellect, or attention
  • (green) safety, growth, freshness
    • Foods, money, 
  • (Blue) stability, trust, serenity
    • Finance, law, insurance, doctors
  • (Purple) royalty, wealth, feminity
    • Payday loans, women based ads

How to Combine Colors

fundamental design tips a front-end developer can use

Analogous Colors: pick a color on the wheel and then pick the next color

Complementary colors: pick a color then go directly across the wheel (logos)

Split colors: when you take a color and turn it into a three-color palette like a Y

Triadic colors: literally pick a color and then draw a triangle (the ’90s overdid this)

Monochromatic Color: Take a color and then add white or black to contrast the color creating many other colors in the same tone

Tools For Colors:

Its always good to have some fun tools of the trade and these can give you want you are looking for.

  • Colorhunt.com
  • Flatuicolors.com  (good for IOS platforms)
  • MaterialPalette.com (Android-style pallet)
  • Colorzilla (color dropper for your browser)

Typography Becuase Yea

Typography is the visual part of how words look or are perceived by someone. A great breakdown of this can be found here. Essentially the typography you use can determine if someone can read your content easily or how they perceive your page. Just like with color theory above you can envoke emotions in a way with the typography that you use.

Fonts do matter and can convey your message in different ways

Two families

Serif and San Serif

Serif – The Feet! of the letters differ it. Came from stone engravings (I think this is right?)

-Serious style like lawyers, office, etc

-Old Style  

-Transitional

-Modern

-Slab

San Serif – No Feet!

-Grotesque

– Neo-grotesque

-Humanist

-Geometric

Both Serif and Sans-Serif work well together

So you can have a Serif header you can have a Sans serif as the body or vs, but do not attempt to mix two of the same kind. 

2 fonts can look good 3 is a bit much and 4 fonts are straight crazy!’

Typefaces hold moods so if you mix moods in terms of the typeface then it will look odd. 

Try to stick to the theme you are using to keep the flow. 

A great tool is WhatFont it is a browser tool that allows you to highlight the font on a site and you can get all the info needed to use it. 

Free for commercial fonts? FontSquirrle

UI Design

  • Every app design is that of a journey
  • Be the tour guide
  • Check out, Jermey Thomas πŸ™‚ Web Design In 4 Minutes

Alignment is KEY!

  • Minimize the alignment lines
  • Center align edge alignment, etc. 
  • The fewer alignments the cleaner it looks

Interaction Design

  • How a person interacts with elements is how they should interact with them in real life
    • Drop shadows on buttons, a shine on an element to make it look real
  • Make a person want to interact by making items inviting (icons, drop shadows, represent the real world)
  • Sub-conscious ques to interaction

Text Overlays

  • Common for header images on a site
  • Use a block with a high opacity background to help it stand out
  • If the background is not changing  then you can adjust the color of the image until the text is more readable
  • Add a colored overlay for the image to help the text stand out just a bit
  • A fading overlay for the text so you do not disturb the image

Attention Architect

  • Think about how  you can make items stand out (colors, bold, or other items)
  • Keep the footer clean 

If there is a key point to make that stand out more than the others β€œI am big time”

Conclusion

I really made this to help me remember some major points of design as I am by far not a designer. I did this same type of a post for Node.js and have referenced it many times as well. It is fun though to geek out on concepts that are outside of making a picture or website even “pretty” as some may say. To demystify something is something that I love to do. When you sit down and see fundamentals of anything from drawing, language, Brazilian Jiu-Jitsu or even design things can be much more clear when attempting to understand it.

All Things Open 2019 Raleigh

Exciting Times and People To See

I posted a blog last year of my experience at the All Things Open event in Raleigh NC and it was amazing. You can read about that here (shameless blog post plug). Last year I was one of the first people in the door and to no shame to make sure I grabbed all the tech merch I could and STICKERS! It seems that this year is going to be even more amazing too.

Plan for 2019 All Things Open

So this year I have a goal which is to come with a plan. Last year was more of a fanboy moment where I just wanted to hop around to hear some very talented people speak. Well, honestly this year will maybe be the same in a good way.

  • Database Learning
  • Front-End Engineering
  • Gamifying
  • 101 / Introductory

You can find the schedule here

The list above is not set in stone for me but last year I literally learned so much and really felt the sense of community in tech for the Raleigh NC area. Last year the Vue.js talk from Jen Looper, David Neal on Node and other awesomeness, and watching the Start-Up Pitch that Triggermesh did was beyond worth the entire conference. I am looking for some gems like this again and know they will be there.

As a front-end developer, I am looking especially forward to Chris Coyier from CodePen.io along with so many other talented people that will be there this year. I did realize that it is not about coming out of the three days with a new way of doing something but instead insight on how to complete certain things easier or explore new areas of tech that have been on my todo list.

On that note, if someone reads this and is wondering if they should attend the answer is YES! and if you see a dude name Timm it’s going to be me don’t be shy and say hello.

A Front-End Developers Birthday

Today marked about 6 years in front-end development and somewhere in the mid 30’s as a human that walks the earth. The real reason for this post is not some reason to give myself a shout out and dive into a giant cupcake while I rage to my favorite song. Instead, it is for a reflection that I had as I woke up today. As a developer, this “Impostor Syndrome” which I first read about from David Walsh who is also a really cool human I like to keep up with, really is a thing and something I relate too.

The Journey

This is not a life story just what I accomplished this year and feel pretty awesome about it. No, I did not create an app, get a new job, or even have that much to show off. I DID though learn a lot on my own time and in a fun way about JavaScript with especially just feeling more confident in the code I write. It all started with an online learning course I snagged from Udemy that was led by Angela Yu , and if you are new to development this is normal but then you move on to your own projects. I deployed some sweet action through GitHub, became kinda superhero-like on the command line, and helped a lot of my friends with just doing stuff on the internet.

Learning Is Not Always The Same

I found that as I came into this year that instead of focusing on a specific item to learn just enhancing me a person has allowed me to 10X my brainpower. What I mean is that I have wanted to learn guitar, draw better digitally and on paper, read more books, and those items that so many people would normally put off I put in focus. The result is I was using all different parts of my mental capacity kinda like a workout.

The Result

I put a little effort into each item every day and really just a little. By my birthday this year, I can say that I have a nice drawing journal, can navigate and use both Photoshop and Illustrator much better, have a pretty big comic selection, and can play some jazzy tunes. The caveat is I also have exploded in my front-end development skills. The little effort I also put into (deploying a signup form using the MailChimp API with Heroku, found the beauty of EJS for templating, Node.js, and polished up my overall JS skills, and became a master of the command line). Where I am going with this is if I just tried to focus on learning a new framework and that was it yes a project would have been done but that is where it would stop. Instead, I have leveled up all my skills in my personal life and ready to rock this next year the same.

Truncate a Little Javascript

This is a snippet for me but fond that it may also be helpful to many so I wanted to take some time to place on the site. Too many times we are tasked with creating a blog and then it is needed to only show so much.

The Power Of Substring

The substring is about the easiest way of going about this as depicted here on the trusty W3C . But ironically upon my research of something I do know I found this little snippet of code as well.

Now the reason this stood out to me is just the simple fact that you can determine the amount you may want to show. So instead of only showing say 100 characters lets say you want just a little more to show to captivate the click per se.

(text_truncate(‘Super Duper Ice Cream Scooper’,19))

What the result of this would be is Super Duper Ice Cre….

Not that big of a deal as to do this with substring is just as easy too;

post.content.substring(0,90) + “…”

in this example, we are taking a variable and then just saying Yo substring from 0-90 you are good then put 3 dots on it! In this journey, I keep finding that there are literally 100 ways to get to the same result, and sometimes well most of the times taking the fastest approach is the best. I just enjoy finding ways of playing with code and this one stood out.

Personal Growth Through Online Learning

I started this blog to showcase some of my path during learning new technologies like Node.js, SEO, Web Development and also highlight some of my talents along the way. So personal growth through online learning…… I have recently reflected on this and how my path of getting a high education took me down this path to start with almost a decade ago. I get asked from time to time if it was worth it. My answer is kinda and because what it really did was teach me how to teach myself. As a web developer knowing how to google or search anything you need is a skill all alone, but you can literally learn anything with that same concept.

What Am I Learning

So when asked this I freaking love to answer with pride and no its not all code.

  1. Photoshop
  2. Adobe Illustrator
  3. Drawing comics
  4. Playing Guitar
  5. Investing
  6. Italian
  7. ….more to come

These are all hobbies for sure but the reality is they bring me joy and at almost 35 joy is important. When I learn my family learns because I cannot wait to share that info with everyone around me.

What Is The Reason?

What is the reason I am seeking personal growth through online learning? Really there is none I find that if there is time to burn at any moment making yourself a better human should be the goal. This can be from physical to mental activities. It amazes me how I can just about hold a conversation with anyone about some random topics due to this. Sometimes I think man I am never going to finish what I started and you know that’s totally okay in my opinion. I know way too many people that during the downtime it is spent grinding out a {insert streaming choice} or let’s say its work related they are so focused on that new startup no joy comes of it.

No I Am Not Special

The joy from personal growth from online learning can be contagious. I used to get so annoyed from articles about people half my age that become awesome at something because they had nothing to do all summer. Then I thought wait they are just choosing how to use the time they have and so can I. More and more studies come out that “hey life is hard and you should try to be happy as much as possible” because one day we are all gone and that time spent better of been on something pretty cool.

Best Node.js Explanation For a Newbie

Why is this the best node.js explanation for a newbie

It is plain and right to the point, if you are a seasoned programmer this may seem silly but honestly, everything out there was too in-depth for me to understand. Knowing about Node.js is important for a full stack developer, but being confused and not wanting to learn it is another challenge. Above I spoke of how node.js uses your code and how you can expect it to work once you start learning more about it. There is nothing like documentation so I recommend rolling over to NODE.JS after this and checking out the documentation.

What is node.js:

It is an environment that allows you to run javascript also known as a runtime environment. At first, JS was solely used in the browser, but the creators realized that there was so much more power available such as running a stand-alone application. Now with Node.js, the language has similar capabilities of popular scripting languages such as python.

Both Javascript and Node.js use the V8 JavaScript runtime engine. This takes your code and turns it into code that your computer can read without having to interpret it first. In short, it speeds up the process of a computer reading your code allowing for magical things to happen. Node.js is event-driven and does not block the input or output. That alone can tell you the beauty of this as it keeps it simple and executes what’s needed based on the event instead of worrying about the bits and pieces.

How you normally execute javascript

In the past, you would create a local HTML file on your computer then add a call to a relative JS file. From there you can open it up in a browser and play with it in the console. But that was the environment and in my mind made it to where being limited to just that made me feel that other than some functionality on a website that was all to be had. Then Node.js comes along and as mentioned before that RunTime Environment takes what I described out of the equation and opens to the doors for so many possibilities.

Node.js example

  1. First you need to have node installed on your computer
  2. Open your terminal / command line and type node -v
  3. Now you will see the version you have on  your computer
  4. Create a folder and put a normal js file in there stuff.js
  5. Navigate to that folder in the terminal and type node stuff.js

BOOM you will see your code executed without having to be on a browser.

Conclusion

Once again this was not for someone who is looking for that technical aspect of node and what it does but instead just the best node.js explanation for a newbie. Nothing was talked about NPM which is really neat and stands for Node Package Manager. What was talked about is this awesome way that you can execute JavaScript without the limits of a browser and hopefully you will continue to explore more of this amazing portion of web development. I write about things I am doing or dealing with just like my SEMRush tool breakdown or SEO for images, if you really like my style then sign up for the email below.