DEV Community: 🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡

My UX Design experience

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Thu, 19 Oct 2023 10:38:37 +0000

"UX designer, UI designer, Product designer… What is the difference?"

This was my question when I heard for the first time about these roles. I thought they were somehow related to the look and feel of a website or an app. I was quite far from the right definition. In fact, a UX designer takes care of designing a great digital product experience on apps or websites.

Design is not just what it looks and feels like. Design is how it works,
Steve Jobs

It is a simple definition with a complex process behind the scenes though. In order to create a user-friendly experience, a UX designer needs to understand the users needs and interests (expectations), awake their emotions (product experience) and make them come back (memory) This requires finding answers to a lot of questions: who, what, when, where, why, how and everything that has to do with the user interaction with the product. Ah! and without forgetting about the business goals, of course!

This complex and complete process catched my attention. I have always worked on digital marketing focused on user acquisition but also on market research, as it is crucial not only to get to know potential customers but also competitors.

With my marketing and frontend development knowledge, I thought that learning UX design would give me the extra piece I needed to get a complete picture of the whole process: from understanding users needs, motivations and goals through the product creation till the final promotion and testing.

What did I learn?

During the certified UX program I did, I went through a good combination of theoretical concepts and practical challenges. The goal was having a portfolio by the end of the program with my first project focused on a fictitious city website for tourists. This project was meant to go through the UX design phases: analysis, strategy, architecture, interaction and aesthetics.

Although the project's main focus was creating a website with a user-friendly experience, it also touched some UI concepts at the last stage. As mentioned before, a UX and a UI designer are not the same roles. While a UX designer mainly focuses on a product's functionality, a UI designer cares about the aesthetics of the product (visual design elements like colors, icons, shapes, typography, transitions, etc.)

Having a mentor was another important part of the UX program. Recurring 1:1 talks were very useful to discuss the project, get feedback from an experienced UX designer and make me question, rethink and improve my project.

If you are considering learning more or becoming a UX designer, you might be wondering what are the necessary skills. A good UX designer should be a:

Good listener
Good communicator
Empathetic
Team player
Analytical thinker
Detail-oriented & problem solver
Curious & life long learner

A roller coaster career path

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Tue, 19 Sep 2023 14:45:21 +0000

Once upon a time I was a journalism and psychology enthusiast and when I had to decide what to study, I went for something that combined both: advertising and public relations. I thought it would be a good mix of creativity, analysis and problem-solving and luckily, I was right.

I could define my bachelor as multidisciplinary. My subjects went from History, Economics and Law to Psychology, Sociology, Art and Communication Technologies. I was quite happy with my studies but life changes and when I finished my studies a huge economic crisis started and the job market situation was simply non-existent.

I emigrated to look for any opportunity within the communication field. A foreign country, a new language to learn on-the-go. It was very tough but I managed to find some opportunities, where surprisingly, my tasks were completely different from what I expected. The digital era was transforming the whole industry and what I once studied (traditional offline marketing) was evolving into digital marketing.

In the beginning I was frustrated because I had the feeling that everything I learnt at the university had vanished all of a sudden. But what to do? I adapted to the circumstances of the digital world and learnt from scratch again.

Since then, I have never stopped learning. I have gone through SEO, paid user acquisition, data attribution models, performance analysis, content creation,market and user research, brand promotion, digital marketing strategy conception, conversion rate optimization, marketing tech implementation, etc. All of them were a good combination of the things that I pursued in the past: creativity, analysis and problem-solving but with the need of being constantly up-to-date. What I knew one day was totally outdated a couple of months later.

The initial frustrating feeling suddenly turned into a personal challenge. Whenever I learn something new, I see opportunities for my personal growth. I have always been a curious person and learning new things is not only a way to step out of my comfort zone but also a motivation. Nevertheless, this digital era is transforming everything so fast that one needs to choose where to put the focus on to not get overwhelmed.

A few years ago I decided to dig into frontend development. In my different jobs I sometimes had to work with software developers and data engineers and this close contact awoke my curiosity for programming. I started to learn by myself, built my first projects and finally I joined The Collab Lab, where I built a React project in a team. It was a good experience to understand how collaboration and communication work in frontend development when working in a team.

