Forem: Bassem

4 steps to land more interviews

Bassem — Mon, 18 May 2020 08:09:47 +0000

Before my current job, I used to struggle quite hard with landing interviews. I was applying for tons of positions while rejection mails were vigorously hitting my inbox. In today's post, I would like to share with you 4 steps that helped me turn the table.

Know your strengths and how to present them.

During CV screening, Companies look at your CV, your LinkedIn, your portfolio, your cover letter, and your social media. They fill in the gaps to draw an image of you and then compare that image with their expectations. Getting rejected doesn't necessarily mean that you are not qualified. It just means that your image is not aligned with their expectations.

To land more interviews you must show them your strengths. That's easier said than done. To be able to "sell" yourself. You must define your goals and strengths in the first place. That is where those feedback meetings with your manager come in to place. You could also ask your friends or colleagues. Better yet, self-reflect on your past experiences.

After defining your strengths. Learn how to present them. Your CV shouldn't be just a pile of information. It needs to convey a simple message, "I am a perfect fit for the job". If you are not presenting your strongest skills and achievements effectively, you are not using your CV to your advantage.

Also, This is not a one-time thing. Self-reflection is an iterative process. Your strengths and goals will change after some time. You need to self-reflect from time to time.

Stop applying for positions that are not aligned with your plan.

This tip only works if you have a clear goal in mind or at least a rough direction on where you want to go.

You might think. Well, what harm can it do? Let me answer that,

First off. Interviewers can easily tell the difference between someone who really wants to be a Frontend developer (for example) and someone who just wants to land any job out there. They will sense it and will probably reject you. That's a lot of wasted energy that could have been spent elsewhere.

Also, remember step 1? You are building that image according to your strengths and goals. Applying for a backend developer vacancy while your whole image is tailored for your frontend development goal will get you rejected. Those rejections can affect you and your decisions. You might accept a job that you don't want. Or even worse, you could give up and stop applying altogether.

Finally. If you did land the job, You will be working in a field that you probably hate. That's never a good thing in the long run. At least try as much as you can to avoid that.

Stop applying for old listings.

This golden tip I got from Sarah Hündgen, She is an awesome career mentor at Imagine foundation. She told me to start using this "Date posted" filter on LinkedIn and only apply for newly posted vacancies.

Sure! It decreases the number of positions you can apply for at the same time. But, Applying early for 50 job listings across the span of 5 or 10 days is waaaay better than applying late for 50 jobs in one go. This will sky-rocket the probability of your CV actually getting read by HR.

Applying for jobs posted weeks or even months ago won't help that much. Sometimes those job listings are so old, that someone has already filled the vacancy.

Consistency is key.

I know it is a huge cliche, But it's important! "Don't give up" I landed a job after 7 months of actively interviewing. You can too, Don't let those heartbreaking rejection emails get to you. Delete them from your inbox and apply again.

Try those 4 steps out next time you start applying. They really did help me along my journey and I am sure they can help you too!

oh, yeah and good luck :)

7 Awesome Gnome Extensions For You

Bassem — Sat, 09 May 2020 20:16:54 +0000

Hey, devs from all over the world,

A couple of weeks ago, I had to change my work station from a mac to an Ubuntu PC. Although Ubuntu is super awesome, I had to tweak it a bit for my own liking. To be able to customize it, I used some Gnome extensions.

What's Gnome you might ask!

Great question! Gnome is the default desktop environment on many Linux distributions. Gnome extensions are some code that modifies the way your Gnome works. It can make tons of changes that could be purely aesthetic. Also, they could provide cool functionalities.

Note, I am using Ubuntu and my Gnome shell version is 3.34.3. You might have a different Gnome shell version or a different Linux distribution. Some of the steps below might not work. Some of the extensions might also be incompatible.

You can find out which version of Gnome shell you have by running this command in a terminal

gnome-shell --version

How to add Gnome extensions

First off, you need to do the following :

Install the Gnome shell extension. It is a browser extension that works best on Firefox. You can find it here for Firefox or here for Chrome.
Install the Gnome tweaks application from Ubuntu's software center. This app will allow you to configure any installed extensions.
Now you are pretty much ready to browse and install different extensions here.

7 Awesome Gnome extensions

Now, Without further ado. Here are my currently installed Gnome extensions.

Dash to Panel

If you like me and you divide your applications in different workspaces. You will absolutely love this extension. It has this awesome feature. You can change workspaces by using the mouse wheel while hovering over the Dash Panel. It also provides tons of different aesthetic tweaks to the Dash.

