DEV Community: Maxim Nosov ✪

Final thoughts on contribution

Maxim Nosov ✪ — Sat, 10 Dec 2022 02:27:31 +0000

Hi,

This week I've been wrapping up and polishing my PRs.

Today I would like to go over 3 PRs that I did.

Icons

For the following PR I had to come up with logo for the project.

Here is what I come to the end:

I would say that creating a logo is very creative work to do. Of course, you might take a look at other logos for inspirations, but you need to create one from scratch, because you want the project to be unique and don't have any similarities with the ones that already exist.

For another Full stack project I have been collaborating with project maintainer and discussed possible improvements. It was very nice talking to Full stack developer and listening to his ideas. How many great people around us, who seem to be total stranger but are very nice!

UI improvements

For another PR I was doing overall UI and accessibility improvements. Personally, I really like when people spent some time one designing the website and you can see the effort.

In the following PR I made basic but very important improvements:

Added some hierarchy:

Positioned elements so that they are easily visible

Made certain elements attract your attention, so that you understand what to do on the website
Added some beautiful animations, so that user understands that he interacts with buttons, links, etc.

It's a great practice to give user sort of response on hovering over a card, link or a button. It's such a pain to see some of these elements without any interactions.

Why it matters ?

Because users want to be engaged. Nobody wants just a static website without any interactions with user. With animations, hierarchy, effects, etc. we make user stay on the website and continue exploring.

Remove useless interactions

For another PR after discussions with project maintainer we have come to agreement to remove useless alert of saying you need to login in order to create a story. Instead we simply redirect the user to the log in page and showing error message asking to log in first.

Final words

It's amazing that people are kind and willing to help you if you struggle with something. It's been a great experience working with Full stack developer and implementing features.

P.S. Networking and connecting with people from your industry is amazing, who knows what knowing this person might lead in the future. Maybe we end up working together :)

Thank you for reading and have a great week!

Progress on contribution

Maxim Nosov ✪ — Sun, 04 Dec 2022 18:42:14 +0000

Hi,

Progress on logo

This week I've made some progress regarding the tasks, that I've been assigned to.

First of all, I created a logo for the new project, it looks like that:

I created it with the help of Adobe photoshop. Here I needed to come up with the main colors for the logo. I went for blue color, which is usually represents calmness and trust.

Psychology of colors

Choosing the right color, and learning how to combine it correctly with another, is a hurdle that many designers struggle with, especially when starting out.

Why is that so?

As every color has a meaning. Colors help us to feel our emotions, they enable us to make quick associations, they dictate our reaction to things. Knowing how this works is a
powerful tool to have in your toolkit when taking on the world of branding and design.

My favourite quote about colors:

Colors are power and designers are the artists that blend them to perfection. They create a story without words and build a connection in one glance.

Waiting for approval

After creating a logo, I'm waiting for approval from project maintainers. Once they approve I will go and create different sizes of the logo.

Improving UI

For another project, I have been enhancing the UI and made minor accessibility modifications.

Remove useless action

For the following project, if user wants to create a post but he is not logged in, he will see an alert saying "You need to log in to create a post".

I think this is not necessary, as most of the applications just redirect you to log in page without alert. Though, UX could be improved by saying you need to log in first in the sign in form.

Improve UI with CSS

Also, I have improved the UI by including CSS animations, hover effects, and overall content readability.

For example:

Putting sign in form in the center is a great approach, I think:

There are so many things that could be improved on the website in terms of design. I would work on it next week.

Have a wonderful and productive week !

Plan first, then implement

Maxim Nosov ✪ — Sun, 27 Nov 2022 16:27:37 +0000

Hi,

For this week, I will be working on 3(or more) issues for 2 projects:

1) Designing the logo for the photohub project.

2) Enhancing the UI for the novel project

Issue #1

In the issue I started talking with project maintainers and listened to their preferences.

Understanding what client wants ✍

Firstly, before designing a logo, I need to understand what kind of project developers are working on. After that, I need to think of the audience (people who will visit the website).

Hence, I need to think of the colors that would match the audience. For searching the best color match I will use color pallete from Canva.

There, I can see what colors work together.

It's crucial not to fail here No matter how your logo is creative, if you find a great match, it's half work done.

Software to use 🖥️

I will use Adobe photoshop for creating a logo.

Project # 2