After my first programming steps, I got curious about UX design because I think it is somehow the glue that joins marketing and frontend development. I went through a certified UX program that combined theory with a lot of practical exercises. At the end of the course I created my portfolio with a project about a fictitious city website for tourists. It was an experience that helped me get a theoretical and practical picture of all different UX design phases: user research, analysis, product strategies, requirements and planning, content, structures, processes, information architecture, interaction, user interface design and testing.

"Intellectual growth should commence at birth and cease only at death", Albert Einstein

What a roller coaster! The frustrating feelings at the beginning of my career are fortunately gone as I have learnt to deal with uncertainty and constant transformation. It hasn't been easy but being curious and the hunger for learning have made me feel self-fulfilled, more confident and less dependent. This can of course open you more doors professionally speaking, but in my case it has a rewarding feeling. It is a personal motivation.

What about you? Are you also going through a roller coaster career path? Any learning plans on the horizon?

My dev experience at The Collab Lab

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Mon, 06 Mar 2023 17:31:30 +0000

As a self-taught developer, there are 2 things that I always missed during my learning journey: building projects in a team and getting feedback. I thought that both things could help me improve my coding skills much faster so I started to look for any kind of experience or community that could provide me that. And one day I luckily came across The Collab Lab.

The Collab Lab is a place to collaborate in a group project remotely with other early-career developers. It was a great opportunity for me as I did not only have the chance to gain practical experience on a real project but I could also get immediate feedback and support from professional developers.

I was extremely excited when I got offered a spot! It would be my first and closest experience to a real developer job: I would be working for 8 weeks on a project within a team of 3 other developers and the support and guidance of 3 mentors.

What does a week look like at the Collab Lab?

Our main goal was to build a smart shopping list app. The tasks were split into 13 issues. We started solving the functionality issues and finished with the design/styling part.

Every week I was paired with a colleague to work on an issue. This was a great experience as I had the chance to do my first pair programming sessions with 3 different collabies for 8 weeks.

After solving the assigned issue, we did not only have to submit a PR (pull request) but also do a code review of our collabies task and receive a code review from them and our mentors. At the end of the week we had an online sync all together to demo our tasks, go through a learning module and do a retrospective.

What did I learn?

In terms of coding skills, I did not only learn a lot about ReactJS (I had previous experience but it helped me refresh some concepts again and learn new ones), but also about other technologies I had no experience with, like Firebase (collections, local storage, etc.), Tailwind CSS and Git.

The Collab Lab experience helped me specially improve my Git skills. As I had previously worked alone on my own projects, I only knew the basic git commands to push my changes to GitHub. This time I had to use all necessary git commands when working on a team project to create a new branch, pull, push, merge, etc. And because mistakes happen on the way and are part of the learning journey, I faced situations where I had to learn commands that I never thought I would use, like git rebase and git rebase interactive.

Regarding non-coding skills, The Collab Lab was an amazing experience that also helped me grow my communication skills. On the one hand, writing was very important (submit well explained PRs, asking the right questions or suggesting code ideas on the code reviews, writing understandable commit descriptions, etc.) On the other hand, oral communication was equally important (sharing ideas during pair programming sessions, doing weekly demos explaining your code and problem-solving approach, etc.)

What I found great of the whole experience was the combination of technical and soft skills. In both situations I often felt challenged and had to step out of my comfort zone.

There were **tough tasks, frustrating and self-doubting moments **where my collabies and I felt we wouldn't manage to find a solution but this is always part of the learning path. Instead of panicking, taking breaks and not being afraid of asking for help were very useful to beat imposter syndrome. Our mentors were a big support in this sense.

What would The Collab Lab be without its amazing mentors? They were not only our 8 weeks support, but they also shared their expertise with very insightful learning modules (about technical writing, accessibility, pair programming, code reviews, devs communication, etc.) and retrospectives.

