DEV Community: Sara Ounissi

Share your experience in STEM as a women

Sara Ounissi — Mon, 22 Nov 2021 07:20:18 +0000

Hello you all!

Hope you are doing great!

I started a series of interviews called Women Experience in STEM and I was wondering if you would like to share your experience as well. That would mean the world to me if you could do that and maybe share it with women in STEM you know.
Here is the link of the form to share your experience: Interview form

Also, if you want to have a look at the first two interviews published here it is: interviews

If you have any feedback, I'll be happy to listen so I can improve.
Have an amazing day,
Sara - thetrendycoder

CSS property vertical-align doesn’t work

Sara Ounissi — Sat, 20 Nov 2021 23:04:44 +0000

I was trying to apply the CSS property vertical-align: middle on an element but no luck, it was not working as expected.

Here is an example of non-functioning code :

.container {
  background-color: red;
  height: 50px;
  width: 100px;
}

.text {
  vertical-align: middle;
}

The first option would be to set a line-height on the element you want to center vertically :

.container {
  background-color: red;
  height: 50px;
  width: 100px;
}

.text {
  vertical-align: middle;
  line-height: 50px;
}

The second option would be to use display table on the parent .container, and display table-cell on the element you want to center vertically :

.container {
  background-color: pink;
  height: 50px;
  width: 100px;
  display: table;
}

.text {
  vertical-align: middle;
  display: table-cell;
}

Custom checkbox not working

Sara Ounissi — Sat, 20 Nov 2021 22:58:29 +0000

Customizing checkboxes is a little tricky, it requires a lot of additional CSS to make it look nice. One important thing to remember while doing that is to make sure the id you use on the input is the same as the for on the label.

Example :

<p>Choose your favorite fruit:</p>

<div>
  <input type="checkbox" id="apple" name="apple"
         checked>
  <label for="apple">Apple</label>
</div>

<div>
  <input type="checkbox" id="orange" name="orange">
  <label for="orange">Orange</label>
</div>

CSS property z-index not working

Sara Ounissi — Sat, 20 Nov 2021 22:52:43 +0000

It is never easy for me to use z-index especially when you are adding code to an existing project, and you don’t know the whole structure. I was stuck with that for a while, adding z-index on every level of div, but nothing was working.

Thanks to StackOverflow, I was able to understand the problem:
The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed;). There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
Source Stackoverflow

However, there is something else you need to know: when an element has an opacity value less than 1, even with a z-index of a million it won’t work. So if your z-index is not working, check the opacity of your element. You can read a detailed article about that following this link.

Character not returning on keydown event

Sara Ounissi — Sat, 20 Nov 2021 22:40:11 +0000

To develop a feature in JavaScript, I started by looking into the events related to the keyboard. I found three events : keypress, keydown, keyup.

keypress was only happening when the user pressed a char key, and I also needed to get the event when the user uses the supr button. So I thought I would use keydown instead.

The event was fired when I pressed any key, however, the problem I faced is that when I pressed down on char key I needed to get that char and save it in a variable. I noticed that the first char was only saved at the second time the event was fired, the second char at the third event and so on. I couldn’t understand this gap.

After some debugging and talking about that with a colleague, I understood that the event keydown was happening too early, it was fired before the char get saved in my variable. So instead of using keydown I used keyup, and it worked perfectly fine.

Summary

- keypress : The keypress event is fired when a key that produces a character value is pressed down (Deprecated)
- keydown : The keydown event is fired when any key is pressed down, the event occur very soon.
- keyup : The keyup event is fired when any key is pressed up, the event occur after keydown.

Add git blame on Visual Studio Code

Sara Ounissi — Sat, 20 Nov 2021 22:21:31 +0000

When you are working on a project, it is very useful to know the history of the modifications using git. If you are coding on Visual Studio Code like me, you should activate git blame by following these steps :
- Open Visual Studio Code
- Press Ctrl+Shift+X (windows) or ⇧⌘X (Mac)
- Type blame
- Click install on Git Blame

Now, you can see at the bottom of the vs code window who is responsible for the line of code you have your cursor on, as you can see on the image below: line 37 Sara Ounissi (that would be me), pushed this code 1 day ago.

