DEV Community: Yoman

Web vitals automation using github actions

Yoman — Sun, 09 Jan 2022 07:38:41 +0000

Introduction

Google recently announced new standards for search engine ranching and Web vitals score directly impacts user's experience visiting your website and also influences the search engine ranking. These new standards expect you to have less performance issues in production. we will use vercel CI Deployment using Github Actions

Lighthouse and web Vitals

Google Chrome is directly shipped with lighthouse, an open-source tool used to audit your website in a controlled environment within the browser.This tool generated web vital scores including first contentful paint, speed index, time to interact and other criteria out of 100 as PWA's

It also provides suggestion and direct links to resources to help you resolve the performance, SEO issues and other helpful suggestions.

Though this is an easy way to get the web vitals before moving the app to prod.we need to do it manually. Now we can automate the process using github actions and vercel CI deployment action.

We can use Lighthouse cli or as in this tutorial we can use vercel CI deployment action

Lighthouse Budgets

Light house allows to maintain a budget file that specifies requirements of each web vitals measurement such as first-contentful-pain and cumulative-layout-shift. You can also specify the maximum sizes for images , script loads and third-party requests count.More information on Budgets here.

If the Lighthouse audit fails to meet the set budgets and assertions are returned that describe where the problems occur with a link to further details of the assertion and what was expected.

This file is named budget.json and is put in .github/lighthouse/ directory

Below is the example of the file showing some metrics that assert against.