Retrospectives were a very important team exercise, which consisted of reviewing performance of the previous weeks. This allowed us not only to share feedback on how to improve the collaboration workflow but also to praise the whole team. For example, in the beginning pairing sessions worked quite well although there was still room for improvement (deliver a task faster, ask questions earlier, write better PRs, solve merging conflicts, etc.).

Nevertheless, every feedback was a new opportunity to learn. For example, there was one occasion during the last two weeks, where everybody was a bit tired and sick, so I decided to jump in and prepare a Wireframe proposing some design ideas to make the whole process a bit faster and easier. I also split the design issue into smaller and more digestible issues so that we could split the tasks between us. This helped finish the project faster.

After 8 weeks, my team and I built the amazing Shoppr. app and wrote a recap about the work process and our experiences. Check it out here.

Next steps: The Career Lab

The project was over so what's next? The Collab Lab also offers an optional 2 week program that helps rock the interview process. I decided to participate and had the opportunity to:

get great tips to update my Linkedin profile and get it reviewed by a mentor.
assist to a Q&A session with a technical recruiter.
watch two mentors practising a team fit and a technical interview.
work on a take-home-assignment and present it at a technical mock interview.
practise a job fit mock interview.

After this amazing experience and as a self-taught developer, I can only recommend anyone to participate in The Collab Lab or any similar group project. Transitioning into a new career is tough and when you do it alone, it can be very scary. Learning to code can be a more gratifying, fun and less frustrating experience when you have others alongside you. The Collab Lab can also help you find out what you are good at or you like the most (frontend development, accessibility, technical writing, UX-UI design, project management, etc.) So what are you waiting for?

Accessibility: what, why and how?

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Wed, 01 Mar 2023 07:57:21 +0000

If you are learning to code, you will come up against the concept of accessibility at some point, which is very important to take into consideration when building your World Wide Web project.

What?

Accessibility is a crucial task (specially for designers and developers), who need to make sure that everybody can access sites information and functionality equally.

You will often find accessibility written as the acronym a11y. The number 11 simply represents the letter count between a and y.

Why?

Have you ever thought about how people with physical disabilities, situational disabilities and socioeconomic restrictions on bandwidth and speed access websites? By using assistive technologies like screen readers, screen magnifiers, speech input, assistive keyboards and braille displays.

Let's have a look at some facts about how internet behaviors are changing overtime and how important accessibility becomes in this matter:

Two thirds of the global population are internet users. China, India and the US are the countries with the largest digital population.
Around 60% of the US population with disabilities live in a household with internet access.
WebAIM conducted an accessibility evaluation of the top 1.000.000 websites in 2022 and detected around 51 million accessibility errors. An average of 50.8 errors per home page.

How?

What can we do to make the World Wide Web more accessible to everyone? We can adapt our websites according to the accessibility guidelines maintained by W3C. The accessibility rules are called ARIA (Accessible Rich Internet Applications), which collect the main practices. For example, some of them are:

👀 Use semantic HTML elements (header, article, section, footer, etc.), which offer more context and have a more specific meaning about the tags content, unlike non semantic HTML elements (div, span, etc.)

🖼️ Include alt attributes on the image tags: img src=”#” alt=”The Guernica painting”.

🧑‍🎨 Use ARIA attributes, if necessary, which provide more context about a website's content: aria-label=”Artist”>Pablo Picasso.

🎨 Use sufficient color contrast.

⚙️ Don't use only color to signify state, as it is very hard to imagine for people who suffer from a color vision deficiency.

⌨️ Make your website's content reachable via keyboard.

Aren't you sure if your web content is accessible? Check these online tools to evaluate if your website meets accessibility guidelines.

How to get the most out of a code review

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Wed, 15 Feb 2023 11:04:43 +0000

During my time as a self-taught developer, one of the things that I always missed was interaction: someone I could discuss certain coding doubts with and someone who could give me feedback about my projects. My learning journey started to move much faster when I decided to get a mentor and participate at The Collab Lab, where I built an app in a team for 8 weeks.

This was my first coding experience collaborating with other developers in the same project and one of the things that helped me improve my coding and communication skills was not only pair programming but also doing code reviews.

