DEV Community: Joseph Ochego

Chase it afraid!

Joseph Ochego — Fri, 18 Jul 2025 06:11:01 +0000

For us humans, it is easier to articulate the negatives, because they're more concrete, pragmatic [Lex Fridman] - "it takes up more time, costs more, I'll miss out on a lot, it seems tough and this and that..."

To articulate the positives, and most importantly of the things we are so passionate about is a big ask. With words we can do so little to persuade an audience of the worth of that which we are passionately allied to & desperately want to share. You have to experience it. Otherwise, you end up selling it short.

Fear and Passion would be defined as opposites if I held the pen to the great English dictionary. Or better put, Fear vs Passion.

Fear is a deterrent to many great things; seeing as the subject today is that of passion, I believe fear to be the biggest killer of passion.

First, it creeps in, gently peeling off the loudness of your passion, and as soon as it is allowed access to the core, bam! it disseminates the joy and meaning out of the passion. What is passion? Is it not meaning?

I say this with great conviction and purpose for the subject at hand.

As easy as it is to articulate the downsides and shortcomings of pathways we are offered or dreams that gnaw at us, so is it apparent and almost natural to express the negatives that fear births in relation to passion.

My field of focus with passion here is that of career and professional opportunities. However, fear is a parasite that actively seeks to destroy prospects in ideas, friendships, relationships, families, hobbies, faith, aspirations and all that we, humans hold dear.

I happen to have experienced loss in the hands of fear, I still do; I understand it just as well as I understand my limits in skill and the inadequacies of my character (negatives are so easy to articulate, remember?).

These are also very easy to point out, to recognize:

The hands I did not raise, to ask or to answer
The times I bit my tongue so as not to express a contrarian opinion, even though I felt so strongly about it
The chances I have begrudgingly "gifted" someone else despite me being the person of choice
The job descriptions I have used as an excuse to escape taking a chance
The conversations I have held out on
The people I have pleased that I had no business pleasing and for what?; "Thank you, you're the best???"

All in all, the negatives have stood tall, staring down at me with oppressive intimidation. They have been so easy to spot, good justifiers of no pursuit at all; they have been too easy, too obvious.

To look at this now, I am deeply unsettled and disappointed by my indifference to the foe. The allowance I afforded fear.

The silver lining?
There isn't one!

Well, there actually is one. Probably not the mood for a joke.
"Knowledge is power", an common phrase. Fortunately, none of it's value has been lost as it has echoed so often on the walls of Kenyan classrooms.

This is it! Despite wielding fear instead of courage, optimism and faith in my career battles, contemplating and writing on the matter has allowed me to re-evaluate what matters most and to allow myself to go for it. Boldly, giving no audience to the naysayers or the inevitable negatives. Truly, to write is to be free.

Yes you can experience fear and still be passionate.
Can you?
Yes. The concept is that of courage - action despite fear.

Chase it afraid!

This is a cross-platform post from my original blog site.

Own your goal - Forge the path

Joseph Ochego — Mon, 10 Mar 2025 03:12:57 +0000

"One of my greatest fears is comfort, and the sense of security it brings along." Of course, I forget I hate it once I'm in that soft, puffy cloud. But an awakening from this state is always appreciated.

Comfort is mostly entrapping - and the security? That's counterfeit. FAKE! ~~mostly, at least~~

A pleasant disappointment

Unfortunately, I was fortunate enough to have a feel for this "comfort" we so earnestly seek. 2 months in and I was already pitching camp where I now believe I had no business settling.

Fortunately, it was the unfortunate sudden and unforeseen disruption of this "comfort" that shook me up and back to my ambitious and goal-oriented self (now that I read it, framing myself that way is laughable 😅).
Goals far different from what I was set in line for at that moment.

Enough of the play with words. What's all this fuss about?

Let's press rewind for a little bit...

Imagine asking or leaving it to someone to make a decision, of which the consequence is you (not them) waking up at 5 am in the morning to leave, returning home at 6 pm, 6 days a week of exhaustion for the better part of your life going forward.

Imagine leaving a decision of this magnitude to someone else. Crazy, right?

Crazy enough, that's how I landed myself in that zone of "comfort". Luckily, I realized it was more of a trap. Thank God!

Some paths are best forged singularly. Weigh your options, weigh the risks, understand the rewards and make a decision. The fewer people are involved, the less noisy and confusing decision-making becomes, and there you go, self-trust builds up; making decisions becomes that much easier. Understanding and accepting the consequence of each choice too.

No internal conflict, because you never went to 100 people, all with varying opinions, to consult on the best course of action.

No noise. All clear. I bet that's where "clear-headed" came from.

To be fair...

