Month: March 2020

Remote working is an aspect of modern work that every developer may face with or think about it every so often, and it is mandatory somehow in this Coronavirus pandemic.

Whether you are a front end programmer or a back end engineer, you can stay productive from anywhere you are. Don’t let your location and situation limit you; however, except for today’s Coronavirus era, remote working may not be a good fit for everyone.

What’s your opinion? Does remote working make you a more productive developer? How can you enrich your quarantine experience? What are the pros and cons of remote working?

In this article, we will address these questions from a remote developer perspective. It helps you experience work in quarantine as a life turning point, end in a more satisfying job style.

Remote Working:

Working at home, at first glance, may look perfect. Your office is next to you after getting out of bed, and you can start your work a few minutes after grabbing your morning coffee. You can dress as you like and eat at any time; although you can enjoy all of these, remote working is not the same as working from home. As a developer, you need to maintain your focus to keep on deep working, whether at home or office. It could be a constant distraction if you do not adhere to your discipline of remote working.

You may think about not going to the office the next day, take your laptop to the home, and set it on your table at the kitchen or on the couch to work at home, and will. You may create a different day among the typical days of work, by doing so, and your family members may forget about your work since you are at home. If you wish to have a prolific job as a remote developer, especially in this Corona Pandemic era, first of all, think about creating your environment, where you can minimize distractions.

Pay attention to the workspace lighting and temperature. Choose a place where you can benefit from natural light and fresh air if it is possible, otherwise avoid fluorescent light. Use the tools that you use in a regular office at your home office; an ergonomic chair, a stable internet connection, a second monitor, supplies, notepad, and maybe headset.

As the next step, you need to explain to your family members that working at home doesn’t mean you are available for them at any time.

Also, the flexibility of working hours seems a striking feature of remote working. Of course, you can work in any way which is suited to you, but keeping up with the schedule would be more complicated if it is more flexible. It’s ok if you are not an early bird. On the other hand, you are not supposed to work all day long since your office is always available. Just be wise about your timing to prevent getting behind your schedule. It is essential to get into a routine about the work hours per day when to start and finish the work when to have lunch, dress appropriately, and keep the breaks short and refreshing.

If you are a remote developer of a team, be in constant communication with your coworkers, considering cultures and time zones difference. A video chat on Monday can help you to coordinate your weekly activities with those of your team members. A brief chat at the weekends can close the week more productive and friendly. Do not center on company topics in all your conversations. Build up your relationships as you do in a real office during your chats.

Your workspace can be a bit more inspiring using small plants. Enjoy your home office to boost your productivity as a remote developer and forget all anxiety caused by the Coronavirus pandemic. You are both safe at home and productive at work now.

Pros and cons of working remotely

If this is your first experience of remote working resulted from the Covid19 quarantine, take it easy. Many top companies offer remote job with employees spread across the world, too; The Theorem is a software development company and a diverse team of 5 continents around the world that creates software solutions for enterprise organizations and startups. You can find current openings of the company on https://theorem.co/careers . Hazelcast is also a big data, cloud-based solutions, enterprise software platform with the carrier opportunities here on https://hazelcast.com/company/careers/ . This platform helps businesses to build fast applications. Measuring how busy a location is in real-time, Density is a data & analytics, hardware & software engineering company offering remote opportunities on https://www.density.io/careers , and many others like Bluebolt, NAVIS, and Diagram. Just be aware of the pros and cons to gain the most advantage of this forced remote working

Advantages

• You can work as you like and whenever you like. That sounds great!
• You don’t have to live in a city.
• You can break 9 to 5 to your desired times instead of continuous 8 hours of working. You’ll have a flexible schedule to work when you are more productive, according to your body clock.
• You have a private and quiet environment for deep working (if you eliminate all possible distractions of home).
• No everyday commute, a perfect time-saving way in the modern and busy life.
• You can save on transportation costs.
• If you are interested in knowing people with the various cultural background, it provides you with the chance.

Disadvantages

• If you have young kids, it may be hard for them to understand that parents aren’t supposed to play with them while they are at home.
• You need to master your remote work and self-discipline to prevent failure in your job. Getting behind is the consequence of inadequate time and schedule management, whether you work independently or as a team member.
• Finding career growth opportunities may become hard if you lose social connections.
• Time zones difference can reduce the flexibility of your schedule in collaboration with other team members.
• Your team may forget about you if you do not establish an efficient connection with them.
• If you get stuck, it takes more time to ask for a solution.
• You may not have access to software & services that the company has provided
• No more happy hours with coworkers. You may miss the chance to find your best friends.

How to start remote working?

At first, invest time to raise your skills if you wish to reach to a well-paid remote job. Learn more to keep pace with the programming world and keep updated about new technologies. Take advantage of useful websites to improve your basic programming knowledge. There are a lot of valuable tutorials like “CSS Grid Tutorial for Beginners“, ready to push you forward. Put your time on building your sample sites, apps, and programs that introduce you to earn trust. Be honest, and do your best. 

Welcome to the world of remote working!

If you’re a web developer, you already know the importance of a reliable responsive web layout that works across different browsers. There are several ways to control your webpage layout; you can use tables, the box model, or CSS Flexbox.

But, in this beginner-level CSS grid tutorial, I’m going to introduce the method I find most efficient: CSS Grid.

What is CSS Grid?

Working with the gird is pretty straightforward. Just like Flexbox, the grid is a value you can set for the CSS display property. Therefore, once you set display: grid on an element, the browser will render a block-level box. The element’s children, known as grid items, will behave differently from the normal block and inline elements.

The CSS grid layout

The two major elements of a CSS Grid are “wrappers” and “items.” You only need a few simple lines of code to set up your grid. With the following code you’ll get a wrapper with six items inside it:

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Tip: You can force a grid container to behave like an inline-level box by setting display: inline-grid.

Columns and rows

To see the benefits of the grid, you need to start creating columns and rows. This is pretty simple to do:

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}
 

The values you assign to grid-template-columns and grid-template-rows will define the number of columns and rows in your layout, respectively.

The above code will result in a basic grid with three equal-width columns and two equal-height rows:

Now that you have a grid, you should learn how to modify it. This is where you realize how simple CSS Grid will make your job easier when creating layouts.

Grid gap

The grid-gap property lets you set the distance between the items. It will allow you to add margins to each item. You can use grid-column-gap and grid-row-gap to set the size of the gap you want between the items. Using the code below, all the gaps to have the same size:

 wrapper { 
 display: grid;  
grid-template-columns: 10rem 10rem 10rem;
grid-gap: 1rem;}
 

Sizing

You already set the column and row sizes in grid-template-column and grid-template-row, but to resize any single item from the grid, you can use the span property to spread one item across the width of the column. You should be aware of how this will affect the other items’ placing. Here is an example to better demonstrate this:

.item5 {  grid-column: span 2;}

Here, item5 is set to span across two columns.

You can use the same method for rows by using the grid-row property and span.

Placement

If you don’t like the blank spaces between your items, you can simply solve the problem by using grid-auto-flow: dense. The grid will check if the items fit and try to fill the gaps with any item that fits. For example, if we span the fifth item across three columns, we can add a seventh item and the grid-auto-flow will fit them together:

.wrapper { 
display: grid;  grid-template-columns: repeat(3, 10rem);  
grid-gap: 1rem; 
grid-auto-flow: dense;}
.item5 {  grid-column: span 3;}

As you see, the number of rows has changed even though we had previously set it. This property automatically modifies the placement of columns and rows to fit the items.

You can also use grid-column-start and grid-column-end to resize the items manually. This is simpler than the first approach, but you need to understand how grid lines work before you can use it.

The number of column lines is the number of columns plus one because the first line starts before the first column and the last line is after the last one. This image can help you understand how it works:

Here, item1 is expanded from the first column line to the fourth, which is the span of three columns. This can be done using this code:

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

You can achieve the same result, using the following code:

.item1 {  grid-column: span 3;}

If you don’t want to use the grid-auto-flow, you can try to manipulate your items manually using the grid-column-start and grid-column-end properties. Here is an output of a grid fit together using this method. Try and figure out the code that was used to create this CSS grid layout, as an exercise.

Grid values and functions

Those were the basics of CSS grid for beginners but now it’s time to learn a few cool CSS grid tricks. Fortunately, the grid gives you a lot of flexibility. You can use other values for grid-template-columns to create more complex structures:

• Using grid-template-columns: min-content creates the smallest column possible without causing an overflow.
• Using grid-template-columns: max-content creates a column with the maximum space required to display its content without wrapping.

You can see how the two values work in the image below:

You can set the maximum space that a column is allowed to take using the fit-content() function. The value is passed as an argument of the function:

grid-template-columns: fit-content(200px)

It’s also possible to use the repeat() function to avoid typing out the same value(s) over and over again. For example, the first line of code below creates twelve columns, each of which is 150 pixels wide. On the other hand, the second example fills the container with as many 150px columns as will fit and leaving a gap at the end, if any space remains.

grid-template-columns: repeat(12, 150px);
grid-template-columns: repeat(auto-fill, 150px);

Bottom line

The CSS Grid is an excellent tool for creating responsive layouts. After reading this beginner’s guide, now you have all the basic information you need to start using CSS Grid. As you saw in this CSS grid for beginners, working with the grid layout is easier than you think! Go ahead and practice what you’ve learned by creating great layouts.