Category Archives: Thoughts

How to link CSS to our HTML?

Welcome back to a new discussion,

In the previous lesson we have learned that the CSS is a file which holds all the information required by the browser to colour our HTML beautifully.

Let’s go back to our tree. We have learned in the article about the HTML tree and HTML tags that the “head” html tag can hold some information that will help us to describe a part of the identity of our tree. Now we will find out that inside the head element we can call for our CSS with:

<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>

The link element is more special. It does not have a closing “</link>” because it cannot hold any “leaf”. It just tells the browser that in this HTML document there is a link to a CSS file which should be fetched as well.

Let’s use the same example from what is HTML and include our own CSS file.

<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
<title>The title of our tableau</title>
</head>
</html>

Next time we will find out how the browser makes the connection between what’s in the CSS and what’s in the HTML file.

Have a good one,
Gabi

What it is CSS?

Hello reader,

CSS is a file with text in it. This text will help us give shape and colour to the HTML tags.

Remember how in the article about what is HTML we have said that:

This infinite piece of paper is the HTML. It has no specific colour, shape, size, nothing but it can have everything if we make it have.

  1. Let’s imagine that you need to document your painting so that it can be reproduced by anyone who has no skill. In the end we do know that our browsers have no understanding or knowledge of anything.
    writing_inside_image
    Look at that. It is quite ugly and hard to understand because of all the text. Mona Lisa would look quite terrible.
  2. When you are trying to copy a drawing imagine how long it would take if I read all that information for you. Try to read the following lines 1 by 1 and imagine the shape. I bet it will take over 1 second:border width: 10 points
    border colour: black
    width: 135 points
    height: 70 points
    left corner: 59×77 points
    right corner: 209×159 points
    transparent filling. Now you know everything there is to know for the first shape and you can draw it! Took us a while but it was not impossible, just slower.
  3. The order of the information matters. If in the previous example I had given you the left corner on the 3rd position, you could have put the pencil in that point and wait for more information. You knew already that the border is black and that it is 10 points thick. You could have had the 10 points black pencil in your hand waiting for the starting point.

To conclude our lesson:

1) What is CSS?
It is a document where we store all the information related to the layout of our HTML tags.

2) Why is it better to put this information in a separate file?
The browser will receive this file in the same time as our HTML file. This makes everything faster and will be able to arrange the information in the desired order because it knows that inside the CSS file there will be only information related to styles.

Next time we will learn how we can tell the html page to take the css with it when it leaves towards the user’s browser.

Have a good evening,

Gabi

HTML Tree and tags

Hey,

this HTML thingie can easily be viewed as a tree because that’s what it is. It has a root, a trunk and many many branches. As many as we want, with many many leaves, as many as we want. Some branches are better at different things such as providing shade, collecting sun rays allowing us to build a swing chair or a tree house.

Let’s think about it a bit. When the tree is really really small, it has only 1 branch and 1 leaf. When it grows a bit it becomes thicker and it gets to have a second branch. Right now we can call the first one a trunk.

The leaf is what we see on the screen. The branch is what is behind the leaf, in the back, which is not visible. Pretty much like in this image.

leaf

The branches start from a bigger branch and end with a leaf. In HTML the tags start with <, then comes the name of the tag and then comes >. Inside the tag we have our leaves or other branches. We can have anything we want here. Then we must specify when the tag finishes. To finish it we have </, then comes the tag name, then comes >.

The biggest problem in translating a tree on a piece of paper is the lack of depth. So we need to read everything from bottom left to top right and from bottom to the top.

Let’s see again the slightly modified example from the previous lesson:

black-and-white-tree-with-roots-clipart-429-tree-branches-and-roots-design

First we have the “html” tags that define where the page’s code starts and finishes. We need this because what is outside of it is not taken into consideration.

Think of the doctype as the root of the tree. It is what it makes it alive and defines it as it is. If the root says it is HTML, that’s what the browser will draw. You can read more about what the root’s options here .