However, the aim of this option is not just to see who wrote the code, but why and when. You can click on the name of the person, this will open a pop-in, the button View will then redirect you to the git repository where you will see the whole modification, the name of the commit, etc… Hopefully, that will help you get more context.

How to add a placeholder on a select

Sara Ounissi — Sat, 20 Nov 2021 22:10:03 +0000

It is quite easy to add a placeholder on a select in HTML, you just need to add an option with the text you need as a placeholder. The only thing to look for is to empty the value, add the two properties selected and disabled.

<select> 
    <option value="" disabled selected>Select your option</option>
    <option value="test">Test</option>
</select>

How to handle a daily stand-up

Sara Ounissi — Thu, 18 Nov 2021 15:42:21 +0000

Ah! The famous stand-ups! The daily meetings you have with your team to talk about what you did the day before and what you are planning to do today. An important step if your team is following the Agile methodology.
The issue that can happen when you have to talk during a stand-up is either you have nothing to say, and you could look like you didn’t do any work. Or you could talk too much when it’s not the purpose of a stand-up. I have a few years of experience with stand-ups. I’ll give you some tips to help you be efficient and not look like a fool.

Surprisingly I like stand-ups

I used to be very shy during my childhood. Even though I got very confident, I am still the kind of person not crazy about talking in front of a lot of people. If I have to do it, I will of course. However, if it’s not mandatory I will not take my chance.
Nevertheless, I never had any problems talking with my team during our daily stand-ups. I will even say, I like this moment with the team. I even don’t feel good when the stand-up is canceled. I feel that something in my day is missing. As if I didn’t share this important moment with the team, I couldn’t share with them my achievements or struggles. It’s like when you are used to journaling on a daily basis, if you miss a day, you don’t feel good.

Most importantly : Get prepared

The easiest thing is to prepare a small sticky note with bullet points, so you don’t forget any of the things you did. It basically takes only about a minute to go through the things you did and write them down. You don’t need to tell in detail what you did, just mention the things you worked on, and the status: are you done with the task, or still working on it. You can mention if you encountered any problems or if you need any help from the team. Then talk about what you are going to work on later on today. If you don’t have any idea about that, ask the team if they need any help. And most of all, RELAX! You are just talking to your team, you don’t have to be stressed or under pressure. Be yourself and chill out.

What to do if you’re not ready

If you didn’t prepare for the meeting, no worries, it happens. Try to remember what you did, if you don’t have a lot to say, try to ask questions about problems you encountered. Explain the problem, how you tried to solve it and ask for advice. Usually, developers are really supportive, they will do their best to help. You need to show that you are involved, it might not be your day, you have a lot on your plate and couldn’t get prepared. Nevertheless, you are still a good element of the team. Above all, be honest, you can tell them it’s not your day, you didn’t do much because you got stuck on this and that.

Careful! Things not to do

One very important piece of advice: don’t lie! It won’t help you on the job to use lies to show that you are a hard worker. More so if it is based on lies. Also, don’t overestimate what you could do.
When you talk about what you are going to do next in the day don’t say I’m going to “try” doing this. We don’t try. We do. So if you think you’re not going to make it, lower your objective into something you are sure you can do. Or specify that you are going to start working on this task, and you may need the help of a colleague because it’s not a topic you are comfortable with.

I will summarize below the Do and Don’t, hoping this could benefit you.

DO

Prepare a sticky note with bullet points
List the tasks you worked on and their status (Done, WIP, Paused…)
Explain your issues and ask for advice/help
Tell what you are planning to do next
Set clear and reachable goals
Offer your help if you are free

DON'T

Give too many details about what you did
Lie
Overestimate your capacities
Say “I’m going to try doing this”

Now you have some keys to help you handle a daily stand-up. Follow these steps and don’t forget to have fun!

Install PHP on Mac

Sara Ounissi — Thu, 18 Nov 2021 15:28:35 +0000

Using a Mac for the first time, I faced a problem installing PHP. I would install it over and over, and every time the terminal would tell me that I don’t have PHP on my laptop. Here are the steps I had to follow to be able to install multiple versions of PHP.

Uninstall PHP

The first step is to update brew before using it to install PHP

