DEV Community: Nadia

My favorite React library of the week: " Yet Another React Lightbox" 💛

Nadia — Fri, 26 Apr 2024 16:43:00 +0000

Hey fellow developers :)

Recently, I've been working on transforming Figma designs into code, a challenge I previously thought - well- it was beyond my skill level. However, with daily practice and gaining valuable knowledge every single day, I've finally decided that I was ready to start this project series 😊

I chose a simple design I received during my Bootcamp, and while I was coding, I felt that I wanted to add some personal touch and try something new. ( But I know that you need to follow a figma design as it is 😅)

My design included an image gallery, so I thought it would be interesting to incorporate a slideshow feature, whenever you click on an image. This led me to discover Yet Another React Lightbox, a fantastic React library that quickly became my favorite tool of the week.💥

What exactly is Yet Another Lightbox? Simply put, it’s a lightweight React component that enables users to showcase images or videos in an elegant and user-friendly way!

🔗Here is the link if you want to know more about it:
https://yet-another-react-lightbox.com/documentation

This library offers a variety of features, such as:
⚙ Keyboard shortcuts for navigation (left/right arrows)
⚙ Touch support for mobile devices
⚙ captions
⚙ Fullscreen mode
⚙ Download feature
⚙ Caption Feature
⚙ Customizable styling to fit your project's look & more!

Lastly, if you are curious about my project, you can check it out here: https://photography-portfolio-psi-rose.vercel.app/

Happy Coding💛!

Strong Portfolio Ideas for Junior Developers 😼

Nadia — Fri, 19 Apr 2024 07:39:47 +0000

Hello! 😺

It's been almost 5 days that I've been reworking my new portfolio in React. Previously I made it very simple with just HTML, CSS, & JavaScript for animations. Now that I am almost done, I was thinking about my future projects and what should I do. I'm still exploring ideas and thought it would be great to share some of my favorite project suggestions with you 💡
As junior developers without work experience, it's essential to have a portfolio that highlights our coding capabilities, creativity, and problem-solving skills. Here my ideas:

1.E-commerce Site 🛍:
A simple online store with product listings, cart functionality, and a checkout page. This project can start very simple and naturally it can evolve even further with integrating user authentication, payment systems etc.

2.Modern UI/UX Website 🎨:
This is something I am actually thinking about very actively. A modern UI/UX website project enables our understanding of layout, typography, color theory, and other essential design principles. Besides that it lets us express our unique style and create a strong personal brand. Also, it is a great way to evolve and step up our creativity by using libraries like Framer Motion.

3.Website Clones 🔍:
Now, that is a challenge😅 By replicating the design and functionality of these well-known sites, I strongly believe that is a valuable experience in understanding complex web applications. Analyzing the user interface, navigation flow, and features of the original website, is a great way to enhance our technical proficiency, attention to detail, and, problem-solving.

4.Premium Landing Page 🎫:

A premium landing page is a standalone web page designed specifically for a marketing or promotional campaign with the goal of driving conversions, such as promoting a product or service, or encouraging users to take a specific action (e.g., sign up, download, purchase).
It is a great way to learn how to use high-quality graphics, professional photography, minimalist layouts, and eye-catching design elements to capture the attention of visitors and guide them toward the desired action.
It is a great opportunity to learn also how to create elements such as social proof (testimonials, reviews), trust indicators (security badges, guarantees) etc.

Now If you think that your passion is more towards Web Applications, some good ideas can include:

1) Weather Application
2) AI-based Application
3) Chat Application
4) Travel Application

And that includes my ideas. If you have any more project ideas or suggestions on building a strong junior developer portfolio, please share them in the comments below, i would be really happy to explore more options! 🎉

Happy Coding! 😸

Simple Browser in VS Code: My Coding Experience just Leveled Up!🙀

Nadia — Fri, 05 Apr 2024 15:07:55 +0000

Hey there! I recently discovered something awesome, and I just had to share it with all. Some of you might say, "You just found out about this now?!" Well, as I always say, "Better late than never!"😅

