Monthly Archives: November 2020

Team Leadership

What is the difference between a senior and a leader?

Leave a comment

I know I am technical person and supposed to be talking about technical stuff, but every once in a while, I can’t help but to address some of the soft skills, that are necessary for your survival in the market.

This question is a very tough question and not an easy one to answer. I remember I have been asked about this question in an interview and my answer was toward, “the human aspects”. Made me sound more of an Anthony Robbins kind of life coach rather than a technical leader. Didn’t help get the job and even now as I write down this blog, I don’t know what I am going to write exactly. This question is that challenging and this might be the reason why I find it attractive.

I have undertaken leadership positions in the past and I never really had the time to ask what a good leader is. It is sometimes easier to act on the spot than to reflect. And even though the human aspects is something that would make me sound like a motivational speaker, good leadership definitely involves that. Let us take Steve Jobs as a good leader. He is a visionary and his power comes from setting high standards and believing they can be achieved and letting you believe that you can do it. He deals essentially with emotions and can influence you at an emotional level. This is what makes him a great leader. Because you being technical, doesn’t make you the leader of machines. And one of the the greatest challenges that you note when are in a position of power and responsibility is your own self doubts. First, when you are just a technical guy, you are expected to perform well, period. As a leader, people look at you, they imitate you, you set the mood for the whole team. And therefore, this is one of the things that you should take note of as you become a leader and these are the common pitfalls, that you shouldn’t run into:-

  1. Be humble enough to take the opinions of your team and strong enough to enforce your vision according to what is best to the project. Never be strong-headed as to say your opinion is the right one and expect everyone to move out of your way. This is because in the team, you would find one or two if not all of them, finding your position desirable and willing to jump on your chair and take the lead from you. As you start admitting the door for opinions, be clear about you being in charge and there is no dispute about that. Unless if you start giving them more role than necessary, the project is bound to fail. You might be okay with it, but they won’t. So you being in charge and having the upper hand works well for all of you.
  2. Find ways to enforce your vision: Don’t think it will happen on its own. Once you are settled on something, use whatever you can to enforce these rules. It is easier not to follow rules and standards, but once things get sloppy, it is too difficult to reverse this pattern. Remember, you want to set patterns from the very start and this is usually easier than setting an easy tone, than trying to change it afterwards. One more thing to take note of, discipline usually is what creates success and if you are not well-disciplined yourself, it becomes very difficult to convince others to be disciplined. They might do it, but they wouldn’t like it. And if they don’t like it, it would reflect in their output whether you like it or not. Always prefer automation over manual enforcements. First of all, it is more consistent, second of all, people tend to take it less personally. Tools like Lint and the like could help.
  3. Be a friend, but keep your distance: It is always good to have a funny laughter with your team. After all, no one likes a haughty leader. However, make sure that you make your team respect your private space and use this private space for the good of the team. Remember, everybody likes success and you as a leader will be judged on whether you make your team succeed and if you can’t make them succeed, they wouldn’t like it because you are a good friend. Even though it seems like it could work, I can tell you from experience that it wouldn’t. Being a friendly leader is not something that will make you succeed but being friendly and affirmative will make your team like you as well as give you the power to make them jump into action whenever is required. This is very important especially when you use this personal space to establish the technical vision of the team. Look for new tools that make you get the job done in a better way. Always be on the edge of technology and be on the top of what you are doing. Because as fancy as it might look, one of the most painful experiences in life is to have one of your team members direct the vision of the project. Even though it might look like less work, one of the most important quality of you as a leader is to have a technical discussion with your team members and management enlightening them with your vision. This is one of the things that would make them respect you as a leader. It is equally important to be able to talk about what you do as to do it yourself. Remember, you are not a sales person, you are a technical leader. But a part of your job is to market yourself as a knowledgeable, intelligent entity and there is no way around it.
  4. Standup for your team: How many times have you liked your leader so much but you couldn’t forgive him when you didn’t protect him when he needed you. Blame yourself and don’t blame the team. Always be prepared to do it. You don’t want to make your team feel exposed and vulnerable. Getting the support that they need when they need it is something that makes them value you greatly as a leader.
  5. Be transparent: It is always better if you go to a management team and talk about an accomplishment. But, you don’t want to set the expectations too high by talking about accomplishments that never really happened and then have them panic when they discover the real status. Because the real status is going to be known whether you like it or not.

This are just some of my thoughts about what makes a good leader. Can’t wait to hear your thoughts. And until I meet you next time, have a great time.

Uncategorized

Bootstrap is too heavy!

Leave a comment

Do you use Bootstrap? Do you not use Bootstrap? Is Bootstrap a good framework? Hmmmm.

First of all, what is Boostrap? Boostrap is by far the most commonly used CSS framework. It supports SASS and LESS and comes with its own Javascript library that helps us create fancy interfaces, modals and sliders. Sounds great? Right?

Well, it does and indeed, it is a great framework built by twitter and I think that in the past five or six projects, I have used Boostrap. My only concern with Bootstrap is that we, in almost all projects, rarely use five percent of its features and most of the time incorporate this huge framework, causing performance and maintainability issues. Please, let me know if you have ever used Jumbotron. I know I haven’t.

So, should we not use Boostrap? No, please, do use it! But, customise it to your needs. Only, download the features that you want to download. Because, Boostrap does offer you this feature for 3.x: https://getbootstrap.com/docs/3.4/customize/

You don’t need to include anything in your code that is not needed and pay a heavy performance price. So that as much as the Bootstrap is necessary for things like responsive and so forth, I don’t like to include the whole framework just for that. For me personally, I prefer to download just the grid of Bootstrap. I think that this is more than enough for my needs and I can use my own custom classes for the rest. Note that, the Bootstrap classes can be very annoying from a maintainability perspective.