[
    {
        "path":"/*",
        "timings":[
            {
                "metric":"interactive",
                "budget": 3000,
            },
            {
                "metric":"first-contentful-paint",
                "budget": 1800,
            },
        ],
        "resourcesSizes":[
            {
                "resourceType":"script",
                "budget":100
        ] 
    }
]

Writing a Github Action

We can write our workflow within our repository thanks to the Github Actions that make it seem-less . Since it is developed by Github we have complete control on the CI.We can trigger actions based on pull, push, tags or anything that is supported from GitHub Marketplace. We can also call external services like vercel API or Lighthouse cli.

When an action is triggred by pull-request event , the outcome of the action can be used to pass or fail the pull request checks and also can be made mandatory in branch settings. In our case , we are going to create a pull-request-audit.yml file in .github/workflows directory. When you raise a pull-request then this file will be triggered and run.

In order to perform a lighthouse audit on pull request changes. We need to :

Deploy the changes on vercel
Run Lighthouse against vercel preview URL
Format the results
Display the results on the pull request

Let's take a look at the marketplace actions we need and how to use them

Vercel action

Vercel action allows you to trigger a vercel deployment Of our full request code and run a Preview URL which we Will use to audit, before actually merging the code.

In order to do that we need to connect our project to vercel via vercel API to get the project-Id and org-id information as per the following Vercel Project Linking documentation

We will need to save the vercel IDs as the Github secrets within settings of the repository. settings → secrets → new Repository secret

here is how we configure the action workflow file to automate web vitals checking.

- name: Audit URLs using Lighthouse
    id: lighthouse_audit
    uses: treosh/lighthouse-ci-action@v7
    with:
        urls: |
            ${{ steps.vercel_action.outputs.preview-url }}
            ${{ steps.vercel_action.outputs.preview-url }}/blog
        budgetPath: '.github/lighthouse/budget.json'
        uploadArtifacts: true
        temporaryPublicStorage: true
        runs: 3

Displaying the Results

To best display the results of the audit, we need to get hold of the Lighthouse audit output and format the results. We can then display these on the pull request using the sticky-pull-request-comment action. This action allows sticky comments to be added to a pull request and later edited.

When calling the sticky comment action you must ensure that you set a header and use the same name consistently. This will ensure that the correct comment gets updated.

- name: Add comment to PR
    id: loading_lighthouse_comment_to_pr
    uses: marocchino/sticky-pull-request-comment@v2
    with:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        number: ${{ github.event.pull_request.number }}
        header: lighthouse
        message: |
            🚦 Running Lighthouse audit...

To format the assertion results, if there are any, you can simply loop through them and build up a string to pass as message to the comment action with the correct header.

Putting it All Together

The complete finished action can be found in the vercel-lighthouse-action repository along with an example budget.

It will deploy your PR code to Vercel, run three Lighthouse audits against the provided URLs based on the Vercel preview URL, and then format the results before posting them as a comment onto the PR.

Accountability makes you stay on top of your goals

Yoman — Sat, 01 Jan 2022 09:26:43 +0000

The problem

You can lose interest when you started on working a particular goal as a time pass. This is because either you get demotivated or you start feeling that there is no proper outcome of the goal. This is because either you have been exhausted on working on it continuously or You don't share the progress with anyone

Accountability

To achieve your goals faster you need to be accountable to yourself. It helps to achieve tasks that you are supposed to achieve over a longer period of time. You can be Accountable in many ways such as you can have a task manager where you can log your task daily, you can use different techniques to achieve this, you can have a friend or a family member with Whom you can share the progress daily,You can have your end users to whom you can share the progress daily so that they can more excited about the product or feature your working on currently.

Ways to be accountable

Create a Personal Mission Statement.
Set Micro-Goals.
Use Lists Wisely.
Make Yourself Accountable.
Reward Yourself.
Do One Task at a Time.
Emphasize Your Strengths, Improve Your Weaknesses.
Value Your Time.
seek feedback
Review yourself

Create a personal mission statement

When you set a goal to achieve then you need to write down your personal mission statement this includes the things you want to achieve along the way and how are you prioritising them.

I have a personal mission statement

To be creative ways to keep creating.

So basically I keep doing things on a repeated way so that I can create beautiful things and also keep myself creative enough and follow the trend as a designer and developer.

Your personal mission statement doesn't have to sound poetic but it has to have a deeper connection with you to achieve your goals.

Set micro-goals.

There are countless benefits to writing down goals of all sizes. Annual, five-, and ten-year goals can help you expand on your mission statement because you know you are working towards a tangible result. But long term goals are useless unless you have a strategy to achieve them. Manage yourself by setting micro-goals.

What is a micro-goal? I like to think of it as a single action that, when accomplished, serves as a building block to a much larger goal.

For example, the resolution to make a larger-than minimum monthly payment on a credit card balance is a micro goal. Each month you successfully increase your payment, you are closer to your big goal of getting out of debt.At work a micro-goal might involve setting up an important client meeting. Getting all the elements for a meeting in place is one step towards a larger goal of winning or increasing a particular business relationship.

A micro goal is not, however, anything that goes on your to-do list. Responding to a customer inquiry or cleaning out your cubicle is not a micro-goal, unless of course you have bigger goals to specifically involving that customer or to get more organized.

Use lists wisely.

Lists – from simple to-do lists to complex project plans – can be a helpful tool for prioritizing and planning your day. If lists are too big or poorly organized, however, they can overwhelm you and defeat their purpose. Manage yourself by using lists effectively: keep a small to-do list of 5 or fewer items. If it’s not important enough to be on the top 5, leave it off. As you complete activities, you can add more.

One way to help achieve smaller, more manageable lists is to break one big list into several. I often find my to-do lists contain a dozen or more activities than can be grouped. If you’re a blogger for example, and you have 5 great article ideas, writing each one might be on your to-do list. I would recommend putting one item on your to-do list – write 5 new articles. Prioritize it accordingly, and when you sit down to write, break out the list of topics and don’t move to another project on your primary to-do list until all the others are complete.

Make Yourself Accountable

Managers hold employees accountable. After all, managers want to make sure employees are earning their salary. If you are a sales rep, managers want to know how many calls you make and how much business you close. If you are a lawyer or a consultant, managers want to know how many hours you bill. Manage yourself by making yourself accountable for how you spend your time.

Some of the most successful people I know review their to-do lists each night and every Friday. They study what they accomplished—and what they did not. Even outside of work, you can do the same. Schedule a time each week to reflect. How were your eating habits this week? Did you exercise this month? What about your spending? Did you stick to your budget or did you splurge? What can you do better next week?

Reward yourself

Great managers know that rewarding employees for a job well done is far more effective than doling out penalties for failure. Rewards range from simple praise to promotions to cash bonuses, but they all achieve the same goal: Rewards make us work harder to get something we want.

If you have a mile-long to-do list, want to start exercising, or want to tuck away more savings, manage yourself by creating a reward for each goal. If you get through your to-do list, leave work early and do something you enjoy. If you get to the gym every day, indulge in a food you enjoy but ordinarily avoid. And if you have a savings goal, tell yourself that when you reach it, you will take a month off of saving and buy yourself something you have always wanted.

Do One Task at a Time

How many job postings include the line “must be able to multi-task”? In today’s wired world, it is impossible not to multi-task most of the time. If I were hiring an employee, I would be infinitely more interested in his or her ability to focus and to see tasks through to completion. You can manage yourself by striving to do one thing at a time, and not stop until it is completed.

Working on one thing at a time is easier said than done, but the harder you concentrate on completing one task, the faster you will get it done – even if you are interrupted.

Get in the habit or checking email only two or three times a day and decide to either respond immediately or delete the message. Close your door, mute your phone, or work from home when you need to get through significant projects.

In your personal life, don’t try to give up coffee, smoking, and sugar all at the same time. If you’re tackling debt – or trying to save more – pick the most important debt to pay off, or saving goal to reach, and put everything towards that goal.

You will find that you reach your goals faster, and you will be less stressed.

Emphasise Your Strengths, Improve Your Weaknesses

Nobody is born to do everything. We all have natural talents and abilities in some areas, and we all struggle in others. For example, some of us are born writers, but have a difficult time with conversation. Others can work a room or present to hundreds like a pro, but can’t write a coherent email message. Good managers want to help their employees shine, and also develop. To manage yourself, take every opportunity to show off your strengths, and actively seek out ways to improve in improving in weaker areas.

Value Your Time

Do you know how much an hour of your time is worth? No matter how much you earn per hour, chances are, each hour is worth far less. After all, you spend time each day getting ready for work, commuting to and from work, and even thinking about work when you aren’t actually working.

When you divide your salary by all that time spend on things related to work, you hourly rate is probably a lot less than you think.

Now, think about your free time – however much of it you may have. What is it worth to you? Could you put a price tag on an hour at the beach with nothing to worry about?

If you’re like most people, the time you have yourself will almost always be more valuable than time at work. Manage yourself by learning to maximize your productivity during the hours you are actually working, and by maximizing your personal time by ignoring your cell phone, Blackberry, and laptop, and focusing on the things you enjoy.

Seek Feedback

Good managers don’t only rely on personal observations of their employees. Good managers will seek other opinions of employees – opinions from coworkers, friends, and customers. Such feedback will provide valuable insight into the employee’s competencies and weaknesses, and will help the manager give the employee tools to grow and succeed.

As your own manager, how you see yourself may be radically different from how others see you. Don’t be afraid to ask others how you’re doing. Ask coworkers or friends to provide an honest evaluation of how they think you perform your job, and survey customers to learn what you’re doing right – and where you can improve.

Review Yourself

Going back to holding yourself accountable, every manager provides formal feedback to employees at regular intervals in the form of a performance review. Whether quarterly, semi-annually, or annually, make a habit of managing yourself by taking an hour to perform a self-review.

Ask yourself: what have I accomplished in the least year? Have I met my goals? Have I met my micro-goals? Have I built upon strengths and improved my weaknesses? Have I grown as a person? Even this simple, infrequent habit can transform your productivity, attitude, and success.

VS Code debugging for web developer

Yoman — Wed, 29 Dec 2021 14:43:24 +0000

Debugging in VS Code for web developers.

image-source: VS-Code website

What is VS Code.

Visual Studio Code is a light weight IDE for developing and debugging web applications or projects that run on javascript.Although by installing extensions you can extend the functionality to support different languages within the IDE. Vs Code is built on electronJs which is a JavaScript framework for building native desktop applications,Which means it comes with full support of running JavaScript applications for web developers.

Electron JS has main process and render process.Main process runs nodeJs in back-end whereas renderer process runs any web application using any web framework in JavaScript.

Intelligence and presets for web development

Suggests all the node commands to run directly from package.json file

The Debug tab on the left toolbar helps you to switch to debug mode instantly

Full support for GIT out of the box

Extensions to give more features for the existing IDE which is fully Customisable

Integrated terminal with multiple instances

Debug console to enable browser level js execution during debugging

Simple browser like view so you don’t have to learn again
put a debugger inline in the Editor.

simple controls to navigate through the debugging process

create your own environment by creating .vscode/launch.json file and maintaining the suggestion

Below is a sample nodejs configuration

Conclusion

Thanks, hope this helps you get basic idea for debugging web applications in VS Code . Read more here

Time-boxing model : A complete guide to time management

Yoman — Tue, 28 Dec 2021 18:09:00 +0000

Time boxing is a simple yet powerful technique of time management,That helps you to have control over your time and improves your productivity.This helpful technique is for practising self explain and organising your schedule in a way that your most important task come first.

Time-boxing helps you to know how much time you can spend over a task and makes you more attentive on doing it and not over do it .

What is time boxing?

Timeboxing simply means that you open your calendar and enter a block of time that you’ll spend on a certain task in the future.

Instead of working on the task until it’s done, you proactively decide how much time you’ll spend on it and when (and even where).

Timeboxing means setting a fixed amount of time in your calendar for a particular task.

It’s like scheduling a meeting in your calendar. You select the day, start and finish hours, define the desired outcome, and reserve time in your calendar.

And once you reserve a box of time, you should treat it like a scheduled meeting – no rapid rescheduling, no distractions when you work on the timeboxed task, etc.

For bigger tasks you can reserve several blocks of time in advance. With such an approach, you have complete control over your schedule and priorities.

What are the main benefits of timeboxing?

There are many different benefits if you use the timeboxing time management technique. Here are the main benefits:

You can more easily “force yourself” to start working on the tasks you procrastinated on or you know they’re hard for you to be doing,
You can more easily set strict limits on how much time you’ll spend on a specific task and when you will spend it, and so you can organize yourself much better,
You can boost your productivity and focus greatly if you make sure that nobody interrupts you or distracts you while you’re working on your task in the boxed time for it,
It’s a great way to deal with perfectionism and any over-processing and over-doing of tasks,
You can use timeboxing to plan the most important things right in the morning, and it can help you to plan a much better working rhythm in general.

With a timeboxing approach, you can avoid late delivery, low quality, and over-doing and over-processing tasks. As you know, time flies, and with timeboxing you can have really good control over it, making sure that it doesn’t fly away uncontrollably.

Use timeboxing to start a task you procrastinated on

Sometimes you have to do a task you really don’t like or procrastinate on for some other reason. Timeboxing can help you with that.

There is one very interesting (and sometimes beneficial) psychological phenomenon we humans have, which is that you want to finish an activity after you start it. For example, you’ve probably caught yourself watching a movie all the way to the end, even if it was a bad one, but somehow you just couldn’t turn off the TV.

Conversely, you probably had a task you just couldn’t start working on, but a few minutes after you did, you just forgot about the struggle and gladly worked on the task.

The idea of timeboxing is that you start doing a task at the exact moment that your calendar reminds you that it’s time to get the task done.

If you know that you have to deal with a task that you procrastinate on, you set 10 alarms if necessary to remind you to really start working on the task.

Once you start working, you soon forget all the tension and resistance that existed before. A really useful method.

If you have a bigger task, you can, for example, slice the big task into many mini-tasks that take 1 – 2 hours to complete, and you just timebox the first mini-task.

In that way, you’ll start working on the big task and even if you make just a little step, you feel much better about yourself and your productivity.

Even more importantly, you will continue working on the big task much more easily, because you already did the first step. Alternatively, you can just timebox a slot in your calendar to start working on the big task, work on it in a few hour slots, and try to get as far as possible.

What might happen to you is that you fall into the flow and do much more than you planned. You just have to make sure that you don’t overdo or cross the time limits dedicated for the whole task to finish.

Timeboxing will help you set strict limits

Every task takes exactly the amount of time you devote to it. If you decide to spend two hours on a task instead of 10 hours, you will probably have to work in a more focused way, make sure to work on the important parts of the task, leave some details out, and so on.

If you are a perfectionist and work on a task until it’s done perfectly without any time limits, it may take you forever to finish a task or at least a lot more time than it probably should.

Starting a task without setting any strict limits on the amount of time to devote to it, and without considering how important the task really is and what its impact will be on your value creation, means working in a completely reactive and unorganized way, instead of being proactive and working in a highly organized way.

The list concerning clearly defining outputs can also include what is considered to be a good enough output, and when it makes the most sense to start working on the task.

Parkinson's law states that “work expands so as to fill the time available for its completion.” With timeboxing you put maximum limits on how much you will spend on a task.

Timeboxing is a great way to help you strategically answer all those questions before you start working on the task.

When you timebox time in your calendar, you simply take a moment or two, consider all the facts you have about the task, and roughly estimate how much time a task should take.

Then you put a post-it note on your Kanban board and a reserved block of time in your calendar. It’s that simple.

Organize your calendar better with timeboxing

With timeboxing, you can very nicely organize and standardize your calendar. There are especially two very useful ways to use timeboxing in such a way: **deciding when and how much time you will spend on email; and when and how many meetings you will have.

For example, you can put in your calendar that you have 30 minutes in the beginning and 30 minutes at the end of the working day for your email.

You can decide that you will have a maximum of two 30-minute meetings every day, except Wednesdays when you have none, and Fridays, when you have longer meetings and more of them.

You just fill the slots until you run out of them. You spent the rest of the time working in the flow on the most important tasks.

The main idea is that with timeboxing, you have complete control over you schedule, you think in advance about what you will spend your time on, and you make sure you are really spending your time on the important things.

With timeboxing, you set some strict limits in your calendar regarding tasks, and you should make sure you never cross them.

In the same way, you can timebox many different things, like lunch time to make sure your body gets all the nutrition right when it needs it, you can timebox activities that you can also group together, such as errands, sales meetings, sales calls, or whatever.

You can also timebox all the different types of activities, like brainstorming, executing tasks, having a personal hour of power for reading, spending time with your kids, or even having a no-interruptions day or a no-interruptions week.

Timeboxing is such a simple and efficient method that you can use it in many different ways.

Timeboxing a meeting to set limits to unproductive meetings**

Meetings are usually a big waste of time, but from time to time they can still be real work, especially when you need people to agree on something or collective brainpower to solve a problem.

If you decide to have a meeting and it’s not a creative or bonding one, timeboxing can help you set a strict limit in order to stop a meeting from turning into a time-wasting activity.

When calling a meeting, you should send strict start and stop hours to all the invitees, as well as the main desired outputs of the meeting and an agenda.

Having a strict deadline for when the meeting ends will help keep people focused and prevent them from flowing away in unproductive discussions.

An example of a timeboxed meeting is also a morning planning meeting with yourself, which shouldn’t take you more than 15 minutes. You can do the same with your team afterwards, just make sure that everyone is standing during the meeting, so it will really take only 15 minutes.

The main benefit of timeboxing is to increase awareness of the time dedicated for a task to be completed.

Timeboxing in agile software development

In agile software development there are several types of meetings that are fixed and basically timeboxed in advanced – through the whole project period, with no exception.

They happen at the same intervals with the same type of agenda. That’s also one way of timeboxing in practice.

Timeboxed meetings in agile software development are:

Daily scrum (limit: 15 minutes) – A 15-minute daily synchronization meeting that happens every day at the same time and usually in the same place.
Sprint planning (limit: 2 hours) - It’s a planning meeting, where a team decides which tasks will be accomplished in the next sprint, usually in a period of seven days.
Sprint review (limit: 1 hour) – On a sprint review, the team reviews what work has been done, what hasn’t been done, work that has been added, and what was removed from the sprint.
Sprint retrospective – It’s a meeting (or two different meetings) at the end of the sprint, where a team does retrospective what was done right and what could be done better.

All these meetings are in advance in calendar of an agile team. It provides structure, stability, and a good work dynamic.

But what’s even more important, each meeting has a very strict time constraint how long it can last. For example, the daily scrum should not take more than 15 minutes. That’s also the duration that’s reserved in a calendar in a scheduled meeting box.

Which apps can help you with timeboxing?

You don’t need any special tools to use the timeboxing time management technique. All you need is a tool like Google Calendar or any other. In a calendar you simply reserve a specific amount of time for a task, like you would schedule a meeting.

All you have to make sure is that you start working on a task when the time comes and stop working on a task when the time runs out.

Some people use alarms or timers as reminders to start and stop working on a task. If you find it useful, definitely go for it. Other people combine timeboxing with the Pomodoro technique, meaning that they adapt the timeboxed time slots to certain intervals.

The Pomodoro technique recommends breaking down work on tasks into intervals, traditionally 25 minutes in length, separated by short breaks.

With a good and simple time tracker you can monitor more accurately how much time did you spent on different tasks, even if they were timeboxed in advanced. Then you can get detailed reports and statistics and even simplify your billing.

Enjoy using the time boxing technique!