For second project, I will take multiple issues from the project and improve the UI. Also, I might work on the backend as well, if the contributor will allow me to do that.

For now I'm assigned for a couple of issues: Issue#1, Issue#2.

I'm waiting for project maintainer to create a guidance to run the project locally.

More improvements 🔥

There are a lot of ideas how to improve the website from the UI perspective. Since, I have some experience in web design, I might be useful.

I will file more issues, that I think could make a project look more appealing later.

Floating labels 🔥

For example, let's consider making floating labels on the input. I think you saw something like that before.

When we click on input, the placeholder moves above the input smoothly and creates great UX.

Appealing modal window 🔥

When not logged in user clicks on create a story button, he sees the regular alert:

This could also be improved. First, I would design a modal window in Figma and then create one.

I will be working on these projects for the following 2 weeks. I will make a new post regarding the progress and potential issues that could reveal 💯

Have a wonderful day and let's keep up!

Buy me a coffee

Importance of hierarchy on website

Maxim Nosov ✪ — Wed, 23 Nov 2022 17:51:51 +0000

Hi !

I would love to talk about the importance of hierarchy on the website. I would give you some examples of real projects that you can learn from. I will show what is considered to be a good web design practice and bad.

Why it's useful to know 🔥

This blog would be very useful for designers and software engineers. As I realized, it's a good practice to know the basics of what other specialist do in other departments.

For example, If you are a front end engineer, it would be great to know the basics of web design. This way, you can have much more thorough communication with other specialist in the project ☝

I'm not here to judge other project, but to learn from them.

How to overwhelm user 😁

Hierarchy on the website is crucial. I'm sure that you had experience visiting websites when everything is being thrown at you at a one time and it "shouts" with lots of colors, actions and text at you. It's so easy to get confused and lose the point what am I supposed to do here.

If you want your website to be successful and easy-to-use you need to "point" the user where he should look first, second and third, etc.

Bad practice #1

Let's take a look at this website:

Tell us about your feelings. Are you confused?

Let's go deeply into the website structure:

1) How am I supposed to look through the website ? Top to bottom or left to right ?

2) Too many colors and fonts

3) Give more space to the elements (in the good examples you can see what I mean by that)

Bad practice #2:

Now, let's take a look at another website:

1) What's wrong with navigation bar ? It's taking 30% of the screen size.

2) Action is happening on the background that just distracts the user from understanding the content.

3) What's with the text shadow?

I think your website structure is great, when you can see an answer to a question: What do you want me to do on your website?.

In the examples above there are no clear indications of paths that I need to follow on the website. You just get lost.

Good example #1

Now, let's take a look at good examples.

Here let's talk about the way developers want us to look through the website.

1) Background image

2) Big text We help ecommerce evolve

3) Button

Good example #2

Another great example - React JS website.

What are your feelings now ? 😍

1) Great CTA(Call-to-action) asking user to click the button

2) Amazing color contrast

3) Clear and concise nav bar

I think you can see the difference and the effort that was put into design.

If you have any ideas about the design of the websites above, drop them in the comments.

Stay tuned and have a wonderful week !

Buy me a coffee

Implementing a feature with Vanilla JavaScript

Maxim Nosov ✪ — Sun, 20 Nov 2022 16:54:03 +0000

This week I've been contributing to open source project Meetify.

Feature

My idea was that on the website user could click on Screen share button and share his screen.

I implemented this functionality with vanilla Javascript.

Vanilla JavaScript 😍

To be honest, I truly enjoy vanilla JS. Without a doubt, there are so many useful JavaScript frameworks that could save a lot of time. Yet, it's amazing what kind of things we can do with vanilla JavaScript: speech recognition, video recording, slider, carousel, etc.

Most of this things could be done with JQuery and other frameworks, but isn't it great to know how to build same thing in multiple ways ?

I think it will make you better as a developer 😊

There is a great course from WesBos, who builds 30 projects with vanilla JS. I learnt a lot from this one. Not sponsoring, just sharing a great course. If you are interested, you won't regret!

Implementation 💻

For my PR I wrote the following code:

function dumpOptionsInfo() {
    const videoTrack = videoElem.srcObject.getVideoTracks()[0];
    console.log(videoTrack);

    console.info("Track settings:");
    console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
    console.info("Track constraints:");
    console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
  }

  const videoElem = document.getElementById("video");
  let displayMediaOptions = {
    video: {
      cursor: "always",
      height: 1000,
      width: 1200,
    },
    audio: false,
  };

  async function startCapture() {
    try {
      videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
      dumpOptionsInfo();
    } catch (err) {
      console.error("Error: " + err);
    }
  }

