DEV Community: Lu-Vuong Le 🚀

Writing a High Quality README! 🔥

Lu-Vuong Le 🚀 — Thu, 15 Oct 2020 09:10:05 +0000

How good are your README files?

Many developers know this file is important when creating project but

how well do you write your README files?
Do you know how you should go about writing a high quality README?

There is no one right way to write one but there is a very wrong way which is to not have a README at all. I've seen many projects with a very minimal README or none at all 😟

So I'm going to give you my own opinion/guidelines from my experience of what a quality README should be but first let's go over why we need a good one in the first place.

You need a good README because it:

Will be the first file the user will see. A good README engages the user with the project
Explains and showcases what your application does
Allows you to clearly explain how to run your application, test or contribute
Justify technology stack used
Stand out from other developers and projects

Here's my guidelines of what to include

Project Title

Your application or project name should be displayed first and foremost. Let everyone know what the name of the amazing project you're working on is! 😃

Badges

Badges make your README a lot more professional and really shows other developers that you know what you're doing! You can find badges all over but a good place to start is: shields.io

Screenshot / GIF of the application (Demo)

This one is self explanatory but showing your application in action is highly recommended. Using a GIF is much more preferred as from my experience it's more pleasing to see the application in real time than screenshots and will grab the attention of the person viewing your project

Application Description (One Line)

A short description or paragraph of your application/project

If your README is lengthy then it is always a good idea to include a table of contents section for easy navigation

Application / Deployed Links

Include a link to your deployed application. You can also put in other links like a Kanban board for example

Technology Stack

People are often curious about what tech stack you have used and even more so if they want to contribute. This is a good section to include in order to demonstrate your chosen tech stack. You can use a table format to make things neater

Features (Optional)

Now this is optional but if your application is large with many features, you can show this off with this section and list as many features as you want 💯

Installation

Include steps to install your app for development and production. Provide clear step by step instructions to make it easy for other developers

Configuration Setup

Alongside installation, you may have some configuration files that are necessary to setup for each person. Add notes here about config options and what they need to change

Usage

How does someone use your application? Add instructions here to run the application after installing and configuration is complete

Tests

Testing is important in any application! Explain your testing methods and provide instructions on how to run them. If tests need seed data, be sure to include that as well

Collaborators

If other people have contributed to your project, make sure you provide a section for collaborators to give them credit where it is due! A good way to do this is in a table format with their name and link to their GitHub page

Contributing Instructions

If your project is open source, provide instructions on how people can contribute according to the guidelines you set to ensure consistency. A good way to do this is to create a CONTRIBUTING.md file and link to it

License (Optional)

Add license information about your project. Not necessary if you have a LICENSE file

Contact Information (Optional)

Provide any contact information such as email if you would like

Note: Make use of emojis! You don't have to overdo it but in my opinion they make it more pleasing to view 😃

Examples of good READMEs

Some Templates/Guidelines

I've created some GitHub gists below with guidelines I use for both a README.md and a CONTRIBUTING.md to help out myself and everyone 🙌

View my CONTRIBUTING.md guidelines
View my README.md guidelines

I hope this has been useful to everyone! READMEs are very important for other people and act as a sort of documentation as well. Now that you know how to write better READMEs, get out there and create awesome ones! 💪

Coping with Imposter Syndrome 🙏

Lu-Vuong Le 🚀 — Sat, 19 Sep 2020 08:02:19 +0000

Fear not if you experience this feeling, it's a common emotion for many developers...even experienced developers!

Feeling Overwhelmed? 😨

The life of a software engineer, whether you are a junior or a senior developer can at times, be overwhelming.

You might feel this way because you can't solve a bug or you make a mistake at work. Typically Imposter Syndrome is a tough feeling to get rid of, you feel inadequate and your confidence in your ability as a developer is shaken. It’s understandable to feel overwhelmed.

However, some people might not know this can become serious and lead to more distraught feelings building up inside us developers.
So don’t fret if you are currently feeling like this, you have others who have experienced the same thing alongside yourself.

The Problem: Imposter Syndrome 😵

Feeling overwhelmed can be an issue, but if we let this feeling keep expanding further it can evolve into what is known as ‘Imposter Syndrome’. For those people who are not able to easily pick themselves up or have confidence issues, this problem becomes a large internal struggle.