When I started my coding journey back in November 2023, I didn't even know which extensions to add to VS Code or that I could change themes. But as I've continued to learn, I keep discovering amazing features. One of them is the simple browser in VS Code. Now, for those of you who are early or fresh developers, you might be wondering what I'm talking about. Let me explain:

Are you like me, someone who, despite using 2 monitors, still struggles to find the localhost tab among endless tabs? If yes, keep reading! 🤓

🦸‍♀️The simple browser allows you to have your browser window within VS Code. Here's how to do it:

1)First, make sure your local development server is running, then copy the localhost URL of your project.

2)Next, open the command palette in VS Code by pressing Ctrl + Shift + P (or Cmd + Shift + P on macOS).

3)In the command palette, type 'Simple Browser' and hit enter. VS Code will open a simple browser within the editor.

4)Paste Your URL: Once the simple browser opens, paste the copied localhost URL into the address bar and hit enter. Your website or web application will load within VS Code.

5)Arrange for Side-by-Side View: For easy reference and testing, press Ctrl + \ (or Cmd + \ on macOS) to split the editor into two columns. Then, drag and drop the browser tab to the right-hand side.

Disclaimer: You do not need any extension for this feature!

That's it! You're all set up! I hope this will make your coding experience a bit smoother. Happy coding, everyone!🙌

Navigating the Learning Journey: Tips for Junior Developers in React and JavaScript

Nadia — Thu, 04 Apr 2024 08:28:59 +0000

Hello fellow developers 👩‍💻 👨‍💻

🙋‍♀️ I would love to share my recent experiences with you all, as I believe they may be helpful to other junior developers like myself.
After I completed my E-commerce project I came across with new React hooks and other data that I never encountered before. So I said to myself that I wouldn't proceed with any complex project yet till I fully understood those new concepts.
👩‍🏫 So, I prioritized revisiting and refreshing my understanding of some JavaScript fundamentals. A fantastic resource for refreshing JavaScript fundamentals is freeCodeCamp, which is my favorite website for learning. Not only is it completely free, but I also appreciate their approach to learning how to code. It's not just about watching tutorials and coding along; it's about actively engaging your mind and writing the code yourself. So it is a great practice to understand fully what you are coding and how it works!

👩‍🔬 After I did 3 projects on freeCodeCamp (You can do as many as you want) and refreshed what I wanted to do, I dove into directly to React, which is my main focus and priority. For React, I opted for Coursera, which offers free enrollment in courses with the option to upgrade for certificates or additional resources. I am currently on the free version, which is still highly beneficial. l. The course I am currently doing is called: React Basis by Meta. It provides you with lots of theories and examples, something that I was actively searching for. However, theory alone isn't sufficient. It's essential to supplement learning with practical exercises or projects based on the acquired knowledge. So I am practicing with small apps, such as to-do lists, counters, etc.

🙏 One crucial aspect I discovered during my self-taught journey, which may also benefit you:

It is the method of learning. Initially, I attempted to learn as rapidly as possible, rushing through videos and assignments for 8-9 hours a day(sometimes more) with minimal breaks. This approach resulted in two significant issues: burnout and a not solid comprehension of hard concepts.

So I addressed this by making 2 crucial changes:

1)✍I balance my time between studying, relaxing, and coding by having a fixed schedule. I use the Pomodoro method (usually 50/10), and i am actively taking notes by hand. When I need to save code examples, I use Evernote.
2) 🏋‍♀️ It's imperative to allow your mind and body to rest. Many times, I ignored the need for breaks or other leisure activities. However, engaging in activities you enjoy, whether exercising, playing a video game, or reading a book.. trust me, it makes a significant difference.

So, if you ever feel stuck or struggle to understand certain concepts, know that you're not alone. Coding isn't always straightforward; it requires time, effort, and consistent practice. But above all, prioritize your well-being and maintain good health.

Happy Coding ❤️

ScrollReveal.js

Nadia — Thu, 07 Mar 2024 15:05:58 +0000

Hey guys!

I was about to start my project and i wanted to add scrollreveal and i got that:

No Sponsors
scrollrevealjs.org currently does not have any sponsors for you.

Does any of you has the same issue? If yes, what does this message mean?

Thank you in advance!