We were a team of 4 developers and 3 mentors. Each week, 2 developers would pair to work on a task. By the end of the week the goal was not only having the task solved but also reviewing our colleague’s code.

We would start analyzing the task individually and doing some pair programming sessions. Once the task was solved, we would write a PR (Pull Request) with the following information:

Description: what kind of issue did we solve? What was the goal?
Link to the related issue
Acceptance criteria: main pain points to be solved
Type of changes: is this a bug fix, a new feature, etc.?
A before and after app preview or a short video showing the new functionality
A link to the app so that others can test it

See a complete PR example here

After that, our task would be reviewed by the other team and we would also start reviewing their task. The whole process would look like this:

What is a code review?

It is an open conversation where everyone has the chance not only to share their knowledge but also to learn from each other.

A code review is also about collaboration: sharing your work and asking questions. It will not only help you become a better developer, but also help your team decentralize knowledge, share responsibility and improve code base quality.

How to get the most out of a code review?

✨ Be kind and empathetic. It is not about criticizing other people's work but helping them improve their code.
✨ Ask questions. It is also a chance for you to learn a different problem solving approach.
✨ Suggest other solutions that can help writing cleaner or more quality code.
✨ Don't focus too much on stylistic changes like “you missed a semicolon or a space here”. There are tools like Prettier for that.
✨ Test the feature locally.
✨ Praise your colleagues!

👀 Don't forget that everyone made an effort to solve the issue (even if the solution is not completely perfect), that you are part of the same team and are working together towards the same goal! 🚀

How pair programming can change your coding experience

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Tue, 07 Feb 2023 09:49:55 +0000

As a self-taught developer, I have mostly spent my time doing online courses, following tutorials, coding and building projects alone. I hardly got any feedback to know if I was learning the right technologies or writing clean code.

This situation changed when I joined The Collab Lab. It was my closest experience to a “real developer job”, as I had the chance to work in a team building an app.

During that time I had several pair programming sessions with 3 different colleagues. So every week two of us would sync remotely (as each of us was located in a different country) to have a discussion about the issue we had to solve.

I like preparing pair programming sessions in advance so the way I proceed was reading the issue in detail, doing some research and noting down some potential solutions to be discussed with my colleague.

How did we do pair programming remotely? We hopped on a video screen share call, where one of us was acting as the driver and the other one as the navigator. What does this exactly mean and what does each of them do?

The driver takes full control of the keyboard and is responsible for writing the necessary code to complete the task. This person will also speak out loud the thinking process behind the code.

The navigator pays attention to the driver's code and offers guidance, suggests new ideas and finds answers to the questions that might be raised during the process.

The driver has a low-level code thinking approach, while the navigator has a bird-eye view on the code.

During pair programming sessions, developers can swap roles so that each of them has the chance to experience both perspectives (two modes of thinking) and learn.

What did I learn from the whole experience?

Be open and eager to learn.
Embrace doubt and possibility.
See another person's problem solving approach opens up your mind/ideas.
Don't be afraid of sharing your ideas or asking questions.
Communication is key to make your code or ideas understandable.
Take breaks when both get stuck.
It is not about teaching nor mentoring, but looking for a solution and growing together.
The driver (seek agreement before proceeding) and navigator (asking, not telling) approach.
Collaboration, team work.

Pair programming has definitely been a much more efficient, enriching and fun experience than all hours I spent coding by myself. If you are a codenewbie, I can only recommend you start with pair programming sessions as soon as possible to learn faster.

What is the Local Storage for?

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Tue, 31 Jan 2023 09:54:29 +0000

The first time I heard about local storage was when I joined The Collab Lab to build an app with other developers. We created “Shoppr.”, a Smart Shopping List app, that learns users' buying habits and helps them remember what they are likely to need on their next trip to the store.

Users can create a shopping list and start entering items. Each time users buy an item, they can mark it as purchased. The app will understand the intervals at which they buy different items over time.

Try it out here!

What does local storage have to do with Shoppr.?