Imposter Syndrome is a psychological pattern in which people cast uncertainty on their success and achievements and continue to have a perpetual feeling that they will be looked at as a fraud or imposter, hence the name.

As a result of this, many people end up undermining themselves and override any feelings of success and instead turn them into feelings of failure.

Reasons we face this problem 😕

There can be many reasons we face Imposter syndrome. As I mentioned earlier, we can become overwhelmed with the workload you’re given and expected to know.

One thing to note is that being a developer is a lot of work and is very challenging. The technologies we work with here are always advancing, whether there are updates to new frameworks or newly created technologies to learn. This field has the requirement that we are always learning and are up to date with our knowledge of the newest technologies.

Another potential reason is that you may have colleagues or friends who know much more than you and you feel as if you can never catch up or become a top-tier developer.

Personally, I have also had the feeling where I thought I was never going to be good enough to catch up to people around me.

I have met people and have close friends who are incredibly smart and talented in this line of work and have indeed compared them to myself, which brought my confidence in my own skills down. Things that would take me longer to understand would come instantly to them. I had thought that my talent is nothing compared to theirs and I would never be able to catch up.

What can you do to remedy this? 🙌

Everyone has different methods of dealing with these issues, here I would like to discuss a few ideas I think are useful and can help others

Where were you a year ago? 3️⃣6️⃣5️⃣

Think about where you were a year ago.

What did you learn and achieve in the past year?

Look back and recap your experiences, it can give you a chance to be proud of yourself for the new things you have learned. Don’t compare your achievements to anyone else. Whether yours is a small accomplishment, it is still classified as an accomplishment that you put in the effort to make and will add on to your career in the long run.

IMPORTANT: Please never compare yourself to someone else! 🙏🙏

You are not the only one

Even developers who are at a level much higher than yourself can have this feeling as well. If you ask your friend or mentors, you may be surprised if they have also been through what you’re going through.

One person can’t know everything and as such, we developers will never completely know everything. Don’t let this be the reason you stop learning and keep at it at your own pace.

Take some time off

If it all becomes too overwhelming, a good idea is to take some time off. Away from the keyboard and away from the code.

Spend time with family, close friends or go on a trip somewhere. Come back feeling refreshed and hopefully with a more positive mindset. Who knows, something could give you a newfound inspiration and motivation during your time off.

Don't give up! Fail fast, fail often 💪

I would like to finish this with a few words personally from myself to my fellow developers out there. If you are facing any of what I have mentioned above, please stay confident in yourself. There will always be new technologies emerging and there will always be better developers than you out there. However, intelligence is not fixed.

Be proud of your past achievements (large or minuscule) and compete against yourself. Become the best developer you can possibly be and keep growing. I’m sure you all are as passionate as I am, so I implore you to keep going and don’t give up on your goals. Keep learning new things, improve your development skills, gain experience and reach new heights! Our skills can and will only keep increasing from where we are now. 🔥🔥

Share this post if you know someone who is going through the Imposter Syndrome phase to help them out 😄

Learn Markdown in 20 minutes

Lu-Vuong Le 🚀 — Tue, 08 Sep 2020 11:06:04 +0000

In this video, we go through what Markdown is and how to use important basic Markdown syntax that is commonly used as a Developer

It's important to know the basics of Markdown as a developer as you'll see it used in places like READMEs, blog posts on DEV, and more!

Markdown syntax in this Github gist:
https://gist.github.com/luvuong-le/2b5f9465cd13329042afff1bccad73d9

If you'd like to see more of my videos, head over to Youtube! A follow/sub comes a long way to show support

Follow and connect with me on:

🐦 Twitter: https://twitter.com/coderarchive
📚 Github: https://github.com/luvuong-le
💼 LinkedIn: https://www.linkedin.com/in/lu-vuongle/
📷 Instagram: https://www.instagram.com/coderarchive/
📝 Dev.to: https://dev.to/coderarchive

Migrating Posts from Medium to DEV

Lu-Vuong Le 🚀 — Sat, 22 Aug 2020 08:00:30 +0000

Hi Everyone! 👋

As I create blog posts, I typically use multiple platforms aside from DEV such as Medium.

Now I have had some posts on Medium in the past that I wanted to move onto DEV. The problem was I didn't want to rewrite the posts on Medium to markdown for DEV, which would require a bit of effort.