When people make choices for us (especially those responsible for our well-being), it's often because they haven't seen the initiative from our end and they run in to help.

Nevertheless, playing along isn't sustainable. Quite the opposite actually. However, it is the path of least resistance, feels natural to nod and do.

Not surprisingly though, no wins are to be expected at the end of the paths we are pushed into.

Choice is a privilege

For those fortunate enough to have been afforded any amount of privileges in their lives, they would understand that most of the time, although we're grateful to be in such situations, we bear privilege as a burden lined with guilt and shame and sometimes the question "Why me?" Especially if many others are not as fortunate.

Privilege is a gift and a responsibility. It is only fair to use it, the opposite of which would be ungratefulness.

Duly noted, you should make haste while you're still party to that privilege of choice.

In my case, the choice to venture into a path which, although laden with uncertainty, is fuelled by passion, innate curiosity and dedication to lifelong learning and growth.

"I do not want to merely exist. I want to live;
I do not want the most exciting moment of my life to be sitting on a chair watching someone experience the most exciting moment of their life", a podcast I can't remember.

In this vein, I remind myself that one of the greatest gifts we can offer the people we care so deeply about is by being the best version of ourselves we possibly can across all spaces; physically, career-wise, in our relationships, emotionally and spiritually.

To offer anything less to them is to betray them, and worse, ourselves.

This might look like a well-crafted attempt at justifying following the path I want to, and you would be very right.

But it is also the result of desperation, in my search for freedom; mine and yours (the reader). As we know "to write is to be free".

And this my dear friends is an invitation, to Own your goal and forge the path.

To write is To be free

Joseph Ochego — Sat, 15 Feb 2025 17:50:41 +0000

Picture this:

"You have an office or study desk. You've been wanting to tidy your space, get the deodorant, comb, rough papers, piles of useless books and a piece of yesterday's chips off the table, give it a proper wipe and get more work done in a clean, clutter-free desk setup."

Well, believe it or not, that's exactly how your mind works as well. Information clutter brings about confusion, stress, forgetfulness, uncertainty, and the list of negatives goes on and on.

So let's organize our thoughts here and start from the beginning.

My name is Joseph Ochego and I am a mechanical ~~engineer~~ draughtsman - "draftsman" enUS by day, and a web dev by night. As a consequence of my love for technology, I write about it. After having some "wins" while getting started in web development as a side venture, I wanted to share my experiences, I needed to. "Maybe people who learn from my experiences will get the thrill of victory I did as well, wouldn't that be nice", I thought.

So I resolved to writing, from tutorials, to review articles, to personal rants and much more is yet to be explored. This excited me then and excites me even more now. I've written about pieces of technology I've enjoyed using such as Hey - a different take on email by 37Signals; web-dev tutorials such as the one on JavaScript Objects and another on the Basics of Markdown; rants such as Why I Write. For me, this is an outlet, more than anything else.

Although all that is important, veerry important to be precise, let's shift our sights to a particular by-product of writing - clarity, which births the freedom this piece has so tactfully evaded talking about till now. I'd call them, the by-product and the by-by-product.

My writing is often spontaneous - in the rush of the fanaticism and excitement. Like when I wrote about Hey. Other times, I write when I'm battling a myriad of thoughts like I am currently as I write this piece.

It is a Saturday afternoon at work, and like the norm, the workload at such a time is reduced to a minimum and the motivation to clear the remainder of the work quashed by the slow moving hours. Today in particular, most offices sit empty in silence and as I pick up my bag to pack and leave as well, I noticed something - silence, peace, finally. So I sit myself back down, pick up and press atop my mechanical pencil for a fresh extension of graphite and the source a fresh sheet of plain A4 paper from my file. With the silence so audible and my mind caught up in the peace, I let my thoughts race and my wrist slide from left to ~~write~~ right.

Although there's a touch of spontaneity in my writing, it isn't always about "lightbulb" moment to paper. It's mostly a process of getting an idea, trying to shake it off, some leave, some are quite stubborn and so I get fixated on those ones; continually digesting the concepts and ideas behind the subject matter, which can take a few hours to a day or two. By this time, I'm itching to be listened to and so I get a pencil and paper and I let loose.

As I pour all my thoughts to the poor sheet of paper, I make the point of pruning the nonsensical ideas that try to sneak into the piece. I determine this by thinking as I write and some ideas are straight up not right while others are heavily based on personal bias. These have to go.

GPTs and Google also lend a helping hand as clarifiers for confusing concepts.

When I am done with my pencil and paper, I pretty much have a piece supported by facts (mostly 😁) and enriched by personal opinions meant to add and not detract value from my arguments.

