DEV Community: Mal

How to set up your SSH key and link to GitHub

Mal — Tue, 18 Oct 2022 21:24:30 +0000

Linking SSH Key to GitHub or GitLab

Hey beginner coders! Linking your SSH key to GitHub or GitLab is ESSENTIAL to updating your repositories. Let's jump into it.

Generating your SSH Key on Mac OS

If you already have an SSH key, skip to the next section (type ls -al ~/.ssh in your terminal to see if you have any ssh keys. Your ssh key will end in .pub).

ssh-keygen -t ed25519 -C "your_email"
The terminal will prompt you to enter a file "in which to save the key". Select "Enter".
The terminal will prompt you to enter a passcode. Choose a passphrase of your choice and enter. Make sure to note this passphrase in a secure location.

Add SSH key to SSH agent on Mac OS

If you've already done this previously, skip to "Linking Your SSH Key to GitHub".

In your terminal type the following:

sudo -s -H OR exec ssh-agent bash OR exec ssh-agent zsh (this depends on your environment)
eval "$(ssh-agent -s)"
$ ssh-add --apple-use-keychain ~/.ssh/id_ed0000

Linking Your SSH Key to GitHub

Log into your GitHub/GitLab account
Navigate to "Settings" than "SSH keys"
Select "New SSH key"
Create a title for your key
Paste your public key
Click "Add SSH key" ___

What is your public key?

Type cat ~/.ssh/id_ed00000.pub OR the name of your respective key (find file name using ls -al ~/.ssh)

The terminal will return something that looks like ssh-ed... long_string_of_letters_and_numbers your_email.

Copy the ssh-... and the long_string_of_letters_and_numbers ONLY into the public key box on GitHub.

That's it! You're ready to pull and push changes to your repo.

QUESTION FOR EXPERIENCED CODERS!

How many SSH keys do you have? Do you make a new SSH key for every repository? Do you use the same SSH key for all work related projects? How many SSH keys do you recommend generating? Let me know in the comments.

Any tips that I missed? Let me know!

Sincerely, a beginner developer.

Resources: UC Berkeley Coding Boot Camp and GitHub.

HTML Elements 101

Mal — Wed, 12 Oct 2022 04:52:22 +0000

Everything You Need to Know About HTML Elements as a Complete Beginner

There's a lot to remember when you're creating your first website from scratch.

HTML, an acronym for "Hypertext Markup Language" provides the structure or "skeleton" for a website.

It tells the browser what the website is about, what text to show on your display, and where the text should go on your screen. I've put together this cheat sheet of basic HTML elements so you can start coding your first website today!

After practicing HTML text on your own you'll have these elements committed to memory in no time.

What is an element?

An element is a label that communicates what type of content to display.

Types of elements and examples include:

Text elements <p>
Image elements <img>
Heading elements <h1>, <h2>, <h3>Insert text here</h3>
Head elements <head>
Body elements <body>
Title elements <title>Insert text here</title>
List elements (Ordered and unordered) <li>insert one list item</li>
Section elements <section class="card" id="name-section" />
Metadata elements <meta charset="UTF-8" /> (read more about metadata below)
Style element <style>
Base element <base>

An element starts with an "opening tag" signaled by <, then the element label (i.e. head), and ends with a "closing tag" signaled by a > (i.e. <head>).

Information related to the element goes after the element tag and is followed by a set of angle brackets with a slash </>.

Let's practice! What code would you write to display a main heading that says "HTML basics 101"?.

Hint: The element label for a main heading is <h1>.
Write or type what you think an HTML line of code for a header should look like.

Your code should look like <h1>HTML basics 101</h1>.

Now that we've practiced let's set up your first HTML line of code.

How do I get started?

Before coding anything else in HTML, type in <!DOCTYPE html> to establish that HTML is the language you're using.

Note: The !DOCTYPE is not case sensitive but HTML as a language is case sensitive.

Your first line of code should look something like this.

Next steps

Your second line of code defines what spoken language the website is written in.

For example, if you would like to use English text on your website your code would look like <html lang="en">.
If you would like to write and display French text in your website try <html lang="fr">.

Here's what our HTML file looks like at this point.

What goes in the `<head>` element?

The head element communicates with your browser what to expect on your web page and helps users find your web page.

So what goes within the head element?

Metadata
Title
Style sheets (CSS)
Scripts (JS)
Templates

What is metadata?

Metadata is information that includes information about the website. Metadata is not visible to users.

For example, one type of metadata is keywords. Keywords are used to summarize the topic of your website page and improve search engine optimization (SEO).

In code this looks like <meta keywords="html,beginners,web development"> </meta>

Another meta element is <title> which names the tab of your website.

What goes in the body element?

The body element contains what the user will see when they access your web page. This is the "meat" of your website.

Examples of body elements:

Sections <section>
Headings <header>
Paragraphs <p>
Ordered lists <ol>
Unordered lists <ul>
Images <img>
Breaks <br>
Dividers <div>

The most important elements here will be your text, sections, headers, and dividers to organize your words.

Add a heading

Start the body section with <h1> to title the website. Only use h1 once on your entire website. You can use h2, h3, etc for as many times as needed on your website.

Here's an example of what your code could look like.

Deep dive into everything about HTML body elements here.

Play around with what you've learned and add some elements and text to your website.

SHORT CUT!

Now that we've reviewed the basic elements of HTML I can give you the short cut.

Create a blank new HTML file and type "!" into the first line. It will automatically populate a basic outline for your HTML code!

How to view your website from VS Code

Assuming you are editing your HTML file in VS code you can see what it looks like in action by doing the following.

Hover over the title of your file and right click.
Select "Open in Default Browser".