It had been a pleasure writing this blog for you guys and I wish you guys will share your thoughts on this one. How do you normally use Boostrap? Do you find a good framework? Would love to know :).

Uncategorized

Build a simple NodeJS server and consume the data in ReactJS

Leave a comment

Today, I am going to teach you how to build simple Node Server and consume the data using ReactJS. This tutorial is good for beginners. If you are an advanced NodeJS and ReactJS developer, stay tuned for other tutorials which might be more suitable for you. You are still welcomed to read it of course to give us your valuable feedback.

If you have no Node and npm installed, please install them. You can install them by following this link: https://www.npmjs.com/get-npm. if you are in doubt whether you have npm installed or not, a good way to check is by typing in the following command:-

npm -v

If you don’t see an error, then you are good to go. Now, you are good to go. I would use Microsoft Visual Studio Code in this tutorial. If you haven’t already got one, please, download it from here: https://code.visualstudio.com/download

Create a new folder any place you like and open in Visual Studio Code. Create a new folder in Visual Studio Code, call it src. Create a file and call it “app.js”. See the highlighted part to know where you can create a new file or folder.

Now you would need to install express and cors:-

In Visual Studio, open the Terminal. Terminal => New Terminal and then type in the following command to install express,

npm install express --save-dev

To install cors, you would need to run this command in the terminal

npm install cors --save

All you need to do now is to write the code. Open your app.js file and write the following code.

const express = require ('express');
const app = express ();
let payLoad = [{name:'Magdy El Bahnawy', status: 'enrolled'}, {name: 'Lotfy Samy', status: 'enrolled'}, {name: 'Ahmed Ibrahim', status: 'graduated'} ];
app.get ('/students', (req, res) => { res.send (payLoad);})
app.listen (2000);
 
node src/app.js

If you face any issues and you are using Windows, try to run Visual Studio Code as an administrator and if you are using MAC, type in sudo in front of the command that is causing the error. If this doesn’t resolve the issue, don’t hesitate to contact me and I will try my best to resolve your issue. Now, if you go in your browser to the following url: http://localhost:2000/students, you shall be able to see some JSON object in your browser which shows that you have actually built your first node server app and it is up and running!!!

This is awesome! Now, let us write your first React App to consume your output:-

In Microsoft Visual Studio Code, open a new window: File -> New Window

Create a new folder and name it React and open it in your new window in your Visual Studio Code. Open the terminal: Terminal -> New Terminal and copy paste the following commands:-

npx create-react-app my-app
cd my-app
npm start

You should see something in your browser that resembles this. If the browser doesn’t open automatically, just type in the following address in your browser’s address bar: http://localhost:3000. If the commands above fail to execute, run sudo if you are running it on MAC or Linux or if you are in Windows, try running Microsoft Visual Studio as an administrator. Always, feel free to reach out to me with questions when and if needed.

Now, in the src/App.js, type in the following code:-

import React, {Component} from 'react';
import './App.css';

class App extends Component{
constructor () {
super();
this.state = {
response: []
}
}

componentDidMount () {
fetch("http://localhost:2000/students")
.then(response => response.json())
.then (
data => {
this.setState({response: data})
})
.catch(err => { console.error(err) })
}

render () {

return (
<div className="App">
{this.state.response.map(student => <div><span>{student.name}</span><span>&nbsp;{student.status}</span></div>)}
</div>
);
}

}

export default App;

On the screen you will be able to see something like this:-

Congratulations! You just have your first React app consuming its data from the Node Server and displaying it on the screen. Will be waiting for your questions and feedback.

Angular

Angular Component Factory

Leave a comment

Angular Component Factory. What is it? When it can be used and How to use it.

The pre-requisite to this blog is for you to have some background of the Angular Framework, what it does and have some working experience of it. If not, maybe this blog is not for you. Stay tuned, as we will have some blogs that walks you through Angular step by step. This tutorial expects for you to be of intermediate Angular level.

Angular Component Factory is exactly what the name implies, it is a factory that creates dynamic components. So, you can programatically create components rather than him them sitting in the template. When you see the template, you don’t find HTML code for them, however, when you open the ts file, you find some logic to bring them in or out of existence.

Why is that useful? Well, it is useful because sometimes, you would need to do exactly that. Remember, Angular is all about components. In the Javascript world, you would manipulate the DOM, by using some code like:-

 document.getElementById('container').innerHTML = 'new dom';

In Angular, you can still have the same outcome using the Renderer2 library, however, it will be far more maintainable to have your already baked code in a component and repeat it as you need to. This way, you can achieve better outcomes and get more maintainable code. A common real-world examples of that would be adding elements on the checkout while you are already in the checkout page. In this case, you will need to create a checkout tile and add it to the container. Maybe another good example would be an error handler component that would display your success, error and warning messages. It could be not such a bad idea to handle it by a dynamic component that will delete all other components

The question is then, how do you achieve this, building dynamic components. The answer is:

  1. In your template, you have a container with a reference. This can be done with a #.
<div #container></div>

2. Reference the element using ViewChild in your .ts file

@ViewChild("container", { read: ViewContainerRef }) container;

3. Use code similar to the below to create the component

let factory: ComponentFactory<any> = this.resolver.resolveComponentFactory( DynamicComponent ); let componentRef: ComponentRef<any> = this.container.createComponent( factory ); componentRef.instance.dynamicMessage = "dynamic message";

4. One thing to take note of is that when you create a component, you will have to destroy it yourself, since Angular will not take care of this for you. Use the following code to do so:-

componentRef.destroy()

You can see a living example of dynamic components in action by visiting the following link: http://ow.ly/7yPU50C8oMH

I hope you found this blog useful. Can’t wait to meet you in another one!