Then comes the “head” element which can be seen as what’s beneath the earth but on top of the root. It can tell the tree about some characteristics but it is not the root which defines the tree.

Right after “head” comes “body”. Body is the trunk. Inside the body we find everything else.

div-leaf

Inside the body, as we look from left to right, we have a branch. Our branch holds a leaf. We only see the leaf but we should have something to link it from the trunk. This linkage in our case is the “div” tag.

Inside the “div” tag we have our very own text. This text is the only thing visible to the user.

As an exercise try to look at a tree outside. Comment how you would imagine the HTML structure and I will help you out getting it properly.

Have a good evening,

Gabi

What is HTML

Hey,

Let’s take a piece of paper and put it in a frame. It should look like an empty, white tableau. Let’s imagine the piece of paper is infinite and we only see a part of it at a time. This infinite piece of paper is the HTML. It has no specific color, shape, size, nothing but it can have everything if we make it have.

Let’s paint the paper in 1 color. The whole infinity of it. Now the paper has one property called background-color. This property has the value equal to the name of the color.

What we just read it is almost correct. The property part is correct just that we need 1 more information. We need to let the browser,our frame, know what properties it should expect because as the time passes new ones keep getting invented. This is done with something called “doctype”. If this browser and frame parts look strange read the article about browsers first.

Every tableau has a name and a signature of the painter. Our HTML has it as well. We will see later how they look like. For now we should understand that they exist in the “head” of our document. It really is called “head” and it really has something inside it called “title” which is our actual title of the document.

We have learned about the infinite page, the HTML. This infinite document is nothing more than a file with text in it which does nothing. The browser, our frame of the tableau, is the one which reads it and makes something out of it based on the information provided by the doctype.

Here is an example of such a file with only the title:

<!DOCTYPE html>
<html>
<head>
<title>The title of our tableau</title>
</head>
</html>

If you want to make it work please comment bellow with what computer you have and I will do my best to help you.

Next time we will learn more about HTML.

Have a nice day,
Gabi

Web browsers

Web browsers

What is a web browser:

A web browser is similar to a painting’s frame. Very similar to that. Just like the frames, they do not do any magic for the painter or for the tableau. They just help the painter expose his art where he wants to.

The frames can have many shapes. Like in the following image. Sadly, in comparison to the following image, the shape of the frame is up to the user. The artist can only try to make his work target the desired audience and hope that everything will work out nice in the end.

IMG_20151017_155259.jpg

Some frames have a glass window in the middle as the top layer. That window may have imperfections or shades. If an artist knows about them in advance he/she can use them to improve the paining or to cover them.
In the following series of images there is a black string on the lady’s eye. Look how, by knowing where the string is, the artist can manipulate the image and either hide it or reveal it.

IMG_20151017_153959.jpg IMG_20151017_154010.jpg IMG_20151017_154015.jpg

The artist is the one who positions everything visually based on his/her liking.

Technical part:

The web browsers are the programs we use every day to view pages. You might have encountered at least one of them if you are reading this text. Here are some examples: Chrome, Google Chrome, Mozilla Firefox, Firefox, Internet Explorer, IE, Opera, Safari.

Anything that you are using in order to view pages is a web browser and, as we have learned above, it is just a program which you ask to get a page for you and paints it on your screen based on how they have been programmed to. You have no control on how they have been programmed. You can only learn about their specific things and design with their minor differences in mind.
We will talk a bit more about those differences in a later article when we will learn more.

For today, just understand that:

  1. A web browser is a “stupid” program that paints on your screen what another person designed based on how the browser is programmed to.
  2. We will learn later on how to figure out which is the target audience and there are tools which can help us figure what browsers they are using.
  3. The web browser is not the internet. We will learn next time what the internet is. Just imagine it like the paining the frame. The paining is the internet. The frame is the web browser. A frame can fit any paining and if the paining is too big we find ways to make it fit.

Have a good one,
Gabi

Be a fit in the team #6 – Self development

Hola lector!

