The Big Ol Blog

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.

Best SEO Strategy for Images

What Makes an Optimized Image?

Too many times when I get asked to check out a site and see the SEO health of a site there is never any good image optimization. To me personally, a well-optimized page is one that simply is in full sync across the page.

  • URL
  • Heading
  • Keywords in content
  • Title on the image
  • File size
  • And…….

These are all places that your focus of the page needs to represent so that in no way shape or form will a bot that is crawling will think it is nothing other than the main phrase, keyword, or focus you are going after.

Why Stop There!

I like to take it even a step further and include the keyword in my file name of the image as well. For example, if the first image on my page is going to be about Best SEO Strategy for Images then why not make that file name “best-seo-strategy-for-images.jpg” . With that said if there are multiple images on a page I may go through and name them all to have some relevance to the focus but really I just go after that first main image….Why you ask……I am lazy.

An argument for Usability and Alt tag

Yes, people that use the internet may be using a text reader, so you should name the alt tag on your image what it is representing. But what if your page that they are reading is representing that focus I keep talking about and not some person looking through a magnifying glass that you are using? I personally think that you should also use that key term/phrase in your alt tag as well personally because…..yea just do it.

Site Speed and Image Size

Site speed is huge and as many people build on top of WordPress, it is a factor to always consider when you are using images. For me, I think that if you do not have a huge header you are off to a good start, but from a developer, standpoint remember to always go in and resize the image in a photo editor before the upload. Phone pictures, stock photos, and other sources will normally give you giant images that will kill your bandwidth so just use realistic size images for your posts and pages.

Conclusion

Finding the best tools for SEO sometimes just comes down to knowing good tactics to implement when you are building your site or updating it. I like to think of a single page on a site as an opportunity to turn everything possible element into a billboard screaming what you are trying to get across. In this post, you will see that Best SEO Strategy for Images is the main focus. When you are developing a site and maybe a high order function is more important than worrying about the image aspects of a page but it is important and starts from the development start point.

SEO Tool Benefits From SemRush

Many of us I feel get what we need out of a product and do not always take the time to see all the bells that come with a product. I have been using SEMrush for a number of SEO clients but not like how you think. My approach to this work is normally a current SEO agency may reach out to have some assistance in knocking some work out, or a client may come to me for consultation and already have SEMrush. With this said I am normally just looking at the site health score and making the proper adjustments to get them back up to par. This is also not how SEO is done or how I recommend how someone goes about it but I just have been approached to do this many times.

SemRush Features

Like I already said there is a health check to see if you are following all the major areas of SEO, and depending on your score you can easly see what needs to be changed. Then I found out about all the neat features below which I then decided to check out.

First thing first is when a client approaches me and says “hey can you assist me with some SEO services?” I am like well it normally does not work that way but let me see how I can help. The Domain Analytics is right where to start, you can simply add a URL and from there you get details of their domain at your finger tips that can help you gauge the next steps. Or if they are just not sure where to start just simply ask who is your biggest competitor and boom put there domain in there and see what is working for them.

  • organic search
  • paid search
  • backlink profile
  • and more

The point is that you can easily see what is going on and from there dive even deeper. There is an organic research section that will let you see ranking keywords, competitors to that domain, or even position changes that have happened over time. Way more than the just basic SEO dashboard I was using before.

How To Learn

I am not a documentation nerd which if I was there would probably be more success in my development carrer ….just saying. They have a wonderful set of courses that are on the house once you sign up. Using this product for years never thought I needed what they offered. I was wrong went through the main one along and literally feel like I leveled up my SEO for all my clients.

One of the bigger takeaways was that each section had videos of people that use that portion of the tool and why it really points out to you how to also utilize it which I like. The point is that if they take the time to create courses to help you maximize the value do not pass it up.

Ideas For Your Next SEO Project

Like I said at the beginning of this start at the top and work your way down, but if you have not had the chance to check out the SEMrush tools all the way start with that first toolkit course to make sure you are getting the most out of it.