Have fun making your website! You'll learn through trial and error. Here's a simple example of an HTML file with some basic body elements.

That's it!

Want to learn more about HTML Elements? Check out MDN's full list of HTML elements and what each element does.

Resources

UCB full-stack development boot camp lessons and MDN web docs

Did you notice any errors in my code? Let me know in the comments (respectfully)!

How to take notes like a developer: Breaking poor note-taking habits from university

Mal — Tue, 13 Sep 2022 21:23:12 +0000

Bad Habits

It's been over a year since I finished university but there are some bad habits I need to break.

I spent most of my time as an undergraduate student learning in a classroom setting. The professor stood at the front of the room, clicked through a wordy PowerPoint Presentation, and expected students to write everything down and remember it for a test.

Does this sound familiar to you?

My old note-taking "strategy"

I would furiously take notes and try to capture every word onto my paper. After the lecture or textbook reading I would review the notes and create Quizlet cards or a google doc summary to study from.

I was aware that this was a poor note taking strategy, but I did well in my classes and had no motivation to change my habits.

The truth is plain and simple. This strategy is ineffective for long term memory. It wastes time and attention on irrelevant concepts and distracts from key takeaways.

I have trouble remembering most of the fact-based information in college. All those definitions, terms, and case studies I memorized have evaporated from my mind...

(Thankfully I held onto the practical lessons I learned from my 3 years in neuroscience and psychology research labs which translated well to my job as a research associate and then a research project manager at a tech company - but thats besides the point).

I will not make the same mistake again.

Time for Change

It's time to completely reset how I learn and how I take notes.

Instead of focusing on capturing all information while it's thrown at me, I plan to limit what I put down on paper and focus on the bigger picture during lessons.

I will remember what I learn in my full-stack development bootcamp and take it with me as I become a developer.

So how will I do this? Here's my new strategy.

Note-taking strategy for assigned readings

This strategy is subject to change as I complete the coding bootcamp and discover what works best.

Read once through without taking any notes.
Take 5-10 minutes to write down the most important concepts from memory.
Skim the article and take notes on key information (No need to write everything down).
Practice key problems or translate the concepts to a real world example.
Convert notes into digestable blog posts here on Dev.to!

What do you think of this note taking strategy for readings? What methods do you use to accurately capture key concepts during a reading?

Comment your thoughts so we can become better learners together.

Note-taking strategy for lectures

This strategy is subject to change as I complete the coding bootcamp and discover what works best.

Listen to professor and prioritize understanding material over writing everything down. Only take notes on key concepts during class.
Practice new material on real-world problems (luckily, these are built into the coding boot camp)
Review provided materials to take notes on useful pipelines, commands, or terms. Write a post on Dev.to to summarize big concepts.
Apply concepts to class projects and personal projects.
Connect weekly with cohort/mentors/developer community to ask questions and dive deeper into new material.

How do you take notes in your computer science or coding classes? What methods have you found most effective? Comment your note-taking strategies!

It's not easy to change habits. This new strategy will be difficult - but it is worth it for the outcome. I will remember what I learn in bootcamp and take it with me as I become a developer.

Follow me here on Dev.to for weekly posts summarizing key concepts learned in my full-stack development bootcamp. We can help each other learn and break these old bad habits.

GitHub Workflow 101

Mal — Wed, 07 Sep 2022 03:11:12 +0000

How to fix bugs or add features on personal branch and then merge with main branch successfully

The GitHub workflow is how developers add features to code and test them without disrupting the main branch. It is important to memorize this process since developers use it frequently. By the end of my coding bootcamp I will know these commands in my sleep!

Instructions for MacOS terminal

Use git status in MacOS terminal to check which branch you are operating in
Returns:
On branch main
Your branch is up to date with 'origin/main'.
Create a new branch with git checkout -b prefix/description
Returns: Switched to a new branch 'prefix/description'
Verify you are in the correct branch with git status
Returns: On branch prefix/description
Add code changes to personal branch git add -A
Create commit and describe changes git commit -m "enter description"
Double check that your branch is updated with most recent version with git pull origin main
Push changes from local branch to remote branch with git push origin prefix/description
Create a pull request

Open GitHub repo in browser
Select Compare and pull request (green)
Add descriptive title and comment about changes
Select Create pull request (green)
Once pull request has been approved by teammates

LAST STEPS!

Confirm there are no conflicts with main and personal branch
Merge Pull Request
Delete personal branch
Open MacOS Terminal
git checkout main to switch back to main branch
git pull origin main to update merge on local device

That's it!

These are the basic commands to create a new branch, make changes to code, push changes to remote branch, create a pull request, and merge with main branch. You will use these daily as a developer

DEV Community: Mal

How to set up your SSH key and link to GitHub

Linking SSH Key to GitHub or GitLab

Generating your SSH Key on Mac OS

Add SSH key to SSH agent on Mac OS

Linking Your SSH Key to GitHub

What is your public key?

QUESTION FOR EXPERIENCED CODERS!

HTML Elements 101

Everything You Need to Know About HTML Elements as a Complete Beginner

What is an element?

How do I get started?

Next steps

What goes in the <head> element?

What is metadata?

What goes in the body element?

Add a heading

SHORT CUT!

How to view your website from VS Code

That's it!

Resources

How to take notes like a developer: Breaking poor note-taking habits from university

Bad Habits

My old note-taking "strategy"

Time for Change

Note-taking strategy for assigned readings

Note-taking strategy for lectures

GitHub Workflow 101

How to fix bugs or add features on personal branch and then merge with main branch successfully

Instructions for MacOS terminal

LAST STEPS!

That's it!

What goes in the `<head>` element?