DEV Community: Vignesh

Open Source and 100 Days of Code: Week 1 Update

Vignesh — Sat, 22 Jan 2022 14:07:02 +0000

Prologue

My first attempt at #100DaysOfCode was back in October 2021. It also coincided with the Hacktoberfest 2021 (which was in October). I started contributing to Open Source without really intending to. I saw a Repo that had some missing links and just wanted to let the maintainer/owner know the updated one. That was my first OS Contribution

I have written about it in my first Hashnode article: My first Pull Request that was merged and why you must contribute to Open Source.

But, I had to abandon it after 19 days of a continuous coding streak. I did 21 days where the last 2 days were after an interruption.

I was not burned out but, just skipped a couple of days after the 21st day and lost continuity. It was around the same time that my back started aching as I was spending late nights and weekends sitting on my bed, learning to code. That was a bad idea and I refrained from doing that again.

Though I was not successful in finishing the challenge in that attempt, it helped me customize my Github landing page & build a resume website. I became better at using Git and Markdown.

And the most important part - I rediscovered my passion for programming thanks to supportive communities. I also found a Mentor to help me progress faster.

I can't stress the importance of getting a community and a mentor to support and guide you in this process. The learning that happens in a cohort can't be replicated in an isolated study environment.

Now, I had set up a good environment to get into coding & also got some like-minded people to travel with. The journey had become easier.

Learning 0.0

As Programmers, we are accustomed to starting things with 0. It's theoretically relevant too since I had to restart. So here's what I learned during my first attempt. Some of them are documented as blogs:

Github Submodules and how you can use them for your Projects
Configuring Github's Personal Access Token to Make Code Pushes Easier
Improved my CSS knowledge by playing some games like Flexbox Froggy, Grid Garden & Flex Box Defense.

New Innings

I took some time to re-organize everything after I abandoned my first attempt at the #100DaysofCode. I restarted it in the last week of December 2021. Since there was a gap of more than a month between my first attempt and the second one, I decided to start from 0 rather than continue it from where I left off.

But, even the 2nd attempt was not easy. I could not code consistently because of too much "context-switching". There were a lot of factors that distracted me. I took care of all that in December & sorted it out. After that, I took a week's break and resumed the #100DaysOfCode challenge.

Please don't mind the inconsistency in the Longest Streak figures here and above. It was caused by me deleting a Repo I was working on, at that time.

Learning 1.0

I began to rethink my strategy during the second attempt of #100DaysOfCode. The main intention of the #100DaysofCode challenge was to learn consistently and move ahead to get a developer job. It need not be Coding as such, every day. It could be something like reading documentation, books and papers or solving some mathematical problems.

I read Tiia's Making #100DaysOfCode work for me with new rules around that time which had an overlap with my thoughts. There are a few more points in her article and I agree with those since it aligns with the goal of getting consistently better at programming.

I joined the freecodecamp 2022 Become-a-Dev New Year's Resolution Challenge which overlaps with the #100DaysOfCode Challenge.

