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.
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
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
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
(Blue) stability, trust, serenity
Finance, law, insurance, doctors
(Purple) royalty, wealth, feminity
Payday loans, women based ads
How to Combine Colors
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.
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
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
San Serif – No Feet!
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.
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
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
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”
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.
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.
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.
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.