Start with Competitor Research

Begin by looking at the competitors of your clients and see where they are spending ad money at, how there traffic is looking, where they are getting back links from, and what words they are ranking for.

Put the client in the SemRush Eco-system

Build that profile out and connect your Google Analytics account along with your webmaster console. You will start to the see the data roll in, and make sure you do the site audit. This will show you the low level SEO errors that can be fixed quick.

Build the Plan Based on the Data

If you have not quoted the client yet this is the time to see what work is truly in front of you and build out a plan. You can see your baseline so easy from here, get aware of seasonal drops, or even better the sensor score will let you see how the business is doing in the Serps. So if that category is taking a hit you may find out why, or be able to let the client know for expectation reasons.

Use The Reports

Nothing like having that weekly, monthly call with a client and having to explain everything, but instead there is an amazing PDF reporting area that you can customize based on your clients needs. If you have the right plan you can even have it branded.

Conclusion

This did not even touch the surface of all the assistance that SEMrush can provide. The main reason for even writing this was to state that it is important to really see what tools are out there when you buy a product and you may find out that your job can get a whole lot easier if you check stuff out. I do recommend that if you are interested in SEMrush to look at the other tools out there and this is not a selling focused article but from my recent experience it has helped me out a lot, but more so and the most important is allowing me to better serve SEO clients.

Higher Order Functions in JS

Now this is nothing new and fresh but for me it really was an ah ha moment when you are building out an application there are times when having a pre set function that is going to do some work later on. Now I am familiar with objects, methods, ect but sometimes a function within a function just feels right.


Lets Make Sandwiches With JavaScript

In this example let’s say we are making 3 different types of sandwiches, but depending on the type of sandwich there is going to be a different cost associated.

Sandwich types:

Dutch Munch, Tater Island, and Sweet Georgia

Each of these are going to have an automatic calculation associate with them due to the ingredients.

Dutch munch = toppings + 2

Tater Island = toppings * 3

Sweet Georgia = topping – 1

Bread cost = 1$ per slice

How Can A Function Help

Knowing that the cost of toppings plus the type of sandwich up charge how can we do this?

Let’s say that we need to have each topping cost $1 and each piece of bread used is also $1, but then each type of sandwich due to the cost of meat, special ect has certain costs associated. So first we know we are going to have a sandwich function which will always have the toppings and sandwich types, and each type of sandwich is going to have its own function.

Const toppingTotal = 1;

Cost bread =1;


Function dutchMunch(toppingTotal, bread){
Return (toppingTotal + bread) + 2

}

Function taterIsland(toppingTotal, bread){
Return (toppingTotal + bread) * 3

}

Function sweetGeorgia(toppingTotal, bread){
Return (toppingTotal + bread) -1

}

Function sandwich(toppingTotal,bread,sandType){
Return sandType(toppingtoal, bread);

}

Higher Order Function What!

So what is a Higher Order Function… basically, just a function that can take other functions as inputs. This helps in this situation as when we are creating the orders the input can be as follows.


sandwich(3,3,sweetGeorgia);

Behind the scenes this is automatically providing the (toppingTotal + bread) -1 that is allocated when someone buys a Sweet Georgia sandwich as it is the sandwich of the day. So save a buck and write a higher order function.

👏

What we did here is the beauty of JS and that is using a higher order function that is taking inputs from other functions to get the job done!

WordPress 5.0.1 and Gutenberg Review

First off I have to say that personally when I hear about a new technology I want to start and play with it right away. When I heard of this fantastic new React focused content builder in WordPress I was more excited than a kid at Christmas. This blog instead of me showing my front-end dev skills I just simply wanted a basic platform to write some thoughts and play with Gutenberg. So far it has been a delight with ease of use and quick ways to build out content. 

Others Reactions I Noticed