Ahh, the summer days, the sun, the waves. This is life!

Gladly, for most of us this period is quite long. Even if you don’t like summer, winter is coming (pun intended).

Self development

Case presentation:

Before going on with the discussion we should set the target audience. This is aimed at you, the one who is at least content with their job. The company may not be the best, neither the colleagues, but you are doing what you like.

We could start to surface the problem already. The team and the project are alive and have a direction. Unless there is an business unknown to me, the direction would point towards profit.

The profit means doing something better, faster, more efficient or for more people.

In order to fit in that team you should start helping out. It is expected of you to at least accommodate the change. By coming with ideas you fit above the line. By actually implementing the ideas and having a drive for improvement you do over-perform.

There is a branch of people who do not invest in self development but are not bad enough to be let go either. The pitfall with them is that they are good enough until a big change comes into play. From there on, the resource will be a junior again and will learn at the speed at which the information is presented. The same mistakes as before the previous change will be made.

Actions

As a team member:

  1. Find out the direction of the company/project
  2. Find out what you would like to do in the upcoming future
  3. Make a mix of of the two and drive the progress

Team lead:

As you could figure it out already, not everyone wants to invest in self-development and people can’t be forced to do things.

  1. Discuss with the team member and understand the following aspects
    1. Hobbies
    2. Direction
    3. Availability
  2. Set up a plan for which the member seems willing to commit
  3. Start splitting the work into tasks and set up deadlines together
  4. If there is no progress:
    1. Understand again why the progress did not start
    2. Split into smaller tasks by accommodating the reason

The good:

  1. You will be more competitive on the market
  2. You will be more useful in your team

The bad:

I am sorry but I can’t recall the last time when learning something new hurt.

Conclusion:

A raise is not a right. It is expected of each employee to work during the agreed amount of time for the agreed upon tasks. By doing just that you don’t deserve anything, you seem to do better because you know the project in more detail. What’s even worse, you are keeping a job occupied that could be of someone who invests in self development. It is called self development because it involves you.

Unless agreed on in advance, the company is not supposed to find time for you to improve. The team lead can try to go a step further and help you out, but it is not his job to teach you what to do after work in order to improve your life.

Have a nice day further on and sorry for the abrupt end but this is the truth. Your life costs you heartbeats, your position costs money. Bring this money in your pockets by bringing more value in those core hours.

Gabi

Be a fit in the team #5 – Deadlines

Hello again,

Me: Today you have that thing to deliver… what was the name of it… probably not that important enough. You will figure it out when you get to work. Meh, on a second thought I think I have promised my colleague to have it ready by the end of the day yesterday. Who cares, nobody is sending emails in the middle of the night.

Him: Aww, tomorrow morning I must really focus on the task QWE. I really hope that the answer for ASD is send by the end of the day today so I can just finish it. Such a minor task anyway… for my piece of mine, I would save a draft of the message tonight and spell proof read it tomorrow. If only I could get that reply… ARGHH!

Deadlines

Case presentation:

The deadlines, minor or major, are a very powerful motivational tool for everyone.

They help us split the work in chunks which allow us to track the progress. Without this metric we always have to go through the process of estimating what have been done and what it remains to be done. What’s even worse if the fact that only you, the executor can provide this estimation based on your knowledge. The less experienced you are, the more vague the estimation will be.

With deadlines we can provide an overview of what will be done and when. This enables the people around us to mind their business and net their needs and expectations around our deliverables.

Another aspect would be the amount of dopamine released by the brain when we are done with a piece of work. Now, making us feed good is a great achievement by itself, but this is not all. A snowball effect is triggered and the need to finish more arises.

In addition to the above aspects, the deadlines help us control the work spikes and overtime. Without a good system of tracking and presenting the estimations vs time used there is no way you can explain the necessary resources. There are bottlenecks everywhere. The fact that they exist is a problem, not working towards solving them is another problem altogether.

Action:

1) Understand the current system of estimations. It might not exist, it might be flawed or it might be room for improvement. Ask about it.