The app preview offers 2 possibilities: users can create a new shopping list or enter a 3 word token to access an existing shopping list. Let's say I am a new user and don't have a token, so I will need to create a new list. What happens when I click on the “create list” button? I get redirected to the “Add Item” screen. But what happens behind the scenes?

One of the technologies involved to create the Shoppr. app is Firebase, a Google platform that provides different services like Cloud Firestore, which helps storing and synching real-time data (in this case, stores tokens and list items)

As soon as I want to create a new list in the Shoppr. app, I automatically get a new token but, where is it? There are 2 ways to find the token: one of them is checking the Firestore Database in Firebase and another one is checking the local storage in the browser dev tools under Application > Local storage.

What is happening here? As you can see, the browser provides something called local storage, which saves data as key-value pairs, in this case my list's 3 word token. These key-value pairs are an object, which we can inspect on the console by typing localStorage. This will display an object with a key (tcl-shopping-list-token) and a value (my token)

Unlike session storage, local storage data doesn't expire. If I close the browser, the local storage will continue storing data, meaning, my shopping list will remain open.

I learnt a lot by building the Shoppr. app. As you see, not everything was about writing code. In order to understand the whole context, it is good to dig into some behind the scenes concepts 😉

Git rebase interactive: the story of a clean repo history

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Fri, 06 Jan 2023 16:24:09 +0000

If you have ever worked on a team project, you probably have some experience with Git, creating branches and making commits.

Working on a branch is a safe way to make changes on the code without affecting the main branch. But what about commits that you regret about?

There would be 2 options to solve that:

Undo the changes you made and pushing them back to your branch.
Using git rebase interactive commit.

In a previous post, I talked about a scary command: git rebase. Scary just because it was new but also very useful. I can say that git rebase interactive is also very useful as it helps keeping a clean repo history.

Let's say that I committed some changes, kept working on a project and now I realized that the changes I did some commits ago were not really necessary. Instead of just undoing the code changes (they would still be visible on my repo's history), I could simply remove that commit as it had never happened. How to do that?

Let's first check my list of commits with the following command:

git log --oneline

All these commits have an ID, a description and are displayed in a bottom-top order. Let's say I am not very proud of the commit with the 07a1629 ID (render list). How can I remove it? I need to select 1 commit before my “failed commit”:

git rebase -i 9e6a8ea

This way I will get a shorter list of commits including the one I want to remove. Now I only need to select the desired commit by placing my cursor on it:

By pressing “d” twice the commit will disappear (this is specific for Vim as text editor):

If by any chance you need to stop git rebase, you can type:

git rebase --abort

Now we only need to save changes with :wqa and push them to our branch with:

git push origin mybranchname --force-with-lease

This command won't overwrite my work on the remote branch.

Git rebase: the scary command

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Fri, 23 Dec 2022 11:04:20 +0000

git init, git branch mybranch, git checkout mybranch, git add, git commit, git push, git pull, git merge… These are the commands I use the most and I honestly thought they would be enough (at least while working for the first time in a collaboration project) But all of a sudden reality hit me (in a good sense) and I had to face it: I couldn't run away from git rebase.

Although it might sound scary because it was an unknown commit for me and I didn't really understand the difference between merge and rebase, practice made me finally learn and understand why it is worth using it.

Git rebase integrates changes from one branch onto another. It is basically like cutting your branch and moving it to the very last commit in main/master. It is an alternative to git merge because it offers a cleaner repo history.

Let's have a look at the following case scenario:

I have a new repository that only contains a README file so far. I want to start working on it so I create a branch: git checkout -b mybranch

I have switched from main to mybranch and want to start creating files but suddenly another colleague pushes some changes into main (an index.html file) If I pull changes from mybranch, Git will inform me that mybranch is “already up to date”:

But of course, if I switch to main and pull the changes, I will see the html file there:

What is happening here? I don't have the latest changes from main because mybranch is behind main. How can I fix this? The scary command is everything I need. I only need to type git rebase main and I will automatically move mybranch on top of main getting the latest updates and voilá: I can see now the index.html file on mybranch.

