DEV Community: Nadine M. Thêry

Add Conditional Style to Link with active route with NextJs and Tailwind

Nadine M. Thêry — Wed, 21 Apr 2021 09:33:01 +0000

Check how to apply a certain format to a link depending on the active route. The typical use case for these is in navbars or menus. Like:

You can easily use the built-in router from next and apply a certain format.

What I did here is to render my Navbar using an object (in my case "menuItems.js". This is what this file looks like:

import {
  UserIcon,
  ResumeIcon,
  PortfolioIcon,
  HomeIcon,
  BlogIcon,
  ContactIcon,
} from "../components/Icons";

const MenuItems = [
  {
    label: 'Home',
    url: "/",
    icon: <HomeIcon />,
    active: true,
  },
  {
    label: 'About Me',
    url: "/about-me",
    icon: <UserIcon />,
    active: false,
  },
  {
    label: 'Resume',
    url: "/resume",
    icon: <ResumeIcon />,
    active: false,
  },
 {
    label: 'Contact',
    url: "/contact",
    icon: <ContactIcon />,
    active: true,
  },
];

export default MenuItems;

Each of these objects is an item of my Navbar. This allows me to introduce additional information I need to render. Like the icon I want to be displayed, the route it must go to and also if it has to be rendered or not (active: true).

After that, then it's easy to apply a conditional style to an item by checking if the 'url' property of the item matches the current route.

For checking the current route we can use the built-in 'useRouter' hook provided by Next, and the Link object. Just check this by tackling into the asPath property of the router.

Checkout the code:

import MenuItems from "../utils/menuItems";
import Link from "next/link";
import { useRouter } from "next/router";

export const Navbar = () => {
  const router = useRouter();

  return (
    <div className="mt-10">
      {MenuItems.map((item, index) => {
        console.log(item.url);
        return (
          <>
            <Link href={item.url} key={index}>
              <div
                className={`w-24 h-24 text-center border-b-2 border-secondary-500  mt-3 cursor-pointer  ${
                  router.asPath === item.url
                    ? "text-primary-500"
                    : "text-secondary-300"
                }`}
              >
                <div className=" hover:text-primary-500 w-10 mx-auto pb-2">
                  {item.icon}
                </div>

                <p className="text-secondary-300">{item.label}</p>
              </div>
            </Link>
          </>
        );
      })}
    </div>
  );
};

export default Navbar;

This is a simple example of how to apply this to a Navbar, but you can actually use this to conditionally style any object in the page.

Peace and Code
Nadine

One year coding: what I did wrong and right

Nadine M. Thêry — Tue, 09 Jun 2020 16:11:41 +0000

It's been a year since I decided to give up my CMO and COO positions to focus on my career as a developer, a passion I knew I had but ignored for so many years.
Looking back, I can tell there were lots of things that I did wrong. But hey, there were lots that I really think I did right.I wanted to share with you, newbies and also seniors, what I learned through-out this year.
One year later, I am working as a developer in Salesforce (APEX) and personally developing VUEJs projects with Nuxt (learning). I couldn't be happier.

What I did wrong

1. Jump over to things too advanced too soon.

I wasn't realistic about my capabilities. I first started with some Vanilla JS and wanted to jump over to React right away, because I felt I was doing things too "old school". This was a big mistake. Trying to learn React only 3/4 months after starting just led me to frustration and getting stucked.
Some months later, I switched to VUEjs instead, that seemed more newbie-welcoming.

2. Not making a study plan or project.

You really need to get organized in order to advance. I constantly felt like jumping from one dev article to another not sure about what I wanted to do. Starting and leaving projects all the time.

3. Not looking for a mentor from the very beginning

At the beginning I thought I could take all the answers from the Internet, but in the end, I always ended up asking to my dev friends. I am a lucky girl, with amazing developer friends that encouraged me to go on and, in a certain way, ended up being my mentors. Because sometimes you just need somebody to talk to. Or somebody to put you in the right direction.

4. Forget about the MVP

When you start designing apps, or new functionalities you end up with a bunch of things to do. And when you are new it all feels like a huge mountain to climb that discourages you to even start.
You don't have to avoid hard things. You just have to squeeze your project and really extract a Minimum Viable Product (MVP) to start with.
If you want to make an app to save notes, that also sends you an email and has an alert system, maybe your MVP should be just saving the note the database.
We do need little victories to celebrate to keep going.

5. Not valueing what I actually did right

This is kind of a consequence of the above said. When you try to make a lot and too hard for your level, you always end up the day with a sense of failure on your back.
Be gentle with yourself. You still have a lot to learn, but remind yourself what you actually achieved that day, what you've learned. Set a single goal for that day and celebrate it.

6 Avoiding working with git for solo projects

I particularly find git (Github) soooo complicated to understand. But it is a "must" in the developing environment these days. Start working with git as soon as you can and force yourself to work with version control. The sooner the better, since when you arrive to a company this knowledge is almost assumed.

What I did right

1. Writing and sharing

Ok, I had absolutely nothing technical to share, and there are lots of people better than me to explain. But writing and sharing knowledge and experiences made me realize that I actually knew more that I thought. I also help you build you personal profile.

2. Make my own website from the very beginning

You need a playground, and a CV, and a project. This was my first project and the one I really enjoyed it. No one will judge you but you, you are your own client.
This is my website, BTW:
Nadine Thery's WebSite

3. Going to meetups even when I didn't understand anything

Push myself out of my comfort zone and going to chats I didn't understand anything about. I am so happy now, because thanks to that I met amazing and supporting people that were in the same situation I was. That was very encouraging.

4. Making a bootcamp

I love studying. But I am the kind of person that needs to have a goal further than just learning. So I bought this amazing Web Development Bootcamp from the App Brewery for just 10 € and went through it as if it was my work (wasn't working in that moment). I also went for the CodeCamp Responsive Web Certification. It felt great to have a title in my hands, and to feel that I was actually going somewhere.

5. Accepting simple coding jobs

Web developing for clients is kind of stressful. They usually don't know what they want or they will change constantly their opinions... but you know what? It gives you a lot of things back beside the money, of course. One of them is confidence. And the other is putting yourself in a real work scenario that forces you to solve things as fast and as best as you can.
Always be honest about your capabilities and timing though. It will save you bad experiences with your clients.

6. Updating Linkedin

If you want to be seen as a developer, then you need to show yourself to the world as one. Update your Linkedin, share your achievements and let the world know about you.

What about you? How do you feel about your path, what would you share with your code-newby self?

Take care XX

Our favourite Spotify Playlist for Coding

Nadine M. Thêry — Wed, 09 Oct 2019 08:57:33 +0000

Such a random post! But I just felt in the need of sharing my favorite playlists while coding/working. I am always looking for new playlists to boost my productivity and help me focus.

I have recently started working in an open-plan office. This sounds nice, but the ugly truth is that I get constantly distracted by the noise and chatting. So I have bought a great pair of Bose Headphones with noise cancellation, which I found them to be a great invest (quite expensive, but worth it).

On the other hand, I also tend to get distracted by music in my own language (Spanish), and also by pop music. Probably because my brain forces me to sing along.

So, these are my most played Spotify playlist for working:

Tomorrowland Official Playlist
Inception OST
Focus Coding
Pure Mellow Jazz
Orgánica
This is Hans Zimmer

What about you? Which are your favorite playlists?

Any resources on SPA SEO?

Nadine M. Thêry — Tue, 24 Sep 2019 09:09:12 +0000

Hi there! Can you please recommend me some reliable resources that help me understand (and defend if it's the case) the indexing and crawling of SPA by search engines?
I need to make a decision on what kind of app to make is SPA or MPA and the SEO is the most important aspect for marketing and against SPA...

Thanks a lot!

Do you feel comfortable learning in your own language or do you prefer English? (For non English-native speakers)

Nadine M. Thêry — Thu, 22 Aug 2019 11:28:21 +0000

I am native Spanish speaker, although English billingual. However, taking coding courses or classes in Spanish feels odd to me.
I think that part of it is due to that I have always learnt coding stuff in English. And another part is that all coding language itself is in English, and of course the documentation is also.
It feels really odd to hear the name of the functions translated into Spanish. And I also think it is not practical at all, since documentation does not translate the names.
What about you? What is your native language and how do you feel about learning in it?

Your first coding job: a Wordpress site. How to manage that?

Nadine M. Thêry — Sun, 11 Aug 2019 08:09:44 +0000

If you decided you wanted to be a web dev, probably your path must have been similar to mine: first HTML5, then CSS and later JS.
But then a friend of a friend hears that you are now a web developer, and asks you to make a Wordpress for them.

As a developer, I found Wordpress limited, confusing and so restricted! Something I could easily solve by modifying a CSS file or just by changing a few tags in the HTML was so hard!

Where are the files? Why isn't there any index.html?

So, you had to face a Wordpress development when you thought it was easy, and everything looks like if you had absolutely no idea where to start from.

So, if this job is actually something punctual, and you do not think to focus your career in Wordpress development maybe these tricks could actually work for you:

Know what the client wants

Probably the hardest part, especially if they are not quite technical. But you should at least now what structure the client wants the web to have and of course the functionalities.
It always helps a lot to have the content of the website (texts and images). If the client doesn't have this, then it might be a bit more difficult. But you can always play with dummy content.

Start from a template

At least you are feeling brave, do not start from scratch. Wordpress works with php. Which is a language that mixes the HTML tags with the language itself and is not pretty similar to JavaScript.
Look for free (or paid if you consider) themes that have most of the requirements the client wanted: a blog, an about section, a single page design... you name it. Just save you time for later.
Do not limit yourself to the Wordpress browser. There are plenty of cool designs out there you can import to Wordpress.

Make a child-template

This is a must. Once you have your theme installed, install this plugin: Child Theme Configurator and make a child-theme.
This is the best practice when working with templates. It is easier to solve mistakes and your changes won't be overridden by a theme update.

Ask full access to the hosting site

You will need access to the hosting site, in order to access the Wordpress files and start working.

Use an FTP manager

Download and install an FTP manager such as WinSCP. Connect it to the hosting. You will need to ask for permission in the host site, but it will surely have a tutorial on how to connect it.

Copy the original theme to local

You need to set up your playground, so copy the original theme to local, and also your child-theme archives.
Modify anything in local, and once you are ready, upload it.

What now?

Ok, you are ready to start. The first thing you need to know is how Wordpress actually works. Here I suggest a cool article with a straight-forward explanation on this.

After this, go to the Wordpress Administration Tool and play around. Modify as much as possible with the Wordpress tool. If you find that something cannot be modified, and there are no plugins to fix that, then that is the time to jump into the code.

Using a Code editor with a powerful search engine such as Visual Studio Code, will improve your task of searching for the functions.

Resources

Wordpress Codex: here's where Wordpress says anything that can be done with their platform. You may need it if you want to get more data from other places.

May the force be with you!

TestPost

Nadine M. Thêry — Thu, 01 Aug 2019 11:54:34 +0000

I will delete this

The BASIC adaptations in your place to start working/studying from home full-time (minimum investment)

Nadine M. Thêry — Thu, 01 Aug 2019 11:28:16 +0000

I used to work in an office. As a CMO I spent, of course, about 12 hours a day in front of my computer. With a not-so-bad office chair, a big table and lots of non-ergonomic things and attitudes. I had back pain, but definitely not as I have now that I've started working from home.

About 8 months ago I was not even thinking to become a developer. I was only a computer-and-internet-addict. So my home was just equipped with little corner desk with a fancy decorative Ikea chair and only one 17" laptop which was not even connected all the time.

So the following day I quit my job and started spending the same 12 hours in front of my computer I found out that my work/study station was far from being ideal, healthy or even comfortable.

And, hey! I had just quit my job and the payroll, so I couldn't invest pretty much money on changing stuff and equipment.

So, 6 months later, this is what I've learnt about the most necessary adaptations for my desk right now.

Chair is key

So, this fancy retro chair from Ikea looked amazing in the room. But it was awfull for sitting more than two hours in a row.

I wonder how I've never realized about this before!

I tried to improve my posture a bit by being more conscious about how I sit and even adding a pillow in the lower back area. And a cardboard box to rest my feet. Nothing actually helped in the long-term.

From ALL the things I can recommend, THIS is actually the most important one.

A good ergonomic chair is CAPITAL.

In the end, back and shoulder pain will end up by pulling you apart from work and focus.

After long research, I've gone for a mid-price gaming chair. These are designed to spend about 24 hs playing videogames, so It must work with a bunch of lines of code, right?

High back rest, full of cushions, pretty flexible... I was able to find good offers from €100.

Two screens better than one

I must admit that I've never seen the double screen as necessary as I do now that I code.
Code comparing, testing, and just having a big screen that helps you read easier than a 14" is reaaaally helpful.
Not compulsory, but It makes a difference.

Light is key

I am sorry I am not the vampire-kind developer. I need light, and I need it to be controlled.
And when I say controlled I mean: no reflection on the screens, no shadows, and of course, WHITE LIGHT!
I have the room light, but I also found quite useful a desk LED white light. It helps my eyes a lot.

Independent Keyboard and Mouse

I moved to laptops a long time ago and must admit that I love the laptop keyboard. But for long hours of coding, and especially If you set up a double screen, having a keyboard and mouse separated from the laptop helps a lot to be more comfortable and rested.
As I love the soft flat laptop keyboards, I bought the one I found most similar to it for a reasonable price (about € 30):
HP Pavilion 300 (Wired) and HP mouse too. I didn't want to struggle with batteries.

Not so important but helpful

If you are using a laptop, a computer elevator will also be helpful. Since it places the screen closer to your sightline it will improve the way you sit and neck rest.

A foot rester will also help your legs to have better blood circulation and best sitting posture.

A yoga fit-ball. These balls are great for general exercise and to stretch your back. And of course, it is extremely fun to bounce on it and try to roll on it (heheehe). However, it is not very recommended as a sit (see these therapists for more info).

From here on, you can invest in lots and lots of amazing stuff, but I found these to be the basic equipment to feel minimum comfortable and take care of your health.

¿Is using Jquery a bad practice nowadays?

Nadine M. Thêry — Wed, 17 Jul 2019 15:08:05 +0000

I have seen this library in the recent courses I've taken. Playing around with vanilla JS I really found it useful!
However, I've seen lots and lots of posts dismissing the use of Jquery, probably in favour of the use of a fancy new framework as React or VUE.
But I found these opinions very drastic and non-newbie friendly. Starting with a framework is medium-advanced stuff that maybe not everybody is ready for.

What do you think?

Do you struggle with design too?

Nadine M. Thêry — Fri, 12 Jul 2019 17:10:19 +0000

Since I've started coding, I found the design decisions the hardest part of the job. I mean, of course, you struggle with your code. You may have eventually come up with a great app or webapp... but then you go to your localhost:3000 and a sad, bad aligned website looks back at you. I feel like when you do not master design, then the hard work is just not appreciated in the same way.

I love struggling with how to make something look what I want it to. But I just have not developed yet any talent for making a good design.
What I talk about when I talk about good design? You know:

Something that doesn't look like from the 90s
Nice, clean, tidy design.
Attention grabbers where they must be
Armonious, yet original colour combinations.
That feeling like every element is just where it belongs!

I find myself more comfortable among lines of code, but I am sure it is because I don't feel confident enough to make good designs from my own. But hey, I also think that professional designers are really a valuable asset and maybe is not really "my duty" to make a stunning design? Not sure about this. What do you think?

How do you supply the lack of creativity or just good eye? Feel free to share tips and resources.

P/S: Graphic Designers, I really think you are all so cool...

Bash consoles for windows: Hyper vs Gitbash (my experience so far)

Nadine M. Thêry — Fri, 05 Jul 2019 08:55:51 +0000

Hi there!

Since a month ago I started working with the command line. I am a windows user (I do not intend to create a debate on Win/iOS) so I went for the two most relevant options I could find:

Pros:

GitBash: simplicity overall. It allows all UNIX commands, including the drag and drop folders to catch the URL directly.
Hyper: highly customizable regarding format, font color, font size, etc in a relatively easy way. It is cross-platform so it allows you to work under any OS. It also supports multi-tab structure so you don't have to open new apps. There are also several plugins for it.

Cons:

GitBash: it does allow some customization although not as easy as Hyper does. It does not support multi-tab so, whenever you run a server and need to keep working, you need to launch again the app.
Hyper: In my case, it keeps on suddenly closing. Which is a bit tricky when you need to quit processes before closing such a mongod. It forces you to find a workaround to close the server, etc. On the other hand, I found hyper to be more memory-consuming even in rest. Hyper also works and needs gitbash, so you will end up with both apps installed. And it needs to be configured previously in order to make it work as a bash console and not just as a Windows cmd.

Conclusion:

I am sure there is a lot more involved. My use of the console is quite basic so far. However, I found the self-closing issue of Hyper very annoying, which makes me prefer to work with gitbash. It also is less memory consuming and more stable, at least on my computer.
However, I must recognize that I like Hyper so bad! It is flexible, customizable and way more visually attractive than gitbash. But right now I have chosen to work more often with gitbash.
If you do not experience these self-closing issues and are not in a memory hurry, then I would definitely recommend Hyper.

Please feel free to share your experience with these apps, and also if you know other apps that could be used as bash consoles for Windows.

Thank you for reading!

MongoDB deletes my db after unclean shutdown?

Nadine M. Thêry — Wed, 03 Jul 2019 16:24:17 +0000

Hey guys!

I am just starting with MongoDB and It has happened something really weird. I didn't lose anything valuable. But I definitely need to know what happened in order to avoid it to happen again, when I DO have something important.

I had created 2 small databases and had also shut down and restarted mongod several times. No problem.

However, I accidentally quit Hyper (bash) without closing the server. So I went back to bash, and killed the task with the following line with admin permission:

$ taskkill //PID 3628 //F

It finished the process. And then I was able to restart the mongo server and keep working. But when I did all the databases were gone!

So, it looks to me like pretty obvious that it was due to the unclean shutdown, but cannot find anything documented about it. Except for this short line in the Mongo Documentation:

"In a clean shutdown a mongod completes all pending operations, flushes all data to data files, and closes all data files. Other shutdowns are unclean and can compromise the validity of the data files."

Just wondering if any of you have ever experienced this, and just to confirm that this actually happened to me because I killed the process from the console or if you think there might be another reason.

Thank a lot!

P/S: working with NodeJS, Hyper (gitbash), MongoDB last ver., local.