That is what I used to tell myself while I coded. Honestly, even though I knew it was frowned upon, I would also just inline style. It was my dirty little secret as a web developer. It just felt more natural for me and efficient. Sure it looks like a garbage can was dumped on some of my HTML elements, but … I … Code … So … Much … Quicker!
And then, my buddy introduced me to Tailwind CSS, a framework that is designed for 100% inline styling of elements. Not only did this completely vibe with my styling preference, it also allowed me to create intricate designs with ease. Here is my portfolio site, styled with Tailwind CSS.
How it benefited me
As I progressed with my web development skills I noticed all of my websites started to look the same. The reason was in part due to my lack of design skills but also, I would just use CSS frameworks that everyone would use like Bootstrap. Customization of a site for me would be… changing the color of a navbar. By not having to operate within the parameters of components from other CSS frameworks, I was free to change the size, color, placement, etc. of any and everything on a web page. Rounding edges, changing background colors, adding shadows could be applied directly to any HTML element, instantly. I no longer had to fight against the other CSS frameworks guidelines for custom styling.
Summary
I had such a tremendous experience with this framework. I encourage you to give it a try. It’s a blast!
Let me tell you a story. It starts sometime last year and ends last night at 1 am. I built a wellness blog for a class project using the MERN (MongoDB, Express, React, Node) tech stack. The noteworthy thing about the project is that I wrote all the backend logic for an administrative dashboard. Unfortunately, I wasn’t happy with the look and feel of the site, so I didn’t deploy it to the web.
So, last night I am designing my portfolio site and I realize my portfolio could use more examples of backend experience. Queue that site! I take it off the shelf, dust it off, add a couple frog pictures and deploy it to the web. Perfect right? Nope. Not even a little.
Unfortunately, the file storage system I built doesn’t play well with Heroku, which means, if you login and add a post, a picture won’t show up. I spent some time trying to make it work and then I spent some time trying to resurrect a previous implementation of storing images in MongoDB.
I finally realize how much time I had wasted at 1 am. Not only is there no progress on the file storage issue, but now I am going to be a zombie the next day. Complete failure right? Nope. Not even a little.
I Got More Out of Failing…
Not gonna lie, I was feeling frustrated that I had wasted valuable time. I took time away from my wife and kid. I traded time for nothing tangible. But then I realized, I was just facing the Sunken Cost Fallacy. What is this you ask? According to The Decision Lab,
The Sunk Cost Fallacy describes our tendency to
follow through on an endeavor if we have already
invested time, effort, or money into it, whether
or not the current costs outweigh the benefits.
If you check out the linked article, you’ll basically learn that people have a hard time calling it quits when they should because of their emotions. This is exactly what I experienced. My frustration and guilt for wasting time kept me coding late into the night.
Okay You Figured Out Why You Wasted Your Time, Why Does That Matter?
The thing is, I ultimately didn’t waste my time. I realized, my experience was just practice with overcoming the Sunken Cost Fallacy. I’m sure I will face this issue in the tech field. Acknowledging its existence and reflecting on ways of avoiding it now, will save me time later. For instance, the next time I’m coding just to justify all the time I have wasted, I am gonna take a step back and consider my feelings.
Conclusion
I could have chalked last night up as a failure. I didn’t and I ultimately feel better for overcoming it. I used the power of reflection and changing my point of view to grow as a person and developer. I analyzed a bothersome situation and distilled the positives from it. I encourage you to do the same!
Okay agreed, you shouldn’t care about my favorite color, or the fact that I used a Visual Studio Code extension called Peacock to change the color of my editor border.
But you should care about your developer experience. If you are anything like me, you spend an incredible amount of time coding. With so much time spent doing this, you should consider enhancing your experience. In this post I am going to share with you several personalizations I made to my developer experience that I still don’t regret. All of the ones I will share are for Visual Studio Code.
GitHub Theme
Don’t like the default color scheme of your IDE? Change it. I am currently using GitHub’s Dark version and it is fantastic. The shades of grey are very satisfying. Great color and contrast as well. Changing your theme will change border, tab, background and syntax colors. It is outstanding.
Indent-Rainbow
I just like seeing pretty colors and this extension helps me do that. At every indention level, there is a column of a highlighted aesthetically pleasing color. In addition to prettiness, it helps keep your code organized.
Bracket Pair Colorizor
Where does this bracket line up with? For the love of all things good, where?!!! Oh wait, I just need to match the yellow brackets and… here we go. Yep it’s that easy. If you don’t have this extension. Get it.
Prettier – Code Formatter
Lastly, VSC has functionality to autoformat your code upon saving. That means every time you hit save, an auto formatter like the one shown above will make sure all your spaces, indents, brackets, line-length, etc., are perfect. I have no idea why it took me so long to find this and can’t imagine life without it.
That’s Not All, But I’m Done Writing
In conclusion, make your life better by enriching your development experience. Enjoy the time you spend coding.
It happens to every one of us. You are writing some code, minding your own business, then… you get stuck. You don’t understand something about the technology you are using, it doesn’t understand you, or there is a syntax landmine somewhere in your code that blew up 💣.
No matter the case, in this post I will challenge you to reflect on how you handle this situation. I will also challenge you to view this situation differently.
Ready, Set, Stuck!
I have been coding and getting stuck for over three years now. I wish I could say the my frequency for getting stuck has lessened, but that isn’t the case. Even as I get better at coding, I take on progressively harder concepts and technologies, so I get stuck in new fantastic ways. Getting stuck is just the price of admission for coding.
So what to do about it? Reflect on past experiences and identify behaviors that led to you solving problems. You are going to keep getting stuck, so you might as well get better at getting unstuck.
My Reflection
When I get stuck while learning some tech or coding, I have a bad habit of digging in, being stubborn and not taking a break. I so badly want to make progress and really believe the solution is moments away. The problem with this is I spend a regrettable amount of time moments away from a solution.
The funny thing is, stopping coding is usually what leads me to getting unstuck. I will be doing a completely different activity when I have a thought about how I can solve a specific problem. I guess my brain just needs some time to continue working on the problem in the background, while I use less of my mental faculties.
I have noticed that I have a harmful response to getting stuck and a positive response to getting stuck. The hard part will be doing more of the latter and less of the former.
Different Way of Viewing This Issue
Getting Stuck Is Making You Smarter. I am not just trying to make you feel better about the fact that you will continue to get stuck. I believe getting stuck will make you smarter and will build your confidence. Each challenge you face is an opportunity to learn something new. And, when you overcome the challenge, you can add the situation to a long list of instances where you were a victorious learned computer scientist.
In sum..
Everyone get’s stuck coding. I am writing this post because I have been getting stuck all day while custom styling with Material UI. I challenge you to learn how you typically solve a problem after getting stuck and develop a plan to replicate this behavior. Also, I challenge you to reflect on many of the problems you have solved, it’s not a bad idea to cheer yourself on every once in a while.
Pretty much how I would describe my frontend web development until recently. In more detail the process would go like:
1. Get excited about building
some website.
2. Choose a tech stack &
get started.
3. Build site structure &
start styling the home page.
4. Keep styling until I'm
happy with how it looks.
5. Never become happy -
CHASE MY TAIL - get nowhere.
Does this happen to you? My issue was that I was unwilling to make bad sites, but that is all I kept doing…soul crushing.
Salvation From a Youtube Video 🙏
No I am not preaching (although I do know Jesus lol). My favorite web dev’ YouTuber, Brad Traversy, hosted a web designer in a video teaching web design basics for developers. I knew the guy was speaking my language when he used used a Javascript function to teach design.
Just applying these principles helped me make way better looking sites. Best of all though, I finally got my tail. I am going to go over these principles in the following paragraphs, but I won’t get my feelings hurt if you just go watch the video. It’s pretty great.
color_contrast
The purpose of a website is to communicate information right? So why make your text barely visible. This is obvious, but it is soooo easy to mess this up. So, let’s be decent humans: put light text against dark backgrounds and dark text against light backgrounds.
white_space
Do you like feeling like you are crammed in an elevator (pre-covid) with max occupancy? No… yea I don’t either. When you don’t allow for space between elements on a page, this is how your make a site user feel. Notice on this post, I make sure to properly use headings so there is consistent space throughout the post. The effect is my post is more readable. To make my final point, just look at this site. Take a deep breath before you go there, though.
scale
Does the size of the element make sense? Is it too big or small? If it is, it’s just gonna look bad. You kinda have to eyeball this one. One thing that helps is thinking about the size of an object in relation to other objects (I think that is the definition of scale 🤣). Is the button bigger than the text asking you to press it?
visual_hierarchy
Back to the point of a website’s purpose. Yes, it’s all about communicating info, but some information is just more important. Here is an unnecessary example to demonstrate my point.
Someone walks into a room and only stays for 10 seconds. You are there and you are selling paper to them (at or near Dunder Mifflin). With such little time, you need to be precise with the information you give them. You can’t go on a tirade about Bears. Beats. Battlestar Galactica. No, you’d probably mention a discount.
Visual hierarchy is all about using the size of elements to communicate importance. That doesn’t mean just making the important things huge. You make some elements smaller TO HELP EMPHASIZE OTHERS 👀. If a user is going to only see three things on the site, encourage them to see the stuff you want by being precise with sizing.
typography
Some fonts just look good. Design is concerned about making things look good, and if you have read this far, it’s fair to say you care about design (and making things look good). The tips I learned were to avoid overused fonts like Times New Roman, sticking closer to Sans-serif, and to be consistent with font types.
Yay, we done.
In conclusion, you can do it. I made some pretty laughable sites before learning these principles but I have gotten pretty decent at design now. And, I really only internalized three of the principles I went over – white space, visual hierarchy, and scale. Take care.
I have always wanted a React.js framework. I love making awesome user interfaces with React and I thought a framework would make that experience better. I essentially wanted more bells and whistles and I found them. Queue Next.js.
In this post I am not explaining every aspect of Next.js, that information is here. I will talk about what gets me excited about Next.js, though.
Search Engine Optimization
‘You don’t know what you don’t know.’ Cringy saying right? So what I didn’t know was the downstream effects of how React renders site pages: client-side rendering. So, if a user tries to access a specific page on a React site, they will receive a minimal HTML file with Javascript files. The browser then loads the content from the Javascript files into the HTML file. Because the client only has to query the server initially, navigation between pages is fast and at no expense to the server. This makes the website feel fast, which is why I love React.
Unfortunately, I found out sending the minimal HTML file is possibly an issue for search engine optimization (SEO). Search engines index sites for rankings (first, second, third page results) with web crawling bots. For instance, a Google bot’s first pass to index a site focuses on consuming content within HTML files. So as we just talked about, with client-side rendering, they won’t be consuming anything. Although, a bot does a second pass for site indexing, and is supposed to reach the content loaded from the javascript files, it is debated if it is effective.
Pre-Rendering HTML Pages for SEO and Performance
By default, Next.js pre-renders every page. So, in advance of the client receiving an HTML file, Next has already generated it full of content. You can either statically generate the HTML file at build time or when a client makes a request to the server. Either way, the client will receive content within an HTML file, which makes it fully available to a search engine bot.
Statically generating HTML files at build time also allows for a very fast user experience. The server doesn’t need to be queried and no content needs to be loaded in the HTML file. Even if the site pages rely on external data, Next has special serverless functions that will generate the data needed at build time. It will also generate the content for dynamic paths (e.g., blog/post/1, blog/post/2) at build time as well.
You are also not tied to pre-rendering and are able to use both server-side rendering and client-side rendering. Right now I am thinking of a use case for my school project, where I would want to hybrid the rendering options. For a marketplace-like app, I would pre-render statically generated sale post pages, but client-side render sale category pages. I would do this for the category pages because a user will populate different sale posts based off of many search criteria. I can get speed and SEO for all sale pages and I get to minimize use of my server with sale category pages by having the client’s browser do the heaving lifting.
File Based System Router
How have you handled site routing for your React.js Apps? I have always used React-Router, which would end up looking something like this:
Yea, Next handles all this for you. And it does it in a manner that helps you organize the structure of your code base. If you want to have a specific route to a page, you simply create a Javascript file under the pages directory that was created at project install. Inside the Javascript file you return a react component and THAT is where the magic happens 🦄.
In sum..
I had a fantastic experience creating this site with Next.js. I optimized the site for search engines, achieved an amazing performance rating, and thoroughly enjoyed the out-of-the-box routing feature. Hope this post was helpful; until next time.
Okay, so a bit dramatic, sorry. I am just pretty excited to see a study focusing on improving the lives of dogs with technology. The objective of the study was to create mental stimulation in dogs, especially during aging, for better well-being! They did this by training dogs to interact with an iPad like device for a positive experience (treats!). In this post I am going to tell you about how they implemented this study, the tech behind it and the outcome.
So what did they just give dogs some iPads?
Credit: Lisa Wallis
Actually it was a whole, incredible thing. Over the span of a year, 130 dogs and their owners traveled to a lab for 30 minute weekly training sessions. Despite no financial compensation for the owners, remarkably, only 6 dogs dropped from the study. The training occurred in four phases. Let’ take a look at each of them.
Phase 1: Device Familiarization
This phase took about one to two visits. It essentially entailed introducing the dogs to the touchscreen device and the food dispenser. Once the dogs had no problem with approaching the device/feeder, they were introduced to the device software and phased up.
So maybe getting your dog to play Candy Crush might get messy at first. In this phase the dogs got plenty of snackies. They were brought to the device and observed an edible paste being smeared in a specific spot on the screen. When the dog licked the paste off, the machine beeped and dispensed a treat. Once the dog associated touching the screen with a treat, the dogs moved to the next phase.
Phase 3: Screen Touching – Varying Locations (with the NOSEY!)
This phase was much like two. They would smear paste on a spot on the screen and when the dog would lick it off, there would be a beep with a treat. Except, they practiced this with several spots on the screen and slowly reduced the amount of paste until the dogs just touched a stimuli on the screen without paste (with their cute noses). Once this happened they moved on to phase 4!
Phase 4: Discrimination Training
Here it is the final step, the dogs are ready for their big moments. Time for them to choose between two stimuli (I bet it was Candy Crush icons). When presented with the two choices, if the dog chose the positive stimuli, they got a nice beep and a treat. If they chose the negative stimuli, they got a red ‘time out’ screen for three seconds and a short buzz sound. Don’t worry, they immediately got another opportunity to do it right. So here we are, now the dogs are playing a game, and it went great. Of the 130 dogs, all but two passed this phase.
So Tell Me About The Tech Please!
If you are interested in a fabulous amount of detail, you can get that here. Otherwise the tech goes like this. Connected to a laptop, an infrared touchframe is attached to a computer monitor. The monitor is placed at head level for the dogs in a distraction eliminating box. Below the monitor is a treat feeder, think pellet dispense. (Note: there are instructions for excessive dog saliva making these monitors unresponsive 😂).
They employ CognitionLab (Version 1.9) software for their go/no-go experiments. This software can run on any operating system compatible with x86 architecture. CognitionLab uses a scripting language called Experimental Run-Time System (ERTS) created to document psychological reaction time experiments. It is said to be easy to use, and the code doesn’t looks so bad. Here is a sample from their site:
SCREENAREA 150 150
FONT STD Arial 6
FONT BIG Arial 10 1 bold
FONT Small Arial 4
PICTURE Inst_Title T Instruction
Instruction
PICTURE Inst_Text Tl
Press left [SHL]-key when you see the word Left
Press right [SHR]-key when you see the word Right
...
So did the training make the dogs happy?
Oh heck yea! Well, the study found that the dogs had a positive association with the training, showing enthusiasm in anticipation of their weekly appointment. And, owners stated that the dogs would come home from the training and fall into a restful sleep, much like they would after a good exercise. The study noted that the process of training the dogs revealed to the owners that their dogs could experience mental exercise, which prompted them to play mentally stimulating games with their dogs more. The conclusion of the study was that this type of training could improve the well-being of dogs, especially older ones, through cognitive enrichment.
So get your peanut butter and open up Candy Crush – it’s time to train your pup!