Something that I did see was first off people who were just making edits to their sites one day updated and then were lost. I personally think the new block approach of Gutenberg is great and really is an upgrade. The funny part is for anyone that normally just has me be the person for theme updates, or major additions to the site started emailing me for some pretty basic stuff. I guess they did not check out the early bird viewing of Gutenberg. I have not heard anything negative from my personal network but I have seen some confusion, but with good news there is going to be support for the classic editor for a few years. 

WordPress 5.0.1 to
5.0.2 Overnight

I cannot express how much I love the people over at WordFence and the work that they do in keeping me informed of either needed updates and other vulnerabilities in the WordPress community like this one here.  The update to 5.0 in general was a pretty big deal but I am glad that I was aware and told to get to 5.1 right away. 

Problems With The 5.0 Release:

  • Unauthorized Post Creation
  • Privilege Escalation / XSS
  • Privileged XSS
  • XSS That Could Impact Some Plugins
  • Unauthorized File Deletion

There is more information on this here , and just good to know. As a person who deals with a lot of WordPress sites keeping them up to date is the most important item in security along with so many others. 

Conclusion

This was just a breakdown of what I took away from the new content editor, and also the updates from WordPress. All in all the new Gutenberg editor I am a fan of for so many reasons with ease of editing, placing elements quickly, quick styling of pages, and more. All in all WordPress is a great blogging platform and if you want to customize the theme that is all there just when  you add content there is a new way of doing it. That is all from what I see so thanks WordPress for making it better. The new security update to 5.1 if you are reading this and have not I would do so. 

All Things Open Raleigh NC 2018

This was my first conference and it was amazing in so many ways. I am going to give a quick breakdown of some of the highlights for me and what my takeaways were in term of learning and experience. I cannot recommend a conference enough after I have gone, but with that said 3 a year every year is not needed. The biggest take away is although people are speaking and giving presentations on the technology you are interested in we are all human and can achieve what we want.


Before the Event Pre Game

I received my email saying what to bring and the schedule the day before, and as I was out of town there was no early registration for picking up my badge and swag…..oh that swag how I love it so much. So I knew that to be prepared I needed to be there early (7AM) and with a no brain fog. I went ahead and looked at the scheduled talks and mapped out my day, then crashed out for the night. I felt this was a good plan of action and also having it mapped out ahead of time gave me an insight on what to expect.

Day 1 of ATO

Showing up at the crack of dawn to go to an all day conference may of not been the best idea but in the end it was. All the booths were just getting set up and no one was there which means all the swag I want was at my fingertips, but also information on all the vendors. It is really neat to see the technology being showcased and seeing how it works, but when the event is in full swing that can be hard to do. After a bunch of cool shirts, socks, stickers, and free magazines I had the schedule of the day and started highlighting my plan.

First talk went amazing learning about functional programming in JavaScript and then I sat in for a start-up contest on new technologies which was super cool including BruVue, TriggerMesh and more. Those two stuck out the most check them out. In the afternoon I went to a Node.js crash course, CSS Bloat and How to Fix it, and wrapping up the day with Jen Looper titled human vs. ai: build a mobile app with vue.js, ml kit, and nativescript. By this time my brain was fried and it was time to go home.

Day 2 of ATO

Showed up early but not as early as the day before, as most of the swag was already spoken for and I had some solid goals for learning. The tracks for day 2 were cross-platform desktop apps with electron JS, framework free – building a single page application without a js framework (not needed but neat to see why frameworks are nice),  and rapid prototyping with vue.js . I have to say that fully impressed with all the learning opportunities and it truly did give me a revamp of wanting to code more.


Conclusion

This was truly an awesome experience and one that I hope to attend next year. My takeaways as I said is that we are all human and with consistent learning and positive attitude a good programmer can become better. I have to thank all those people for putting on this event and also the people who took the time to actually speak and put presentations together. There was one presenter that really took the cake and that was David Neil at https://reverentgeek.com/ really did great talks but also had some solid humor to go with it as well.