For HTML we can use the following code:

<body>
    <div>
        <video id="video" autoplay playsinline muted></video>
    </div>
    <div>
        <button id="start"> Start Screen Sharing</button>
        <button id="stop"> Stop</button>
    </div>
</body>

When clicking on Start Screen Sharing button you should have a popup like that:

You can click on the window and screen sharing will start.

Amazing, right ? ✨

You can check more detailed blog about screen sharing with Javascript here.

If you would like to support me, you can buy me a coffee. It will motivate me to write better blogs and share knowledge.

Let us know what do you think in the comments :) If you have any other vanilla JavaScript courses you want to share, let us know :)

Code review best practices

Maxim Nosov ✪ — Sat, 19 Nov 2022 20:49:43 +0000

Hi everyone,

This week I've been doing some code reviews for Telescope project.

I would love to share some tips for code review that I figured out.

I've reviewed 2 PRs. PR#1 and PR#2.

Don't take it personally

People review the code, not your personality. Project maintainers might be very strict. Hence, they might request changes for almost every line if they see it could be written better.

We have to remember that with code reviews we are just eliminating common mistakes and making ourselves better as developers.

Follow code review checklist

List at least 3 things you need to check in the code. For example, it could be the following:

Security
Reusability (e.g. can we reuse the written functions)
Code simplicity

Multiple reviewers

Code review is a team work, meaning it's better when multiple people review a little piece of code.

It will help to stay focused and not feel overwhelmed. As a beginner, If you review only 50 lines of code, it will be much easier comparing to reviewing 1000 lines of code, where at some point, you might lose concentration. Programmers are humans, not robots :)

Leave proper comments

In the comments, **leave clear and concise comments **about what should be changed and why it's a best practice.

Automate code styling

We need to use automation for repetitive tasks as much as we can. Use prettier and linter to make sure that code is easy to read.

If you enjoy blogs, you could buy me a coffee. It will motivate to write better blogs :)

What else do you think could be considered as code review best practice ? Let me know in the comments :)

Little things lead to a big effect

Maxim Nosov ✪ — Wed, 16 Nov 2022 00:44:37 +0000

In this article I would love to talk about the design and its importance on the website.

This week I've been contributing to open source project telescope.

Little bug

The issue I noticed is that on the search page typography is different from the typography that is used on other pages of the website.

My suggestion was to be consistent and use the same text font all over across the website.

Here is how it looked before:

And here is how it looks now:

Looks more appealing, right ?

Why design matters

- First impression

Basically, the design of the website is the first thing we see once we visit any webpage. Studies say, that we need only 0.5 seconds to decide whether we will stay on the website or leave. Hence, please never neglect the web design.

- SEO

This will help search engine spiders craw and index the website correctly. If we want our website to get higher in the search results, we should consider practicing SEO-friendly code.

- Consistency

It's essential to have consistent design(e.g. font, color of the button, etc.). It shows the professionalism. For example, if CTA(Call-to-action) button on one page is blue and on another page it's orange, that gives a bad UX.

Some programmers are so picky

You never know what type of user is on the other side of the screen. What if it's a very picky person, perfectionist, trying to find bugs, and basically trying to break the system (in a good way of course).

Sure thing, there are regular users who just use the website as it should be used, but there are a lot of people who enjoy finding issues and improving the websites.

Little things are not little things

We should never underestimate little things. You might be surprised how little things could dramatically lead to something big.

Even though, the whole website may look perfect, one little bug could spoil user experience.

That brings us to an interesting point: we should never think of something as not important, because we all different and someone will find things important while others may not even notice your new feature that you have been working on for 6 months.

Users see your commitment

I think you can see when the website was built for 2 hours or for 2 months.

Whenever you visit a website, you can see how you want to be treated. I would say that web design is all about the psychology, because you need to know what influences people, what colors are better for your website audience, how to make user stay on the website and many more aspects.

Great way to test your website

Ask your friend or relative to open your website and look through it. You can ask their thoughts about the ease of use and get independent opinion.

I guarantee you will be surprised how people do things differently and what kind of experience they get on the website.