2) Start by logging your own piece of work by respecting what’s currently in place or create something new and observe how long each piece of work takes.

3) When you are comfortable with your system, start logging your work in advance and iron out the new problems.

4) Now you are in the position in which you could present your system. Don’t go just yet. Calculate how much overhead it adds to your work versus the advantages. Most people want numbers and a dream. Make sure you match your resources with the client’s.

5) Pick your fight. Present it to the ones equal to you if allies are needed for a cause, make sure your system helps the organisation. Don’t create a riot. Present it to your lead if you want to increase your visibility.

6) Profit!

The good:

1)  Makes you happier at work.

2) Partially removes the blame of not finishing everything in time.

3) Creates historical data to set better expectations in the future.

The bad:

1) By using such a system, expectations are generated and people are supposed to stick to it.

2) It is easy to draw untimely conclusions regarding a team member just by using estimations alone. Avoid doing this, it is a very slippery road.

3) Some personalities might feel surrounded and constrained.

Conclusion:

Be the person who has a log of what new items pop up and ask the relevant entity to re-prioritise your work based on the new entries. There is a fixed an amount of time and everyone’s goal is to deliver as much as possible in that amount of time.

Be the colleague that announces a delay ahead of time and does not delay his colleagues.

 

Don’t forget. Estimations are your friend.

Gabi

Be a fit in the team #4 – Favours

Hey reader,
you do like to gossip because it is quite fun. We all like it. The downside is that finding out the topics is not always something that you actually want or desire.

There are two points of view for this topic: “Obtaining a favour and bragging about it” and “Ask why and how a favour has been obtained”.

Obtaining a favour and bragging about it

Case presentation:

You have worked very hard recently in order to obtain something that nobody has. Desired or not by the others, it does not matter. They do not have it. You are happy and excited about it. This is good. You feel like sharing your happiness with the ones around you and bragging against the ones who did not believe in you.

Action:

1) Do not do any of the things that you feel like doing. There are very few circumstances in which it will end up well. Very very few! In all the others it will do you more harm than good.

2) When asked about your favour, always send the inquirer to talk to the one that granted you the favour. It is the only correct way to do it.

The good:

You are happy about what you have obtained just during the bragging conversation. As soon as the conversation is over, we go into “the bad”.

The bad:

1) Due to many many reasons, not all of us are equal. Even if we were equal, sometimes it would happen that only the first request is approved.

2) You will be labeled as someone who cannot respect the privacy of a conversation. If the manager wants this conversation to be public, he holds the meeting and presents the news accordingly.

3) From a manager’s perspective, it is cheaper to remove the root of the problem instead of creating the support required for everyone else to benefit. Here we do not talk only about the money.

Ask why and how a favour has been obtained

Case presentation:

Someone that you work with has obtained something and you are sooooo eager to learn what and why. Who knows, maybe you even like it, maybe you are just curious or you want to learn from their experience.

Action:

The only action that will not harm your colleague is to ask the person who granted the favour. Any other action will create problems for him and useless ideas for you.

The good:

You feel that you are close to you colleague for trusting you with that “secret”.

The bad:

1) Asking for a favour with him as an example will label him as a person who does not understand how privacy works.

2) You will not get the same treatment because you are different.

3) You will end up with a new desire which it is very unlikely to come true.

Conclusion:

When the time is right, the person empowered to announce the news will do it. Don’t ask about it, don’t talk about it. Focus on being as efficient as you could be. Life is not about the end result because we all die in the end. It is about the journey. Knowing the future sucks, while finding bits and creating around them makes it fun.

The team lead can use these favours as a very powerful motivational tool. Instead of just granting favours, he can present to the team a list of desired actions and outcomes so that others can understand how they can win something. It is obvious that they do not know how to do it, why to do it or what to do. If they are presented the “why” and a list of “what” it is very likely that some of them will try to figure out the “how”. This is a very good opportunity to use somebody’s drive and work in order to create a positive momentum inside the team towards the goals expected by the upper management.