Check it out here!

Pomodoro

The Pomodoro Technique is a time management method that uses a timer to break down work into intervals. Usually 25 minutes in length. This extension reminds you - every X amount of time - to get up of your chair and take a quick break. It's highly customizable and really cool!

Check it out here!

Sound Input & Output Device Chooser

This one shows a list of sound input and output devices for you to choose from next to the sound volume slider. Really handy with all the virtual meetings we currently have.

Check it out here!

Open Weather

Want to get automatic weather info right into your top panel? Who doesn't! Well, You can get it using this little gem. You will need to get an API key from http://openweathermap.org/ but that's no biggie.

Check it out here!

GSconnect

This extension is kinda crazy! It allows you to sync so much stuff between your PC and your phone. For example, You could sync your notifications, files, clipboard, and contacts. You can also set up shell commands like shutdown and run them directly from your phone.
It's time for some pranks, I reckon.

Check it out here!

Remove Alt+Tab Delay

This one removes the small delay when alt-tabbing. Pretty basic but still cool.

Check it out here!

Bluetooth Quick Connect

This one allows you to connect or disconnect Bluetooth devices directly from the Gnome system menu. No more digging into settings to connect your headset.

Check it out here!

That's about it! Let me know which ones you liked the most. Also, Are you using any extensions that are not here?

PS! I still miss my mac.

As always,
Happy coding 🔥🔥
“كود بسعادة”

How can I fix the post's cover image on social media

Bassem — Sat, 09 May 2020 13:38:27 +0000

I am designing my own post's cover images and adding them using the cover_image metadata attribute.

In the question mark help section, It says The best size is 1000 x 420. This works perfectly on dev.to but when you share the post on Facebook, Linkedin, or Twitter.

That 1000 x 420 cover image gets cropped around the edges. Is there a way to fix that?

How am I dealing with anxiety during COVID-19

Bassem — Fri, 08 May 2020 09:47:58 +0000

It's safe to say that everyone's anxiety levels have been skyrocketing due to COVID-19. Some lost their jobs, some are finding it hard to find a job. Everyone is stressing over their future, their finances, and their lifestyle.

I am no different. I found myself in an even more tricky situation because I resigned from my job not so long before corona hit.

The first couple of weeks were the hardest. Feeling completely lost and watching my plans crumble. I also had lots of free time because I wasn't working. I binge-watched corona updates and overstressed myself even more.

It was a vicious cycle. I wake up in the morning. I watch the news. I get stressed. I play video games to calm myself. I get a small relief. I overthink about how unproductive I am, I get even more stressed. It felt like hell. Every time I try to get myself out of it and reduce my anxiety, I end up increasing it somehow.

Now, after some time have passed. I am more in control, I managed to escape this cycle and I want to share with you what helped me do it.

Quit/Reduce social media

That was key! Yes, Scrolling for hours on end may numb the pain and pass the time. but, social media have always been - for me - in some way behind every bit of stress and anxiety.

Not watching the news might feel like burying your head in the sand. Think about it for a sec! You already know all the necessary info about this virus. The numbers and the graphs will only give you anxiety.

Start running

All my life, I thought running was boring. COVID-19 changed my mind. After they closed swimming pools, gyms and pretty much every place you can exercise in. I started running just to keep doing any form of physical exercise. I never thought that running was super important for my mental health.

After sticking to the habit of running every other day. Turns out, running gives me something much more important - for me - than being fit. It gave me a "Clear head". Something that I used to travel long ways, pay money, and spend 3-4 days to get. Something that I desperately needed after a couple of weeks of overthinking & anxiety.

I asked my super awesome cousin why she runs and she responded

"I consider it a form of meditation"

Its time for me to brag a bit. I recently completed my first 5km. Fingers crossed, I will finish a 10km next month. A half marathon (21k) is slowly creeping into my 2021's bucket list. It's crazy how a couple of months ago, I genuinely believed that running is boring.

Running and quitting social media are helping me overcome anxiety during these crazy days. What about you, What worked for you? Please let me know in the comments below. If you feel like you are still struggling with anxiety, What are you waiting for? Go for a run. Now!!

What's Ecma & TC39 ?!

Bassem — Sun, 12 Apr 2020 09:24:04 +0000

Hey devs from all over the world 😊

I have been working with JavaScript for more than 2 years and I have never during those 2 years looked up ECMA or TC39. Well, I did now - about time huh! - and I am here to tell you guys all about them.