One lesson learnt, one less problem. What about you? Do you dare putting git rebase into practise?

The Collab Lab TCL-49 Recap

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Thu, 15 Dec 2022 15:00:22 +0000

About the Collab Lab

The Collab Lab is an 8-week coding program for early career developers who want to work on real-world projects with guidance from experienced mentors filled with lots of pair programming, office hours, retrospectives, and code reviews. At the end of every cohort, there is an optional 2-week career lab session for all Collabies to prepare for interviews.

This article recaps the Collab Lab 2022 Q4 cohort for group tcl-49.

Contributors:

Cristina Padilla
Teri Eyenike
Debbie Otuagomah
Victoria Emoka

Mentors:

Golfo Vasiliou
Peter Mbanugo
Patrick Niyogitare

Project goal & work process

During 8 weeks, we worked on building a smart shopping list that learns about the user’s buying habits and helps them remember what to buy next. To create our “Shoppr” app, we used the following technologies: ReactJS, JavaScript, Firebase, Tailwind CSS, and Git. We didn’t only learn and improve our technical skills but also soft skills like communication, (remote) teamwork, and COLLABoration. Additionally, for project management and tracking our work, we used GitHub projects.

Every week we were paired with another collabie to work on an issue, and the pair-programming experience began. Different time zones can sometimes make teamwork a bit tricky, but we organized our schedules and synced to work together on the assigned issue. That way, we could look at the code from different perspectives and learn from our colleagues' problem-solving approaches. Luckily, we also had a weekly session with one of our mentors for potential questions/doubts.

By the end of the week, we didn’t only have our task solved and described on a PR but also had the chance to review our colleagues' code, which was very useful in getting an understanding of how to implement a different feature. The last step was meeting all together (collabies and mentors) to demo our tasks, discuss challenges and successes, suggest improvements during a retrospective, and learn something new with the great learning modules our mentors presented. For example, we learned how to make our app accessible.

Test our app here!

Our Collab Lab experience

My experience at the Collab Lab was highly positive. Before joining, my expectation was to get first contact with how to work on a real project with other developers. Still, I couldn’t have imagined how many other things I would learn on the way: not only technical aspects but also communication, organization, team collaboration, and of course, getting to know amazing people. I am so grateful for this opportunity!
Cristina

Going through The Collab Lab has been an incredible journey. From showing you how to do thorough code reviews to collaborating with brilliant developers and helping you pick up solid best practices, the program has it all. Aside from the technical nitty-gritty, I also learned how to communicate with members of a remote team in a helpful way that keeps everyone in sync and signals varying degrees of capacity. I learned how to work with design constraints and incorporate great feedback into a technical project. My teammates all taught me something new every week. Our mentors were exceptional in how they guided us and were generous with their knowledge. If you’re an early-career developer looking for real-world experience in a mistake-friendly environment, TCL is your best bet!
Debbie

The opportunity to work with fellow developers on a real-world project is gratifying, especially the code reviews and pair programming session with your teammates makes it one of the best ways to see how things work in a modern workplace. The Collab Lab experience will make you more proficient as you get to improve your communication as well as your technical skills. The best recommendation for any early career developer is to join TCL and become a true Collabie
Teri

Written with ❤️ by Teri Eyenike, Debbie Otuagomah & Cristina Padilla

DOM Manipulation: part II

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Wed, 30 Nov 2022 19:18:43 +0000

In a previous article, we talked about DOM selectors, styling, text modifiers and events. Let's focus now on the following DOM concepts:

DOM create & remove elements
DOM classes
DOM attributes

DOM create & remove elements

If we want to add certain elements to our app or website with JavaScript, we can use the following methods:

document.createElement(name of the tag) → creates an HTML element:

document.appendChild() or element.append() → adds an HTML element where we want:

document.insertAdjacentElement(position, element) → adds an HTML element before or after another element, in the position we indicate (afterbegin or beforeend) and using template literals. It is commonly used with lists:

element.remove() → removes an element from the DOM:

DOM classes