brew update
brew upgrade
brew cleanup

Then you need to check the current PHP installed

brew list | grep php

Then uninstall all the PHP that the grep return, here is an example :

brew uninstall --force php71 php71-apcu php71-opcache php71-xdebug php71-yaml
brew uninstall --force php72 php72-apcu php72-opcache php72-xdebug php72-yaml
brew cleanup

Check again with a grep if you have anything related to PHP left :

brew list | grep php

If it returns nothing, then you are all good. Otherwise, try to uninstall what is left.

Then we want to remove the old PHP configuration :

rm -Rf /usr/local/etc/php/*

Once everything is clean, you can jump into the PHP installation.

Install PHP

We start by installing the tap that will

brew tap shivammathur/php

Then you can install the different versions of PHP you want. I need versions 7.1, 7.2 and 7.3:

brew install shivammathur/php/php@7.1
brew install shivammathur/php/php@7.2
brew install shivammathur/php/php@7.3

Now you can go in the php.ini of every version and change the options you need like the memory settings, the date.timezone etc… You can find the files of each version here:

/usr/local/etc/php/7.1/php.ini
/usr/local/etc/php/7.2/php.ini
/usr/local/etc/php/7.3/php.ini

We have installed but not linked these PHP versions. To switch to PHP 5.6 for example, we can type:

brew unlink php && brew link --overwrite --force php@7.3

Now you can test if you are in the correct version using :

php -v

If you want to switch versions, use this command :

brew unlink php && brew link --overwrite --force php@7.2

Don’t forget to check if the version correctly changed:

php -v

Sources :

Amend a specific commit

Sara Ounissi — Thu, 18 Nov 2021 15:15:45 +0000

Here is my situation: I had to do a dev that I cut into two different commits. I asked for a review from my team and got feedback on the first commit. I realized I didn’t know how to amend a commit that wasn’t the last one in the git history. I really didn’t want to create a specific commit for this fix, it wouldn’t be clean. I wanted to amend the first commit to have a clean git history. Here is the process I followed to be able to do that successfully :

Select the number of your commit, here we want to modify the commit bac653ad. So I had to run :

git rebase --interactive 'bbc643cd^'

In the default editor, you will have this kind of view :

pick bac653ad fix: first commit 
pick ac39035 feat: second commit

Change the name of the commit if you want, or keep it how it is and save. Then run :

git rebase --continue

Now you can push force :

git push --force

Your changes should have been added to the specific commit you wanted.

Shut out to StackOverflow for helping me solve this problem!

Truncate text using CSS ellipsis

Sara Ounissi — Thu, 18 Nov 2021 14:53:47 +0000

You might want to truncate a string of text, and you struggle with how to use the property ellipsis.
Here is an example of how you should use it. Note that all the following are mandatory. Your string has to be a straight line (that explains the white-space: nowrap). Its width has to be fixed and the overflow hidden.

.ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

More details about this property on this article from CSS-Tricks.

How to squash commits

Sara Ounissi — Thu, 18 Nov 2021 14:45:00 +0000

It happens to me very often that someone help me out on a branch and pushes their code on a fix up commit. Every time it happens, I panic because I want to squash this commit into my previous commit so the git history looks clean. I used to be very bad at git, my tree will have unexpected merges and all. However, I decided to learn and focus on this point this last year to avoid these silly mistakes and get better at it. Here is how I managed to squash my commits using the command line. Note that you might use a graphical git manager, this could make this process easier.

Start an interactive rebase

Squashing commits means that you have to start an interactive rebase. Choose the starting commit, for me it’s 2 because I just want to squash a fix up commit in my previous commit.

git rebase -i HEAD~2

At this point your editor of choice will pop up, This is the file that will open:

pick 571afa fixup commit
pick 652fec feature: commit message specific to the feature

Replace the pick by squash, or s for brevity, in front of the commit you want to squash. Then save the file and close it.

squash 571afa fixup commit
pick 652fec feature: commit message specific to the feature

A new window will open with the 2 messages of the commits you want to squash together, change the name of the commit if you want one clean commit message and save. Then run:

git push -f

You can check the outcome on your git repository, only one commit gathering the modifications you did on your two old commits should be in the git history. Easy right?!