First off, you need to know what ECMA is. it stands for the European Computer Manufacturers Association. - wow, that's a mouthful - It's an organization that standardizes information and communication systems. They work on lots of standards. ECMAScript is one of them and its called standard ecma-262.

TC39 is the committee that works on ecma-262 they create, accept and reject new proposals to the ECMAScript language specification. They are composed of different members 🤓 representing big corporations like browser vendors.

Enough with the boring stuff, I got a fun fact for you! 👻 Here is the ECMAScript language specification, It's a huge document and it doesn't have the term "JavaScript" in it. 😱 That's because Oracle owns the trademark for "JavaScript". So they just called it ECMAScript instead!

That's where the term ECMAScript comes from, "legal rights". 🤯

It's hard for me to say this. Not so long ago, I genuinely thought that ECMAScript is the new hotshot JS because JS was getting old or something. - whaat!! 😮 -

Let's just set one thing straight! ECMAScript is just the term everyone uses for JS when talking about language specification. That's all it is! Don't get confused because of "legal rights".

Anyway, Let's dive into what TC39 do during their meeting. 🏊‍♂️

They meet every 2 months to discuss different proposals. Each proposal needs to pass through 5 stages to be added to the language specification. From S0 to S4. More about those stages here. What's important here is that S4 means that the proposal is finished and ready to be included in the next ECMAScript version.

They operate by consensus. That means that decisions must have a large "agree" and no one is strongly "disagreeing". Also, Every proposal needs a "Champion". He is the one responsible for working out the details of the proposal and presenting it to the committee.

They track proposals on this GitHub repo.

As always,
Happy coding 🔥🔥
“كود بسعادة”

UI component libraries are awesome!

Bassem — Wed, 08 Apr 2020 13:50:29 +0000

Hey devs from all over the world 😊

We all know what UI component libraries are, There are tons of great ones out there. I am more interested in building them though. It's like laying a foundation that will be used in every project to come! To me, That's both super scary and super cool!

Its impact

I love the idea of writing code that will be used and maintained by every developer in every project. I mean you are not just building a boring contact-us page or anything, you are writing components for every future project.

Of course, it is not a one-time project kinda thing. UI libraries should always be In development. That being said, maintaining an already mature UI library is one thing but "laying the foundation" sounds way cooler to me.

It is sophisticated

A couple of years ago, The only way frontend code gets used over and over again is by making CSS classes. That's it! A couple of CSS rules that get applied to multiple elements. It was a big thing! I remember how changing a small value in those famous classes impacted the whole project.

Now, UI component libraries are much more sophisticated! First off, These components contain both the HTML & the CSS, They render differently depending on the props (input) you give them, They should also be able to handle as much use cases as possible. Of course, They won't be able to handle all of them out there! This is more of a utopia kinda thing. But still, UI libraries are not just about your use cases, They are built for everyone!

Its a bridge between design and dev

Designers usually have lots of systems in place. They have systems for colors, typography, sizes. They even build components like buttons and input fields. Then they use those systems and components all over their designs.

UI components libraries are the closest thing to a design system in the dev world. They should be built upon the design system. That will ensure those systems are more of rules not just guidelines and make sure the look & feel is consistent across all projects that use the same UI library.

It speeds up development

I am sure UI libraries do speed up development if they are mature enough. But, they still take a big investment upfront. Also, they should be maintained all the time to handle new use cases and business logic.

I think they are an investment that only bears its fruit in the long term. I was never involved in the process of building a UI library from scratch before. I would love to someday!

That's basically it! Now it's your turn, tell me how you feel about UI libraries? Have you ever been involved in building one from the start? Do you have any tips and tricks that you learned while building one?

As always,
Happy coding 🔥🔥
“كود بسعادة”

7 Linux operators you should know about

Bassem — Wed, 01 Apr 2020 12:03:08 +0000

Hey devs from all over the world 😊

Okay! I know I am a Frontend developer, but I really like Linux. Just hear me out!

Today, I want to tell you guys about some Linux shell operators that you absolutely can't live without while chaining commands. 🤯

Going forward, we need an example of a command to explain the operators on. Due to our current situation and my absolute hatred, I am using this one :

    kill covid19 --force

I know it won't work! but, maybe because no one tried it before. 🙄

Let's dive right in, 🌊

Are you after the output?

Starting off, We have the write operator > This one is used to write the output to a file. For example,

    kill covid19 --force > res.txt