Take the 2022 Become-a-Dev New Year's Resolution Challenge:
📊Max your stats in #LearnToCodeRPG
⌨️Start #100DaysOfCode
🛢️Finish the fCC Relational Databases Cert
📜Publish 3 tutorials on @Hashnode
To accept: quote-retweet this saying "I'm in." I'll add you to my Twitter list. 🧵
— Quincy Larson (@ossia) December 30, 2021
Started playing the Learn To Code RPG Game (which was a part of the 2022 Become-a-Dev New Year's Resolution Challenge). Corrected a typo in the game. (Not that important but, it was a good exercise). I would tell every aspiring developer to play that game before you start learning to code. I've written why you should, here:

#100DaysOfCode

Day 3: I had to pause my #100daysofcode for close to a week as I got caught up with some personal stuff.

I played the RPG game of @freeCodeCamp when I got some time over the last week

Managed to get the stats here.

But there are a few important lessons... pic.twitter.com/SLTDRJ6hCI
— Vignesh | Programmer | Writer (@vigneshCodes) January 14, 2022
Attempted quizzes at Learn to Code RPG Quiz website.
Revisited freecodecamp's Javascript Learning Path.
Started working on a few personal React Projects.
Started learning Remix to build a website.

An idea for a new Open Source Project

I began to pen down a book, which was about something I started thinking since December 2020. My first attempts to write it were on Google Docs. It was fine till I wrote about 5000 words. After that, it became difficult to organize and re-order chapters in it.

Later, I discovered some specific tools for authors. I made some notes after researching about it here: Writing Tools For Your Next Book.

There were some free tools and some paid ones too. I chose Manuskript to write my book. I also liked Wavemaker and would recommend that too.

These were just two of the many awesome Free and Open Source Software for writing books on Linux. But, they had their limitations which is when I realized I needed a better solution for my problem. So that's when I thought of creating a new tool.

My goal would be to create a new OS Project that gives writers an awesome interface to write books. It may take years but, it'll help a lot of writers who may not be able to afford the expensive proprietary software.

I started a Repo for it on Github. Feel free to join the discussions and contribute.

Resources:

The community where I found my mentor - @Eduardo Vedes: iamFreeCodeCamp. There are many other stalwarts there. You're welcome to join & start your journey.
Course to improve your Github Landing Page. Eddie also has a wonderful community for Open Source.
Learn Javascript & React from scratch.
freecodecamp's learning path.
#100DaysOfCode - The Official Website for the Challenge
Take the 2022 Become-a-Dev New Year's Resolution Challenge

Lessons For Newbie Developers from The War of Art

Vignesh — Fri, 26 Nov 2021 10:22:36 +0000

In October, I challenged myself to take up the #100DaysofCode challenge after I read about Alex Kallaway's journey on freeCodeCamp. On my journey, I have faced many ups and downs. Some parts of the journey were easy and some were really hard. But, I never stopped learning.

Becoming a software developer is no easy job. It's a continuous journey of learning. When the journey is easy, it's a pleasure to travel. But, the real test of grit, perseverance and patience takes place when the odds are against you. That's when I came across an article by Alex Kallaway.

I believe most developers out there are self-taught (at least most of the ones I personally know).

The best engineers I’ve worked with learned to code before or after college, rarely during.
— Sahil (@shl) May 30, 2020

Alex Kallaway mentioned 3 books in his article:

The War of Art: Winning the Inner Creative Battles
The Power of Habit: Why We Do What We Do in Life and Business
The Obstacle Is the Way: The Timeless Art of Turning Trials into Triumph

I read The War of Art: Winning the Inner Creative Battles in less than half a day. It's a small book that's crystal clear and something that'll make the reader feel it was written for them.

It's written in 3 parts. The first one deals with the bad guy - Resistance. Alex talks about it in his article. The second one is about how to deal with the bad guy Turning Pro. The third one is about inspiration. The book is a treat for those who are spiritual. If you aren't, no problem it'll still teach you many invaluable lessons.

Here are some lessons I have learnt from it and every developer or an aspiring developer needs to know. (I'm not a fan of the aspiring developer label. Either you're a developer or not)

1. Beating `resistance` is not difficult but boring.

Steven starts the book with how he spends his day. As a writer, he has to rely on creativity to get going. But, this is where Resistance comes to play. He wins over it by following a routine. Though there's nothing extraordinary or fancy in it, he describes how he wins over resistance.

There's a secret that real writers know that wannabe writers don't, and the secret is this: It's not the writing part that's hard. What's hard is sitting down to write. What keeps us from sitting down is Resistance. - Steven Pressfield (The War of Art)

It can get boring to solve javascript coding problems or even learn HTML and CSS. Most of the work that happens in production is boring too. But, the boring tasks need a lot of practice.

2. Understand that everyone struggles with `resistance`

Comparison is the thief of joy. It's easy to compare yourselves to a senior and established developer and feel that you can never be like that.

Remember, they also went through the same fears, struggles and feelings. Who knows, they may also be going through self-doubt and anxiety! As a developer, your main goal is to learn to code, not focus on what others are doing.

Everyone who has a body experiences Resistance - Steven Pressfield (The War of Art)

Do not look up and get overwhelmed. If you're a beginner developer, looking at complex projects and apps can demotivate you. That's because you're trying to see the hilltop from a valley. Do not focus on becoming someone. Try to do something.

Grandiose fantasies are a symptom of Resistance. They're the sign of an amateur. The professional has learned that success, like happiness, comes as a by-product of work. - Steven Pressfield (The War of Art)

3. It's not a one-day battle

Resistance has to be fought anew, every day. Not every day is the same. Some days are really overwhelming. Some of you may be learning to code with a full-time job or other responsibilities. Every day is a new day and a chance to move ahead.

Had a bad day, yesterday? Forget it and start afresh.

RESISTANCE NEVER SLEEPS - Steven Pressfield (The War of Art)

4. The best opportunity is most likely one step ahead of your worst setback

We all have problems. Some of them seem like the worst and can be devastating. The COVID Pandemic was one that caused a lot of distress at a collective level.

But, all this can be conquered when you conquer Resistance. Keep this in mind - the fight is not over as long as you're alive.

RESISTANCE IS MOST POWERFUL AT THE FINISH LINE - Steven Pressfield (The War of Art)

5. Do not Rationalize.

Rationalization means attempt to explain or justify (behaviour or an attitude) with logical reasons, even if these are not appropriate.

As a developer struggling to learn a new technology or programming language, understand that it's hard. It's going to be tough and that should not be an excuse for you to drop it or go in search of an easier technology.

Many of you may be trying to juggle a full-time job, personal responsibilities and study. But, remember to keep your eyes on your goal - becoming an expert Developer.

What Resistance leaves out, of course, is that all this mean s diddly. Tolstoy had thirteen kids and wrote War and Peace. - Steven Pressfield (The War of Art)

6. Put yourself out there and cut through criticism

Are you learning web development? Share your journey publicly. Are you building projects? Talk about it. Make connections. People out there must know you exist.

It can be difficult. You may get criticized and mocked by people who don't even know to write a "Hello World" program. Be your own critic.

Individuals who are realized in their own lives almost never criticize others. If they speak at all, it is to offer encouragement. - Steven Pressfield (The War of Art)

There's a slight difference between showing off and putting yourself out there. The former is mostly boastful and condescending. It may border being unethical too if you try to show off things that you can't do.

A professional's work has style; it is distinctively his own. But he doesn't let his signature grandstand for him. His style serves the material. He does not impose it as a means of drawing attention to himself. - Steven Pressfield (The War of Art)

7. The path to mastery is alone at first but not always

When you embark on a new journey, you may be alone. But, fret not, you'll soon discover similar people and some may even join you. Keep the faith and go ahead.

Here's the trick: We're never alone. As soon as we step outside the campfire glow, our Muse lights on our shoulder like a butterfly. The act of courage calls forth infallibly that deeper part of ourselves that supports and sustains us. - Steven Pressfield (The War of Art)

8. Fall down if you must but once. Not more than that.

There may be some bad days that force you to miss practice or work for a day. If it's something real and needs more than a day - gladly take it. But if it's lethargy or aimlessness that forces you to do it, don't skip studying/building for more than a day.

The professional has learned better. He respects Resistance. He knows if he caves in today, no matter how plausible the pretext, he'll be twice as likely to cave in tomorrow. - Steven Pressfield (The War of Art)

WordPress website hosting using AWS

Vignesh — Tue, 23 Nov 2021 07:45:37 +0000

This article deals with three tasks — creating a WordPress Instance on AWS, A form to add photos and comments and the Security aspects of the website.

This article is divided into three parts. References at the end.

Creation of a Wordpress Instance on AWS
Adding Photos and Comments
Brief instructions on-
How the website is secured
How users will be provided secure access to website
Creation of a Wordpress Instance on AWS
Login to the AWS console and go to the Instances menu under EC2 services of AWS console. Click on the “launch instance” option to create the new Wordpress instance. (WPBeginners-WordPress-Tutorials) (Zen)

Figure 1

Click on the “AWS Marketplace” in the left window and search for the “Wordpress certified by Bitnami and Automatic option”. Select it and proceed.

Figure 2

Select the “t2.micro” option which is eligible for free tier and proceed.

Figure 3

Set the Network to the default VPC, give no preferences to the Subnet and use the subnet setting for the Auto-Assign IP

Figure 4

Configure the security group to allow HTTP and HTTPS traffic, so that any user can enter and submit the comments

Figure 5

Review the instance before it’s launched

Figure 6

Download the new key pair after naming it and proceed to create the instance.

Figure 7

Wait as the instance is being created.

Figure 8

Now the instance is seen on the list of the instances in our EC2 menu.

Figure 9

Click on Actions, Instance Settings and System Log as shown in the figure.

Figure 10

Scroll down to the bottom of the System log page until you see the Setting Bitnami application password. Select it, copy and paste it to a notepad file. This is for future reference.

Figure 11

Copy the public IP of the instance and save it again, for future reference.

Figure 12

Now copy paste the public IP of that instance and see the default Wordpress website that is hosted.

Figure 13

Scroll down to the bottom of the page and click on the “Login option”

Figure 14

Enter “user” in the username and the saved password into the password box.

Figure 15

The login is successful!

Figure 16

Adding photos and comments under a post.

Wordpress generally allows the user to accept ordinary string comments from the public. This can be subjected to moderation or approval. Follow these steps to accept picture comments. (WPBeginner-WordPress-Tutorials)

Click on “plug-in” and then search for the DCO Comment Attachment plug-in. Install and activate it.

Figure 17

Check its progress in the plug-in list. Now, it has to be configured.

Figure 18

Go to “Settings” and select the DCO Comment Attachment Settings. The settings have to be configured now.

Figure 19

We must allow only images to be posted. Hence, uncheck all the other formats.

Figure 20

Don’t forget to save the settings

Figure 21

Now go to the page and edit the layout, caption etc. Under the “Discussion” menu in the right, enable “Allow Comments”.

Figure 22

Now, let’s test the page. Go to the URL after logging out as the administrator.

Figure 23

This is the page to add the comment and a photo. Once this is done,

Figure 24

Once it’s completed, click on the “Submit” option.

Figure 25

Now, the uploaded picture and the text of the comment have been submitted for moderation.

Figure 26

The comment which was submitted is seen in the bottom, along with the name of the user who sent it.

Figure 27

Click on the “Media Library” on the left side to see the media submitted by the user. This gets stored on the Wordpress website.

Figure 28

Brief instructions on-

How the website is secured
How users will be provided secure access to website

How the website is secured:

The Website has a registration page where the user can request the admin for an account. There is no way for any user to create an ID without the permission of the Administrator. This by itself is the biggest check to prevent the intrusion attempts. The administrator has set strong password policies for the root account and for the user accounts.

The Wordpress Hosting service provides an inbuilt firewall which keeps out most of the unnecessary traffic and ensures scalability along with the security apparatus. Therefore, the identity of the users and the administrator is safe.

How users will be provided secure access to website:

This will be done by the Administrator creating a new user ID for the user to enter. Follow the steps to do it. (Balkhi) (WPBeginner-Wordpress-Tutorials)

Search for a user registration plug-in and download it.

Figure 29

Go to the General settings under the user registration tab (in left menu) and review the default settings.

Figure 30

The Admin is the default user. Click on “Add new” on top to add a new user.

Figure 31

Set username, their email ID (for password reset), name and password (auto generated). Tick the “send user notification” which sends an email to the user with the creation of the account, where password is encrypted and sent. Confirm and proceed. The

Figure 32

Now the new user is added to the list.

Figure 33

The user has now been able to successfully login to his ID with the credentials provided.

Figure 34

References

Balkhi, S. (n.d.). HOW TO ALLOW USER REGISTRATION ON YOUR WORDPRESS SITE. Retrieved from WPBeginner: https://www.wpbeginner.com/beginners-guide/how-to-allow-user-registration-on-your-wordpress-site/

WPBeginners-WordPress-Tutorials. (n.d.). How to Install a WordPress Plugin (3 Different Methods). Retrieved from YouTube: https://www.youtube.com/watch?v=QXbrdVjWaME&feature=youtu.be

WPBeginner-Wordpress-Tutorials. (n.d.). How to Allow User Registration on Your WordPress Site. Retrieved from YouTube: https://www.youtube.com/watch?v=TuCX5W32Hvg&feature=youtu.be

WPBeginner-WordPress-Tutorials. (n.d.). How to Allow Users to Upload Images in WordPress Comments. Retrieved from YouTube: https://www.youtube.com/watch?v=UGLj3gt65QU&feature=youtu.be

Zen, O. P. (n.d.). How to Install WordPress on AWS. Retrieved from YouTube: https://www.youtube.com/watch?v=4WR7EFFLF04&feature=youtu.be

How to send an Email using Powershell ISE

Vignesh — Tue, 23 Nov 2021 07:38:03 +0000

PowerShell is a tool to carry out Automation Configuration Management. This can be used to automate sending of emails with just an authorisation and a click of few buttons. The task of scripting the email sending should be done on PowerShell ISE.

The cmdlet to send emails is Send-MailMessage.

The Send-MailMessage cmdlet uses the From parameter to specify the message’s sender. The To parameter specifies the message’s recipients. The Cc parameter sends a copy of the message to the specified recipient. The Bcc parameter sends a blind copy of the message. A blind copy is an email address that is hidden from the other recipients. The Subject parameter is the message because the optional Body parameter is not included.

The Credential parameter specifies a domain administrator’s credentials are used to send the message. The UseSsl parameter specifies that Secure Socket Layer (SSL) creates a secure connection.

Simple email

I will be using two of my email IDs to demonstrate this. The simplest program to send an email will be as follows:

Send-MailMessage -To “” -From “” -Subject “Your message subject” -Body “Plain text” -Credential (Get-Credential) -SmtpServer “” -Port 587

The fields can be substituted to add the sender’s and receiver’s email address, the subject and the body of the email. The SMTP credentials can be looked up on the internet. In case of Gmail, it’s smtp.google.com. Port 587 refers to the default submission port which is used when a client or an outgoing server is sending an email to be routed by the proper server. The -Credential (Get-Credential) cmdlet is used to open up a dialog box like this to prompt the authorisation.

Let’s first test the program to send a simple email to my email address

$MyEmail = “_______@gmail.com”

$To = “_______@gmail.com”

$Subject = “This is the automated email”

$Body = “testing”

$Creds = (Get-Credential -Credential “$MyEmail”)

$SMTP= “smtp.gmail.com”

Start-Sleep 1

Send-MailMessage -To $to -From $MyEmail -Subject $Subject -Body $Body -SmtpServer $SMTP -Credential $Creds -UseSsl -Port 587

Before running this block of code, you have to go to the Gmail Account Settings of the Gmail Account, open securities settings and allow access to less secure apps as shown here.

Kindly click on the images, to see a more detailed view of the steps.

Once you run the program, the prompt to carry out the authorisation would be asked for. Type in the Gmail account password and proceed.

Go to the Gmail inbox now and see that the mail has arrived. The subject and body are as it was set to.

Send an email with Attachments

Now, we need to send an attachment. For this the cmdlet used is –Attachment. It attaches the file with the email and sends it to the receiver. Here, I will add the code for attaching the file which I have created just to test.

file = “D:\test.txt”

$att = $file

-Attachments $att

Now, the email has been sent to my inbox with the attachment I uploaded.

Host a simple snake game on your website

Vignesh — Tue, 23 Nov 2021 07:34:10 +0000

You can easily host a simple snake game on your website, using code and a hosting service. You may not know coding or even the names of some programming languages. But, don’t worry. I can help you do it, with code which already exists. All you have to do is, link them & host them. Have a look at mine.

And no, you don’t need any money to do this as well. Sounds cool, right ? Let’s proceed now.

I have used infinityfree.net, to create a free account. I suggest that you sign up there as well, before you start doing this.

There are broadly two things we have to do. Let me walk you through this.

Get the code to run a game and link them properly.
Host it on the internet.

Part One: Getting the Code Ready.

Let’s first get the code. Here, I am using a simple example, so I have taken it from Freecodecamp’s website. It’s from an article written by Fakorede Damilola. He has used Javascript to create the game code.

It’s primarily of 3 components.

1. HTML Part

I have copy-pasted the code here, for your reference.

<h1>Nokia 3310 snake</h1> <div class="scoreDisplay"></div> <div class="grid"></div> <div class="button"> <button class="top">top</button> <button class="bottom">bottom</button> <button class="left">left</button> <button class="right">right</button> </div> <div class="popup"> <button class="playAgain">play Again</button> </div>

2. CSS Part

This is for the styling of the snake and the area in which it moves.

body { background: rgb(212, 211, 211); } .grid { width: 200px; height: 200px; border: 1px solid red; margin: 0 auto; display: flex; flex-wrap: wrap; } .grid div { width: 20px; height: 20px; /\*border:1px black solid; box-sizing:border-box\*/ } .snake { background: blue; } .apple { background: yellow; border-radius: 20px; } .popup { background: rgb(32, 31, 31); width: 100px; height: 100px; position: fixed; top: 100px; left: 100px; display: flex; justify-content: center; align-items: center; }

3. Javascript Part

This is the little tricky side of it. But, read on. It’s not impossible.

I’m copying the whole part of the Javascript here, for your convenience. If you wish to study each code block, it’s better to refer to the article.

let grid = document.querySelector(".grid") let popup = document.querySelector(".popup"); let playAgain = document.querySelector(".playAgain"); let scoreDisplay = document.querySelector(".scoreDisplay") let left = document.querySelector(".left") let bottom = document.querySelector(".bottom") let right = document.querySelector(".right") let up = document.querySelector(".top") let width=10; let currentIndex = 0 let appleIndex=0 let currentSnake=\[2,1,0\] let direction =1 let score = 0 let speed = 0.8 let intervalTime =0 let interval =0 document.addEventListener("DOMContentLoaded",function(){ document.addEventListener("keyup",control) createBoard() startGame() playAgain.addEventListener("click", replay); }) function createBoard(){ popup.style.display = "none"; for(let i=0;i<100;i++){ let div =document.createElement("div") grid.appendChild(div) } } function startGame(){ let squares =document.querySelectorAll(".grid div") randomApple(squares) //random apple direction =1 scoreDisplay.innerHTML=score intervalTime=1000 currentSnake =\[2,1,0\] currentIndex = 0 currentSnake.forEach(index=>squares\[index\].classList.add("snake")) interval = setInterval(moveOutcome,intervalTime) } function moveOutcome (){ let squares =document.querySelectorAll(".grid div") if(checkForHits(squares)){ alert("you hit something") popup.style.display="flex" return clearInterval(interval) }else{ moveSnake(squares) } } function moveSnake(squares){ let tail = currentSnake.pop() squares\[tail\].classList.remove("snake") currentSnake.unshift(currentSnake\[0\]+direction) // movement ends here eatApple(squares,tail) squares\[currentSnake\[0\]\].classList.add("snake") } function checkForHits(squares){ if( (currentSnake\[0\] + width >=(width\*width) && direction === width) || (currentSnake\[0\] % width ===width -1 && direction ===1) || (currentSnake\[0\] % width === 0 && direction === -1) || (currentSnake\[0\] - width <= 0 && direction === -width) || squares\[currentSnake\[0\] + direction\].classList.contains("snake") ){ return true }else{ return false } } function eatApple(squares,tail){ if(squares\[currentSnake\[0\]\].classList.contains("apple")){ squares\[currentSnake\[0\]\].classList.remove("apple") squares\[tail\].classList.add("snake") currentSnake.push(tail) randomApple(squares) score++ scoreDisplay.textContent = score clearInterval(interval) intervalTime = intervalTime \*speed interval = setInterval(moveOutcome,intervalTime) } } function randomApple(squares){ do{ appleIndex =Math.floor(Math.random() \* squares.length) }while(squares\[appleIndex\].classList.contains("snake")) squares\[appleIndex\].classList.add("apple") } function control(e){ if (e.keycode===39){ direction = 1 // right }else if (e.keycode===38){ direction = -width //if we press the up arrow, the snake will go ten divs up }else if (e.keycode===37){ direction = -1 // left, the snake will go left one div }else if (e.keycode===40){ direction = +width // down the snake head will instantly appear 10 divs below from the current div } } up.addEventListener("click",()=>direction= -width ) bottom.addEventListener("click",()=>direction= +width ) left.addEventListener("click",()=>direction= -1 ) right.addEventListener("click",()=>direction= 1 ) function replay() { grid.innerHTML="" createBoard() startGame() popup.style.display = "none"; }

Now, you have got the 3 code blocks from the article. But, do you know how it must be used? This is where I’m going to teach you how to use code and link them, so that a program works !

Step 1

Copy the HTML code into a notepad file. Like this. You can alternatively use Visual Studio too, it works fine for writing the code.

Step 2

Add a tag above the HTML Code you entered, previously. Inside that, add tags.

Now, copy the CSS code in between the tags. Like this.

It must be like this, above the HTML code you pasted. I have highlighted the portion where the HTML code begins.

Step 3

Now let’s add the Javascript part into this file. Go to the end of the HTML Script you wrote. It ends at . Create a tag and then copy paste the Javascript code in between the tag. Here is an illustration. I have selected the HTML code, to make it clearer, for you.

Now, save this file with any name of your choice and add a “.html” extension to it. Do not save it as a text file. Try to open it in your machine, to test if it works. This is how your screen will be. I added my name to the code, hence it shows up.

You can add your’s too, by editing the HTML code.

Part Two: Hosting the Code.

Now that the code is ready, let’s host it. Go to infinityfree.net and login to the account you created.

Click on the Create Account button as shown in the picture below.

Select a domain name and its extension, which is unique. Proceed.

Create a password for it and Proceed.

Now, this is the screen you will see.

Let’s get back to it. Click on the File Manager, to open it. Like this:

This is what you’ll see. Open the htdocs folder and upload your .HTML file into it. It was the one we created in Part One. Ensure that it’s named as . Or the game may not load from the link.

Go to the link you made on your infinityfree.net account and access the game. You can modify the file contents any time and update the file in your account.

Hope this article helped you understand hosting of code.

Stage, Commit and Push Changes to Github Repositories in Atom without commands

Vignesh — Tue, 23 Nov 2021 04:21:22 +0000

Context: I recently switched to Atom Editor as I faced some problems with VS Code and did not have time to figure it out, then.

Install the Atom Editor from their official website.

Open it and work on your code that's already cloned from a remote repository.

Save your work with Ctrl+S or Save.

Click on Git which is on the bottom right side, as shown in the image.

This is how your work will be seen, currently. It's unstaged. You can see this on the right side of this image.

It will also show you the changes to the file that you have made. Click enter to stage it.

Now, the changes would move to the staged area, on the right side.

Enter your commit message before you commit by clicking on Commit to Master.

Now, your code would have got committed.

Click on this Push button to push the code to your remote repository.

Once it's pushed, you'll see Fetch instead of Pull.

If you'd want to push the changes to a different branch, click on master as shown in this image.

In case you don't have a branch named master, any other branch may show up there. You can change it from the drop-down menu shown above it.

Github Submodules and how you can use them for your Projects

Vignesh — Sat, 20 Nov 2021 15:02:41 +0000

Introduction

Before we get into the crux of Github submodules, let me give you some context. I'm writing this article on Day 9th of my #100DaysofCode challenge. I'm working my way through freeCodeCamp's Fronted certifications and building a portfolio website on the side. I also participated in the #Hacktoberfest, last month.

I document my progress in freeCodeCamp by saving the important answers in this repositary. But, I faced a challenge while updating my progress in the #100DaysofCode log file Repo.

It was cumbersome to handle both these Repos as they needed to be updated daily, to keep track of my progress. Then I created a lot of other Repos too, to document solutions to smaller problems that I solved. Mostly in CSS games as I was learning CSS in freeCodeCamp back then.

I also needed to find a way to map these Repos into my #100DaysofCode log Repo as proof. You could say that I can easily add the link of those Repos to my Markdown log file. But, I felt that would become a daily chore as I keep increasing the number of folders for each section or topic.

Yesterday, I moved a few of these Repos to my #100DaysofCode Repo and tried to commit it. But, the terminal threw this message.

This is how I stumbled upon GitHub submodules.

Github Submodules

When you're working on a project, you may have to use another project within it. In my case, I owned all the Repos I used. But, it need not be like that always. You may sometimes be using a 3rd party's Repo for your work. Sometimes, one Repo may be needed for many Projects. In any of these cases, you will have to rely on Github Submodules.

Git submodules allow you to Repo as a subdirectory or a folder within another Repo. Let's now see how we can add Submodules without making such an error as I made before.

The usual command to clone a repo is like this:

git clone https://github.com/uName/repoName.git

But this won't make it a submodule. It'll remain as a standalone Repository. Now, this is not how we add a Submodule in another Repository. The command to clone it is:

git submodule add https://github.com/uName/repoName.git

Once this has been completed successfully, try running git status to see what are the new files added. You'll see this.

You can see 2 things here, one the submodule Repo and then a file named .gitmodules. It's similar to the .git folder that's hidden and you may not see it unless you enable "show hidden files".

Let's check .gitmodules.

Here, you can see the details of the submodule. This is the file that tells Git about your submodule. Now you can work on your Repo or the submodule Repo and commit it to Github.

This is how my submodules appear in the Parent Repo.

It lets you click the folders and leads you to the submodule Repos directly. The @ xyz123 value after the submodule Repos show the last commit of the submodule/child Repo that's present in the Parent Repo's submodule.

Working on Submodules and keeping them updated within the Parent Repository

Now let me make some changes to both these submodule/child Repos and commit them. But this won't change the @ xyz123 values with the folder names in the Parent Repo. They'll remain constant like this:

Now, if you need the updated version of the child Repo within your Parent Repo, you must add these changes from the root of the parent Repo. It'll show up like this:

Once you commit and push the changes, the changes are reflected in the Parent Repo. You can see the difference in the commit numbers in this picture.

Conclusion

Github Submodules are a very vast topic and this article is just to help you get started with it. There is a lot more to explore here.

You can read more from the official documentation, here.

github #100DaysOfCode #Submodules #git

Configuring Github's Personal Access Token to Make Code Pushes Easier

Vignesh — Sat, 20 Nov 2021 15:01:20 +0000

Before you start reading, this is an article that will teach you how to configure Github's Personal Access Token so that you need not have to copy-paste the Token each time you push code to remote.

Problem and Research

Recently I faced an issue with git push on VS Code.

I rechecked my VS Code terminal to see if I was still logged into git and confirmed I was.

Unsuccessful Attempts to Solve it

I immediately tried a Google search for the error remote: no anonymous write access. I could see that there were a few issues on VS Code's Github Repo regarding this issue.

The discussion looked like there was some issue or bug with VS Code's latest version 1.62.2 that stopped users from pushing their code in the traditional way of git push origin branch-name. One suggestion was to downgrade the VS Code's version to 1.62.0 and try pushing the code.

But, that did not work for me.

Introspection and More Research

I was aware that Github's Personal Access Tokens could be used to push changes from the terminal. It looked like a cumbersome process.

Entering my GitHub user name and PAT (Personal Access Token) as the password for each push would make the code-commit-push process much difficult.

GitHub stopped accepting passwords through the terminal, since August 2021.

This would make it much harder for developers to push the commits to remote.

After talking with a mentor , I understood that it was not an issue with VS Code but, with the authentication during the push.

He also said that he used the PAT to push the changes.

Now my goal was to google PAT and see if there was any way to authenticate my pushes without having to enter the Personal Access Token for each push.

Solution

I read through GitHub Documentation, Stackoverflow and Ask Ubuntu. I also did some small trials using the PAT, to arrive at a solution.

The gist of this solution is that each Repo I was working on had to be authenticated with the PAT so that the pushes could be done seamlessly.

Adding the PAT to the Repositories

Generate a Personal Access Token, if you don't have one. Read this document to understand how it can be generated.

Once you have saved your PAT, it must be added to the Repos on your local machine.

Open the VS Code Terminal from the Repo you want to add the PAT to.

Enter git remote set-url origin https://yourPAT@github.com/yourGitUserName/yourGitRepo.git.

Note: It's not a double-line command. **Do not* hit enter after origin.*

Now you can commit and push without having to enter the Personal Access Token every time you push your commits to remote.

Conclusion

This approach saves time and does not compromise security. Feel free to write to me if you have better suggestions on how this can be solved. My contact details are available on my Profile.

DEV Community: Vignesh

Open Source and 100 Days of Code: Week 1 Update

Prologue

Learning 0.0

New Innings

Learning 1.0

An idea for a new Open Source Project

Resources:

Lessons For Newbie Developers from The War of Art

1. Beating resistance is not difficult but boring.

2. Understand that everyone struggles with resistance

3. It's not a one-day battle

4. The best opportunity is most likely one step ahead of your worst setback

5. Do not Rationalize.

6. Put yourself out there and cut through criticism

7. The path to mastery is alone at first but not always

8. Fall down if you must but once. Not more than that.

WordPress website hosting using AWS

References

How to send an Email using Powershell ISE

Simple email

Send an email with Attachments

Host a simple snake game on your website

Part One: Getting the Code Ready.

1. HTML Part

2. CSS Part

3. Javascript Part

Step 1

Step 2

Step 3

Part Two: Hosting the Code.

Stage, Commit and Push Changes to Github Repositories in Atom without commands

Github Submodules and how you can use them for your Projects

Introduction

Github Submodules

Working on Submodules and keeping them updated within the Parent Repository

Conclusion

github #100DaysOfCode #Submodules #git

Configuring Github's Personal Access Token to Make Code Pushes Easier

Problem and Research

Unsuccessful Attempts to Solve it

Introspection and More Research

Solution

Adding the PAT to the Repositories

Conclusion

1. Beating `resistance` is not difficult but boring.

2. Understand that everyone struggles with `resistance`