When I am done, the topic is clear, the hypothesis has been tested and the facts are what's left: Hence Clarity.

When I am done, I am free from confusion, free from the uncertainty of the subject matter: To think or not to think, to learn or not to learn, to write or not to write, to teach or not to teach.

NOW I AM FREE. I have learnt, I have written and to those that read, I have taught.

01010111 01010010 01001001 01010100 01001001 01001110 01000111 = 01000011 01001100 01000001 01010010 01001001 01010100 01011001
//and
01000011 01001100 01000001 01010010 01001001 01010100 01011001 = 01000110 01010010 01000101 01000101 01000100 01001111 01001101
//Hence
01010111 01010010 01001001 01010100 01001001 01001110 01000111 = 01000110 01010010 01000101 01000101 01000100 01001111 01001101

WRITING = CLARITY
//and
CLARITY = FREEDOM
//Hence
WRITING = FREEDOM

PS: Even on a good day, I couldn't come up with this code block on my own😂. Thank you Deepseek. 🙏🏽

Markdown: More With Less

Joseph Ochego — Sat, 03 Aug 2024 19:11:14 +0000

Every technical writer should use Markdown✍; At the very least, learn it 📖

Markdown is a lightweight markup language for creating formatted text using a plain-text editor. It is commonly used in blogging, instant messaging (you use it on Whatsapp for bold, italics etc.) and other cooler applications such as writing Math articles with expressions.

It's best feature? Simplicity 💯

I use markdown for blogging on dev.to and on my personal blog site which is built on Hugo.
I use it for notes, task lists, reports and of course project documentation. MD(Markdown) is highly extensible and can be used in numerous applications.

Some important features that I heavily lean into in my workflow include:

1.Headings

  # heading 1
  ## heading 2
  ### heading 3
  #### heading 4
  ##### heading 5
  ###### heading 6

Output:

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

