How To Make A Div With Opacity But Keep The Text Fully Visible

Something I always find myself doing is needing a hero image that has an opacity on it and then put some text inside of the div holding it all together. This is also something that is common when I need to have visible text but do not want the image behind the said div to be obstructed.

When is this used?

– Hero images or Call To Action areas of a site

– A “keep scrolling” area that sits over some graphics or exisitng areas of the design

– Buttons with a transparent type effect

See the Pen text with opacity by taterdev (@wisecodeworks) on CodePen.

What we are seeing here above is the classic we have an image and need some text to overlay it without disturbing the actual image. This can be simple text, a button, or a feature to the object behind it.

Where Is The AwesomeNess?

In this case we breakdown the RGB.

RGB(0,0,255,0.6)

The frist three places define the color, but the 0.6 is the opacity that I am applying to get the desired effect. So really if you look up the rgb color code and then play with the 4th spot you can adjust as needed.

Why Not Use Opacity?

I used to always consider using opacity to accomplish this but then it would affect everything inside the image and really the colors could not be maintained that well. Instead with the power of RGB you can indeed control that color and only on the background while leaving everything else alone. Problems I would have to accomplish this as well as an attempt to take the image in Photoshop and then put the desired opacity on the image/object in question and apply the effect.

CSS Superpowers

I think it is important to remeber we all learn things daily and this CSS thing is at times magic. Jokes aside this really helped me develop better websites by learning this, and for that reason I thought others could find is useful as well.

Pardot Rocks and Why

How to use Pardot from SalesForce for your Marketing Efforts

What we will cover:

What is Pardot?

How you can use it in your business

A developers insight to using Pardot

Why Pardot rocks

I was given the task of assisting in setting up Pardot for a client and had no previous experience. For me, it was just yet another marketing tool that needed to be configured to help a company so I went into action. I felt the need to write this because I found a lot of use out of it and not being a Pardot specific blog it might give insight to some of my fellow digital marketers and web developers.

What is Pardot?

This is taken right from the Pardot website “Pardot, B2B marketing automation by Salesforce, offers a marketing automation solution supporting the needs of B2B organizations of every size.”, but for me, I needed a more broken down answer.

It can:

  • Track and automate actions based on your users
  • It is an email marketing tool on steroids
  • Provide a big or small business insight to potential leads
  • Is a tool that is from SalesForce….so yea
  • Works with any CMS, or software with ease

These are indeed just some things that I took away from using the tool, but the possibilities are endless. One big thing is though unless you are using SalesForce this is not for you. On that note, most large and even smaller companies use that software on an almost cult status so its good to know.

How you can use it in your business

A big area is in your marketing efforts and in return getting your sales team quality leads. I will say that having access to it means your company already is using SalesForce this is just a solid add on to automate so many emailing and user tracking on your website. For example, you have a WordPress site, and using Gravity forms connecting the two platforms is easy as making a form handler and setting up the Gravity form to map those fields.

A great resource on how to connect these two things can be found HERE

You Can:

  • Track user actions
  • Auto email upon certain completed actions
  • Score vistitors based on actions
  • Streamline quality leads to your sales team

A developers insight to using Pardot

As a developer knowing how to integrate what tool the team wants is the biggest hurdle. A good thing to know is most if not all aspects of Pardot is embedding code on a page for either your own site and even if you are in a co-marketing effort somewhere else. That means if a company hires you to assist in a marketing campaign you can embed the provided code on the page and get those needed insights. Also basically everything in Pardot can be done in two categories (campaigns and form handlers). That being said if you are a developer and are tasked with this integration it will be embedding a code or mapping fields on your form (my personal opinion).

Conclusion

I wanted to write about my experience using this new tool and not only for me but someone else who might end up with the same task. This is a salesforce product which means there is enough informaiton on how to use it in their trail blazer platform to learn from, but an outside view is nice sometimes. The biggest thing for me was this tool and how it helped on a large scale for companies that are using top notch sales platforms.

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. Also if you are looking for some great tips on how to become a successful freelance developer this link has it all.ย  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.

Basic CSS Template For Page Breaks

Below is just a template for some basic breaks for responsive web development. I find that tossing this into my style sheet is a huge help, and that is why I wanted to put it up.

I will be updating this from time to time just for any updates I run across. I have to say that though these start at 769px it is worth pointing out that having a large media query can also be beneficial when developing if you know your audience. After you get some data on the people coming to the site, or if you do keyword research and find that people in that particular area look at sites like the one your are building on say a tablet instead of desktop, or even if you have Mac users over Windows.

Those specifics can come in handy when wanting to produce the very best experience.


/*ALL MOBILE STYLES BELOW*/
/*desktop*/
@media only screen and (min-width: 769px) {
  body {
    background-color: lightblue;
  }
}

/*Tablet*/
@media only screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}
/*Phone*/
@media only screen and (max-width: 400px) {
  body {
    background-color: lightblue;
  }
}
/*Other*/
@media only screen and (max-width: /*add here*/) {
  
}

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.