Let me know what you think about web design in the comments.

Let's talk about the web design, connect with me on LinkedIn.

Continuous integration pipeline

Maxim Nosov ✪ — Mon, 14 Nov 2022 18:30:11 +0000

Overview

This week I've been working on setting github CI(Continuous integration) workflow, as well as wrote tests for another project.

Workflow set up

To set up workflow I added nodeJS.yml file that runs on any push or PR to main branch.

nodeJS.yml file:

name: Node.js CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x, 16.x, 18.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

The structure of the file may look complex at first glance, but it turned out it's very easy-to-read.

Writing tests to another project

It was very enjoyable process: talking with maintainer, making the suggestions in the code that he asks.

For me, I was very lucky to have a great partner, who has a very clean and concise project with appropriate code. It didn't take much time to understand how the code works.

For my PR I did basic tests checking the functions for unexpected output.

I got experience writing tests for another project, fixing the code, while maintainer got experience reviewing my code.

Tests, test and tests

As I see, it's never enough of writing tests, but we can and we should cover the basics of testing to prevent our tool from unexpected behavior.

It's very important to collaborate with your peers, so they can test your project. They might find some issues, that you could never find on your own :)

Continuous integration is a must

CI saves us a lot of time. For example, if someone makes a PR to the project, he can see that his code didn't pass the tests. Hence, he could immediately go and make necessary changes in the code.

Automation

It's a great practice to automate repetitive things. With the help of github CI workflow we could save our time, write the code once and let it do the work for us.

Software release using npm

Maxim Nosov ✪ — Thu, 10 Nov 2022 00:31:16 +0000

Hi,

Overview

This week I've been working on releasing my toolusing npm.

To install the tool, run npm i simple-ssg1

How to prepare your project for publishing

1) Sign up for npmjs
2) Make sure you have package.json file
3) Add README.md, so that users will be able to understand what is your project about and how to set it up.
4) run npm publish

Each time you need to update your package, you can run npm version <update-type>

Update types

Each digit in the version (e.g. 2.3.0) has it's own meaning:

1) First digit (2) means major release.

2) Second digit means minor change in the software(resetting last digit to 0)

3) Last digit means patch release.

Reviewing the tool

It's very important that somebody checks how your tools works. One view is good, but multiple is better. Another people may find issues that you could never think of, because we all look at software from different perspectives.

It's very good when people try to break your tool to see how it's going to work in hard times.

Feedback and failures

It's crucial not to take feedback personally. We should thank people when they give us the feedback, because are literally pointing where we need to improve.

Mistakes and failures are part of project. I believe that if a project is going great and doesn't give you any challenges, then I would question this project :)

I know a lot of people love comfort and prefer easy things to complicated ones. However, do we grow personally and as developers? Problem-solving - that's what drives most of us. As for me, I genuinely enjoy resolving problems (even though they can
drive me crazy).

Part of community

It's a great feeling when you see your package in the npm publicly. You are feeling yourself as a part of a big community. People can use it all around the world and that makes you feel very useful :)

Testing the tool

Maxim Nosov ✪ — Sat, 05 Nov 2022 17:20:18 +0000

Overview

For my SSG tool I used Jest, because it was made for JavaScript language(language my tool is using) and pretty straightforward to use.

Set up

1) To start using jest simply run:

npm install --save-dev jest

2) Create JavaScript file(e.g. sum.js) and add the following code:

function sum(a, b) {
  return a + b;
}
module.exports = sum;

3) Create testing file(sum.test.js) and add the following code:

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

4) Add the following to your package.json file:

"scripts": {
    "test": "jest"
  }

6) Run

npm test

Testing the tool

It was quite fun to test the tool for unpredictable behavior by passing invalid parameters to the function and checking the output.

Testing requires a lot of code, we need to consider covering most of testing scenarios to make sure that application doesn't crash.

Testing is crucial

I never worked with testing libraries before, but it's very important for any application.

People say, that it could be never guaranteed that your application will be bug free, but we can reduce amount of bugs by having significant amount of test cases.

To make sure we are testing all lines of code, we can use jest coverage. It makes possible to spot untested paths in our code.

Sum up

Testing application requires a lot of time, but it's required to provide high quality software. For future projects I will consider writing test.

Lastly, it's important not to overuse jest: run tests for your tests :)

Thank you for reading!

Static analysis tools

