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 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.