Wait a sec! This > will overwrite the content of the file. If you care about res.txt you will have to use the append >> operator which will append the output to the content of the file.

Actually, The output operator > is just a shorthand for 1>

Is there a 2>? Yes!

Is there a 3>? Don't get carried away!✋

1> is for standard program output, while 2> is for error output. For example,

    kill covid19 --force 1> res.txt 2> err.txt

What if your program requires some input file?

I know you guessed it! Just flip it over <

    kill covid19 --force < doctorsList.txt

One command is not enough.

Okay, Let's say it's not that easy. What if we need more? You can chain commands one after the other using the AND operator && like this :

    kill covid19 --force && rebuild

This && is an AND operator. It will only run the next program if the previous one exited successfully.

We also have an OR operator ||

    kill covid19 || (I honestly don't know what to write here! 🤯)

This one will only run the next program if the previous one failed ( Let's hope It doesn't ).

Is that it?

No! We still have more.

Killing covid19 is gonna take some time 😔 We can use the ampersand & at the end to make it run in the background. Leaving the terminal free to run any other programs like this :

    kill covid19 &

Wait! I am saving the best for last. The most awesome pipe operator | This one can pass the output of one program to the next. Let's try to count the number of lines killing covid19 will output. (cause why not!)

    kill covid19 | wc -l

That's it for now. If you guys liked it, please let me know down in the comments section.

You could also check my Know Your Linux series here on dev.to.

Article No Longer Available

Also, I have a small recommendation -unpaid- for you guys, I have been hacking away my quarantine days and you could too. Check out tryhackme.com. It is super cool!

If you want to know more or if you would like a hacking wingman, hit me up on discord at Bassem Mohamed#3921

As always,
Happy coding 🔥🔥
“كود بسعادة”

How important UX design knowledge for frontend devs?

Bassem — Mon, 09 Mar 2020 13:00:27 +0000

Hey devs,

I am a frontend developer, I don't design mockups or wireframes. The UX team provide those for me. I just build them using code! 💻

I have been thinking lately about taking UX courses and put myself in their shoes. Mainly because I want to be able to build cooler looking websites even in my free time. ( Just like my personal website )

Aside from the fact that learning is cool and important for everyone whatever his profession is,

Is learning UX particularly important for frontend devs? 🤔
Can it impact dev's career somehow? 🤔
Will it make a better developer? 🤔

Let's review each other's personal websites.

Bassem — Fri, 27 Dec 2019 15:57:35 +0000

Hey, devs from all over the world. 😊

I have been working a lot lately on my personal website. It is in no way done but I am really liking what I have done so far. 😎

I wanna get comments and feedback from you guys and possibly do the same for you. 🧐🙌

Come on now! 👏
Post your personal websites in the comments below! 🔥

The perfect React's component doesn't exist. 🤯

Bassem — Mon, 16 Dec 2019 06:58:54 +0000

Hey devs from all over the world 😊

In today's post, I want to tell you all about React's performance. How can we optimize our react components to reduce the number of undesired re-renders? I will be talking about React's PureComponent class, Memos and the truly awesome shouldComponentUpdate method.

Oki, As most of you know. React uses the virtual DOM 🔥to reduce the costly real DOM manipulation operations. This virtual DOM is a representation of the actual DOM but built with javascript. When a component updates, React builds the new virtual DOM then compares it with the previously rendered one to decides whether an actual DOM update is required or not. 👨‍⚖️

That what makes React stand out from other frontend frameworks out there. 🥇Now, Let's talk about how to make your React components stand out. 💪

The perfect React's component doesn't exist. 🤯

Ohh yeah! I love minimalism and I like to think that we are applying it's concepts here. Think about it for a second. LESS CODE == LESS TROUBLE, isn't it? 🤯

We can discuss this in another article though. In our today's article, it is more like LESS RE-RENDERS == MORE PERFORMANCE, We want to stabilize our component's as much as we can. cause every re-render means that react will at least check for the difference between new and old virtual DOM. If we don't need that re-render in the first place. That just means computations down the drain. which is obviously a big no-no when it comes to performance. 🙅‍♂️

shouldComponentUpdate to the rescue 🚀

I am sure most of you guys know about shouldComponentUpdate but if you don't, let me give a quick introduction. It is a component lifecycle method that tells React whether to continue updating the component or not. It runs every time there is a change in the props or the state and it defaults to true.

So for example, if we have a component with a shouldComponentUpdate like this :

    shouldComponentUpdate(nextProps, nextState) {
        return false;
    }

It will basically never ever update without forcing it. shouldComponentUpdate doesn't get called for the initial render or when forceUpdate() is used.

Wait a sec! Are you saying we should write a shouldComponentUpdate method by hand for every component just to prevent a couple of undesired renders ?! 🤯Nobody got time for this! 😠

Not exactly! 🙄

What is React's PureComponent? 🤔

It is similar to React's component class but it implements shouldComponentUpdate with a shallow prop and state comparison by default.

In other words, every prop/state update in a PureComponent will not trigger re-render unless there is a shallow difference between current & previous props or current & previous state.

This shallow part is a little tricky, as it could lead to false-negatives ( Not updating when we actually want a re-render ) in the case of complex data structures like arrays or objects. let's go for an example.

    state = {
        itemsArray: []
    } 

    onSomeUserAction = (item) => {
        const itemsArray = this.state.itemsArray;
        itemsArray.push(item);
        this.setState({ itemsArray })
    }

Now imagine this scenario where we have an array in the state and we want to push an item into that array on some user action.

This will actually produce a false negative if it is a PureComponent. After this setState, shouldComponentUpdate will shallowly compare the old state to the new one just like this this.state == nextState and because our itemsArray reference is exactly the same this condition will be truthful and the PureComponent will not re-render. This is also a similar case for objects like this example.

    state = {
        user: {}
    } 

    onSomeUserAction = (name) => {
        const user = this.state.user;
        user.name = name;
        this.setState({ user })
    }

Immutable everywhere 🙌

We can fix this issue by using forceUpdate() but thats not exactly elegant and it goes against everything we just said so scrap that!

What we should do is create a new object/array every time like this :

    state = {
        itemsArray: []
    } 

    onSomeUserAction = (item) => {
        const itemsArray = this.state.itemsArray;
        this.setState({ itemsArray: [...itemsArray, item] })
    }

or in case of objects

    state = {
        user: {}
    } 

    onSomeUserAction = (name) => {
        const user = this.state.user;
        this.setState({ user: {...user, name} })
    }

Using some not so new JavaScript features like destructing and the spread operator. It doesn't only look cooler but it is also considered a whole new object. Now the this.state == nextState is no longer truthful and the shouldComponentUpdate is no longer producing a false-negative.

Now, what about functional components? Well, you should use Memo for that like this

    const MyComponent = React.memo(function MyComponent(props) {
      /* render using props */
    });

Memo is just like PureComponent but for functional components instead of classes.

With PureComponent or Memo and creating new object/arrays with setState, We can now safely celebrate our better performing components, give yourselves a great round of applause. 👏👏

You made it all the way here! Thanks for reading and I really hope you enjoyed it. If you did, Don't forget to let me know and if you really liked it follow me on twitter to never miss a future post. 😊

As always,
Happy coding 🔥🔥
“كود بسعادة”

Why am I finding code challenges so damn hard?

Bassem — Mon, 28 Oct 2019 14:20:35 +0000

Hey devs from all over the world😊

I have been doing interviews lately and I still have a couple to tackle. That's why I have been on Codewars & Hackerrank, Solving some coding challenges in preparation. After all,

“By failing to prepare, you are preparing to fail.” ― Benjamin Franklin

As a frontend developer, I rarely encounter code challenges at my day to day work. Don't get me wrong! I know they are important, I am just saying they are more important in the interviewing phase.

The issue is. I feel like I need to get better at coding challenges. I am not all bad. By Hackerrank standards, If It's an easy one I can do it. If its a medium I struggle. Some mediums are ok, others I have to look at the discussions to get ideas. If it's hard, I don't even bother.

Most interviews don't ask around the hard level anyway. In my experience, they somewhat below the medium level. Maybe because I am interviewing for junior to mid-level positions. However, solving those challenges live is a whole different story!

My strategy up till now is to solve as much as I can. But, I find myself wondering...

Are there any other strategies out there?
Is there a way to get better at them other than solving as much as you can?
Are there some concepts out there (Math or programming) that someone needs to know before even trying to solve a coding challenge?
How do you guys prepare for coding challenges in interviews?

What's the value of x?

Bassem — Sat, 26 Oct 2019 16:28:15 +0000

Hey, devs from all over the world. 😊

let x = 0;

x++;
x = x++;
x = ++x;

console.log(x);

What's the value of x? 🤔🤔