Maxim Nosov ✪ — Sun, 30 Oct 2022 20:45:55 +0000

Hi !

Static Analysis tools

This week I've been setting up code formatters for my project.

To format the code I used prettier.

To remove lints from the code I used Eslint.

Setting up these tools for your project is not complicated at all. I will briefly cover steps to do that.

Prettier:

1) Run npm install --save-dev --save-exact prettier to install prettier

2) Create empty config file for your rules with the following command:

echo {}> .prettierrc.json

3) Create .prettierignore file and write files and folders you want prettier not to format

ESLint:

Setting up is very similar to prettier.

1) Run npm init @eslint/config

2) Open created .eslintrc.{js,yml,json} file

3) Write rules for ESLint

Overview

These tools are very powerful and make our life easier. You just code and don't worry about formatting. To be honest, previously when I didn't know about code formatters, I used to manually fix the indentation in files. Uh, that was a work :D

I added "prettier": "npx prettier --write ." to the scripts of package.json file in order to run prettier from command line with npm run prettier.

Also, added "eslint": "npx eslint ." to the scripts of package.json file, so I can run npm run eslint.

After I run these tools, code becomes more readable and structured.

How to integrate tools with IDE?

To integrate these tools with IDE we need to add .vscode folder to the root of project and add settings.json file, specifying which prettier we would like to use.

Code formatters are great!

I truly enjoy that tools like prettier exists, they simplify the process of coding. You just save and all formatting is done automatically!

Hacktoberfest Summary

Maxim Nosov ✪ — Sun, 30 Oct 2022 17:42:14 +0000

Hi!

Overview

This was my first ever participation in Hacktoberfest and I really glad I knew about that. It's amazing how people are contributing to all projects, even if some are pretty straightforward. With every project, there are so many features popping into the head. Everyone wants to feel himself as a part of software.

What I learned

git commands

Git is very tricky sometimes, but it turns out it's not complicated once you practice it for a while. Commands that are better to know before you start contributing:

git add

git commit

git status

git push

git merge

git clone

git fetch

git pull

git rebase -i HEAD~3 // e.g. for squashing last 3 commits into one

git checkout -b <branch-name> // to create a new branch from current branch and jump into it

git reset // e.g. git reset --hard ~HEAD, to move the pointer to the HEAD, meaning all your current changes will be gone.

git stash // to stash your changes and pop them another time

git remote add <name> <link> // to add remote repo

One blog is not even enough for must know git commands, but these are the most important once to me.

Competitions for issues

There are a lot of people that want to take issue. It's just a matter of who is the first one :)

People are more likely to take easy issues and not go with challenging

This is very interesting topic, that's what I noticed for myself. People are tend to take the issues, that they are familiar with.

How do you know if you are capable of fixing certain issue? What if you are just underestimating your abilities(which is mostly like to be true) ? Great questions to ask yourself :)

Yes, big projects require you a lot of time to understand how everything works, it's just not a comfort zone for us yet, and, of course, brain treats it as a threat :)

However, once you spend some time working on big project, you will get used to it and pull it into your comfort zone.

Improve your skills

It will never be that you will have to solve same issue, that you already solved in the past. It might be similar but requires another look at it. All of them are different and give you some challenge!

Prettier is a must

If you leave prettier out of the box for your project, you will encounter different code style, and eventually it worsens understanding of the code.

Best practice is to make sure that code is written in one style and formatted in the same way.

Too many issues

The point of that, is that you might struggle a lot with the amount of issue that are there. To make it less overwhelming, the best thing to do is sort the issues based on your language and issue type(e.g. feature, bug, good-first-issue).

Instead of randomly scrolling through the bunch of issues, it's better to stick with one language and some labels that fit you. This way you are more likely to find a good one, that is for your abilities.

Open source projects teach you

When you contribute to certain project, it's very likely to be that you are not familiar yet with framework or any other technology they are using. That's where you have a chance to learn it. When, if not know ?

Open source projects push you to learn new things and develop yourself. All you have to do is be persistent and not give up once something is not working with first try.

Summary

I would love to thank all project maintainers for their time and PRs accepted. Best morning starts with PR have been merged :D

Hacktoberfest gave me such a pleasant time. Next year, I will contribute again, but with more experience :)

I hope you enjoyed your Hacktoberfest and thank you for reading :)

Let's connect on LinkedIn to share experience. I'm open to everyone :)