Thus began my search for a way around this which led me to stumble onto this awesome tool!

How to migrate posts ❓

The tool I used is Medium Exporter. In order to use this, you can install this npm package globally via:

npm i -g mediumexporter

Now you should be able to run the following command to convert a medium post into an MD file

Format: mediumexporter [url] > [filename].md

mediumexporter https://medium.com/@coderarchive/4-lessons-ive-learned-during-my-first-year-as-a-software-engineer-50bc95afd629 > 4-lessons.md

Note: If you don't have it installed globally, you can also use npx which is what I'm using in the example below :)

Running the command

View the file

There may be some changes to make as it doesn't always convert everything correctly and you'll possibly need to deal with any images yourself but it usually helps with most of the work 👌

That about wraps it up for this short one! I'm also aware there is are some chrome extensions and other npm packages to do this as well but I haven't tried them out yet, this way seems to work well enough 😁

Why I decided to start blogging and why we all should 🙌

Lu-Vuong Le 🚀 — Sat, 15 Aug 2020 10:26:28 +0000

Just a short post talking about why I started blogging and why I think we all should as developers 😁

What's the point ❓

There are a lot of reasons why someone would start writing blog posts. Personally, for me, I think a blog carries many benefits as a software developer that I'll talk about below. Moreover, I think it's amazing to share our knowledge with other developers out there and also learn from them 📚

Benefits of writing blog posts ✏️

I would absolutely recommend all developers to start blogging. Some of the benefits I can think of are (if you have more, please feel free to comment):

Allowing you to connect and potentially meet incredible developers. We have a great community here so let's all share knowledge with each other and interact 👋
Blogging can help boost confidence in both writing ability and your skills as a developer. Trying to explain the knowledge and concepts you know is important as you become a more experienced developer, blogging can help with that
Social wise, it acts as another place to build a profile and get your own name out there. You can form valuable connections through blogging and allow employers to see your engagement and passion being a developer. More ways to showcase your knowledge to employers never hurts! 👌

Go for it! ✌️

If anyone is reading this and is afraid of posting in case you think someone has already talked about it or you're scared of what people may think, please take the leap and go for it! 😊

Even if it has already been talked about before, someone will be able to take something out of the stories and knowledge you share.

As for me, I will do my best to share my knowledge with you all so we can all progress as developers! 💪

Event Delegation in JS

Lu-Vuong Le 🚀 — Thu, 23 Jul 2020 06:13:35 +0000

What is Event Delegation? ❓

You can look at Event Delegation as a method of handling events for multiple elements via an event listener on one parent element.

Essentially the child elements events will bubble up via Event Bubbling to the parent element and trigger its event listener and then perform some action on the child element via the event.target.

This also allows it to cater for any dynamically generated elements.

Picture this 🖼️

To understand what Event Delegation is, imagine this scenario:

<ul id="brooklyn99Characters">
    <li>Jake Peralta</li>
    <li>Raymand Holt</li>
    <li>Amy Santiago</li>
</ul>

<input id="characterInput" type="text" />
<button id="addBtn" type="button">Add Character</button>

You have a list <ul> and list items <li> in the DOM - For each list item, you have an attached event listener listening to a click button that highlights the text when clicked

Some pretty basic concepts so far, you can add an event listener to each of these list items via a loop.

Now imagine that this list has the ability to add new cast characters and essentially is now dynamic.

All of a sudden when a character is added and you try to click on them, nothing happens! 😕

This happens because the event listeners were attached to the elements that were added during page load. When dynamic elements are added to the DOM, the JS is not run and event listeners are not added. This is a common issue you may run into or see others encounter.

How can we fix this? 🔨

So one common way to fix this problem is to bind these event listeners whenever an element is dynamically generated.

Say you had this code to add a new cast member:

const characterList = document.getElementById('brooklyn99Characters');
const addBtn = document.getElementById('addBtn');
const characterInput = document.getElementById('characterInput');

const highlightText = e => e.target.style.background = 'yellow';