Learning JavaScript is Cool But Accessing Your Values is Better

Seems like always going back to the basics is key to growing in your journey as a developer. I find that if I am not consistently doing projects using all the tools then I forget. In my current situation there is not many peers to jump ideas off ect, so sometimes going to a beginner course for Javascript as the one offered in FreeCodeCamp helps tremendously. My “ah ha” moment came when I was almost done with basics of JS section and started with objects and how to access them. Writing code is great but it really comes down to (write code, compute, access values, and display).


Creating the Object in Javascript

There was a magical thing that happened with OOP was thought of and till this day I think it is a powerful concept. Create objects let them have duties, hold data ect, and then pull from them for your desired outcome.

An object could look like this:


How to access the object

You have a couple choices in this case I am going to go with dot notation “.” and also bracket []. I personally have no preference but the neat part is some of the differences.

Dot

  1. Property identifies can only be alphanumeric (and _ and $)
  2. Identifier cannot start with a number
  3. Identifier cannot be a variable

Bracket

  1. Identifier has to be a string or variable representing a string
  2. You can use variables, strings, spaces, and numbers for your identifier

Fun fact with both of these if you flatten your object and it is returned in dot notation you can then call on multiple objects using the bracket notation.


Conclusion

I literally wanted to jot this down as when you are making amazing code which is great the bigger it grows naturally you have to place objects together that hold data and so much more, so knowing some options from a beginner level on how to access them is key. As always I write this for myself but if anyone ever gets a little help from it then that is even better.

Learning is like a Treasure So Be a Pirate and Make a Map

As a developer the constant learning is real so why go about it blind. I recently have set a goal for myself to become more savvy with Node.JS and also hone in my skill with Vue.js just to make a more valuable programmer. You will see this adventure on the blog as I will post my findings and learning process, but first I knew for this to be successful I would need a plan or outline. Randomly one of my favorite quotes is from Martha Stewart “Life is too complicated not to be orderly”. Now I am not 100% positive that is from her but on my daily quote challenge I came across this and it stuck.


The Plan

Now I have been self learning basically all the various JS technologies out there for the last year but because I have spread myself to thin I knew that a focus was needed. The plan is to have a daily to do for both Node.js and Vue.js as to me it seems having an in depth knowledge of node assists with deployment of the Vue.js applications and many other applications. First I am going to start with my fundamental resources which is Freecodecamp.com and Pluralsight. The reason for this is well my year of Pluralsight which I have not used that much has some good Vue.js courses and challenging projects. The Freecodecamp does not have Vue but does have some good fundamental Node.js information to go over.



The Path To Gold


Instead of just going through the learning I am going to document daily for myself on whatever I learn and then re-explain it for retention in word form. If possible I am also going to attempt to sketch out any notes of what I have learned. Now I have been focusing on fundamental JS for years so this is going to be more high level in hopes for it to stick. Then come the tutorials like this one from Scotch.io which is an amazing source for articles and tutorials. The goal is to find reasons to combine both JS technologies to have a foundation.



Reality Check at the End

This is a personal 30-60 challenge to be able to say yes I know both Node and Vue well enough for say a freelance project, interview, ect. I am not expecting to be a pro but I am tired of being a jack of all trades in a way but not a master nadda. I am also not expecting one or 2 tutorials and a notebook to make feel confident enough to say I am done and know the learning will continue. But and a big but is I will then feel good enough to challenge myself for a hackathon or go to a Vue meet up with confidence to understand some material, or go to an event like all things open and not be like well I do not know any of this.



After a Pirate gets the Treasure

Self growth is so important as a developer and by challenging  yourself is the only way I think. I have been building wordpress sites for a few years now and also troubleshooting random software that people want to use, but my passion is to create beautiful code that runs on a server that I can say hey “I did that”. To any that read this or to my future self that is like WTF is this I wrote about pirates, its all about the challenges that make us grow, so if you are not setting daily, monthly or yearly goals what are you doing.