Have a good evening,
Gabi and the blonde friend

Be a fit in the team #3 – Being late at work

Hey, welcome back!

Today’s topic is a bit stranger because it is one of the things that fall under “We want change but we don’t want to change”. The only pre-requisite for this topic to happen is having a schedule. Please note that this topic is not only for the employee, but for the whole team and especially the team lead.

Case presentation:

It happens very often that people arrive late at work. You find it easy to point out why you consider that you are not wrong with this behaviour.

Before digging into the good, the bad and the conclusion of this topic let’s analyse a bit the possible causes. In case you find another that has not been covered please post it down in the comments and it will be included.

1) Not enough relevant workload
2) Irrelevant core hours (too much overtime required, most of the team not available in the morning, team efficiency peak between other hours)
3) Motivation factors too low
4) Schedule too long or too different for the amount of personal social tasks
5) Environment factors (distance from home, traffic, temperature etc)

As we can see the “personal problems” reason has been excluded because those are random, necessary, can occur at any time and might not always be triggered by you.

1) Not enough relevant workload

Short description:

In the IT ecosystem many organisations function on a estimation / deliverable system of one sort or another. This concludes in some work that needs to be done for the project and some other work, let’s call it “filler”. The “filler” is relative to everyone’s job and personality but we all have it. None of us will come to work eager to do the filler but we are expected to.

Action:

Have a discussion to yourself and find the “filler” work.
Write down the “filler” work.
Ask your colleagues about their “filler” work, maybe someone has a similar problem and might be on to finding a solution already.
See if there is any tool or process on the market that can remove that work from you.
Talk to your direct manager/lead, present him your problem, your solution and try to find a common ground that pleases both parties.

2) Irrelevant core hours

Short description:

The causes of this topic are multiple and it should include something like: too much overtime required, most of the team not available in the morning, team efficiency peak between other hours etc. Basically everything that makes you believe that working between other hours would improve the amount of work done.

On this topic the main actor into improving the situation is the team leader and the team member must bring it up.

Action:

Team lead:

1) Analyse the thought of significantly changing the working hours to the desired ones.
Use the numbers and be realistic about the available work force in the local community.
Drop a relevant percent due to the specific skills.
Drop another percent the exotic hours.
Post an employment announce in the relevant place and see how many would apply and how many you need based on who applies.
Based on this analysis see if changing the core hours makes sense or not.

2) Discuss with the relevant company members about switching to an a-sync work mode in such a way that the teams are no dependent. When doing so, having the “executors” in 1 side and the “dreamers” in another is not the best solution. The executors will need feedback from the dreamers about various aspects of the implementation. Just be realistic about it until a good reliable process is in place.

3) Look around at each individual and see for how long they actually work. Try to do that in a non conspicuous way. Explain the team members that the goal is to adapt the working hours and not to judge them. Be fair about the explanation and do not cross the promise. You must not judge the team members nor influence them, just observe and note in an anonymous way. The team has delivered before you running the experiment and you thought they were working 8 hours a day. If everyone works 4 hours and 4 hours stalking on Facebook negotiate with them privately and come up with a better solution for each individual. Test different solutions, ask for feedback from the team. You are the lead, you have the power to transform the 4 efficient hours into 8 efficient hours.

Team member:

When you observe that the core hours do not fit your schedule find the reason why.
Consult yourself with your colleagues that come in late and find their reasons. While doing this do not tell them your reason first. Don’t influence them.
See if you could come up with a better proposal.
Present the proposal to the direct team lead/manager.

3) Motivation factors too low

Short description:

This usually happens when it is not bad enough for the team members to leave but there are very few challenges. In this situation nobody will leave but nobody will be eager to come work either. The action point here is more towards the team lead. The action picked should mostly based on root cause.

Action:

– The technology used on the project presents little or no challenge to the team members