addBtn.addEventListener('click', () => {
    const listItem = document.createElement('li');

    // Set text content to user custom input    
    listItem.textContent = characterInput.value;

    // Bind event listener to this created element
    listItem.addEventListener('click', highlightText);

    characterList.appendChild(listItem);
}

So let's take a look at what is happening:

We have a reference to the character list <ul> and a function to style the background of an element to yellow

On the add button, we have an event listener which creates an <li> and sets some text (which would be grabbed from an input field)

Now we create an event listener for this new dynamically generated element and set in our highlight function. This is the important part which allows the 'rebinding'
Finally, we append it to the parent list

Now this is not always the best way to do things, there are some things problematic with this

It can cause you to have a lot of event listeners on your page and can cause performance issues
There can be some memory leaks and issues when it comes to binding and unbinding event listeners

Using Event Delegation 💡

Let's implement Event Delegation to the above code and see what the differences are:

const characterList = document.getElementById('brooklyn99Characters');
const addBtn = document.getElementById('addBtn');
const characterInput = document.getElementById('characterInput');

const highlightText = e => e.target.style.background = 'yellow';

// Listen for events on the parent
characterList.addEventListener('click', e => {
    const targetEl = e.target;

    // Check for node type and execute some code
    if (targetEl && targetEl.nodeName === 'LI') {
        highlightText(e);
    }
});

addBtn.addEventListener('click', () => {
    const listItem = document.createElement('li');

    // Set text content to user custom input    
    listItem.textContent = characterInput.value;

    characterList.appendChild(listItem);
}

As you can see above, we have no longer have any need to assign an event listener in the "addBtn".

This is because when the element is added and clicked, Event Bubbling kicks in and bubbles up to the parent and triggers the click event there too.
Inside parent element (characterList) we have an event listener for a "click", and inside that, we do some checks for the event target to see if it's a li and then we change the styles!

Both the method above and this Event Delegation have the same result:

So why use Event Delegation?

So as above, the benefit here is that we only need one event listener and it also caters to dynamically generated elements! 🔥

This can be extremely useful depending on your situation and can save you trouble so it is a good technique to keep in your backpack 😁

Follow and connect with me on:

📹 Youtube: https://www.youtube.com/channel/UCWaB4SBBUCvhYb91fz5Vidg
🐦 Twitter: https://twitter.com/coderarchive
📚 Github: https://github.com/luvuong-le
💼 LinkedIn: https://www.linkedin.com/in/lu-vuongle/
📷 Instagram: https://www.instagram.com/coderarchive/
📝 Dev.to: https://dev.to/coderarchive

Building a Code Editor for the Web - Output to Custom Console

Lu-Vuong Le 🚀 — Wed, 22 Jul 2020 01:45:57 +0000

In this final video, we'll be displaying the logs we stored in the array to our custom console and styling them according to the log type 🔥

Find the code for this video in this branch:
https://github.com/luvuong-le/code-editor-tutorial/tree/output-to-custom-console

Check out the previous part to this video here!

This was my first time doing a longer series so hope you enjoyed it! 💪

Follow and connect with me on:

My 100 Days Of Code Journey

Lu-Vuong Le 🚀 — Mon, 20 Jul 2020 14:59:24 +0000

Round 1 Complete! 🔥 🔥

I've just completed my 100 Days of Code challenge and wanted to share my experience and how it helped me 💪

I'd like to also give my thanks for the support from the dev community on Twitter where I posted! 🙏

What is the 100 Days of Code Challenge ❓

Essentially, the 100 Days of Code challenge is a challenge where you code for a minimum of an hour a day for 100 days and record your progress by posting on Twitter.

You can find more information about it here if you'd like to try it!

My Thoughts 💭

To start, I can say confidently that for me this worked pretty well! I started this because I wanted to be more motivated to write code consistently and this stood out as a great challenge to help me with that. At this point, I'd already seen people posting some really amazing work and progress on Twitter 😍

Over time, I began to code more often even if only for an hour a day and I did a lot more projects than I would have. For example, I finally got around to learning and completing a few different CSS Illustrations during these 100 days

Here are some examples:

Throughout the 100 days, I've learned new things and have also been able to brush up on some core coding skills. I could feel my heightened motivation to code in order to complete and stay disciplined to the challenge. All the support from everyone was really amazing! Such an awesome community that I've been able to connect with even more due to this challenge 🙌

A quick note, my work would range from projects, tutorials, just reading for the day, or no work at all. I don't believe we have to code every day as we all need rest days for our mental health 😴

So...where to now?

This is a challenge I'd highly recommend for everyone to try! I really enjoyed doing this and learned a lot during these 100 days so now off to start Round 2! 😁

Building a Code Editor for the Web - Redefining the Console

Lu-Vuong Le 🚀 — Mon, 20 Jul 2020 14:29:54 +0000

In order to output to our custom console, we'll need some way to store the logs that usually get logged in the dev tools that are also formatted as we want so that we can display them all at once later on

Find the code for this video in this branch:
https://github.com/luvuong-le/code-editor-tutorial/tree/redefine-console

Check out the previous part to this video here!

Stay tuned for the final video 😁

Follow and connect with me on:

Building a Code Editor for the Web - Configuring Ace Editor

Lu-Vuong Le 🚀 — Sun, 19 Jul 2020 08:52:06 +0000

In this video, we'll work on configuring ace with some options and getting the user input from Ace to execute in the chrome dev tools

Find the code for each video here in its own branch:
https://github.com/luvuong-le/code-editor-tutorial/tree/configuring-ace

View the Ace configuration options here:
https://github.com/ajaxorg/ace/wiki/Configuring-Ace

Check out the previous part to this video here!

Follow and connect with me on:

Building a Code Editor for the Web - HTML & CSS Structure

Lu-Vuong Le 🚀 — Mon, 13 Jul 2020 01:50:24 +0000

In this video, we'll work on the basic overall structure with the HTML and CSS. We'll also load the ACE Code Editor without any configuration.

Find the code for each video here in its own branch:
https://github.com/luvuong-le/code-editor-tutorial/tree/html-css-structure

Check out the previous part to this video here!

If you'd like to see more of my videos, head over to Youtube! A follow/sub comes a long way to show support

Follow and connect with me on:

coderarchive #webdev #html #css #js

Building a Code Editor for the Web - Project Setup

Lu-Vuong Le 🚀 — Thu, 09 Jul 2020 07:23:06 +0000

In this video, we'll set up the project with a basic folder structure and also take a look at the library we'll use for the embedded code editor (Ace Editor)

Find the code for each video here in its own branch:
https://github.com/luvuong-le/code-editor-tutorial

Check out the previous part to this video here!

If you'd like to see more of my videos, head over to Youtube! A follow/sub comes a long way to show support

I've become a bit busy till the weekend so stay tuned for the next part 🙏

DEV Community: Lu-Vuong Le 🚀

Writing a High Quality README! 🔥

How good are your README files?

You need a good README because it:

Here's my guidelines of what to include

Project Title

Badges

Screenshot / GIF of the application (Demo)

Application Description (One Line)

Table of Contents

Application / Deployed Links

Technology Stack

Features (Optional)

Installation

Configuration Setup

Usage

Tests

Collaborators

Contributing Instructions

License (Optional)

Contact Information (Optional)

Note: Make use of emojis! You don't have to overdo it but in my opinion they make it more pleasing to view 😃

Examples of good READMEs

Some Templates/Guidelines

Coping with Imposter Syndrome 🙏

Feeling Overwhelmed? 😨

The Problem: Imposter Syndrome 😵

Reasons we face this problem 😕

What can you do to remedy this? 🙌

Where were you a year ago? 3️⃣6️⃣5️⃣

You are not the only one

Take some time off

Don't give up! Fail fast, fail often 💪

Learn Markdown in 20 minutes

Follow and connect with me on:

Migrating Posts from Medium to DEV

How to migrate posts ❓

Running the command

View the file

Why I decided to start blogging and why we all should 🙌

What's the point ❓

Benefits of writing blog posts ✏️

Go for it! ✌️

Event Delegation in JS

What is Event Delegation? ❓

Picture this 🖼️

How can we fix this? 🔨

Using Event Delegation 💡

So why use Event Delegation?

Follow and connect with me on:

Building a Code Editor for the Web - Output to Custom Console

Follow and connect with me on:

My 100 Days Of Code Journey

Round 1 Complete! 🔥 🔥

What is the 100 Days of Code Challenge ❓

My Thoughts 💭

So...where to now?

Building a Code Editor for the Web - Redefining the Console

Follow and connect with me on:

Building a Code Editor for the Web - Configuring Ace Editor

Follow and connect with me on:

Building a Code Editor for the Web - HTML & CSS Structure

Follow and connect with me on:

coderarchive #webdev #html #css #js

Building a Code Editor for the Web - Project Setup

Follow and connect with me on: