DEV Community: Mohammadjavad Raadi

Run a Scalable Magento Webshop with User Content Moderation on AWS using CDK and Python

Mohammadjavad Raadi — Sun, 14 Nov 2021 19:22:16 +0000

The AWS CDK is a software development framework from AWS with the sole purpose of making it easy to define cloud infrastructure in your favorite programming language and deploy it using AWS CloudFormation. You can easily provision many resource stacks on AWS and destroy them when you're done.

We're going to build an infrastructure and the required resources to run a flexible, scalable and cost-effective Magento webshop on top of AWS.

Prerequisites

AWS Account & User - Get help here
AWS CLI Installed & Configured - Get help here
Node.js Installed - Get help here
AWS CDK Installed & Configured - Get help here
Python 3 Installed & Configured - Get help here

Project Architecture

A VPC that spans two Availability Zones. Each Availability Zone is configured with a private, isolated, and a public subnet.
In a public subnet, a bastion host to provide Secure Shell (SSH) access to the Magento web servers and the internal RDS MySQL database for troubleshooting purposes.
AWS-managed network address translation (NAT) gateways deployed into the public subnets and configured with an Elastic IP address for outbound internet connectivity. The NAT gateways are used for internet access for all EC2 instances launched within the private network.
An Amazon RDS for MySQL database engine deployed via Amazon RDS in the isolated subnet. If you choose Multi-AZ deployment, a synchronously replicated secondary database is deployed in the second isolated subnet. This provides high availability and built-in automated failover from the primary database.
EC2 web server instances launched in the private subnets. Elastic Load Balancing deployed to automatically distribute traffic across the multiple web server instances.
User data scripts to automatically install the required packages and perform the required configurations.
Elastic Load Balancing deployed to automatically distribute traffic across the multiple web server instances.
Auto Scaling enabled to automatically increase capacity if there is a demand spike, and to reduce capacity during low traffic times.
A CloudFront distribution is provisioned in front of the Application Load Balancer to provide caching at edge and to require encrypted web traffic through HTTPS.
An S3 bucket to be used by the Magento installation to store users' media content.
A Lambda function that is triggered by media content S3 bucket create item notifications. This function uses Amazon Rekognition DetectModerationLabels API to check for inappropriate content uploaded by users.
IAM instance roles with fine-grained permissions for access to AWS services necessary for the resources.
Appropriate security groups for each instance or function to restrict access to only necessary protocols and ports. For example, access to HTTP server ports on Amazon EC2 web servers is limited to Elastic Load Balancing. The security groups also restrict access to Amazon RDS DB instances by web server instances.

Project Configuration

The project implements the use of CDK runtime contexts to dynamically create per-environment configurations and resources.
The project defines two dev and prod environments and resources are configured depending on that. For example, the project creates an RDS MySQL instance with minimum configuration for testing on the dev environment, and creates a powerful and highly available database on the prod environment.

Learn more about CDK runtime contexts here.

Project Repository

Here's the project repository. Please be sure to go through the README file to get started and let me know if you have any comments or feedback. Enjoy!

mjraadi / cdk-magento-webshop

This is a CDK app to provision the required resources to run a flexible, scalable, and cost-effective Magento webshop on top of AWS.

Magento Webshop AWS CDK Project with Python

This is an AWS CDK app to provision the required resources to run a flexible, scalable and cost-effective Magento webshop on top of AWS.

Prerequisites

AWS Account & User - Get help here
AWS CLI Installed & Configured - Get help here
Node.js Installed - Get help here
AWS CDK Installed & Configured - Get help here
Python 3 Installed & Configured - Get help here

Project Architecture

A VPC that spans two Availability Zones. Each Availability Zone is configured with a private, isolated, and a public subnet.
In a public subnet, a bastion host to provide Secure Shell (SSH) access to the Magento web servers and the internal RDS MySQL database for troubleshooting purposes.
AWS-managed network address translation (NAT) gateways deployed into the public subnets and configured with an Elastic IP address for outbound internet connectivity. The NAT gateways are used for…

View on GitHub

What was your win/loss this year? What important lesson did you learn?

Mohammadjavad Raadi — Wed, 25 Dec 2019 18:30:11 +0000

2019 is coming to an end and it's time for a new beginning. It was a very good year for me overall, I started blogging, gave a little back to the community, learned lots of new tools and technologies, landed my first fully remote job and visited two countries.
Aside from almost losing my dad and getting cut off from the rest of the world (internet shutdown in Iran), everything else went great.
The important lessons for me were:

Never underestimate the power of your will 💪💪
Remote job is difficult but its advantages outweighs its disadvantages.(at least for me)

I always like to hear stories and learn from others so please share your thoughts. I'd love to hear them.

If You Don't Know, Now You Know - GitHub Is Restricting Access For Users From Iran And A Few Other Embargoed Countries

Mohammadjavad Raadi — Sat, 27 Jul 2019 19:11:10 +0000

Here's something you may never have to see in your lifetime:

This is not something new to me and many others. In fact these sort of discriminations have happened to me so much that I'm very sad to have gotten used to it. Let me catch you up on what's going on.

Update 1 - 28/7/19

It is now possible to make your private repositories public.

A few days ago, I received an email from GitHub which stated that my GitHub account has been restricted due to "Trade Control Laws Restrictions". Opening my GitHub profile, I found out that I can't access my private repositories. It also had stopped publishing my GitHub Pages sites. I was pretty upset and disappointed to see this happen again.

I understand that GitHub may be innocent and simply obligated to comply by the US government laws and regulations but here's the sad part, it's not the governments who suffer. It's us. We have to pay the price just because governments and politicians don't get along.

I do appreciate GitHub providing free private repository hosting for us, but I do believe it was absolutely unprofessional and unethical to block our access to our private assets without any prior notice.

You might think, "what's the big deal?! there are many alternatives out there." Yeah, I know but this is not what it's about. It's about being constantly overlooked and discriminated against and not being able to have the same right to access the tools and resources as your fellow DEVs. 😔

How would you feel like if you wake up tomorrow and see that @ben is blocking your access to this great community of amazing developers for a stupid reason?

Please make sure to checkout this repo for more information and see how you can help us.

1995parham / github-do-not-ban-us

GitHub do not ban us from open source world 🇮🇷

A Message to GitHub

Attention! We are so thankful for your support. This repository always shows that people are all together against unfortunate happening around the world As GitHub revised some of the previous restrictions, we decided to reduce this repository's activity. Of course, it does not mean that we agree with the sanctions and the GitHub We will post a conclusion and explain more soon, please wait for that. The campaign will be terminated Thursday 1 August 23:59 (Tehran Time GMT +4:30). After this time we won't merge any new PR. Once again thanks for your support and kindness Please wait for our final conclusion

Tip: You can use …

View on GitHub

I just took couple of LinkedIn quizzes and was wondering do they even matter?! 🤔

Mohammadjavad Raadi — Thu, 20 Jun 2019 16:19:38 +0000

Apparently, Linkedin is using their resources at Linkedin Learning (formerly Lynda) to create pass/fail tests with adaptive questions for specific skills. If you pass the timed test and find yourself in the 70th percentile you receive a badge.

You can choose whether you’d like to display this badge on your profile to represent that you’ve passed the assessment for that given skill. If you don’t pass an assessment for a given skill, you’ll be able to retake it one more time after three months and failed tests are not displayed on your profile.

This re-imagination of skills is far more reliable than someone checking a box on your profile to endorse a skill. I do like the idea that skills on LinkedIn profiles are becoming reliable but will recruiters take the time to consider this? There hasn't been much discussion about this on the web. Please let me know what you think.

Sanity Tip For JavaScript Devs: Learn to Run Asynchronous Functions in Array.map()

Mohammadjavad Raadi — Thu, 13 Jun 2019 10:08:07 +0000

The Problem

I was writing some API code recently using Node.js, and came across a place where I needed to use Array.map() with an async function on each item. I was briefly surprised when my map call did not work right. Logging the output of the map function would show this:

[
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
]

I was expecting to get an array of objects which each would be returned from an asynchronous API call inside the map function, but got this.

Why Use Asynchronous Function Inside `Array.map()`

Array.map() is a synchronous operation and runs a function on each element in the array resulting in a new array with the updated items. There are situations where you want to run asynchronous functions within map, e.g. updating a list of models and push the changed information back to the database or request information from an API that you want to use for further operations.
Let’s solve the problem of running an asynchronous operation in a synchronous function!

The Solution: `Promise.all`

An approach to perform async actions in array.map() is to return a promise for each item which then resolve outside the map function. Because map won’t wait for the promise to resolve, it’ll return a pending promise.

You need to take care of all promises in the array returned from map to resolve before using their results. Do this with Promise.all(<array-of-promises>). The result of waiting for all promises to finish is another array containing the results.

Let’s visualize the idea with an example:

const list = [] //...an array filled with values

const functionWithPromise = item => { //a function that returns a promise
  return Promise.resolve('ok')
}

const anAsyncFunction = async item => {
  return await functionWithPromise(item)
}

const getData = async () => {
  return await Promise.all(list.map(item => anAsyncFunction(item)))
}

const data = getData()
console.log(data)

async/await is one of my favorite new features in JavaScript as it makes asynchronous JavaScript code much more readable. If you’re like me, you’ll find Promise.all incredibly helpful while working with async/await.

The main thing to notice is the use of Promise.all(), which resolves when all it’s promises are resolved. list.map() returns a list of promises, so in result we’ll get the value when everything we ran is resolved. Remember, we must wrap any code that calls await in an async function.
I hope this has been helpful to you. Please make sure to leave a comment or any questions you may have down below.

About Me

I am a full stack web developer and co-founder of Bits n Bytes Dev Team, a small group of highly talented and professional freelance developers, where we provide custom web application development services based on cutting-edge technologies, tailored to client's unique business needs.

I'm available for hire and you can check out my portfolio website at https://www.bitsnbytes.ir/portfolio or contact me at raadi@bitsnbytes.ir.

Discuss - UX/UI Design Considerations and Challenges for the Elderly

Mohammadjavad Raadi — Tue, 28 May 2019 16:28:25 +0000

When was the last time you sat down with your (grand)parents and tried to help them learn how to use a new app? Everyone who’s been there can recognize the fascinating (and frustrating) experience in which an elderly user enters this new technological world, and requires explanations for things we deem self-explanatory.

When it comes to using mobile devices, senior people may have technology anxiety. They may also face some challenges due to vision problems, complex user interface, lack of support system etc.

I've recently had an idea for a side project which would target senior citizens, elderly people and not so tech savvy individuals. I've been studying and planning for it for a while and I would like to ask you to please share your knowledge, experience and challenges regarding crafting the UX and UI for this audience.

I would very much appreciate it if you could also reference me to an already-implemented web/mobile application or a design system with the main focus on elders to get a better understanding.

Thanks

Don't let that huge codebase scare you! Tips and tools to make sense of other people's code

Mohammadjavad Raadi — Sun, 19 May 2019 19:55:35 +0000

Image: Cherlat.com, Getty Images/iStockphoto

There comes a time in every developer's life when they start a new job, join a development team or decide to contribute to an open source project and you’re faced with a new, large, unfamiliar codebase and a bug to fix. The codebase is something of a size you’ve never really seen before but don't worry, I am going to share a few tips and tools for how you can make sense of other people's code without going crazy.

You Don't Necessarily Need to Know Everything 🤯

It was a game changer for me to realize that I simply can’t understand everything. Lots of beginner engineers are ambitious and want to read everything. The spirit is good; however, no, you simply can’t, period. It is important to prioritize what code you want to understand, and what code to skip.
Read the Docs 📖

The first place I start with a new project is reading over any available documentation or README files. This allows me to become familiar with the setup, functions, style, and other important parts of the codebase. Some parts of the documentation might be out of date, but seeing the evolution of code can also help to understand the project’s history. Unfortunately, sometimes, the documentation isn't complete and it may be wrong.
Use Command Line Search Tools 🔍

It is not always easy to be immediately effective when you dig for the first time into a codebase containing several thousand of lines. But my secret weapon to find my way through so many lines of code is command line search tools like grep and ack. Searching for a unique string or keyword is an excellent way to find out where a functionality is located without jumping into a text editor. I'll demonstrate how I use this handy method to immediately find out what file(s) I need to look at to fix a bug.

A Practical Takeaway

I've recently started contributing to the DEV source code and I highly recommend everyone to do so as well. It has quite a large codebase and the maintainers are extremely welcoming. I believe it is a perfect place for junior developers to contribute to the open source and put their knowledge into practice.
I identified a bug and reported the issue, and I wanted to try to fix the issue myself. Consider that DEV's backend is developed with Ruby and I am not a Ruby developer but what I needed to fix was the HTML code that was returned to the browser. I had no idea what file I needed to look at or where the function was.

Grep

I opened up the dev tools and realized that the <div> element in question has a class name of ltag__twitter-tweet__video. Running the string through grep I found three files I needed to look at:

$ grep -iRl "ltag__twitter-tweet__video" app/
app/assets/stylesheets/ltags/TweetTag.scss
app/views/liquids/_tweet.html.erb
app/liquid_tags/tweet_tag.rb

Cool, right? The nice benefit of using grep is that it’s available on pretty much any ‘nix distribution you might use. Its utility is powerful in many different contexts. To learn more about grep, make sure to check out this post.

Ack

Ack is “a tool like grep, optimized for programmers.” It searches recursively by default (i.e., your project) while ignoring VCS directories like .git and has convenient tools that help you explore code with fewer keystrokes.
Taking the same grep example, here’s how we would search for “ltag_twitter-tweet_video”:

$ ack "ltag__twitter-tweet__video" app/
app/assets/stylesheets/ltags/TweetTag.scss
44:  .ltag__twitter-tweet__video{

app/views/liquids/_tweet.html.erb
9:        <div class='ltag__twitter-tweet__video'>

app/liquid_tags/tweet_tag.rb
30:          el.getElementsByClassName("ltag__twitter-tweet__video")[0]   .style.display = "block";

Ack is my trusty search tool of choice and I think you will get a lot of value in using it as a grep replacement. I would highly recommend learning how to use ack. Consider reading this to learn more.

Ask! 🙋

Finally, if you’re still stuck… then ask! A great way to gain knowledge of a project when starting out is to pair with a developer on your team who is more familiar with the codebase. This person can provide high-level insight about particular design patterns, testing, processes, and third-party code that are relevant to the project. They can also give you more historical context about the project and why certain choices were originally made.

And those are my tips! Hopefully this helps with the daunting task of unfamiliar code. Please try not to stress. Breath, remember these and you’ll be fine!
What ones do you have? I'd love to hear your tips and tricks as well.

About Me

I'm available for hire and you can check out my portfolio website at https://www.bitsnbytes.ir/portfolio or contact me at raadi@bitsnbytes.ir.

Planning a Real-World Web Application & Key Considerations(Part 1: Project Management)

Mohammadjavad Raadi — Sun, 21 Apr 2019 14:11:59 +0000

Intro

Planning a non-trivial web application that performs some sort of functionality is something you may have done in the past or are in the midst of doing. However, there are many moving pieces to building a real-world modern web application.
As you get started with your next project, you can save yourself some time and stress by making a proper plan before you even lay a finger on your keyboard. This series of posts document a high-level process to use when planning a modern web application, from project organization, collaboration considerations and tooling choices during development, all the way through deployment and performance strategies. It offers a high-level outline of the main decisions you may have to make, based on solid application-building practices.
There are absolutely many options to choose from for each stage, but I'm going to introduce the most popular ones. This post is going to be highly opinionated so feel free to share your thoughts and correct me if I'm wrong. 🙂

Key Considerations

Here's a high-level list of the most important things you need to take into consideration:

Project Management
Development Process Methodology
Accessibility & Internationalization
Tooling & Development
Frontend & UX
Backend API
Content Management
Testing & Error Tracking
Cross-Platform Targeting
State Management
Deployment & Performance

To have a smooth process when building your application, it’s essential to think ahead and choose options that best support your team and the goals of the project.

Project Management

Do not start writing code before you know what the code needs to accomplish! First, you need to decide how you’re going to get things set up. No matter how exciting it is to start working on a new project, there are still many hurdles the developers and the entire working team have to overcome. As business grows and projects mount, things can easily get out of hand. Many different challenges may arise. Instead of reaching the desired goals, developers might get overwhelmed by the challenges and eventually face the prospect of failure. Developers who are aiming at ambitious projects need to focus on high-quality work and operate under schedule. To make sure that everything runs smoothly, they usually opt for a robust and client-friendly management system tool that will segment the tasks and help the team bridge potential gaps. Here are a few reasons why project management software is useful for business of any size:

Team Collaboration

When managing a large project, each member is designated with individual tasks in the team. To make sure everyone is on the same page, a project management solution helps in simplifying team collaboration. When a member has inquiries or concerns, he/she can immediately get the right response through communicating with the team internally—with the right people in the right project—without looking for other sources. This reduces time lost in searching for answers. It also optimizes sharing of documents, timelines, and status updates to notify everyone of important information such as how much work is done and how much is left to be finished.
Scheduling and Planning

Without a system in place, it can be difficult for your team to stay within schedule because of the lack of a set guideline on what should be accomplished by who and when. Time is lost when employees report to work without knowing the tasks they should be doing. This often affects one’s productivity. Utilizing the software outlines tasks and makes them visible. Setting deadlines and priorities, along with scheduling, avoids misunderstandings and overlapping of tasks and schedules.
Budget management
Each project comes with a cost which is included in a budget along with contingencies and profit. A project manager’s goal is to keep the actual cost below, or at least at, the estimated cost in order to maximize the profit earned by the company for the project. To manage expenses efficiently, simply creating an Excel spreadsheet won’t do the job.

Businesses that are not yet utilizing a PM software are likely to do more work while gaining less profit because of the time wasted on juggling little tasks. If these tasks are taken care of, you and your team will have more time to focus on core operations to complete your project.

Examples of Project Management Software

There are a lot of PM software programs available that focuses on key features such as tracking and organizing the project management process. Knowing the features you need for your own business is essential in choosing a product to implement in your daily business operations. JIRA, ActiveCollab, Wrike, ClickUp to name a few.

Final Thoughts

If you want to keep your team organised, deliver the best results within desired timelines and budget, and triumph on your next development cycle, having an efficient project management tool is a big help to achieve that goal. It really doesn't matter which tools you choose, it’s essential that your team adopt and use the tools you select. Also, don’t be afraid to monitor the use of these tools and improve your workflow if opportunities for improvement arise. New tools are released all the time and you may wish to adopt emerging tools that provide features that are missing in your current process. It’s natural to adopt different tools as your team matures and your application grows.

About Me

I'm available for hire and you can check out my portfolio website at https://www.bitsnbytes.ir/portfolio or contact me at raadi@bitsnbytes.ir.

k8h3d Trojan/Botnet Explained & How It Disrupts the Entire Network - Check Your Computers NOW!

Mohammadjavad Raadi — Fri, 12 Apr 2019 05:28:39 +0000

TL;DR

In this post, I will share with you my recent experience troubleshooting a major disruption in my client's network, analyzing k8h3d Trojan footprints on Microsoft Windows computers, how to defeat it and some practical tips to protect your organization against cyber attacks and avoid becoming a victim of a botnet.

What Was the Problem?

Recently my team and I were hired to troubleshoot a client's network to understand why they were having constant unstable Internet connectivity issue and high latency response time. The company was highly dependent on the Internet connectivity and employees were complaining that their computers were very slow and for them to experience these issues were major loss in terms of revenue. They wanted us to fix the problem immediately so we began digging.

First Clue

At first, we started by inspecting their network equipment. We carefully went through each switch, access point, firewall and router and they all seemed to be working as expected. However, we noticed a strange amount of connections from TCP port 65533 to a certain IP address on the Internet. The high number of connections would cause the routers to become unresponsive and crash repeatedly.

Second Clue

Some employees reported that they are suddenly seeing a new user account with the name of k8h3d on their login screen. It led us to believe that the network might had been compromised by a Trojan malware and it had spread itself across the entire network.

Connecting The Dots

We suspected that the computers might had been compromised so we tried to separate the infected hosts from the rest of the network to see if it makes any difference and it did. Everything would go back to normal once they were cut off the network. We then took one of the infected computers to the lab to analyze the malware further. Taking our findings and looking them up on the Internet, we realized that the Trojan first must have had arrived on the system by visiting a malicious website and downloading and executing an Office document. Then it had spread itself via SMB (TCP/445) or MS SQL (TCP/1433) by exploiting the MS17-010 vulnerabilities in Microsoft Windows SMB Server. It would turn the host into a zombie and would try to spread itself as much as possible to extend its botnet.

What's a Botnet?

While you can’t get a botnet, you can be part of one without you even knowing it. At their most basic, botnets are made up of large networks of "zombie" computers all obeying one master computer called "Command and Control Center". Once those things are in place, a botnet should be ready to go cause some mayhem. When the the computer is infected by a Trojan, it’ll open up a “backdoor” that will allow the hacker to access and control certain aspects of the connected device.

Dangers of a Botnet

Your machine and the network will slow down, sometimes significantly. The tasks that botnets usually perform require lots of CPU power and bandwidth, which can make even basic web browsing feel sluggish. Botnet attacks can use basically any system resource, too, meaning you’re sharing your performance with a criminal. The goal isn’t to harm you, but that’s often a consequence. Instead, it’s to use you to harm others.

How to Defeat `k8h3d` Malware

I'm really not sure what this malware is called since I didn't find much information about it, but I just call it k8h3d malware. The good news is that removing this malware isn't very difficult. All you need to do is to scan and clean your computer by an up to date anti-malware software, remove a few firewall rules, remove some registry keys and clean up some scheduled tasks. You can read more about it here.

Why Did It Happen?

As we were analyzing the network we found significant number of outdated and un-patched Windows computers connected to the Internet without any protection software. The MS17-010 vulnerability has been around for quite some time now and it's crucial to patch those security holes. I believe that the black hat hackers are almost always one step ahead and the least we can do is to take cyber security seriously and make sure we enforce reasonable security policies.

How to Stay Safe and Protected

Educating yourself against the threats on the Internet is one of the best lines of defense in your personal cyber security. While traditional Internet Security software programs can catch a lot of the threats before they get to you, it can’t catch all of them. cyber criminals will try any tactic to try to get your personal information, including non-digital methods such as tech support phone scams, tax fraud and social engineering. Here are some tips and best practices for you to consider:

Avoid pop-ups, unknown emails, and links
Use strong password protection and authentication
Connect to secure Wi-Fi
Install security software updates and back up your files
Enable firewall protection at work and at home
Invest in security systems
Consult with your IT department
Avoid using the same password for every login
Keep your operating system fully patched and updated
Keep your personal and private information locked down
Use a VPN software provider who won't keep a log of your traffic
And finally take security seriously

You Can Be a Hero

Having the right knowledge can help minimize your company’s breach surface. Remember: just one click on a corrupt link could let in a hacker and one failure to fix a flaw quickly could leave you vulnerable to a cyber attack.

If you think I missed a tip or you have a similar story as well, share it with me and the community in the comments section.

About Me

I am a security consultant, full stack web developer and co-founder of Bits n Bytes Dev Team, a small group of highly talented professionals, with over 10 years of experience in systems administration, Linux administration, cloud deployments, virtualization, server monitoring, performance tuning and high availability.

I'm available for hire and you can check out my portfolio website or contact me at raadi[at]bitsnbytes.ir.

Things You Should Do to Prevent Computer Eye Strain, Personal Health Is Just As Important As Deadlines

Mohammadjavad Raadi — Fri, 05 Apr 2019 17:48:44 +0000

Think about it — when was the last time you gave the health of your eyes any thought? I’ll confess I never thought, someday eye pain could have an unsettling impact on my productivity and my daily life. Staring at code on a screen or reading through your server's logs for most of the day isn’t quite natural for the human eye, and this is my body’s way of telling me to change my habits. If you are someone like me who won't rest until you fix that damn bug, I found some helpful ways to help me stay healthier and a few apps to make me relax my eyes more throughout the day.

Adjust Your Lighting

Making sure that your work-space is properly lighted is important for your mood as well as your eyes. Try and work in natural light whenever possible, ideally with the window to your side instead of directly in front or behind you, and use blinds to reduce glare. I used to work in a somewhat low-light place without any natural light and it caused me constant headaches and eye pain. I'm glad those days are over.

Adjust Your Monitor’s Position

For optimal comfort, your screen should be between 20–30 inches away from your eyes. Also, the top of your monitor should be at eye level. It will also help you prevent neck pain in the long run. If you're using your laptop as your main development computer, make sure you put it on a stand and push it a little away from you.

Splash Cold Water on your Eyes

This will relax your eyes and remove any dryness that might have set in. I found this very useful since it makes me get up, get away from my desk, stretch a little and make my eyes feel rested.

Practice the 20–20–20 Rule

I'm sure you've heard about this and this in fact is a helpful method to give your eyes a small break. The rule suggests that after every 20 minutes of using the computer, take at least 20 seconds to look at objects that are 20 feet away from you. Although, It's not always possible to find an object 20 feet away, I believe what it all comes down to is giving your eyes a break every once in a while.

Finally, Use a Break Reminder App

So it’s a good idea to take breaks regularly, but when you’re in the thick of something it can be easy to forget. Happily, there are very good break reminders out there for you to use. Some offer notifications, some make a sound and some just prevent you from getting on with your work for a short time. Here are two free and open source break reminders:

Safe Eyes (Available For Linux)

This is my absolute favorite because I was looking for something more enforcing than just a notification or a sound. Check out their GitHub page for instructions on how to install it. There is instruction on every major Linux distribution.
Stretchly (Available For Linux/Mac/Windows)

Stretchly is a cross-platform electron app which is designed to be easy to use. Here's their GitHub page to check it out.

Hopefully this has helped you understand how easy (and important) it is to look after your eyes as part of your overall health. If you liked this post, please share it with others to help them stay healthier. If you have any other tips or ways that work for you, feel free to let me know in the comments section.

About Me

I'm available for hire and you can check out my portfolio website at https://www.bitsnbytes.ir/portfolio or contact me at raadi@bitsnbytes.ir.

[Updated] Simplify the require/import paths in your project and avoid ../../../ circles of hell

Mohammadjavad Raadi — Fri, 29 Mar 2019 17:41:11 +0000

Do you hate seeing ../../../ everywhere in your code? Come along and I'll show you why you should use babel-plugin-module-resolver to work faster and write cleaner code.

Update 1 (3/31/19):

As Pavel Lokhmakov suggested, I've created a new GitHub repo here to achieve the functionality explained in this post without the need to eject the app.
react-app-rewired and customize-cra are both libraries which let you tweak the create-react-app webpack/babel config(s) without using 'eject'.
Simply install these packages as dev dependencies and create a new file called config-overrides.js in the project's root directory and put your custom config there. Then all you have to do is to update your npm scrips according to react-app-rewired docs.

The Inspiration

I never liked writing code like this:

import NavBar from '../../components/NavBar';

To me it seemed very confusing, not clean and not maintainable. Imagine somewhere down the line, you needed to alter your project's directory structure. You would have to go through every file and update your code to reflect your changes. Talk about non-maintainabilty!
But I loved the way I would import packages from the node_modules directory:

// ES6 import syntax
import React, { Fragment } from 'react';

// CommonJS require syntax
const nodemailer = require('nodemailer');

So I was eager to find a way to import/require my custom modules/components just like this. babel-plugin-module-resolver to the rescue!

TL;DR

You can find the GitHub repos associated with this article:
https://github.com/mjraadi/babel-plugin-module-resolver-test-app
https://github.com/mjraadi/babel-plugin-module-resolver-customize-cra

What does it do?

I'll let the plugin author explain:

This plugin can simplify the require/import paths in your project. For example, instead of using complex relative paths like ../../../../utils/my-utils, you can write utils/my-utils. It will allow you to work faster since you won't need to calculate how many levels of directory you have to go up before accessing the file.

In case you don't know what babel is, it's a JavaScript compiler which is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. If you're building an app with create-react-app or similar libraries, they're using babel behind the scene.

Let's get started

Here I will show you how you can use this plugin in an app created by create-react-app. Create a new app with the command below:

$ create-react-app babel-plugin-module-resolver-test-app

create-react-app encapsulates the project setup and all the configurations and gives you tools to create production ready apps. Since we need to change babel configuration we need to eject our app. Ejecting will move create-react-app’s configuration files and dev/build/test scripts into you app directory.

Note: this is a one-way operation. Once you eject, you can’t go back!
It's fine for our use case because we're building a test app. Go ahead and run the command below:

$ npm run eject

Confirm and continue.

Note: at the time of writing this post, there is a bug with create-react-app explained here. The workaround is to remove the node_modules directory and reinstall the dependencies again.

Install the dependencies:

$ npm install

Install babel-plugin-module-resolver plugin by executing the following command in your project directory:

$ npm install --save-dev babel-plugin-module-resolver

Open package.json file and look for babel config. This is how it looks like after eject:

...
"babel": {
  "presets": [
      "react-app"
    ]
  },
...

Now we need to tell babel to use our module resolver and define our root directory and aliases. Edit your babel config section to make it look like this:

...
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["module-resolver", {
        "root": ["./src"],
        "alias": {
          "dir1": "./src/Dir1",
          "dir2": "./src/Dir2"
        }
      }]
    ]
  },
...

Now create two directories in src directory called Dir1 and Dir2. Our defined aliases will point to these directories respectively.

Create a component file called ComponentA.js in Dir1 directory and put the code below in it:

import React from 'react';
import ComponentB from 'dir2/ComponentB';

const ComponentA = () => (
  <p>
    Hello from <ComponentB />
  </p>
);

export default ComponentA;

Now create ComponentB.js in Dir2 directory with the code below:

import React from 'react';

const ComponentB = () => (
  <a 
    href="https://www.bitsnbytes.ir"
    className="App-link"
    target="_blank"
    rel="noopener noreferrer"
  >
    Bits n Bytes Dev Team
  </a>
);

export default ComponentB;

Now edit the App.js file in the src direcory:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ComponentA from 'dir1/ComponentA';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <ComponentA />
        </header>
      </div>
    );
  }
}

export default App;

Notice that I didn't have to go up one directory or down another directory to import my components. We're now ready to run our app, run the command bellow in your terminal:

$ npm start

You should see your app in the browser without any problem. If you have any questions or problems, feel free to comment.

Conclusion

Custom module resolvers will save you time and the frustration of dealing with ../ splattered everywhere. They take a bit to setup and ensure full cooperation with existing tooling, but the result and visual satisfaction of never having to see ../../../../../.. is well worth the initial outlay on big projects.

About Me

I'm available for hire and you can check out my portfolio website at https://www.bitsnbytes.ir/portfolio or contact me at raadi@bitsnbytes.ir.

I'm a web developer who turned a learning side project into his 😍-looking portfolio website. Ask me anything!

Mohammadjavad Raadi — Sat, 23 Mar 2019 15:15:31 +0000

All right, all right, all right!🙂 It's a bit long overdue but I finally had enough time to do it. I've been a web developer for almost 3 years now and during this time, I've had the opportunity of learning and building different web applications for variety of clients. I've been mostly using Vue.js for front-end development and Laravel framework for the back-end API.

The Inspiration

Last year I decided to learn react.js and see for myself what all the fuss is about and I have to tell you it's been an amazing journey.
The inspiration for learning react and building my multilingual website came from Blockchain website.

How Could They?!!!

The first thing I noticed was that it was developed with react.js but how in the world were they able to make it SEO-friendly, I asked myself. I tried to view the source of the web page and I saw a lot of HTML markup, CSS and JavaScript code. I asked myself if this is an SPA, then what's with all this code? 🤔

Digging Deep

At the time, I didn't have any knowledge of Server Side Rendering and all of its glory so I began searching through the Internet and got myself familiar with the idea. Then I found a few boilerplates on GitHub and started building a side-project which in the end resulted in my portfolio website.

Thank You Open Source

I would like to give a big shout-out to the developer team at Creative Tim for providing an open source version of their UI kit based on Material UI library.

TL;DR

Please have a look at what I've built and let me know what you think:
https://www.bitsnbytes.ir

Here's a list of everything I've learned or used in this project:

react.js
redux
react router
node.js
webpack
react-intl
material-ui
express
formik
yup
react-helment
jss
nodemailer
deployment
pm2
SEO best practices

DEV Community: Mohammadjavad Raadi

Run a Scalable Magento Webshop with User Content Moderation on AWS using CDK and Python

Prerequisites

Project Architecture

Project Configuration

Project Repository

mjraadi / cdk-magento-webshop

This is a CDK app to provision the required resources to run a flexible, scalable, and cost-effective Magento webshop on top of AWS.

Magento Webshop AWS CDK Project with Python

Prerequisites

Project Architecture

What was your win/loss this year? What important lesson did you learn?

If You Don't Know, Now You Know - GitHub Is Restricting Access For Users From Iran And A Few Other Embargoed Countries

Here's something you may never have to see in your lifetime:

Update 1 - 28/7/19

1995parham / github-do-not-ban-us

GitHub do not ban us from open source world 🇮🇷

A Message to GitHub

I just took couple of LinkedIn quizzes and was wondering do they even matter?! 🤔

Sanity Tip For JavaScript Devs: Learn to Run Asynchronous Functions in Array.map()

The Problem

Why Use Asynchronous Function Inside Array.map()

The Solution: Promise.all

About Me

Discuss - UX/UI Design Considerations and Challenges for the Elderly

Don't let that huge codebase scare you! Tips and tools to make sense of other people's code

A Practical Takeaway

Grep

Ack

About Me

Planning a Real-World Web Application & Key Considerations(Part 1: Project Management)

Intro

Key Considerations

Project Management

Examples of Project Management Software

Final Thoughts

About Me

k8h3d Trojan/Botnet Explained & How It Disrupts the Entire Network - Check Your Computers NOW!

TL;DR

What Was the Problem?

First Clue

Second Clue

Connecting The Dots

What's a Botnet?

Dangers of a Botnet

How to Defeat k8h3d Malware

Why Did It Happen?

How to Stay Safe and Protected

You Can Be a Hero

About Me

Things You Should Do to Prevent Computer Eye Strain, Personal Health Is Just As Important As Deadlines

Adjust Your Lighting

Adjust Your Monitor’s Position

Splash Cold Water on your Eyes

Practice the 20–20–20 Rule

Finally, Use a Break Reminder App

About Me

[Updated] Simplify the require/import paths in your project and avoid ../../../ circles of hell

Update 1 (3/31/19):

The Inspiration

TL;DR

What does it do?

Let's get started

Conclusion

About Me

I'm a web developer who turned a learning side project into his 😍-looking portfolio website. Ask me anything!

The Inspiration

How Could They?!!!

Digging Deep

Thank You Open Source

TL;DR

Here's a list of everything I've learned or used in this project:

Have something to say or got any questions? Then go on ahead!

Why Use Asynchronous Function Inside `Array.map()`

The Solution: `Promise.all`

How to Defeat `k8h3d` Malware