JavaScript also allows us to play with classes to show or hide an element in the DOM. The basic methods to add and remove a class or check if an element has a class are:

element.classList.add(“className”)
element.classList.remove(“className”)
element.classList.contains(“className”) → returns a boolean (true or false) whether the class exists or not.

Let's have a look at an easy example and see how to play with classes with JS:

We create the class in CSS with the styling we would like to apply to an HTML element and afterwards we simply add the class to the desired element with element.classList.add(“className”)

Another example to reveal and hide content using classes:

Very similar to the previous concepts is element.classList.toggle("className"), which adds or removes a class depending on whether the class already exists or not. Have a look at the following simple example:

We can also replace a class name with a new one with:

DOM attributes

HTML elements can have attributes like class, id or disabled. In order to manipulate them we can use the following methods:

element.getAttribute(key) → takes an attribute's value:

element.removeAttribute(key) → removes an attribute's value. According to the previous example:

element.setAttribute(key, value) → adds an attribute and gives it a name or value:

element.hasAttribute(key) → checks if an attribute exists and returns a boolean:

Put in practise all DOM concepts that you have learnt with the following fun projects from Freecodecamp!

Find all challenges here.

DOM Manipulation: part I

🧩【ℂ𝕣𝕚𝕤𝕥𝕚𝕟𝕒】💡 — Wed, 02 Nov 2022 19:21:43 +0000

DOM manipulation is one of the fun parts of JavaScript. If you have heard about the DOM but are unsure what it is, keep reading. I promise practical and fun examples! I will go through the following concepts:

DOM selectors
DOM styling
DOM modify text
DOM events

You can think of the DOM (Document Object Model) as a tree that represents the structure of an HTML document. Why as a tree? Because an HTML page contains different tags organized by a certain hierarchy, as you can see below:

The DOM tree contains items called nodes, which can be:

Element Node → node that has an element
Text Node → node that has text

All these nodes are like a big family: there are parent nodes (nodes that have 1 or more children), sibling nodes (nodes that share the same parent node), *child nodes *(nodes that have parent nodes) or *descendent nodes *(nodes that are nested in the tree).

In the previous example, the h1, img and ul are siblings, as they are at the same level and have the same parent (div) The li elements are childnodes of ul.

Thanks to JavaScript we can manipulate the DOM structure, content and styles and have a lot of fun! In order to access the DOM, we can use the variable document.

DOM selectors

There are many different methods to select elements from the DOM like getElementById(), getElementsByClassName() or getElementsByTagName(), but let's focus on the most modern ones:

querySelector(), selects only 1 element from the DOM and returns nulls if it doesn’t find any. Below you can see an example of how to select DOM elements per tag, class and id.

querySelectorAll(), selects several elements returning a Nodelist (a collection of DOM elements).

DOM styling

Once we have the selectors, what can we do with them? We can start with modifying any kind of DOM element, for example its styling by combining the style property and the CSS property (always written in CamelCase: fontSize, backgroundColor, etc.). For example:

In the above example, we would apply a blue background color to the container.

DOM modify text

We can also manipulate the existing content in our HTML with the following tricks:

textContent → returns all content between the html tags like h1, p, div, etc, considering also the styling. It doesn't work with input, select and textarea. In this case we need to use .value.
innerText → returns visible without considering any styling.
innerHTML → returns the content and the styling tags. Not recommended to use due to security risk (it allows the user to manipulate the JS) It is better to use innerText.

DOM events

What happens when a user clicks on a button? If we want anything to happen after the click, we should work with event listeners. This is how we apply an event listener to a button:

We select the button, apply to it an addEventListener that contains 2 pieces of information: the user’s click and the function or action we want to happen.

We can also use addEventListener() to execute an action when a user submits a form: the browser takes the values entered by the user and sends them to the backend. This makes the whole website load again. In order to avoid this we can use the method preventDefault().

There is an alternative to addEventListener, which works the same way but it is applied directly on the HTML document: the onclick() event handler.

Time to practise! Below you can find some projects to go deeper into the previous concepts:

The magic ball
Pass the message
A movie sinopsis