2. Embedding links in text and link references

    [some text](https://some.website)

Output: some text

3. Embedding media such as images and videos

For images:

  ![alt_text](image.png)

For Videos, there is more than one way to do it. The easiest in my opinion is using the HTML <video> tag.

Another way is to embed a video using hosting services such as youtube and vimeo which provide you an embed code that you can copy and paste into your markdown file:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Another is using the markdown-specific syntax for embedding videos. There are different syntax for different platforms. For example YouTube and Vimeo etc.

    [![alt text](https://img.youtube.com/vi/video-id/0.jpg)](https://www.youtube.com/watch?v=video-id)

Whichever method you choose to use, keenly consider user experience.

4. Checkboxes for todos

    - [ ] Write blog
    - [ ] Publish blog
    - [ ] Create summary

Output:

[ ] Write blog
[ ] Publish blog
[ ] Create summary

Note that the checkboxes are rendered on most markdown readers but not all, for example on this site.

5. Lists

    - item 1
    - item 2
    - item 3

Output:

item 1
item 2
item 3

6. Quotes/Block Quotes

    > "Markdown is a simple and efficient language for documentation and note taking", theJoernal.

Output:

"Markdown is a simple and efficient language for documentation and note taking", theJoernal.

7. Code snippets and blocks (I mostly use this in tutorials)

For inline code snippets, use single backticks
For larger codeblocks, use triple backticks; Three to open the block and three after the code to close it.

8. Syntax highlighting in codeblocks

To get Syntax highlighting in code blocks, add the language name immediately after the opening backticks:

Markdown tooling is not an issue;

You prefer working on VS Code? You can. On Notepad or Vim? You're covered. And now, you can do it on Zed Editor (I am testing it on Linux at the moment), which has inbuilt markdown support.

Apart from these popular text editors and IDEs, there are also several Markdown-specific editors, that pack in some goodies.
Some honourable mentions that I've personally enjoyed using in the past include:

Obsidian (All Platforms)
Typora (Linux, Mac, Win)
Notion (Mac, Win, Android, IOS)
iA Writer (Mac, Win, Android, IOS)
Simplenote (Linux, Mac, Win, Android, IOS)
InkDrop (Linux, Mac, Win, Android, IOS)

Find out more about markdown here: Getting Started with Markdown

Do you use Markdown?

This is a cross post from the original on my blog site.

Understand Scoping in JavaScript

Joseph Ochego — Fri, 12 Jul 2024 12:21:54 +0000

Scoping in JavaScript is an important concept that provides the rules for variable accessibility from different parts of your code. It's a process of checking for a variable from one level to the next, from a block level to the function, and finally searching in the global level. Understanding scoping is important for writing a well-organized, efficient, and bug-free program.

Levels of Scoping

Block Scope

A block scope is an area within curly braces {}. Variables declared in a block will have block-level scope. This feature was introduced in ES6 using the let and const keywords. Here's an example:

if (true) {
  let blockVariable = "I am inside a block";
  console.log(blockVariable); // Output: I am inside a block
}
console.log(blockVariable); // Error: blockVariable is not defined

Function Scope

Variables defined within a function are accessible only within the function in which they are defined, as well as any nested blocks inside of it. This applies to var, let, and const.

function user() {
  const userName = "John Doe";
  console.log(userName); // Output: John Doe
}
user();
console.log(userName); // Error: userName is not defined

Global Scope

Variables declared outside of any block or function exist in the global scope. They can be accessed from anywhere in the script.

var globalVariable = "I am global";

function accessGlobal() {
  console.log(globalVariable); // Output: I am global
}

accessGlobal();
console.log(globalVariable); // Output: I am global

Scope Resolution Sequence

When JavaScript needs to use a variable, it follows the following sequence:

Immediate Scope: It starts by looking in the current block or function where the variable is referenced.
Enclosing Scopes: If the enclosed scope is not found, it will move to the higher next scope and so on till it moves up the chain.
Global Scope: The variable does not exist in any local or enclosing scopes, hence it falls in the global scope.

The search stops the moment it finds the variable at any level and uses the variable. Else, throws a reference error if not found anywhere.

var userName = "Global User";

function user() {
  const userName = "Function User";
  console.log(userName); // Output: Function User
}

user();
console.log(userName); // Output: Global User

The user function in the above example has another variable inside it, called userName. As the function user() was invoked, it output the "Function User". Access to global userName is made, as a reference is available outside the function, and it outputs the "Global User".

Why Scoping is Important

Scoping is used to avoid variable conflicts and ensures that variables are accessed in the intended context. If a variable with the same name exists under different scopes, JavaScript considers them as totally different and thus won't have any problem.

const userName = "Global User";

function user() {
  let userName = "Function User";
  console.log(userName); // Output: Function User
}

user();

console.log(userName); // Output: Global User

var userName = "Updated Global User";
console.log(userName); // Output: Updated Global User

Variable changes made in one scope are not reflected in any variable that shares the same name but exists in a different scope, unless specified. This ensures separate variables are obtained for clean, more maintainable code.

Best Practices

Declare variables within intended scope: Use global variables when and only if they are needed by more than one function.
Use let and const for block-level scoping: This will make accidental re-declaration and scope leakage impossible.
Keep the global scope clean: Try not to define too many global variables.

Writing more organized, efficient, and errorless code is possible by understanding and applying the principles of JavaScript scoping. In addition, such an approach guarantees that the debugging and maintenance process will be greatly simplified.

Hasta la Vista 👋

This is a cross-post from my original blog site.

How To Display JavaScript Objects

Joseph Ochego — Wed, 29 May 2024 11:22:05 +0000

While primitives in JavaScript are values themselves, everything else, including arrays and functions, are objects. Understanding how to leverage objects in the Document Object Model (DOM) is vital for effective web development.

This is a guide on different methods of displaying Objects when working with the DOM.

Displaying a JavaScript Object will output [object Object] by default:

const mySelf = {  
    name: "Joe",  
    age: 21,  
    city: "Bangalore"  
};

document.getElementById("demo").innnerHTML = mySelf; //[object Object]

This can however be maneuvered and solved with a couple of workarounds:

Displaying Object properties by name
Displaying Object Properties in a Loop
Displaying Object using Object.values()
Displaying Object using Object.entries()
Displaying Object using JSON.stringify()

Display the Object Properties

Object properties can be displayed as a string:

// create object
const mySelf = {  
    name: "Joe",  
    age: 21,  
    city: "Bangalore"  
};

// display properties
document.getElementById("demo").innerHTML = mySelf.name + ", " + mySelf.age + ", " + mySelf.city;

Display Object Properties in a Loop

Object properties can also be collected in a loop.
Here, we use an expression(x):

// Create an Object
const mySelf = {  
    name: "Joe",  
    age: 21,  
    city: "Bangalore"  
};

// Build a Text
let text = "";
for (let x in mySelf) {  
    text += mySelf[x] + " ";
};

// Display the Text
document.getElementById("demo").innerHTML = text;

NOTE: You must use mySelf[x] in the loop.
mySelf.x will not work since x is the loop variable.

Display using Object.values()

Objects.values() creates an array from the properties' values.

const mySelf = {  
    name: "Joe",  
    age: 21,  
    city: "Bangalore"  
};

// create array
const myArray = Object.values(mySelf);

// display the array using DOM
document.getElementById("demo").innerHTML = myArray;

Display using Object.entries()

Using Object.entries() simplifies using objects in loops:

const pens = {Blue:20, Black:22, Red:10};

let text = "";

for (let [pen, value] of Object.entries(pens)) {  
    text += fruit + ": " + value + "<br>";
}

//display the count of each pen color
document.getElementById("demo").innerHTML = text;

Display using JSON.stringify()

You can convert JavaScript objects into a string with the JSON method JSON.stringify()
This method is included in JavaScript and is also supported in most browsers, at least all the major ones.

const mySelf = {  
    name: "Joe",  
    age: 21,  
    city: "Bengaluru"
};

// use JSON.stringify() method
let myString = JSON.stringify(mySelf);

// display the output
document.getElementByID("demo").innerHTML = myString;

This method will output a string a string written in JSON notation:

{"name":"Joe", "age":21, "city":"Bangalore"}

In summary, effectively displaying JavaScript objects in the DOM is crucial for dynamic web development.

By utilizing techniques such as accessing properties by name, iterating through properties, or using Object.values() and Object.entries(), you can present object data meaningfully.

Understanding these methods enhances user experience and showcases JavaScript's versatility in web applications. Mastering these techniques empowers you as a developer to create engaging and dynamic web content.

Have fun learning 😉

This is a cross-post from my original blog site.

"Learning Styles: A Myth?"

Joseph Ochego — Tue, 14 May 2024 12:59:14 +0000

Learning styles. We all have them, right? Or at least that's what we believe.

There exist several theories about learning styles, one of the most common ones being the Visual, Auditory, Reading/Writing, and Kinesthetic theory, commonly referred to as VARK.

"I am a visual learner", I've said this countless times; When speaking with friends, looking for learning resources, or looking for a way out of reading a book, "I am a visual learner."

It is because I enjoy watching, from movies to tech news and even more when learning a new language or technology. Which is how I have learnt most of what I know in web development. But what does this mean?

The buzz in this generation's education system is that students learn better with their preferred learning styles.

If that's the case in a class of 50, then the teacher needs to do these two things:

i) Learn each student's preferred learning style, then

ii) Teach each student by their learning style

Is that feasible?

Dr. Derek Muller explains in his Veritasium video how music is best learnt by listening, graphics design through images and videos, painting through painting (kinesthetic mode) and poetry through reading.

These subjects all have their optimum methods/modes of delivery. That is why when you're learning Geography and the teacher uses images and maps, you understand it better than without. It's not really because the teacher used your preferred learning style, visual, but because it's the most effective mode of delivery for such a concept.

When I use video tutorials to learn about UI Design, I get a hold of the ideas faster than I do when I read articles or a book about the same. In this case, is it because I am a "visual learner" or is this the most effective way to learn about such a visual subject/concept? And after the fact, I might be like, videos really do it for me.

Such an instance may reinforce your belief in your "preferred learning style" if you don't know any better, just as it happened to me 😬. Fortunately, now you know😉.

Think about it this way, what is your preferred learning style? Then think about, what mode you actually employ when doing deep study and research for an upcoming test.

You need to consider that all these preferred learning styles might be constructs, and based on studies carried out, they don't actually exist.

You feel that void now, don't you? That's good. Fill it with this;

There is a singular mode that has been studied and concluded to be the most effective mode of learning. That is the multi-modal approach.

This approach combines all the modes used in the VARK theory to convey information.

This learning method engages multiple sensory systems simultaneously allowing us to understand and remember more. This is why videos are very powerful tools for learning - when a narrator complements the visuals with words of explanation. This is the multi-media effect.

That is why those YouTube tutorials you've been following have been effective in whatever you've been learning. Well, at least if the videos were made right. And adding note-taking to that results in an even more impressive outcome.

The multi-modal learning approach has always been around, used even without our knowledge. Now that we know, applying it more consciously and properly is assured to give us better outcomes in our learning or teaching.

Live Long and Prosper 🖖

Main Ref Links

Veritasium Video

General Musings Podcast - Kevin Powell

This is a cross-post from the original in my blog site

"A delightfully fresh take on email." HEY👋

Joseph Ochego — Wed, 08 May 2024 05:01:27 +0000

Just wrapped up an amazing week and a half using the Hey email by 37signals, and I can't help but share the love! 🚀

HEY — A delightfully fresh take on email + calendar, from 37signals

Gmail, Outlook, and Apple got complacent and took their eye off the ball. Then along came HEY.

hey.com

Their "delightful fresh take on email" has given me a clutter-free, efficient inbox with privacy in mind. The Screener tool lets me decide who gets into my inbox—keeping it personal and important.
The Imbox, Feed, and Paper Trail organization make my email life a breeze. The Feed turns long-reads into a casual news feed, making newsletters from the likes of David Heinemeier Hansson and Jason Fried a joy to read. Plus, importing emails from my previous service was seamless.

Blogging is as easy as emailing world@hey.com—"write, send, and it's posted"! Perfect for fellow writers and bloggers.

And let's talk about Hey Calendar—designed around how we think and plan in days and weeks.

The timeline-based day view and the innovative "maybe" feature in Hey Calendar have revolutionized how I plan. Plus, you get handy features like importing from Google, Outlook, and Apple, sharing calendars with other Hey users, adding events directly from email invites, and full multi-time zone support. It's a planner's dream!

Aside from its sleek design, what really sucked me in is the official support for a Linux desktop client. As a daily Linux user, the pain of not having native clients for some of the apps I like and use daily is real. Having the calendar and mail in the same app, just an icon-click away, is a game-changer.
As my free trial wraps up in 3 days, I'm already contemplating setting up a piggy bank and saving up for the $99 personal subscription. Privacy and efficiency are priceless, and Hey has won me over. 🌐✉️

This is from my original post on LinkedIn 2months ago.

Bridging the Gap: Basic Design Principles for Developers

Joseph Ochego — Sat, 27 Apr 2024 06:59:03 +0000

Developers typically focus on the coding and development aspects of a project. Clarity in roles is essential, with designers handling tasks from theme selection to UI design, passing the completed work to developers for implementation.

While this workflow has its advantages, it's crucial for developers to grasp basic design principles. Personally, I've experienced both approaches but lean towards involvement in both design and programming phases.

Here, I'll share resources to help developers grasp fundamental design principles, enhancing their ability to create significantly better products. I've curated beginner-friendly documentation covering areas such as color theory, typography, iconography, layout design, and general-purpose guides.

Think of these resources as references; there's no need to absorb everything at once. Instead, choose what's relevant to your current needs and revisit for additional guidance later on.

1. Colour (Color)

Understanding color theory is crucial for developers to create visually appealing designs. Concepts like color harmony and contrast enhance usability and aesthetics. The following guides delve into these concepts:

You can jump into the following sites for designer-curated color palettes or even create your own:

Color Hunt - "Color Hunt was created with the goal of celebrating the beauty of colors, and to serve as a go-to resource for color inspiration."
Coloors - Create or choose the perfect palette, and use a range of tools, from image-color picker, contrast checker and palette visualizer.

2. Typography

Typography plays a significant role in user experience and interface design. Developers need to learn about font selection, sizing, and spacing to ensure readability and accessibility in their projects.

3. Icons

Icons are essential elements of UI design, aiding in navigation and communication of information. Developers should familiarize themselves with iconography principles to effectively integrate icons into their applications and websites.

Using Icons In Web Development

Access icons for your websites, ranging from free to premium, on these top icon sites:

Font Awesome
Icons8 for icons and more (illustrations, 3D assets, AI photo gen)
Iconify Design - Find popular open source icon sets

4. Layouts

The layout of a user interface influences how users interact with a product. Developers need to understand layout design principles such as grid systems, alignment, and spacing to create intuitive and visually pleasing interfaces.

Explore these two exemplary resources for general guidelines and best practices in exceptional web design:

Conclusion

Treat this as a reference; select what you require and revisit as necessary. Understanding these fundamental principles is crucial for web developers, regardless of their involvement in the design process.

This is a cross-post from the original in my blog site

Why I Write.

Joseph Ochego — Sat, 20 Apr 2024 07:23:19 +0000

"You can build a prison of stone and steel, but you merely present the prisoner with a challenge. Any truly determined man will find a way out. But love, love is a perfect prison", Wilson Fisk.

Inescapable!

As the heart is held hostage by love, so is my mind by creativity. The yearning to create, the itch, the desperation - desperation can be an ally. I write, not only because I love to, but the need pushes even harder; I have to!

Before I dive deep into today's main topic, here is something I noticed when preparing a draft on paper for this post. I dislike pens, ball-points, gel, fountain pens, whatever writes in ink. Journaling, when I do, is in pencil. From cover to cover, writings in pencil, sketches, design wire-frames, quotes, random thoughts, nonsense, I don't discriminate, all in pencil, all on plain-sheet notebooks.

Alas! The restrictions are gone, freedom beyond lines and ink.

My writing may not be as legible or pretty to look at as that written by say a Bic on a single rule sheet, heck it barely befits the description, "handwriting". But the gold here is the ideas hidden in the mush put down by my pencil. Sometimes, I can't, for the life of me figure out what I wrote while I'm trying to read, but that beats writing beautifully and letting ideas disappear as I try to perfect my penmanship. The freedom of pencil on plain sheets of papers/books, as trivial as it might seem, does wonders to my workflow and I can't recommend it enough.

Now back to the subject matter; I write for many reasons, some of which I'll share here.

To begin with, I only write short-form material, stuff like articles, blog posts, tutorials here and there and documentation for my development projects.

Books? Na-ah, I don't think I would fancy that. The thought of it alone - no thank you! I prefer the shorter bursts of ideas, kinda instant feedback, then on to the next thing.

Short-form materials have been the core building blocks of my development journey and I owe lots of credit to them for this passion. There are too many authors and sites to mention, but the pieces from DHH and Jason Fried on Hey World have been key players in my love for the art. Their conciseness, straight to the point approach and the personalisation they put into every piece they write is a breath of fresh air.

Another factor that pushes me to write is the excitement I get when I have really interesting newfound knowledge. It might not be in the slightest bit interesting to you, but I'll ramble about it anyways, my friends go through it, sorry 😁.

Writing about it and sharing it, grounds me a bit more in that respect, knowing that someone else out there will be thrilled to bits when they encounter that bit of information, just as I was.

The reason I haven't been so fond of lecture, listen and leave type classes is the lack of passion in the information delivery. I meet it once in a while and I just want such lectures to go on and on; It might not even be a subject that I'm deeply interested in but that sparkle in the speaker's eyes and the depth of their words as they share their knowledge is profound. Written pieces stir up the same emotion when the writer cares deeply about what they're delivering.

Let me be biased but honest here for a second. My father's Swahili classes, back when he taught the language, and my mother's performing-arts training sessions in school are exactly the kind of experiences that would be best described with phrases such as full of depth and passionate. Without a doubt, they're a major influence on my love for art.

That was a prelude to the point that another reason I write is to share knowledge with depth. Putting in that extra effort to ensure that it is clear and concise so everyone gets the point. If you're passionate about it, the passion and care will be evident in the information you share; At least I hope that's the case for my pieces. Is it?

I think as a gift for sharing knowledge, there's a peace that I am rewarded with. Two to three lines into writing a piece and my thoughts are flowing, smoothly, peacefully. I isolate the sound of my fingers hitting the keys on my keyboard and just like that, I'm gone. Some sort of trance, peaceful, tense in a good way and productive of course - a good piece at the end.

There has to be a selfish reason too, right? There always is [grinning].

During a week as hectic as this one, I find relief and rest in writing. I type my thoughts on things I care about and my computer listens, keen to register every key-press, then it displays its response on the screen. I add more and more lines, and it keeps listening, it keeps responding and here you are, reading the result.

"This man sounds nuts", we all are! Most of us just don't write about it 😄.

So I write for lots of reasons, some personal and selfish, some relatable and helpful to others. The baseline being that I love doing it; Not enough to sell a limb for it, but just enough to keep writing, enjoying every bit of it.

Even knowing that sometimes I'm just rambling on and on, circling the same idea, I don't decide when to stop, where it ends, it just does!

This is a cross-post from the original in my blog site

"Just Start!" - A double-edged sword.

Joseph Ochego — Wed, 17 Apr 2024 02:25:07 +0000

The best way to start a project is to "just start," right? WRONG!

If you've ever turned to motivational videos or pieces for that extra push to start a project, you know the phrase "just start". Not to say it doesn't work, no, it actually does, mostly. But there is so much lost in that slogan that it can be just as destructive as it is motivational.

"You do not rise to the level of your goals, you fall to the level of your systems", James Clear.

This applies especially in tasks that require a process, a flow, a system for the best outcomes like programming, design, and the like. Jumping right into the thick of it and just starting is not the way to go. The planning phase is just as important, if not more than the execution phase, and I had to be cornered by a recent project to come to this epiphany.

While creating my new web portfolio, I had it all well laid out, planned in my head; I could see the outcome, the result; I could see all who set their eyes on it after I was done in awe. Although I started off well by creating a wire-frame then a high-fidelity design in Figma, I did so only for the homepage. I was supposed to do the same for all the other pages, but boy did my fingers itch for some typing action. Before I knew it, I was in too deep, visualising the design in my head as I implemented it in code.

It took getting stuck on the contact page to remind me that there's a reason we plan, there's a reason we have processes we follow, systems in place. This page just wasn't looking like the one in my head. I spent 3 days on the contact page, trying out all the layouts I could think of, flex, grid, but I just couldn't reproduce the page from my thoughts.

It took a Figma ad on Instagram to remind me that I was actually going about it all wrong. How timely?

There's a reason programs like Figma and XD were created. These are design software (yes, not software*s*), creative playgrounds, where you translate the ideas you have in mind on paper. And revise them over and over and over and over again, until you're satisfied, which is usually never, mostly just settling.

Then with the well-laid-out design, we move to development.

I was doing it all wrong, designing and developing on the fly, using the same tool - VScode; Making one step forward and ten back when I mess up with good code while trying to get rid of the bad. I had gotten away with it for three pages, but it had finally caught up with me.

It took really fighting with my code to remember a process I learned during my internship at Metanoia Web Labs from my mentor.

I woke up the next morning after battling with the contact page for 3 days, prepared a strong cup of lemon tea with honey and sat down at my desk. With pen and paper, I wrote down the process I was going to follow (web design and development):

Plan (languages, timeline...)
Wireframing
Low-fidelity design (Figma)
High Fidelity design in Figma
Prototyping - optional (didn't do it)
Collecting and organizing assets from designs
Programming

Looks like a lot, right? Yes, it does, but it isn't. It's just a rough outline of what you'll be doing, one after the other. You don't even have to do them all. A low-fidelity design might be enough for you to translate into code without a hitch, while others might be required to go all the way, finishing with a prototype.

If you're only a web developer and not a designer, then by all means start from number seven. You'll probably receive the design from a designer who will do most of the earlier work, from wire-framing to high-fidelity designs or even rapid prototyping.

So this process/system is not set in stone and can be tweaked extensively to accommodate the nature of your work and the expectations or outcomes of you and your team.

"Phew, finally! The plane has landed..." I get it. But I had to take us all the way for the depth and the need for a process to be seen, felt, appreciated.

I listened to someone and I "just started", as advised.

I could easily have finished up my web portfolio by the time my previous blog post dropped; Excitement and impatience, however, got the better of me and I paid for it in time - days wasted. I don't want to go into the rabbit hole of could haves and should haves as I don't regret this shortcoming. We probably wouldn't have had this piece if everything had gone smoothly. But we learn every day, hey?

Have fun learning 😁

This is a cross-post from the original in my blog site

Add basic animations to your site using Animate.css and wow.js

Joseph Ochego — Wed, 17 Apr 2024 02:19:35 +0000

I have been working on my personal portfolio website (although not complete) for the past few weeks, taking it really slow, revising designs and ensuring I get my persona represented accurately. One of the visual elements I've had to have from the beginning was animations.

You might have just shrugged, thinking, "Another complex guide on implementing web animations...". Far from it. This is probably the simplest way you can use animations in your site using CSS classes.

That's it? - Most definitely! And I'll cover, albeit very briefly, how you can implement this right in your .html file and see your beautiful lifeless (for dramatic effect :D) site brought to life. For this, you need two libraries, Animate.css and wow.js.

Animate.css

"Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.", as they say it on their site. Plain and simple.

Installation

There are three ways of installing animate.css:

Using npm
Using yarn
Using cdn, directly in our file (our way)

Based on the promise of simplicity, we'll use the CDN method, adding the link directly into out head tag as shown:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

Usage

Once you've installed animate.css, add the animate__anmated class to your target element, followed by the class-name of the animation you wish to use; always starting with the anmate__ prefix.

Here's an example:

<img src="image.png" class="animate__animated animate__fadeInLeft" />

This adds a fade-in from the left animation to our image element.

Note that these animations are displayed only when the page loads; forcing you to have the element in the viewport during loading to see it.

However!! There is a way to delay the loading of each animation and only load it and display it when the target element is scrolled into the viewport. We use a JavaScript library called wow js to achieve this. And as promised we'll still do it simply:

Wow JS

Wow.js reveals animations when you scroll and the animated elements come into the viewport. Using it ensures that your visitors don't miss your wiggles, fades, bounces and spins.

Wow.js is very animate.css friendly. Exactly why we're working with both in this turorial.

Installation

Installing wow.js is as simple as adding a script at the the end of the <body> in your .html file:

<body>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"
    integrity="sha512-Eak/29OTpb36LLo2r47IpVzPBLXnAMPAVypbSZiZ4Qkf8p/7S/XRG5xp7OKWPPYfJT6metI+IORkR5G8F900+g=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  ></script>
  <script>
    new WOW().init();
  </script>
</body>

<!--make sure you have the latest version at the time of implementation-->

Although wow.js can also be installed using npm and yarn, I opted for the simplest way - using a CDN link.

Usage

Simply add the wow CSS class to the element and it will be hidden until the user scrolls it into the viewport.

<img src="image.img" class="wow" />

<!--Then add your animation class-->

<img src="image.img" class="wow animate__animated animate__bounce" />

And you're done!

There are a few more cool customizations you can do with the wow script, which you can check out on wow.js

Have Fun Learning 😁

This is a cross-post from the original in my blog site