Have a discussion with the team and sort the workload in such way that everyone gets to work on a personal project that will enchant the big project.
Make sure that a thin set of rules that will measure the success and progress is picked.
Everyone relevant should agree with the new technologies.

Be aware of the fact that there are 3 metrics: speed, cost and quality. Understand the direction of the project and challenge your team to find technical solutions that  push into that direction. Make sure you reward this research work because it will generate revenue. Be very open to every solution presented. Even if the desired metric remains constant but the other 2 are increasing the idea is very valuable. The final product will be much better.

– One individual is not motivated due to very specific reasons

Dear team leader, please do discuss with your colleague and help him be as efficient he can be.

4) Schedule too long or too different for the amount of personal social tasks

Short description:

We all have “things” that have to be handled. Paying bills, obtaining loans, our live evolves together with us and the jobs don’t seem to leave any spare time. As the writer I totally understand you and probably everyone does, however this is still a bad reason to be late at work.

Action:

If possible book the time in advance in the general calendar so that the leader can plan for an amount of work that fits your needs and your colleagues do not have to work extra because of you. Some things can totally be planed ahead of time and they are recursive monthly.

5) Environment factors:

Short description:

We should split those factors in two by occurrence. The constant ones have among them the distance from home, traffic and temperature. The sudden factors are in the lines of thunderstorms, transport system riots, yellow or red code for hot or cold weather, snow storms etc.

Action:

Constant factors:

The team lead could reason with you a bit but only a bit. Maybe you can start the day at home until the traffic thins down a bit and then come to the office. Sadly, since you have agreed to sign the work contract you should have taken them into consideration.

Sudden factors:

Many hours will be spent commuting. If the job allows for remote work the team lead should be pro-active in finding a middle ground for each individual. At the end of the day the business cares about the deliverable end result.

The good:

Being able to start working at your own pace feels quite rewarding.

The bad:

Even if you are doing your work very well, unless this is the agreed form of work, this will constantly be a valid blame topic which doesn’t do you any good.

If a colleague is blocked by your work he will remain block for at last 30 minutes more since you arrive at work.

Conclusion:

It is good to deal with the problem that causes you being late because having a good work ethic allows you to deliver the expected amount of predictability which in return helps the planers to organise the workload better. By being unpredictable you do cancel any chance of delivering more in the given amount of time.

 

Have good day further on!

Gabi

Be a fit in the team #2 – Being a bit too noisy

Hey reader,

welcome to the second article of the series related to how to be a good fit in the team. In the first article, “Be a fit in the team #1” , we have presented the stereotype of colleague who by trying to improve the communication ends up rising his cost and may end up slowing down the whole team.

Now, on the same article structure we will try to analyse why is not the best idea to be noisy.

Case presentation:

You have worked hard recently, spikes of work can happen. You have a well deserved relaxation period. You get to watch your favourite kind of clips over the internet and as you find them interesting you do share the content with your colleagues verbally.

The good:

Your colleagues save some time in searching for the shared information or may find new hobbies. This can be a team builder and can strengthen the relationships (given that the topic is generally accepted).

The bad:

It rarely happens that everyone has the same workload as you. In a lot more cases you end up being a disturbance factor. Indeed, not an un-wanted disturbance. When having to choose many will choose fun over work. Your cost will increase with the level of noise or curiosity you create.

If a colleague of yours needs to use headphones because of you and he misses a piece of information related to an implementation your cost increases with his cost per hour needed to fix it+ the cost of everyone else involved in the process.

If a team bursts into laugh due to your joke and the discussion continues for 10 minutes your cost increases with the sum of each individual’s 1/6*”cost per hour”.

Conclusion:

Now take this into consideration when you expect the next raise. The fact that you are still employed might be more valuable then your raise. Just be happy with it and consider if you want or not to revise your attitude.

Before laughing or sharing a topic with the rest – especially live, put in balance if the team building factor is really necessary.

It is ok to share the topics on a communication channel chosen by the team that can easily be ignored by each member individually based on their needs. This allows you to share with the team into a civilised fashion.