If you’re looking for a channel to learn and improve your JavaScript skills, this article has what you’re looking for. In this article, you’ll find 20 great YouTube channels where you are sure to get quality content on both beginner and advanced JavaScript topics.

Continue reading: Take me there

In this article, we covered:

• What open-source is
• Benefits of contributing to open-source
• How to get started with an open-source contribution
• Open-source communities to join
• Categories of people in open source projects
• How to contribute to open-source without writing code
• Resources and further reading

Continue reading this Article: Take me there

If you're a designer, entrepreneur, small business owner etc, learning to build your own website can be an additional and handy skill. If you're a freelancer like me, it's always advisable to know how to use one or more of these no-code tools in order to meet the needs of potential clients.

No-code tools are softwares you can use to build and manage websites without writing code.

Interesting? Yes!

The end result of no-code tools is that it makes building a website accessible to anyone – even people who aren’t developers.

What you can build with no-code tools

Literally everything that lives on the web

• Business websites
• eCommerce stores
• Blogs
• Portfolios
• Resumes
• Forums
• Social networks
• Membership sites
• …pretty much anything else you can dream up.

That said, let's delve into a few of my favorite no-code tools and what you can do with them.

Wix

Wix is arguably the easiest website builder due to its wide range of free templates. You can choose from over 500 industry-specific templates and make use of its incredible drag-and-drop editor. Or if you'd prefer, use Wix ADI and let Wix design a website for you! You can also decide to build your own website from scratch. Wix is completely free, for as long as you want. If you need professional features like your own domain name or ecommerce, you'd have to choose from one of their premium plans ranging from “Combo” to “Business VIP”.

There a probably a lot of people using wix templates, so I'd advice you edit your websites to represent the brand, so its uniqueness won't be lost in the sea of similar websites. In other words, don't copy and paste templates.

Wordpress

This is the most popular no-code tool for building websites I know. Many years ago, WordPress was primarily a tool to create a blog, rather than more traditional websites. Nowadays, you can create any type of website with WordPress, due its widely available plugins, themes and addons.

I'm currently writing a tutorial on how to build your first WordPress project (a portfolio page) using WordPress and Elementor plugin. Subscribe to my mailing list to be notified when it drops.

Webflow

Webflow has been around for a couple of years, but not so many people know about it. I've been recently working around building my first website with it. One major cool stuff about Webflow is the ability to export your entire project code. How cool is that?!!

Dragging and dropping a bunch of tools, and then exporting the entire things as HTML, CSS, and JavaScript.

This is the coolest thing that has ever happened to no-code designers y'all.

I believe you'd want to check out one or all of these tools and get started with designing great websites. Which of them are you trying out first?

Got questions, reach out to me via twitter

Being a productive developer has its perks which include: Job satisfaction, higher pay, work-life balance, and a happy-boss.

There are a thousand and one things fighting for your attention on a daily basis, and knowing where and when to respond to them and with which tools, would place one developer in front of the other on the productivity radar (If there is anything like that).

In this article, you’ll learn how to set goals, take charge of your day, and become a super-productive developer.

Why does it matter?

Humans are not machines and even machines pack up if not serviced. You can use up will-power and mental resources - and become a vegetable.

Productivity != being busy. You can be busy a whole day, doing things with very little significance.

Whether you’re a newbie, intermediate, or a very experienced developer, you need to be more productive to become better.

Companies love to have productive developers in their team with the ever teaming competition on their neck daily, they want someone who can deliver quality codes in less time.

So, the question is, with the distractions flying around vying for one’s attention, how can one be more productive as a developer?

Set Goals

Without clear goals to drive you forward, you won’t know if you’re making progress in the activities you consider most important. Map out what you want to achieve within a particular time frame, and outline how you're set to achieve them. When making a goal, bear the following in mind:

Your goals should be Specific. Make a list of what you want to achieve and in simple and straightforward terms too. Saying "I'd build a full Vue application this week" is vague compared to when you say "I'll build a todo-app using Vue this week" This specificity will help you in breaking the task further down to daily goals, and hourly goals as the case may be.

Your goals should be measurable. If you can't measure your goals, then it'd be difficult to monitor progress or digress. Instead of saying "I'll become a better developer this year" ("better" is relative and can't be measured) say, I'll build 20 applications using Vue, NuxtJs, and GraphQl. This way, if you're able to build 10, you'd at least discover that you achieved a percentage of your goals.

Your goals should be attainable. Don't make goals you and your guts clearly know you can't achieve. You'll only be setting yourself up for disappointment and sap your motivation when you don't achieve them.

Your goals should be relevant. The goal you pick should be pertinent to your field or should benefit you directly. It would be awkward for me to want to be the best actress in Nigeria in 2020 when I've not starred in a local drama concert for once.

Your goal should be time-bound. Adding a timing to your goals gives you a sense of urgency needed to wake you up to do something even on days you don't feel like it. Example #100daysofCode

Avoid Distractions

Distractions come in a number of ways, with social media being the all-time enemy of developers. As a developer, it is given that you spend a lot of time with your laptop, iPad, and phone. Notifications could pop up just the time you're about testing a feature with your phone🤦🏼 and this minute, you're deciding to check out this one notification, and in the next 1 hour, you're wondering what made you pick up the phone in the first place. Tragic!

These are a few things that have worked for me against social media distractions:

• Putting a considerable distance between me and my phone. Keeping my phone a room or 2 away from me makes it difficult for me to reach for it, and aids in resisiting the impulse to check one message.

• Turning off social media notification. All of them, except my email and Slack. This ensures that I do not get tempted to "check" a notification.

• Calendar blocking. In my daily calendar, I have times designated for my daily activities including social media. You may be wondering, so how can one be active on social media and be a good developer at the same time? This is your answer. Those who you consider active on social media may be spending considerably lesser amount of time on social media than you do. They schedule posts and engage with people during their "social media times" and then log off while you spend 5 hours doom scrolling. Please don't.

Have a good project structure

Breaking down your project into chunks or sprints helps you set up systems to execute them in sprints.

Bring in Automations

Automate the small stuff. There are a few tasks that could be cleared off your table if you cease to do them manually. Eg, using schedulers for social media posts, labeling emails.

Sleep more

A lot of eyes would have had to stay open 24hours everyday, if there were nothing like sleep. A lot of developers still consider sleep a luxury or a phenomenon for the "weak".

According to the National Sleep Foundation, healthy adults need between 7 and 9 hours of sleep per night.

I inserted this fact to encourage you to sleep more. An unaccredited source also discovered that sometimes, it only takes few hours of sleep and a walk in the park to solve the bug that had kept you awake for days.

Don’t burn out

Burn out is a chronic state of exhaustation at which point you lose the will to do all the things that usually fascinate you. At this point, productivity would be alien to you, because it takes a vibrant mind to be productive. Burn out is mostly caused by stress and can be prevented via regular exercise, social activities, taking both mental and physical breaks.

By all means, do not burn out.

Keep learning

The more you know, the more productive you become. Take new courses, try new methods of achieving a thing, be a lifelong learner. Make it a habit to learn something new each day.

Read books

Reading can be both relaxing, educating, and entertaining (Depends on what you're reading). If you're looking to learn, relax or simply entertain yourself, a good book could bring that along with good vibes for maximum productivity.

We've been able to go through 8 ways of becoming more productive as a developer. Which ones will you be practicing first?

I hope you found these tips useful. If so, follow me on Twitter.

This is an excerpt of my talk at the VueJs Nigeria Meetup.

Technical writing might also be for you if you love learning by teaching others, contributing to open source projects and teaching others how to do so, too, or basically enjoy explaining complex concepts in simple ways through your writing.

Let's dive into the fundamentals and learn about what you should know and consider when getting started with technical writing.

Table of Contents

In this article, we’ll be looking at:

• What Technical writing is
• Benefits of Technical Writing
• Necessary skills to have as a Technical Writer
• The Technical Writing Process
• Platforms for publishing your articles
• Technical Writing Courses
• Technical Writing forums and communities
• Some amazing technical writers to follow
• Final Words and references

What is Technical Writing?

Technical writing is the art of providing detail-oriented instruction to help users understand a specific skill or product.

And a technical writer is someone who writes these instructions, otherwise known as technical documentation or tutorials. This could include user manuals, online support articles, or internal docs for coders/API developers.

A technical writer communicates in a way that presents technical information so that the reader can use that information for an intended purpose.

Benefits of Technical Writing

Technical writers are lifelong learners. Since the job involves communicating complex concepts in simple and straightforward terms, you must be well-versed in the field you're writing about. Or be willing to learn about it.

This is great, because with each new technical document you research and write, you will become an expert on that subject.

Technical writing also gives you a better sense of user empathy. It helps you pay more attention to what the readers or users of a product feel rather than what you think.

You can also make money as a technical writer by contributing to organizations. Here are some organizations that pay you to write for them, like Smashing Magazine, AuthO, Twilio, and Stack Overflow.

In addition to all this, you can contribute to Open Source communities and participate in paid open source programs like Google Season of Docs and Outreachy

You can also take up technical writing as a full time profession – lots of companies need someone with those skills.

Necessary Skills to Have as a Technical Writer

Understand the use of proper English

Before you consider writing, it is necessary to have a good grasp of English, its tenses, spellings and basic grammar. Your readers don't want to read an article riddled with incorrect grammar and poor word choices.

Know how to explain things clearly and simply

Knowing how to implement a feature doesn't necessarily mean you can clearly communicate the process to others.

In order to be a good teacher, you have to be empathetic, with the ability to teach or describe terms in ways suitable for your intended audience.

If you can't explain it to a six year old, you don't understand it yourself. Albert Einstein

Possess some writing skills‌‌

I believe that writers are made, not born. And you can only learn how to write by actually writing.

You might never know you have it in you to write until you put pen to paper. And there's only one way to know if you have some writing skills, and that's by writing.

So I encourage you to start writing today. You can choose to start with any of the platforms I listed in this section to stretch your writing muscles.

And of course, it is also a huge benefit to have some experience in a technical field.

The Technical Writing Process

Analyze and Understand who your Readers are

The biggest factor to consider when you're writing a technical article is your intended/expected audience. It should always be at the forefront of your mind.

A good technical writer writes based on the reader’s context. As an example, let's say you're writing an article targeted at beginners. It is important not to assume that they already know certain concepts.

You can start out your article by outlining any necessary prerequisites. This will make sure that your readers have (or can acquire) the knowledge they need before diving right into your article.

You can also include links to useful resources so your readers can get the information they need with just a click.

In order to know for whom you are writing, you have to gather as much information as possible about who will use the document.

It is important to know if your audience has expertise in the field, if the topic is totally new to them, or if they fall somewhere in between.

Your readers will also have their own expectations and needs. You must determine what the reader is looking for when they begin to read the document and what they'll get out of it.

To understand your reader, ask yourself the following questions before you start writing:

• Who are my readers?
• What do they need?
• Where will they be reading?
• When will they be reading?
• Why will they be reading?
• How will they be reading? These questions also help you think about your reader's experience while reading your writing, which we'll talk about more now.

Think About User Experience

User experience is just as important in a technical document as it is anywhere on the web.

Now that you know your audience and their needs, keep in mind how the document itself services their needs. It’s so easy to ignore how the reader will actually use the document.

As you write, continuously step back and view the document as if you're the reader. Ask yourself: Is it accessible? How will your readers be using it? When will they be using it? Is it easy to navigate?

The goal is to write a document that is both useful to and useable by your readers.

Plan Your Document

Bearing in mind who your users are, you can then conceptualize and plan out your document.

This process includes a number of steps, which we'll go over now.

Conduct thorough research about the topic

While planning out your document, you have to research the topic you're writing about. There are tons of resources only a Google search away for you to consume and get deeper insights from.

Don't be tempted to lift off other people's works or articles and pass it off as your own, as this is plagiarism. Rather, use these resources as references and ideas for your work.

Google as much as possible, get facts and figures from research journals, books or news, and gather as much information as you can about your topic. Then you can start making an outline.

Make an outline

Outlining the content of your document before expanding on it helps you write in a more focused way. It also lets you organize your thoughts and achieving your goals for your writing.

An outline can also help you identify what you want your readers to get out of the document. And finally, it establishes a timeline for completing your writing.

Get relevant graphics/images

Having an outline is very helpful in identifying the various virtual aids (infographics, gifs, videos, tweets) you'll need to embed in different sections of your document.

And it'll make your writing process much easier if you keep these relevant graphics handy.

Write in the Correct Style

Finally, you can start to write! If you've completed all these steps, writing should become a lot easier. But you still need to make sure your writing style is suitable for a technical document.

The writing needs to be accessible, direct, and professional. Flowery or emotional text is not welcome in a technical document. To help you maintain this style, here are some key characteristics you should cultivate.

Use Active Voice

It's a good idea to use active voices in your articles, as it is easier to read and understand than the passive voice.

Active voice means that the subject of the sentence is the one actively performing the action of the verb. Passive voice means that a subject is the recipient of a verb's action.

Here's an example of passive voice: The documentation should be read six times a year by every web developer.

And here's an example of active voice: Every web developer should read this documentation 6 times a year.

Choose Your Words Carefully

Word choice is important. Make sure you use the best word for the context. Avoid overusing pronouns such as ‘it’ and ‘this’ as the reader may have difficulty identifying which nouns they refer to.

Also avoid slang and vulgar language – remember you're writing for a wider audience whose disposition and cultural inclinations could differ from yours.

Avoid Excessive Jargon

If you’re an expert in your field, it can be easy to use jargon you're familiar with without realizing that it may be confusing to other readers.

You should also avoid using acronyms you haven't previously explained.

Here's an Example:

Less clear: PWAs are truly considered the future of multi-platform development. Their availability on both Android and iOS makes them the app of the future.

Improved: Progressive Web Applications (PWAs) are truly the future of multi-platform development. Their availability on both Android and iOS makes PWAs the app of the future.

Use Plain Language

Use fewer words and write in a way so that any reader can understand the text.‌‌ Avoid big lengthy words. Always try to explain concepts and terms in the clearest way possible.

Visual Formatting

A wall of text is difficult to read. Even the clearest instructions can be lost in a document that has poor visual representation.

They say a picture is worth a thousand words. This rings true even in technical writing.

But not just any image is worthy of a technical document. Technical information can be difficult to convey in text alone. A well-placed image or diagram can clarify your explanation.

People also love visuals, so it helps to insert them at the right spots. Consider the images below:

First, here's a blog snippet without visuals:

Here's a snippet of same blog, but with visuals:

Adding images to your articles makes the content more relatable and easier to understand. In addition to images, you can also use gifs, emoji, embeds (social media, code) and code snippets where necessary.

Thoughtful formatting, templates, and images or diagrams will also make your text more helpful to your readers. You can check out the references below for a technical writing template from @Bolajiayodeji.

Do a Careful Review

Good writing of any type must be free from spelling and grammatical errors. These errors might seem obvious, but it's not always easy to spot them (especially in lengthy documents).

Always double-check your spelling (you know, dot your Is and cross your Ts) before hitting 'publish'.

There are a number of free tools like Grammarly and the Hemingway app that you can use to check for grammar and spelling errors. You can also share a draft of your article with someone to proofread before publishing.

Where to Publish Your Articles

Now that you've decided to take up technical writing, here are some good platforms where you can start putting up technical content for free. They can also help you build an appealing portfolio for future employers to check out.

Dev.to is a community of thousands of techies where both writers and readers get to meaningfully engage and share ideas and resources.

Hashnode is my go-to blogging platform with awesome perks such as custom domain mapping and an interactive community. Setting up a blog on this platform is also easy and fast.

freeCodeCamp has a very large community and audience reach and is a great place to publish your articles. However, you'll need to apply to write for their publication with some previous writing samples.

Your application could either be accepted or rejected, but don't be discouraged. You can always reapply later as you get better, and who knows? You could get accepted.

If you do write for them, they'll review and edit your articles before publishing, to make sure you publish the most polished article possible. They'll also share your articles on their social media platforms to help more people read them.

Hackernoon has over 7,000 writers and could be a great platform for you to start publishing your articles to the over 200,000 daily readers in the community.

Hacker Noon supports writers by proofreading their articles before publishing them on the platform, helping them avoid common mistakes.

Technical Writing Courses

Just like in every other field, there are various processes, rules, best practices, and so on in Technical Writing.

Taking a course on technical writing will help guide you through every thing you need to learn and can also give you a major confidence boost to kick start your writing journey.

Here are some technical writing courses you can check out:

• Google Technical Writing Course (Free)
• Udemy Technical Writing Course (Paid)
• Hashnode Technical Writing Bootcamp (Free)

Technical Writing Forums and Communities

Alone we can do so little, together, we can do so much ~ Helen Keller

Being part of a community or forum along with people who share same passion as you is beneficial. You can get feedback, corrections, tips and even learn some style tips from other writers in the community.

Here are some communities and forums for you to join:

• Hashnode
• Dev.to
• Technical Writing World
• Technical Writer Forum
• Write the Docs Forum

Some Amazing Technical Writers to follow

In my technical writing journey, I've come and followed some great technical writers whose writing journey, consistency, and style inspire me.

These are the writers whom I look up to and consider virtual mentors on technical writing. Sometimes, they drop technical writing tips that I find helpful and have learned a lot from.

Here are some of those writers (hyperlinked with their twitter handles):

Quincy Larson Edidiong Asikpo Catalin Pit Victoria Lo Bolaji Ayodeji Amruta Ranade Chris Bongers Colby Fayock

Final words

You do not need a degree in technical writing to start putting out technical content. You can start writing on your personal blog and public GitHub repositories while building your portfolio and gaining practical experience.

Really – Just Start Writing.

Practice by creating new documents for existing programs or projects. There are a number of open source projects on GitHub that you can check out and add to their documentation.

Is there an app that you love to use, but its documentation is poorly written? Write your own and share it online for feedback. You can also quickly set up your blog on hashnode and start writing.

You learn to write by writing, and by reading and thinking about how writers have created their characters and invented their stories. If you are not a reader, don't even think about being a writer. - Jean M. Auel

Technical writers are always learning. By diving into new subject areas and receiving external feedback, a good writer never stops honing their craft.

Of course, good writers are also voracious readers. By reviewing highly-read or highly-used documents, your own writing will definitely improve.

Can't wait to see your technical articles!

References

• Introduction to Technical Writing‌‌
• How to structure a technical article‌‌
• Understanding your audience, the why and how
• ‌‌Technical Writing template

I hope this was helpful. If so, follow me on Twitter and let me know!

Why Structure?

As a writer, your article needs to have a structure for the following reasons:

1. It gives you direction.
2. It makes you more efficient and effective in your content creation.
3. Your readers can easily comprehend what you're trying to tell them.
4. You want your readers to remember what you write about.

In this article, you're going to be learning some helpful tips for structuring your articles, with some examples.

Choose a Format

In order for you to write a well structured article, you need to select a format for your article, which is basically the skeletal draft of how your content would flow.

• Intro
• Why it matters Subheading
• Prerequisite(optional)
• 1.
• 2.
• 3.
• 4.
• 5.
• Conclusion Subheading
• Conclusion *

Let's go through these sections one at a time.

Intro

Your intro should be captivating as it is the readers first stop while reading the article. The intro gives a reader an overview of the content and have to be compelling enough to make them stay or boring enough to make them leave the page😎. For your intro to be captivating, it has to show empathy (written to address the readers problems, not yours), has some humor (this depends on the tone you want your article to assume) and/or throw in some interesting facts and statistics to capture readers attention.

Why it matters

This is usually the second paragraph of your article where you tell your readers why you've written the article they're just reading. The problems you hope to solve through the article and what they'd be gaining at the end.

Here's the intro to an article I wrote on web accessibilty

This intro also encompassed 'Why it matters'.

1. 2. 3.

This is the main body of your article. Here you explain concepts to the readers, breakdown your subject topic into steps, fragments or modules, whichever one works for you.

Conclusion

At the end of your article, it is always important to reiterate key takeaways from the article. This helps the reader to quickly recall key points noted while reading.

Formatting Your Article

Proper formatting is the heart beat of every article as it determines how the readers relate to your article. Here are some formatting tips that will make your articles reader-friendly:

• Use white spaces and avoid clusters: Dense articles are harder to read. Avoid clustering the texts rather consider breaking up points in paragraphs. This allows your readers some space to grasp the concepts outlined more clearly.

• Use subheadings, bullets or numbered lists: The use of headings, bullets and lists to outline points aids in quick pick up of salient points and can be exceptionally helpful if you want to repurpose a content in the future. Use the H1 tags for Headings, H2 tags for Sub headings, bullet and numbers for making lists.

• Bolden important texts: A good dose of bold texts in an article is useful especially if there are words you'd love to emphasize. However, don't give in to the temptation of having so many bold texts scattered around in one paragraph.

• Use other forms of visuals and multimedia (twitter embeds, gif, images, emojis): People love visuals and so it is very appealing to have visuals and multimedia at the right places. Consider the images below: (Here's a blog snippet with visuals)

(Here's the snippet of same blog, but without visuals)

The article with images makes the content more relatable and easier to understand than the one without. Aside images, you can also use gifs, emojis, embeds (social media, code) including code snippets where necessary.

• Use featured images: Featured images are usually the first thing anyone would see when they visit your article and also the image that would accompany your article link wherever it is shared. This is why it is necessary to use featured images that relates with the article you're putting out. It isn't ideal to leave out featured images or use the image of a cat as featured image when you're writing on front end web development no matter how much of a cat-lover you are. You can also use the free tool canva to quickly create featured images.

• Text Formatting: Avoid jargons, big words and mispellings. Always cross check your spellings, dot your Is and cross your Ts before hitting 'publish'. There are a couple of free check tools such as Grammarly and Insticheck that you can use to check for grammar and spelling errors. You can also share a draft of your article with someone to proofread before publishing. If you'd love me to proofread your articles, do reach out to me on twitter.

How long Should your Articles be?

On average, the expected length of a blog article is 2100 words. However, this largely depends on the topic you're writing about. While writing, make sure you cover the scope of your topic and that your readers get what you promised when they click to read your article. This is more important than the length of your article.

Conclusion

We just looked at how to structure and format your articles before putting it out there, which in turn engages readers while on your page. Feel free to reach out to me via twitter for any questions, feedback or suggestions.

Further Reading

• Technical Writing: What and how?
• Free Technical Writing Course by Google

For instance, you can decide to skip to the conclusion of this article, if you feel you already have an idea of what I'm writing about😎

In this article, I'll be showing you how to create a table of content for your articles which can be used to skip to certain sections of your post.

Step 1

So, the first thing to do is to preview your article, by clicking on the preview button right on top of your draft page.

Step 2

Select the heading you'd love to skip to, right click and select inspect (if you're on chrome). This will launch you to the developer tools.

Step 3

In the image above, you'd see that the heading selected (Step 1) has a unique ID, copy this and save somewhere close.

Step 4

Go back to your table of content, select the list you'd love to link, click on the link tool right on top of your page and insert the id you just copied into the area that says (link)

Let's do this vividly, to achieve the link below,

• Back to step 1

First list out this content

Then go ahead and select its texts, after which you click on the link icon right on top of your editing page.

Enter, the id you copied previously into the area were you have [link]. Append a # before pasting the id.

You'd have this

Repeat this process for every other content in your table. Preview. Your table of content is all set.

Conclusion

We just looked at how to add table of content in the articles you post on your hashnode powered blogs. I look forward to seeing you add them in your next article.

Enjoyed the article? Follow me on twitter

What is Web Accessibility?

Web accessibility simply means building websites, tools and technologies in such a way that people with disabilities can use them. The web is designed to work for everyone, irrespective of their hardware, language, ability or location and when this goal is met we can say that accessibility has been achieved. However, when websites or applications, technologies or tools are built such that there is a barrier that exclude some people from using it, we can say such product failed accessibility test.

Few weeks ago, twitter launched a voice tweet feature , which was met with a lot of complaints pertaining accessibility (Those with hearing impairments can't use this features and twitter created no other means for them join in the audio conversations)

Twitter has however apologised for its slack in accessibility and as we hope they come back with a more accessible feature, it's good to understand how important this is. Accessibility should be considered even while building, and not as an after thought.

Considerations for Accessibility

While building, here are some disabilities accessibility encompasses which should be taken note of

• Neurological: People who have been affected by a brain injury that can begin during the development process
• Cognitive: People with limitations in mental functioning in skills such as communicating, taking care of themselves-, and social skill. There may be some things they cannot learn.
• Visual: Blind people, color blind or people with partial vision loss.
• Speech: People who are mute, have communication disorder or whose normal speech is disrupted (stuttering, lisps etc)
• Auditory: People with hearing impairments, deaf or partially deaf.

Web accessibility also benefits people without disabilities, for example

• People using mobile phones
• People with temporary disabilities, such as broken glasses
• People with slow internet connections

Why is Web Accessibility Important?

• Web accessibility is important as the web and internet have become important parts of our lives. Making sure the web is accessible allows people with disabilities to be able to have equal access to the important services/features the web provides, such as education, online shopping, recreation, health services and others.
• Web accessibility ensures that everyone is carried along in trends, innovations and no one is left behind.

Simple Ways of Making the Web Accessible

Use Alt Tags

<img src="./images/img1" alt="description of image">

An alt tag is used on images to allow a description of the image to be output if the image can’t be displayed/seen. Making sure this alt-tag is as descriptive as possible will help screen readers to relay the information you are trying to portray.

Keyboard ShortCuts

Some users do not have access to a mouse or are unable to use a mouse. What this means is that the only way they can get around your website is by using keyboard shortcut, hence it is important to enable them to do so.

Title Tags

<title>A Beginners Guide to Accessibility<title/>

Making sure you have a short yet descriptive title tag on all pages will allow visitors to know what the page is about which is especially helpful for people using a screen reader.

Test your websites on mobile devices

A lot of people access websites on their phones rather than a PC. So it is important to build websites that are user friendly across both PCs and phones. To ensure a website is user friendly, you have to test it across multiple devices.

Provide Captions for Videos

This is helpful for those who do not have access to audio. They can understand the videos through the texts provided.

Conclusion

We just looked at what accessibility is and how to implement it basically. Remember to always consider accessibility during you design process and not as an afterthought.

Other Relevant Materials on Accessibility

Web Accessibility Initiative

WebAIM’s Introduction to Web Accessibility

a11y stands for ACCESSIBILITY

Enjoyed this article? Follow me on twitter

So, first, I created a palindrome identifier- a function that can be able to figure out if a word is a palindrome irrespective of whether it has non-alphanumeric characters or spaces.

First, what is a palindrome?

Palindrome are words or sentences that spelled the same way both forward and backward, ignoring punctuation, case, and spacing, this means that the words are exactly the same even when they are turned upside down. For instance, the word eye looks the same even when turned both ways.

So, in the next few minutes, you'll be building along with me a function that returns true if a word is palindrome and false if it's not, ignoring spaces and alphanumeric characters.

Prerequisite

Before we proceed, you should have a knowledge of the following JavaScript methods: split replace join If you don't have an idea, take few minutes to read up this articles on split , reverse, replace and join methods.

Getting Started

Let's write our algorithm

1. Remove spaces and alphanumeric characters from the string and store string in a variable.
2. Reverse the string and also store in a variable.
3. Compare the string and the reversed string.
4. Return true if they are same and false if they are not equal.

Let's write our code

First,we'll define our function. Our function will be taking a string str as argument

function palindrome(str){

}

Secondly, we have to eliminate spaces and non-alphanumeric characters from the string. We'll be using regex to fish out the non-alphanumeric characters and then replace it with '' (This is an easier way of removing elements from a string). We'll also convert the word to lowercase. You can choose to change yours to uppercase The aim of this is to keep all the alphabets on the same case to ease comparison.

function palindrome(str) {
let palindrom=str.replace(/[^0-9a-z]/gi, '').toLowerCase();

}

Having done this, let's create another variable reversed where we'll store the reversed string. (We'll be reversing the variable palindrom above)

function palindrome(str) {
let palindrom=str.replace(/[^0-9a-z]/gi, '').toLowerCase();
let reversed=palindrom.split("").reverse().join('');

}

Let's compare

function palindrome(str) {
let palindrom=str.replace(/[^0-9a-z]/gi, '').toLowerCase();
let reversed=palindrom.split("").reverse().join('');

if(reversed===palindrom){
    return true;
  }else return false;
}

palindrome(racecar)

Quite a short one, but yeah, we have a function here which can detect palindromes. I'd love to entertain feedback from you. Thanks for reading.

Here's a little twist. CSS positioning has been a difficult concept for me to grab, and that's why I'm writing about it while learning at the same time.

What are positions in CSS?

When placing elements on a web page or document, it is important to specify how they are displayed in relation to each other or their parent elements. Positions help you to set this.

Syntax

The syntax for CSS positioning is; position: position-property

Types

There are 5 main positions in CSS, but for this article, we'll be looking at these four;

1. Static
2. Relative
3. Absolute
4. Fixed

I'll be explaining them in the next few lines.

Static:

Every element has the static position by default. We can say an element with position static is an unpositioned element because it flows in the normal rendering sequence of the web page or document. It is easy to think the static position is the same as the relative position. Uhhmm, that could be true except that static elements don't obey the left, right, top and bottom rules.

Relative:

When a child element has the position:relative property, it takes up a position which is relative to its parent element.

In this example, we have a parent and a child element.

For the child element, we added this

.container-child{
position:relative;
}

This enables the child element to take up a position which considers the dimensions of the parent element.

In the pen below, we'll see the outcome of this

Try changing the position to absolute and notice what happens.

Also try changing the height of the child element to 50% and notice what happens as well.

Absolute:

If a child element is given the position:absolute property, it will behave like the parent element is not there, and will be positioned automatically to the starting point (top-left corner) of its parent element. If it doesn't have any parent elements, then the initial document <html> will be its parent.

Let's add a position:absolute property to a child element with class container-child

.container-child{
position:absolute;
}

In the code below, the child element will display in relation to the dimensions of the document <html>and not the dimension of its parent container.

Try adjusting other properties of the child element such as margin-left, margin-right and you'll discover that this element isn't adjusting in response to its parent's dimensions.

For this child element to respond relatively to the position of its parent, we need to set the parent to this;

.container{
position:relative;
}

And we'll have the following

Fixed

Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll.

Let's add another element to our project, and this time, we'll be giving it a position of fixed.

.container2{
position:fixed;
}

Let's see how it looks

So you can see how the element with a fixed position stayed glued to its position even when the page is scrolled.

Try fixing up the child element with the class container-child to stay under the fixed element on scroll.

Conclusion

CSS position has always been a tricky topic for me, but overtime I'm beginning to get a hang of it through subsequent usage. So I'll advise you implement these positions often in order to find out for yourself, what they really do.

Yup! This is where we wrap it up. I'll subsequently edit this article when I implement the position property in other lights.

If you enjoyed this article, do connect with me on twitter 😍

Let's look at Burnouts, how to know you're going through one and how to bounce back.

Introduction

Burnout is REAL! And Burnout !=Stress, but could be stress-induced. Just in case you're hearing about burnouts for the first time, let's quickly see a definition.

Burnout is a serious state of chronic exhaustion that can have a whole range of negative impacts on your mind and body, and hence your entire life, including your ability to write code.

Burnouts can happen to anyone, and is usually less easy to detect in some than other people. However it is important for everyone to understand their symptoms in order to detect when your body is exhausted and needs hibernating.

Burnouts is what happens when you try to avoid being human for too long.

What Causes Burnouts?

Burnouts are basically caused by

Stress

When you've stressed up yourself mentally or physically up to the point of exhaustion and yet you don't pause to refill, more like driving on an empty tank, your engine will definitely get worn out or even clogged.

Negativity

When you consciously or unconsciously keep feeding your mind with negative thoughts or words, or allow the negativity of others really get to you, it grossly affects your mental state which can result to very unhealthy self esteem, inferiority syndrome, self hate and subsequently mental health problems.

Perfectionism

For each time you struggle to make things perfect, you procrastinate and feel dissatisfied with yourself which in turn causes a mental strain.

Work-Life Imbalance

When your work takes up most of your time and you struggle to find some time off for yourself, friends or family, you find yourself exhausted, tired and extremely stressed most of the time.

Lack of social life

Some techies have a not-so-admirable social life. This could make one a recluse, which means less fun time, which also means more stress.

How can you know you're having Burnouts?

1. You seem to lack motivation such that you mostly have to drag yourself to do the things you usually do with ease.

2. Irritability. Most times when we experience burnouts we seem to be more irritable, jumpy and easily angered.

3. Frequent headaches and changes in sleep patterns (insomnia may even set in)

4. Difficulty to concentrate.

5. Dissatisfaction even when a milestone is reached. You basically find no joy in doing the things that used to make you happy.

6. Lack of energy, zeal and enthusiasm.

There are other ways to discover when we're having burnouts, as everyone have different symptoms to show for it.

So, how can we deal with burnouts when it sets in?

1. Relax: Well... If you're having a burnout because of stress, the next best thing to do is to take some time off to cool off and relax (relas and be taken kiaroff😄) It will do you much good. Deadlines can wait, your mental health first ❤

2. Engage in more social activities: Make friends, have fun, get social, attend events, mingle with actual people, gist, let off some of those steams, hang out with friends, go see some movies or anything... This could help clear your head a bit.

3. Be more intentional about your life: Yes, obviously you're already very intentional about your career, but without maintaining a balance, your career can try to rob you of family/friends time. Sometimes work-life balance can be impractical, and at such times, you've got to set up strategies to maintain harmony between both sides. Be more strategic about timing. You can decide to block off some days/time as reserved for family, so you can have time for yourself too. If the pressure is coming from your workplace, try reaching out to management (if you're not management of course) to discuss better terms that could work which wont necessarily mean you throwing in your life. Try to set goals for what must get done and what can wait.

4. Take social media breaks sometimes, especially if you feel mentally exhausted. Trust me, the world will remain as it were when you get back. Take some media break and rebound saner and better.

5. Sleep more: Techies are said to be nocturnal beings, however you have to sleep more especially when you're experiencing burnouts.

6. Travel (vacation): If you can, move, see places, change environment, forget about everything and just breath😌.

7. Exercise: Exercise is not something we do just to lose weight, we exercise to keep fit (mentally and physically). You don't need to register with a Gym center, there are several apps you could use to begin your exercise routines at home.

By now, you should have guessed if you're already having a burnout or not. Well, if you are, that's not too bad, go back up and check out some of those tips again. You'll also find more helpful tips here

And if you're not having a burnout yet, awesome, let's look at some of the ways to avoid having burnouts in the first place.

How to Prevent Burnouts

You can prevent burnouts by doing everything listed above (under how to deal with burnouts). The difference would be that in your case, you're not doing them to bounce back, rather in order to maintain mental and physical fitness.

Almost everything will work again if you unplug it for a few minutes and plug it again, including you.

Conclusion

Thing is, we don't need to wait till our body screams to take a break or go on vacation and all that, this is something we all need to fit into our schedules and follow them as religiously as we take #100daysofcode. It's all a matter of intentionality and priority.

Thanks for reading my article and don't forget to take a break. Do follow me on twitter 🙌🏽

One last thing, a shoutout🙌🏽🎊📢 to @didicodes and @Bolaji Ayodeji for all the help, both directly and indirectly, you're the best.

Salute to every kid and teenager in tech out there, who in this article, I'll be referring to as young generation coders.

Recently, I've been obsessed with checking out profiles of young people building amazing stuffs in tech (between the ages of 5-18), especially Nigerians.

Checking out our top tech muses (Zuckerberg, Bill) we realize one thing, they started really young, maybe not with coding actually, but they got into tech quite early.

When I joined tech, I found out that a lot of techies were pretty young (not that there's anything wrong with starting out later), but I must say, it was really impressive to me, coming from a non tech environment where technology was tagged "distraction".

In this article, I'll be sharing 5 top things I've learnt about the young generation coders in Nigeria:

They are very creative and inquisitive:

With my few years of teaching kids how to code, I've found out that Kids and teenagers are inquisitive naturally, and if this inquisitiveness is properly channeled, they do even better than the adults. I can't explain this in details as I'm not a "brain doctor", but I find it really fascinating the way they make impressive strides when it comes to tech.

They have supportive parents, or mentors at least:

No young generation coder will be able to do so much if they have no assistance from parents, guardians or mentors, supporting them, mentoring and providing them with required resources at least at their learning phase. I remember @SamsonGoddy's speech at TedX Abayi, where he narrated to us his journey through tech, and how his tech career kickstarted through a coding program brought to them by a certain organization which also availed them free laptops.

A lot of them are caught up between school and tech:

This is very glaring as the average school curriculum does not directly support programming. They mostly have to squeeze out a spare time to learn and practice. Some of them are usually caught in the web of family insisting they finish school and their left brain nudging them to drop out.

Some of them have inadequate facilities or resources (eg. Data):

The few who do not have the required parental support and resources struggle to keep up with requirements such as PC breakdown, data, purchasing courses, attending events etc.

There are fewer girls among them.

There are very few female children learning tech.

How can we support them?

Provide them with resources:

As much as you can, offer free resources to them in order to facilitate their learning. Resources could be data, links to free courses, laptops (used or brand new). Lack of laptop is the reason a lot of kids and teenagers are yet to venture into tech.

Hold more programs centered on them

Truth be told, kids and teenagers in tech face a different fight and tech events should tailor some of their sessions to suit them.

Support them

Support could come as mentorship, mental health check, checking up on them, encouraging them and so on. They should be helped to take care of their mental health, reduce anxiety and imposter syndrome, and taking breaks to avoid burnouts.

In the coming months I'll be running a profile on some young generation coders who are doing awesome in their fields as a way to shine the spotlight on them, and also to encourage a lot of others who don't understand this yet, that it is never too early to start. They deserve to be celebrated.

Know of any young generation coder (kids and teens in tech)? Reach out to them and support them when you can.

If you know of any kid or teenager in tech doing awesome stuffs, do point me to them by sending me a DM on twitter .

Few months later, it was me asking the same question as I always got confused whenever these methods were mentioned.

I'm writing this article partly for myself, as a reference to fall back on on those days when everything seems not to make sense, and for every other person who's either hearing about this for the first time or actually looking for solution or clarity on the concept.

Prerequisite

Well, if you're reading this, then it means one thing, you're finding your way around JavaScript. You should have an idea of JavaScript Arrays. It'll be cool to also have a console handy, so you can quickly try out some of the examples in order to know how they work.

For the sake of newbies (who this article is mostly targeted at), I'll be explaining arrays briefly before we proceed in order to enable you have a clearer understanding of the context.

Let's look at arrays

Arrays are data structures which can hold values of different data types(boolean, strings, numbers) and store them inside a single variable. Values of an array are enclosed in a square bracket and each of the values are usually separated by commas .

Let a = ["name", 12, true]

Each item in an array is called element and each element can be accessed by a numerical index, starting with 0.

In the array above, the element at index 0 is name and the element at index 2 is true. The element at index 1 in the above array can be accessed like this

a[1]

and this will return 12 However, the length of the above array is 3.

Basic Operations in an array

Some basic operations can be carried out on an array to either add values or remove values. These operations are done with specific JavaScript methods. Let's look at some of them briefly.

Push:

The push operation is used to add an element to an array from the end (last element)

a.push(8);
console.log(a);

In the example above, an element 8 will be added to the rear end of the array a, so we'll have

["name", 12, true, 8]

Pop:

This is the opposite of push. It removes an element from the end of an array (the last element in an array). So, let's remove the number we just added to the array above.

a.pop(8);
console.log(a);

Unshift:

This method adds an element to the beginning of an array. Lets add two elements to the beginning of our array a

a.unshift("age",36);
console.log(a);

We would have our a array to be

["age", 36, "name", 12, true]

Shift:

The shift method is used to remove the first element in an array and returns the removed element. Let's remove the element age from our array

a.shift("age");
console.log(a);

Our current array

[36, "name",12, true]

So, now that we've covered the basics, let's look at the splice and slice methods. Before we do, feel free to have a little mental stretch.

Let's continue😁

Slice

The slice method is used to return a number of copied elements from an array. slice() does not alter the array it is used on, rather it simply returns the copied elements while leaving the parent array untouched.

Syntax

array.slice(from, until)

from - where the slice will start

until - where the slice will end ( the element at this position not included)

So the trick is, if we want to slice the first 2 elements from an array, our until parameter will be 2.

Let's remove the first 2 elements from our previous array [36, "name",12, true].

We have to specify the start 0 and the end 2.

let newArray = a.slice(0,2)

a[0] - 36

a[1] - "name"

a[2] - 12 (not inclusive)

So, our newArray will be

[36,"name"]

our previous array will remain unchanged

[36, "name",12, true]

Splice

Splice is used to remove elements from an array and return the removed elements. Splice directly alters the array upon which it is called.

Syntax

array.splice(startindex, numberOfElementsToBeRemoved)

Let's remove 2 elements from our array a starting from the second array (index 1) and store it in the variable splicedArray

let splicedArray = a.splice(1,2);
console.log(splicedArray);

This will return ["name", 12]

While array a will become [36, true]

If we don't specify the second parameter (numberOfElementsToBeRemoved), every element starting from the given index will be removed from the array

Conclusion

Splice and slice can be a bit confusing, and its okay if you still need to reference an article all the time in order to recall how they work. That's why I wrote about it, for your (and my) reference.

That's all for now.

If you enjoyed this article, leave me a cute emoji and follow me on twitter .

How do you feel afterwards? Probably you do wish to speak the way they do? Hold your audience captivated, in awe, attentive while laughing and giddy at the same time. You want to be able to own your stage and pass on your message without feeling intimidated, just the way they do.

In this article I'll highlight some basic things you should do in order to become better at speaking. It doesn't matter if it is just a small study group, a city chapter or a global conference, the trick is the same.

Introduction

Having attended a couple of tech events and seeing a pattern repeat, again and again, I decided to put together this article of things you should know before taking the stage to deliver a speech at any tech events. I'm not promising it will rid you of the stage frights and the shiver that envelopes you and threatens to make you drop your mic, But I'm pretty sure it'll help.

Why this topic?

Now, in case you're wondering why I've chosen this topic especially at this time, let me remind you that a lot of physical tech events which were laid off due to the pandemic will be happening as soon as the pandemic and lockdown is behind us. Various communities will be holding tech events and I believe you've equipped yourself so much and have probably designed your slides and contexts ready for submission at the sound of ready...go!

But you have to hold on a little moment, get yourself ready for impact.

The Problem

You've probably been at events where the speaker can't seem to hold the crowd together, constantly fiddling with his/her buttons and sometimes staring at the screen in order not to behold the searching and judging eyes of the crowd. You sit there bored and tired, waiting earnestly for the session to be over with. Well, it could be you up there.

We are always amazing speakers when we are talking to ourselves in our closets or with friends, and that I've realized is one of the problems. You feel you've known enough, you know how to code and hence everybody must sit and listen, no matter how boring.

Now let's get into the what and how

The word "taking the stage" means having control over the entire audience and not a few people seating in front as I've noticed with some people who speak in such low tone that people seated at the second row can hardly hear them. Not that this is your fault entirely, but it will be okay to genuinely ask someone about how you did. Demand the person to really tell you the truth so you can take pride in the things you did right and try making amends for the ones poorly done.

As a developer who really wants to share knowledge, you need to learn the art of public speaking, even if not professionally, but enough to capture your audience's moods, keeping them glued and informed throughout your speech and until your message is totally passed. Remember communication is not complete until it has been received from the sender. Hence, when delivering a speech you need to be sure that the audience are grasping your message if they aren't then I'm sorry, your communication wasn't effective.

Here are a few things you should do before and during your speech:

1. Prepare:

No matter how conversant you are with your subject topic and the number of times you have spoken in the past, it is still vital that you take your time to prepare for your speech. Some of the things you should consider while preparing:

a. Know your audience:

You should be able to ascertain the type of audience you'd be engaging with. If the are males only, females only, beginners, intermediates, experts or a mixture of all the above. Knowing this will not only help you know the tone of your conversation but will also be helpful in determining your content. You can learn more about how to connect with your audience in this article by @didicodes

b. Be conversant with your slides:

I've been at events where the speakers totally back the audience in order to read from their slides. The worst is when there are technical difficulties and the slides delayed for a few minutes before coming up, then you see the speaker lacking for words to hold the crowd while the issues are resolved. It is important you make out time to study your presentation before the D-day to avoid the lapses that may result from not doing so. There's never any of your favorite speakers who doesn't take his/her time to study, and you have to do so as well. Also, send in your slides early.

c. Rehearse:

Rehearse your presentation, especially if it is your first time delivering a particular speech. An efficient way to present would be present in front of a mirror, but I usually choose to present to a real live person, get feedback and make corrections. Better to fail privately than in a room full of people.

d. Prepare:

If you'd be live coding, ensure you installed all software and extensions you'd be needing in the system you'd be presenting with. Test your codes alone and ensure they're working fine before the D-day. Double-check a few hours to the d-day to avoid using the words "Coding will embarrass you" at the end of your speech.

2. Think conversion, not presentation or demo:

You have to get the fact that you are standing on the stage to communicate with the audience in a conversational way. Remember, communication is never complete until the receiving end properly receipts the information being communicated. Having a conversation with the crowd puts you ill at ease, reduces the jitters and improves communication.

3. Be empathetic about your speech:

You must have heard these lines "Effective communication is 20% what you know, and 80% how you feel about what you know." Your audience are more likely to feel captivated by your speech if your speech comes as an extension of your feeling rather than just words without expression.

4. Hook your audience early:

People's attention span is reducing terribly and if you're not able to hold their attention in the first few minutes, the hall might erupt into a state of frenzy with people staring at their phones and PCs all through your speech (Techies and gadgets thing). Hence, it is important you make them interested in the subject you'd be talking about. Remember, they came to hear you, but you have to show them why. Try using the following to hook their attention:

• A story
• An example
• A strong statement that makes people think, “tell me more.”
• Ask a question
• A visual metaphor
• Get straight to the point and jump right into the issue.

That's all folks! If you read up to this point, thank you so much for reading. I hope you found this article useful. You can also follow me on twitter .

Welcome to my week 2 of the #2articles1week challenge by hashnode🎊🎊💃🏽

Let's get ahead.

I'll start with this beautiful quote by Alan Perlis

There are two ways to write error free codes, only the third one works.

Programs tend to have bugs and you're not doomed or a shitty developer if you run into issues with your programs.

As a beginner, how do you figure out when your code starts misbehaving?

You need to find out what type of bug or error you're dealing with, as this will greatly determine the approach you'll take in debugging.

Errors always fall into 3 categories.

1. Syntax Error:

Occurs when a language rule is broken.

2. Runtime Error:

The computer was unable to execute a potion of your code.

3. Semantic Error:

When the output of your program isn't what you're expecting.

Let's look at examples of each of them:

Syntax Error

Open up your console, and type in

console.log("Hello World);

Aw aw! We got an error right there. When we receive such error, it is best to slowly review each line of code, in order to figure out where we might have missed providing a set of quotes, parenthesis or a colon. Sometimes it could also be as a result of using a colon instead of a comma.

Let's look at Runtime Error

This error happens when your program is actually running.

Let's open up our console again

let a = 20;
let b= 0;
let d= a+ b!
let c = d/b;
console.log(c);

Error!!!

But why?😥

This is because although the syntax is correct, it is referencing a variable which does not exist. The interpreter doesn't know what to do with that variable so the program fails.

If you run into runtime errors you can't explain, its best to look it up. Yeah, Google it. My preferred site is Stack Overflow. You can copy the error message and paste it on the search box. There you'll likely find that someone has run into same or similar errors as you, and you can read the solutions profered.

The final one we'll be looking at is Semantic errors.

These one occur when what you are expecting isn't what you're getting

Let's see an example

let name = "Amara";
console.log("Hello name");

Oh look! We're having Hello name instead of Hello Amara This error occurred because we didn't use the proper variation to output our name, so JavaScript didn't understand that we wanted to use our name variable.

Semantic errors are usually the most difficult to troubleshoot. I recommend making little changes and running the code bit by bit. This will enable you to k ow where the error is coming from.

If you try all this and the bug still exists, take a short walk, clear your head and you'd eventually come back with better ideas.

In conclusion,

You have to have to some sense of humor. At the end of the day, it might be the most tiny detail that has kept you awake for days, embarrassed you in front of a prospect and made you loose deals. Learn to laugh it off, and not work yourself up about it. It's all part of the process.

Thanks for reading. I hope you enjoyed it. If you did, then follow me on twitter .

And I think at this point, I have to let you know how excited I am to be doing the #2articles1Week challenge with Hashnode.

So, let's get to it.🎾

What are CSS selectors? CSS selectors are a means through which we're able to identify, find or call up elements in HTML so we can style it. The most common selectors are the name of element , class selectors(.) and id selectors (#) which are also referred to as simple selectors.

<html>
       <head>
              <style>
                  body{
                      background-color:#000;
                  }
                  .title{
                       color:dodgerblue;
                  }
                  #wrapper{
                       display:flex;
                       justify-content: center;
                       margin:0;
                       padding:0;
              </style>
       </head>
       <body>
             <div id="wrapper">
                    <div class="title">
                         <p> This is the first text. </p>
                         <p class="second-paragraph"> This is the second text. </p>
                    </div>
                   <p>This is the third paragraph</p>
             </div>
       </body>
</html>

In the example above, body, title class and wrapper id were used to refer to the div elements bearing them. We can also combine these selectors if we want to:

p .second-paragraph{
color:red;
}

In the code above, a name and class selector were used to ensure that only the p element with a class second-paragraph will be selected.

There are other selectors as well, which are the main focus of this article. Let's take a look at the *, >, ~, space, , and nth-type-of selectors, shall we?

The * Selector

This selector is called the universal Selector because it is used to select all the elements in a page. This means that any style given to the universal selector, affects every element in that very page. The code snippet below will style every element of the page to have grey-colored and right-aligned texts.

*{
color:grey;
text-align:right;
}

The > Selector and The ~ Selector

This selectors are also known as combinators. Both are used to achieve different selection results. While the > is used to select children of a particular element, the ~ selector is used to select all the siblings of a particular parent element. An example to illustrate.

div > p{
color:blue
}

The code above is used to select all <p> elements that are the children of the div elements.

Now, look at this one

div~p{
color:red;
}
Here, every `<p>` element which is a sibling to a `div` element is styled red. In our previous example (the first code snippet), the paragraph which is on the same level and shares the same direct parent with any `<div>` will take up the red color.

The Space Selector

A lot of people confuse > selector and the space selector. I'll try to clarify that. The space selector is used to select every of a particular element which is inside another element. For instance

div p{
color:green;
}

The code above will select all <p> tags which are inside the <div> element, even if other elements are in between them. Now, the difference between this and the > selector is that the > is only used to select a particular element which is a direct descendant.

So if we have

div>p{
color:green;
}

Only <p> elements which are direct descendants of the <div> will be colored green.

The , Selector

This, also called the group selector is used to group classes or names with the same styles to avoid repetition of codes. The code below,

h3{
color:blue;
text-align:center;
font-weight:100;
}
p{
color:blue;
text-align:center;
font-weight:100;
}
.mid-text{
color:blue;
text-align:center;
font-weight:100;
}

can be rewritten as

h3,p,.mid-text{
color:blue;
text-align:center;
font-weight:100;
}

The nth-type-of selector

This selector can be used to select the nth child of parents elements of a particular type. n can be a number or keyword. Consider having the following codes:

<html>
       <head>
              <style>
                   div:nth-type-of(1){
                    color:red;
                    }
                    div:nth-type-of(2){
                    color:blue;
                    }
                    div:nth-type-of(3){
                    color:green;
                    }
              </style>
       </head>
       <body>
             <div>
                 <p>This is the first paragraph</p>
             </div>
             <div>
                 <p>This is the first paragraph</p>
             </div>
             <div>
                 <p>This is the first paragraph</p>
             </div>
       </body>
</html>

If you read up to this point, then I have something for you🎖

Yes, feel free to reach out to me on twitter , and thanks for reading.

Yes. Before we continue, I want to remind you that this article was inspired by Hashnode's weekly challenge to encourage developers to share their first interview experience and lessons learned from it.

Back to it,

I've had about 4 job interviews in the past, written, oral, but never a technical interview.

I started coding mid 2018 immediately I finished my compulsory 1 year NYSC. Prior to this time, I always had a serious phobia for coding and usually developed migraine whenever I looked at a screen filled with codes.

At this time, I had resolved to take the bull by the horn and plunge into coding because I believed I could do it this time.

I had the opportunity to intern with a hub in my city at that time. Through the internship, i was privileged to work with the tech team on internal front end projects which also involved teaching and coaching others, I was also transitioned from just an intern to a front end developer.

This lasted for a year + before I moved on for my masters program.

Alongside, I've picked up some relevant soft skills as well, leadership, team spirit, creativity, proactiveness and resilience.

I'm still on the journey of learning and practicing daily and hopeful that I'll land a technical interview soon and eventually ace it.

I still have imposter syndrome, A LOT, being that I've never had a 'real' technical interview. I find a lot of encouragement from some tech twitter personalities like Dave Thomson, Emma Bostian, Jatin Rao and a couple of others. Their words encourage me everyday, to keep pushing, and helps me face the brighter side of things.

A few tips I've worked by are:

Keep learning:

Despite not having landed a role yet, I keep practicing daily, solving algorithms (some are really complex though).

Don't get caught in tutorial hell:

I struggled with this for a long while, saw a lot of tutorials, but never built anything of my own. I'm learning to practice every new thing I learn in order to truly understand how they work.

Write:

Initially, Imposter made me feel I've not known enough to write, but I decided to write anyway, even if not for the experts, for newbies like me. This was why I started this blog, and named it "baby steps". An avenue for me to write about things I know while simplifying it in the barest form.

Be consistent:

Although I have quite a lot of things calling my attention, I devote at least an hour everyday to code or read an article or learn something new.

I'll get an interview:

I'll prepare, and one day, my time will come.

Thanks for reading. ❤

But is that all there is to know? How can you become a better front-end developer? Let's dig in.

Learn HTML & CSS And become good at it.

I guess there’s no way around it. Learn HTML & CSS. Why? Because the basics matter.

HTML allows them to add content to a website while splitting it into headings, paragraphs, and tables. CSS lets a decent developer style the content and change things like colors, sizes, and borders.

There are different online courses available on how to get started with HTML and CSS. You can sign up at Online courses like

• Coursera

• Team Treehouse.

• Codecademy

• FreeCodeCamp

• Udacity

• Udemy

And while there are so many free resources out there, also try to invest in your learning by purchasing premium learning content and getting some certifications. After finishing some initial courses, go ahead and create some static web pages and iterate over and over again.

Build things

Now that you've gotten the basics, it's time to create real stuff, to strengthen your tender hands. You can start by creating a simple landing page or website. Don’t forget to challenge yourself by building first responsive elements. You can sign up with platforms like

• Codewars

• WesBos

to get daily or weekly tasks to build to practice what you've learnt. So there’s only one way to becoming better at what you’re doing: Keep learning, keep building.

Putting these two together, build to learn! There’s no better way to learn than to get your hands dirty.

Read

Believe it or not. Your reading skills greatly influence your path to becoming a great front-end developer. As a beginner, you'd have to do a lot of reading. Why? At first you’ll probably read a lot of articles, guides and manuals on how to do different things. You’ll also start reading other people’s code. Some good books and blogs I recommend

• Eloquent JavaScript

• You don't know JS

• CSS tricks (blog).

• Free Code Camp (blog)

• Code burst (blog)

• Hashnode

• Dev.to

• Frontend masters

There’s more to front-end development than building a website

Knowing how to build a website isn't all there is to being a front end web developer. Knowing how to build a website is a very small part of the front-end puzzle.

There is a whole load of topics that you still should learn about. If we consider performance, testing, Project management, QA and many other areas, then you really need to become a deep diver as a front-end developer.

Know some other tools

Learning about the different tooling options is an important thing. Great tools will help you enhance and automate your front-end development workflow. One of those tools will definitely be the Chrome developer tools. Why? Because you can play with HTML, CSS and JavaScript in real-time and this will give you immediate feedback you need to learn quickly. Additionally, node, npm, bower and many more excellent tools are there to facilitate your daily work. And don’t forget about versioning. 😉

Learn Version Control

Version control will save you some sleepless nights. With git you are always assured of having your work intact without fear of system failure or theft. You'd also be able to collaborate with people on a project in real time. So make sure to become an expert at Git - or at least, be git-friendly😉

It won't hurt to learn how to use a collaboration tool

Collaborations will come in handy especially hen you're working on large products or as part of a team. Some collaboration tools I recommend

• Trello

• Pivotal Tracker

Do not rush.

Along the way, you will ask yourself why you do this and you may want to just stop. It may be tempting to just give up. But don’t. If you’re at that point, I have only one piece of advice for you:

Do. not. give. up.

Code Everyday

This is more like a command than a statement.

Set aside one or two hours every other day to learn. Take a lot of breaks and make sure that you really know the basics. And never rush.

Ask questions

Whenever you feel stuck you'd definitely do, don’t be afraid to ask questions. Everyone goes through this phase. Here's a tweet by a popular tech pro and evangelist

It happens to the best of us. You just have to stick to it knowing that you'd get better with time.

Dive deep into frameworks

Now you've acquainted yourself with some front end technology, it's time to delve into any of the frameworks in front end web development. We have

• React

• Vue

• Angular

• Next

Knowing which framework to delve into is totally dependent on you and you convictions.

Get involved with open source projects

Getting involved with various projects, especially open source, will not only make you a better front-end developer, but it will also help you build up your very own online brand as an active, experienced developer.

Check out madeinnigeria.dev for some Nigerian Open Source Projects you can contribute to. Thanks @aceKyd for putting that together.

Tech twitter can be your friend 😂

Well, this one might seem a little bit weird, but tech twitter has helped me a lot in my journey as a front end web developer.

Check out this tweet by @hacksultan, under the thread you'd see some amazing rech persons in front end you can follow and continuously learn from.

In summary, Being a front end web developer isn't just about the building of websites and learning of frameworks, it also involves the roles and interaction as a front end web developer.

Because the web is a rapidly evolving universe, great frontend developers should never stop learning. Even little things like following Frontend experts on twitter will have an impact on your learning curve.

You need to have some patience to get there. The path to becoming a frontend developer will definitely take some time. And lastly, please try to have fun while learning and experimenting.

All the best🤩

Did you find this article useful? Share!

This is the time I'd ask, hope you enjoyed my last article (series 1 :)), if you've not read it, I advise that you should as this is a sequel to it.

Here's the link:

Baby Steps to Git and Version control - Series 1

Getting Started

If you want to keep track of your code locally, you don't need to use an online repository. But if you want to work with a team, you can use GitHub, Gitlab or bitbucket to collaboratively modify the project's code.

What we'll cover:

1. Creating a remote Repository
2. Syncing your remote repository to your local repository.
3. Updating your git repository (local and remote)

Creating a Remote Repository

By now you should have created an account with any of the version control software, of which we'd be using GitHub for this article. Visit github.com to sign up if you do not have an account already.

To create a remote repository, go ahead and click on New button (I'm not a Github first time user so you'd probably see a green Create Repository button on yours instead)

Whichever way, it'd take you to the page where you enter the name of your repository and a description of your project. It also gives you the option to make your repo private or public. You could also initialize your repo with a read me by ticking the read me check box.

Syncing your remote repository to your local repository

Now we've created our remote repository, we have to sync it with our local repository so they both can seamlessly communicate. Open up your git bash, navigate to the folder you're working on and enter the following codes git remote add origin url

Updating your git repository (remote and local)

Lets go ahead and add some codes to our html file

                  <label for="inputEmail" class="sr-only">Email Address</label>
                  <input type="email" class="form-control" id="inputEmail" placeholder="Password">
           </div>

As we learnt in the previous series, we have to run the following lines of code:

git add index.html

Go ahead and commit

git commit -m "added some html codes"

As it is, our local repository is currently a commit ahead of the remote repository. To update the remote repo, we'll have to push our work from the local repository to the remote repository using the code:

git push origin master

"master" is the default branch for every repository and most times houses the main project codes.

You can also choose to create a new branch assuming you made a new feature but you are worried about making changes to the main project (master branch)

You can use the code: git branch newBranch to create a new branch, and use git checkout newBranch

The above codes can be combined as git checkout -b newBranch

You can use git branch to confirm the branch has been created. The branch name with asterisks next to indicates which branch you're pointed to at a given time.

To update the main project branch (master branch) with the contents of the new branch, checkout to the master branch and run:

$git pull origin newBranch

This updates the master branch with all the changes implemented on the newBranch branch.

When you push to the remote repository, GitHub will automatically create the branch for you on your remote repository. This allows people to see the changes you've made.

What does "origin" mean?

Origin is a shorthand name for the remote repository that a project was originally cloned from. More precisely, it is used instead of that original repository's URL - and thereby making referencing easier.

So to push your changes to the remote repository, you could use either of the following command

git push origin nameOfBranch or git push https://github.com/username/reponame.git nameOfBranch

(You could be prompted to enter your username and password. Note that your password won't show as you're entering it. Just enter them correctly an hit enter)

That's all for now folks!!! In my next article, I'll be showing you how to collaborate on a remote project and guide you to making your first pull request.

But for now do enjoy your baby steps, one step at a time. Cheers!!!

Reference: Fundamental of git and Github by MindOrks

1. What version control is.
2. Setting up your Gitbash
3. Initializing your repository.
4. Making your first commit in Git.
5. Creating your branches in Git
6. Reverting to a commit

What Version Control is

Git is a version control system that is used to track changes that are made to a file or project. It was made by Linus Trovalds (The creator of the Linux Operating System) Github is a cloud open-source collaboration platform that brings together the world's largest community of developers to discover, share and build better software, from open source projects to private teams and to individual projects. Everyone can upload their codes and track changes made in a project for future use.

Setting Up your Gitbash

First off, you'll need to download git bash from https://git-scm.com or https://gitforwindows.org (if you're running a windows pc)

For the purpose of this course, we'll be creating a new folder, which I'd named babysteps2git, which we'll be using throughout this article.

Inside this folder, we have a file, 'index.html' which we'll be using for instances, which I created from my favorite command line Interface - Cmder.

Now, let's set up our git globally by configuring or username and email, as this is considered your first time using git.

Open up your gitbash, Use the command $git config --global user.name "Your name" to configure your username and $git config --global user.email "Your email" to configure your email.

To check if your configuration has been added, type in

$git config --global user.name

to check your username and

$git config --global user.email

to check your email.

Initializing your Repository

Just assume this to be the part where you tell git "Look this is the folder/directory where I want git to work in right now" To initialize a repository, we first navigate to the directory where our work is, in my case, the 'babysteps2git' folder.

Then we key in

$git init

Making Your First Commit in Git

Committing in Git can be viewed as saving when working on documents. It's a way of saving our changes to the repository and storing it with a unique ID and a message. The ID and message can be used to trace back to the version of the project if need be and that is one of the peculiarity of git commit as opposed to save as.

Before a commit can be made, you have to stage your work first. Staging is a way of telling the system say "Hey, I've made a whole lot of changes to my work, but this one, this one and that one are the ones I want to save"

Hence, when you want to add, you basically do this:

$git add name-of-files

If you want to add all the files you made changes to, do

$git add .

instead.

Now, after adding/staging the files, you can now commit them or to a lay man, what would look like a 'save'.

It is important to note that, it is very necessary to commit your changes using short but detailed commit messages like the one shown above.

To view the status of your repository, know which branch you're on, which files were modified, not staged, staged and is ready to be committed, use the code:

$git status

Creating Branches in Git

Let's say you're working on different versions of a project or you're collaborating on a project with some friends or colleagues, it is important to have a branch say "master", which is the default branch for every repository that stores the original and modified codes from the various contributors. To collaborate or work on various versions of a project, we have to work from different branches.

By developing in branches, it’s not only possible to work on multiple versions of your code in parallel, but it also keeps the main master branch free from questionable code.

So, for our babysteps2git project, we can decide to have several branches, each housing a different version of the code. To create a new branch in git, we use the command,

$git branch nameOfBranch

To check out the new branch, use

$git checkout nameOfBranch

The above 2 commands can be done simultaneously using the command:

$git checkout -b nameOfBranch

Reverting to a Commit

Here comes another very interesting stuff about git, the ability to revert changes made overtime, something CTRL+Z cannot do.

While working with git, you might want to go back to a particular state of your code, this can be achieved by reverting to the particular commit you want to get back to. Each commit we make, have a unique ID attached to it, to get this ID, you can type in

$git log

Alternatively, the output above can be logged in one line using

$git log --oneline

From the above, you can see the ID and commit messages for each of the commits.

To revert, key in

$git revert commit-ID

This command reverts to the very state of that code as at the time of that commit.

Several other git commands have been published on several other platforms including the git cheat sheets, but I hope this gets someone started today.

I'll be posting a sequel to this, but for now, do enjoy your baby steps. Cheers.