Forem: CodeChem

How we spent Hacktoberfest 2022

Ilija Boshkov — Mon, 07 Nov 2022 22:22:50 +0000

October, it’s a month that reminds most people of Halloween and dressing up; however, for developers, it can have a very different meaning. Octobers to a lot of us developers, mean Hacktoberfest and contributing to open source. Most of us have some piece of software we just can’t live without. For us at CodeChem, open source is a very big part of our everyday lives and we try to contribute as often as we can in any way that we can.

For this Hacktoberfest we decided to help out by sponsoring some project that we love and use. Lately, we have been exploring Remotion, an open-source framework for creating videos via React components. Remotion had just announced a $2,000 budget that they had dedicated to bounties for some of the issues on their GitHub. This sparked an idea for us - in the spirit of giving and Hacktoberfest , we wanted to show our appreciation for such an awesome piece of open-source software, so we chipped in and doubled their issue bounty pool to $4,000 in the hopes of amplifying the Hacktober magic.

In total, 27 issues were fixed - that means bugs were fixed, features were implemented and documentation was improved thanks to the support of everyone in the open-source community.

Our contribution did not stop at just doubling the Hacktoberfest bounty pot, we’re developers first and foremost, so we did what we do best, we sat down, wrote some code, opened a few PRs (No bounty for us, we do it for love ❤️). But we also did something interesting and held a talk on Remotion at our local BeerJS in Skopje.

Andrej, our local Remotion enthusiast held a presentation on what Remotion is and how we can use it to create a video of the audience's favorite beers. It was a fun, interactive talk and brought something new to the JS scene in Skopje.

As for the PRs, one of our developers, Stefan Uzunov improved the Remotion CLI by adding some enhanced interactivity and sane defaults when picking which composition gets rendered, while Ilija Boshkov contributed by packaging an existing component into a mainline Remotion package for adding motion blur to Remotion videos.

Hacktoberfest did not end at just Remotion, this month our awesome Andrej released a new open-source NPM package for easily adding animations to Chakra UI components.

All in all, it was a very productive month for us. We would like to say that it was our pleasure to support Remotion and we’re so happy that so much work has been done. This part is to you - the reader, we would like to encourage you to go out and contribute to your favorite open-source software. It could be as easy as going to the project’s GitHub repository and looking at some of the issues, we’re sure the maintainers as well as the users will appreciate your help. Any contribution counts, and none is too small, a lot of our world today runs on software built by many people just like you and any one of us.

❤️, Code Chem

Knowledge sharing is at the heart of CodeChem

Ivana Rangelova — Mon, 13 Sep 2021 12:38:55 +0000

Knowledge is power, but it’s far more powerful when it’s shared.

Knowledge sharing powers our company. And the success of knowledge sharing plays a key role in our company culture that we have been shaping since day one.

In fact, it’s the heart of what we do and how we maintain quality. As such, we leverage it at every opportunity.

Now, we can proudly say that we achieved that on another level.

Our colleague Lazar became an instructor and made his first course on egghead .

In this article, he shares his experience about creating this course.

What was your motive to create this course?

I’ve always wanted to pass my knowledge and experience and help developers be better at their everyday life. Also, I’ve always wanted to produce tech content. If you add the opportunity to the mix, you’ll see the full picture of my motive. This was a fun and interesting experience for me, and it helps me break the ice of course creation.

What was the process of creating this course?

Believe it or not, 80% of the time (or even more) went into planning the course, rather than producing the videos. I’ve had the opportunity to work with Lauro Silva, who's a super cool human being. He selflessly supported me during the planning and creation of this course from start to finish and I’ve learned a lot from him.

In terms of the process, I started by creating the course outline. I thought about all of the single takeaways that could be part of the course and divided them into separate lessons. That list got refined multiple times while I was creating the course. Then I wrote the outlines for each lesson. I’ve had several meetings with Lauro where we went through the course curriculum and discussed what could we change to make it better. After I nailed the curriculum, I started recording the lessons one by one and sent them to Lauro to review them. When I felt like I got the hang of it, I recorded all of the remaining lessons and submitted them in the egghead instructor’s portal. Lauro did a final review of the complete material and that was it! The course was complete!

What’s next?

I really enjoyed creating this course. It was fun, but challenging as well. It took multiple skills to produce it, like planning, writing code, designing the UI, recording, editing, and even marketing it at the end. So I’m motivated to keep creating courses. The courses don’t just help the viewers who are learning from them. They also help me have a solid understanding of the technology that I’m creating the course for. So in a way, I’m also getting better, along with the viewers. It’s a win-win situation where everyone has something to gain.

Tips:

Make sure you plan and code your lesson before recording it.
Keep your end-result code on a separate screen to remind yourself while recording.
Each lesson should have a single take-away. Don't explain multiple concepts and functionalities that are not connected.
Hit record and don't stop on your mistakes. If you make a mistake, make a pause, and continue.
Try not to move with your cursor a lot. It'll be very obvious when you cut out a segment where you make a mistake.
Write outlines for each of your lessons. The level of detail is up to you. You can do bullet points, or the whole narration word by word. Whatever works best for you.
Never forget to do a recap at the end. Recaps solidify the viewer's knowledge. Include the Recap in your outline so you won't forget it.

How to protect your eyes as a developer 👀

Ivana Rangelova — Fri, 27 Aug 2021 10:33:35 +0000

Eye health isn’t always the top priority when it comes to self-care, right?

The first thing when you wake up is checking emails on a phone or scrolling Product Hunt. Throughout the day you read and write code on the screen with a dark background and a bright multi-colored font, or a light background with darker font. At night after hard work, you watching TV.

That means your eyes are constantly are under a lot of strain and even lead to a host of eye-related symptoms, such as:

Tired eyes
Blurry vision
Dry eyes
Headaches
Red eyes

Luckily, there are a few simple things you can do to look after your most widely used sensory organ and keep it in top shape for your coding.

Try 20-20-20 rule

When you are looking at objects at a close distance, your screen in this case, tiny muscles inside your eyes called the ciliary muscles - contract. And by focusing, the contraction changes the shape of the lenses inside the eyes. While focusing, the eyes start to struggle. They especially struggle when you read your code on the screen.

Try the 20-20-20 rule. All you need to do is after 20 minutes of coding, distance yourself from the screen and start looking at least 20 seconds in cool-toned objects at least 20 feet away.

By moving your focus to a distanced object, you're letting your eyes relax.

Think blinking

Blinking is important! The eyelids work like windshield wipers.

The solution is simple. Take time to look away from your screen and start with slow blinks, as if you're falling asleep. This may seem like a no-big-deal, but did you know that your natural blinking rate of 18 to 20 times a minute decreases significantly when you’re sitting in front of a screen? The upper eyelid of the eye doesn't contact the lower eyelid, which means that only part of our cornea gets moistened. This is a hard one to prevent, but taking time to blink helps wet your eyes to prevent them from drying and getting tired, which also stops the blurred vision.

This is another way and a great habit to protect your eyes.

Check your lighting

The workplace needs to be lighter than your computer screen.

A well lead workspace is important for your mood as well. Try to work in natural light as much as possible. Ideally, the window should be on your side instead of directly in front or behind you. By using blinds you will reduce glare. But, in case you’re using artificial light, position the screen to reduce reflections. Also, you can try out different types and colors of bulbs to see what suits your eyes best.

Invest in a good monitor

It's a fact that our eyes are not big fans of flickering, glare, and low resolution. A great option for your eyes is an OLED panel. Because it has vibrant colors, angles with wide viewing, and emits significantly less blue light than an LCD panel.

Another great option is a screen with a refresh rate of at least 75 Hz. It has a much smoother viewing experience and is easier for the eyes. Even better if the screen is anti-reflective and anti-glare.

Reduce blue light at night

Blue light isn't always bad for you and your eyes. It boosts your attention and mood while you are programming during the day. But during the night, blue light can suppress the secretion of the hormone melatonin, who helps control your sleep cycle. Any type of light can do this, but blue light is most powerful.

In that case, it's a good idea to install software that controls the color temperature or filtrates the blue light. Macs already have a pre-install feature called "night shift". You can configure it to turn on automatically.

Drink more water

You need to stay hydrated throughout the day by drinking water.

Do you remember that scratching sensation when you blink like there is something in your eye? That is when the body is dehydrated. There is not enough water to remain hydrated. That results in drying your eyes and they become itchy and scratchy.

Let's recap. if you want to protect your eyes as a developer, try to acquire these 3 habits:

Look at something far away periodically;
Blink slow every once in a while;
Drink more water.

Also,

Invest in a good monitor;
Reduce blue light at night.

Prototype vs Minimum viable product

Ivana Rangelova — Thu, 12 Aug 2021 13:23:34 +0000

A prototype or an MVP: What should the first version of your product be? What’s the difference between the two? What are they used for?

Keep reading for the answers. Today we're going to talk about these 3 topics. Let's start.

Prototype vs MVP: Short Definition

Let's say that prototypes are often confused with MVPs because of their same purpose. Both are designed to help validate your idea. But how they are approached is fundamentally different. With the following 3 basic definitions, we will make it easier for you to understand the difference between a prototype and a minimum viable product (MVP):

Prototypes are created before an MVP.
A prototype is an interactive, working visualization, in another word, simulation of the product, meant to identify usability flaws that can affect user experience.
A minimum viable product is an early version of your product but with core and functional features, meant to collect people's feedback.

We already wrote an article on how to build an MVP.

Prototype

The prototype actually is a sample of what will become your final product.

A beauty in prototypes is that they are non-committal and can be used in every stage of the process. Also, they can be animated and easily sharable with friends, teams, and potential investors. Whether it’s about embodying an idea or testing a specific feature, prototyping is a powerful way to explore concepts, understand usability and improve functionality.

In this experimental process, the dev team implements ideas from paper to digital.
The prototype can come in a thousand shapes and sizes from paper prototypes and sketches to functional interactive prototypes. There is an abundance of tools, but in our process, we use Figma.

✋ 5 Advantages of Prototyping

You can attract investors. With prototyping your initial product you can get investors to consider and invest in your startup.
You can optimize resources. With creating a prototype, you can identify flaws of the design (like UI elements) and be fixed before the development begins.
Iterate designs. Tools like Figma help the team create many design iterations in a short time. This can last until you can choose the design with the best performance and make some internal experiments.
You can collect feedback. Prototyping is the best way to test users for initial feedback. User testing is an important component in this phase. It can help improve and shape the design and still have enough time to fix the flaws.
You can polish your idea. By creating a prototype, you can simplify and transform your idea into a visually appealing and refined format.

Minimum viable product (MVP)

In the minimum viable product approach, the word minimum is important here. There is nothing irrelevant in an MVP. Focused on one or few core features, a minimum viable product can be used, tested, and played with. No need to ask your test users theoretical questions, you’re only observing their behavior and collecting specific feedback of a practical nature. Okay, let’s be more clear here… an MVP is not just the functioning early release version of your final product with core features. A minimum viable product on the other hand is an experiment, testing part of your solution with the users who are experiencing the problem. And, the resulting data helps you produce a better, more marketable version of your final product.

✋ 5 Advantages of MVP

You can attract investors. By creating a prototype you can provide seed funding for your startup... But if your MVP intrigues people with a positive reaction, it can help you gain a much bigger investment!
Save you time and resources – We already said that there's no need to implement all of the features in your MVP. That means the development work is reduced and the risk of over-building features is minimized.
Helps you a better understanding of the ‘problem’.
Confirm and engage with your users – You’re not just testing the product, you’re also testing and identified the people who really need your product. You’re also putting the word out on the upcoming product, creating interest, raising awareness, a buzz...
You let the money in. With an MVP out in the market and good marketing, you can start acquiring paying users that will support your growth.

Let’s not forget the dev team. Launching an MVP is motivational: there’s a tangible representation of the future product; an MVP means progress.

In a nutshell

The differences between an MVP and a prototype.

So, which one is better for the first version of your product: MVP or prototype?

There is no winner! Which approach is better depends on the stage of the product you’re building, its scope, and intended users, but one thing is sure that for validating your initial idea, either a prototype or an MVP will be sufficient. Both prototypes and MVPs can be used to reduce risk, reduce costs, so there’s no need to invest in a huge, complex platform without going first through one of those (or both) stages.
When our team is working on a proposal, they always choose the solution that best fits the client's needs, budget, and business goals.

If you want to test the basic product concept and you have a limited budget, create a prototype.
If you want to test if the users really want a specific feature, build an MVP.

If you’re not sure which approach would fit best for your product, our dev team is always happy to talk and help you with your challenge, so feel free to contact us as well!

COMING UP NEXT:

How to hire a dedicated development team for your Startup.

3 methods that will help prioritize your MVP's features

Ivana Rangelova — Thu, 05 Aug 2021 15:04:53 +0000

When you’re in that stage of building your product, you may find yourself falling into one of the traps, such as: One-more-Feature.

You want nothing but to be perfect, and you’re thinking of all the cool features that would help to achieve this perfection, and so the list keeps growing and growing...
You know what they say:

When everything is important, nothing is important.

If you elicit a long list with dozens of wants features: from small to large, from simple to complex, from usual to unique, how can you know where to start? How do you filter all of the features and assemble the minimum, enough to verify your idea?

There are features that are certain must-haves but there are some that will be totally pointless. And prioritizing the features for your minimum viable product is the key to escape from the chaos in your head. 🗝️

Feature prioritization for your minimum viable product is the most important decision you will make in the development process. So, in this article, we will explain how to achieve this.

How to pick your MVP features

Choosing the right features for your MVP can't be impulsive and intuitive, but precisely defined. We know that this process can be tricky but fun and it's totally worth it. While you may think that you have sorted all things, detailing it actually takes a lot of work and effort, such as discussions with developers and experts.

After you figure out the problem your product is solving and who your target will be, it’s time to analyze your competitors and what your potential users like in their products. See what functionality the competition is offering and what users might feel is missing in their product. Don’t skip the market research! This will help you with your further development, and result in a long list of desired features.

Design Sprint is a fantastic way to point a problem and gain people's feedback on a solution to that problem. In a 5-day workshop, a team with experts explores a problem, simulate design thinking, creates a prototype, and gains feedback from users on that prototype. This fun and magical whirlwind process help you uncover new solutions and open new horizons for your product.

Post-Sprint the teams can be left with a long list of features. But luckily you’ve been armed with valuable information which helps you much easier to plan the entire process.

Product feature prioritization methods

Wants vs. Needs

For this method, you need a crystal clear picture between what the user wants and what the user needs. We are already said that user experience and feedback are very important for your MVP. Sometimes you may find in the scenario where early adopters prefer cool and unique functionalities, but in reality, that is not vital for the product at an early stage. Of course, you can keep and implement them for version 2.0 or for further development. By avoiding implementing too many non-essential features too soon you are making a very smart move. This will save you valuable time and money. Otherwise, you will be forced to sacrifice the needed features. That is going to result in harming your MVP and lead you astray from its overall purpose of product validation.

Feature Buckets

Suggested by many famous project managers and product owners, this product development method is the most usual and quickest way of validating features.
For prioritizing into feature buckets you split the list of features into 3 groups, sometimes 4 or 5.

Must have (Metric Movers). These features are intended to positively affect the main KPIs of the product. The success or failure of your product will be judged by the KPIs, so this bucket is essential in the interest of reaching product goals.
Nice to have (Delights). Features that increase people's satisfaction, such as attractive and cool animations, leaderboards, entertaining elements, etc.
Not needed (User requests). These features are actively requested by users, but are not intended to solve their principal problem. They are minor and attractive features, such as unique and funny sticker packs or emojis.

It's a very rare scenario, but don't get confused as some features may fall into 3 buckets. But, evade it where one of the buckets has no features in it. This likely illustrates the issue with your innovative ability, product performance, or the gathering and interpretation of user feedback.
These issues can cause both short-term and long-term problems, and threaten the project's success. A balanced approach would result in an MVP with features from all buckets.

MoSCow Matrix

This is another prioritization method used in agile product development and involves splitting all features into 4 logical categories:

(M) Must Have are features that are very essential for building your MVP. Without these features, the product may face some legal or regulatory challenges. Also, intended to give the product its fundamental value to users.
(S) Should Have features are second to 'must-haves' in the order of importance. Тhey brings great value from the user experience aspect. And their absence won't have a high impact on your MVP.
(C) Could Have features are the cute little add-ons. But no matter how exciting, attractive, and interesting they are, don’t rush to include them in the early product version.
(W) Won’t Have are the features that you’re absolutely sure you won’t implement in your MVP, but in the final version of your product.
(C) Could Have features are the cute little add-ons. But no matter how exciting, attractive, and interesting they are, don’t rush to include them in the early product version.
(W) Won’t Have are the features that you’re absolutely sure you won’t implement in your MVP, but in the final version of your product.

Different methods have different approaches and involve differing perspectives. Deciding what method to use and conducting it yourself could be overwhelming, which is where product development companies like CodeChem are more than happy to jump in and assist.

COMING UP NEXT:

The differences between a prototype and an MVP.

Stay tuned.

4 popular types of MVP: How to choose the right one for your startup

Ivana Rangelova — Tue, 27 Jul 2021 12:41:29 +0000

In our latest blog post, we've discussed what a Minimal Viable Product is. It's the easiest tool you can build in order to test your idea and learn through collecting feedback from your early adopters. And also, how to build it.

It's a fact that in this dynamic and turbulent world, full of brilliant ideas ready to be born into great startups, every entrepreneur is facing the same challenge - a blank page! That is one of the main reasons why many startups are failing. The blank page has endless possibilities and no guidelines. And the absence of form scares off potential entrepreneurs before they start. The absence of form exists because of the lack of feedback, so entrepreneurs don't know whether they are making the right decisions.

Successful entrepreneurs see the blank page differently. They will shape a blank page into many ideas, then a plan, and at the end a product. They will transform the page to a process that will allow for that evolution to occur. Successful entrepreneurs don’t rely on the intuition of what users want, instead, they learn it through a process of hypothesis and experimentation. They discover the best decisions for their business by building an MVP.

MVP can come in a thousand shapes and forms. So, in this article, we will focus on the most popular ones. We will give you a simple explanation and examples from successful startups. We're sure that it will help you decide which type or solution is most suitable!

Content-related MVP

This group of MVPs is based on content. It will allow you to present the idea behind your product to your potential users or investors without building a prototype.

And now you probably have a question: ‘Isn't MVP first and foremost a product?’ Yes! But, it’s possible to catch potential leads and measure purchase intent without building it.

A landing page is the most used form of MVP because is easy to make. A simple website, a short description of your product, and a CTA (call to action) button can be a very reliable test of people’s interest. For a quick result – you can run an AdWords campaign on your main keywords and see people's reactions.

Main tips:

✔︎ Make it look aesthetically appealing, so you can grab people’s attention!

✔︎ Try to explain all the features from the user’s perspective.

✔︎ Ask people to leave their e-mails. Once the MVP is live, you’ll be able to inform early adopters about your product.

Example: Buffer.com

One of the most popular platforms for scheduling social media posts was tested through various landing pages before the first line of its code was written. Joel Gascoigne, the founder, build a simple website describing Buffer’s functionalities and a page with “Plans & Pricing”. Everyone who clicked on could be a potential subscriber. Most importantly, the product wasn’t ready yet. The page only contained a piece of information that it will be launched soon and a possibility of signing up for a newsletter. Very easy and effective!

🤩 Pros

Can be built cheaply and quickly.
Can easily be matched with online ads.
Can be tested and optimized easily.

😩 Cons

The conversion rate is low (about 1-3% of people sign up).
Hard to adapt all vital information into one page.
A landing page that's not aesthetic can hurt your brand.

This type of MVP is another popular content-related MVP. One minute-long video is more than enough to explain your product. An interesting and creative video catches people's attention more easily than a simple description. Also, can go viral very quickly.

Example: dropbox.com

https://www.youtube.com/watch?v=w4eTR7tci6A

DropBox (a platform for sharing files on different devices) proved the effectiveness of their MVP in the form of a video. Because of the complexity of their innovative product, they test it before investing resources for development. DropBox created a short animated video for their MVP. The subscriptions sky-rocketed overnight!

🤩 Pros

Explains your product in a simple way.
People are interested in watching a short video.
Good for branding.

😩 Cons

You may have to spend a lot of time to make an explainer video and get the right message.

Functionality-related MVP

This type of MVP is based on functionality. Can be used when content-related MVP wouldn’t give you enough feedback from your early adopters.

Wizard of Oz MVP is where you essentially put up a front that gives your early adopters the impression that you have a product. Also, users have the opportunity to experience it. It’s a very effective way of checking if you have a wanted product before you actually build it.

Example: zappos.com

Zappos (an online shoe retailer) is the most famous example of Wizard of Oz MVP. Nick, the founder tested the idea before creating the product. He went to local stores, photographed shoes, and sell them online. All that he needed was a very simple website and a small budget for ads to get traffic. From the customer’s side, it looked like a fully functional website.

🤩 Pros

You can set up this MVP cheaply and quickly.
You can use social media to generate interest.

😩 Cons

You have to spend a lot of time and effort to manually perform the service.
Customers can feel cheated if they come to know that there is no real product.

Single Feature MVP is when you develop your actual product and sell it to your potential users. Even though the term means developing 'one single’ feature for the MVP, it doesn’t necessarily mean that. Single Feature MVPs are those that focus on solving the core problem of the user. And to do so, you may need more features in your minimum viable product, but they must be prioritized. Keep ‘must-have’ features and eliminate ‘nice to have’. While defining and prioritizing the core features to build, consider the following things: Unique Selling Point that offers users value and stand among the competition. Leave the other features for later development.

Example: spotify.com

Spotify today is the global leader in the music industry. But how it reached the top of success is an interesting story.

In 2008 Daniel Ek and Martin Lorentzon identified the opportunity that the music industry had nothing to help the music lovers stream songs. In 2006 after just 4 months of development, they launched their first prototype.

🤩 Pros

Focused on solving one specific problem for specific users.
You can get your product to market fast with low costs.
You can expand it later without much difficulty.

😩 Cons

You have to invest in development.
You may have a problem figuring out which feature you should focus on.

Before choosing the right type of MVP for your startup, you should define your goal. Understand your target, estimate the resources, choose the most suitable type MVP for your startup, and get ready to beat the market. As a software development company, we are always here to help you make the right decision and turn your ideas into a successful startup! ★

NEXT STEP ⇢

In this post, we went through what are the most popular types of MVP. In the following post, we will explain how to define and prioritize the features for your MVP. Stay tuned.

Road To An Internship - Grinding Period [3/3]

Andrej Acevski — Thu, 22 Jul 2021 13:53:36 +0000

Hey folks!

This is the last part of my "Road to an Internship" series, we'll be continue talking about my Grinding Period and the my discovery of new technologies. If you haven't read the previous parts, be sure to check them out:

Grinding Period 💪

As I was finishing the last project I started getting more involved in the developer communities and I met Lazar. Still to this day, he's one of my biggest inspirations - his portfolio website inspired and truly astonished me. I peeked around and I love what he does for programmers and he gave me a lot of tips on what technologies to learn and improve on. It motivated me a lot when I met other hardworking developers who are working through their problems just like me.

Like always, I decided to start a pet project, but this time it was special - I recreated my website Andrej's Tunes using Next.js, Tailwind and I decided to move on from Javascript to Typescript. You can find the source code here. It was quite a productive period and I was very happy with the outcome.

After the positive feedback, I started getting interested in new technologies, some of the frameworks I was experimenting with were:

Then I decided to apply for my internship at CodeChem where there was an Open Day. CodeChem's Open Day is the first event I attended hosted by a programming company but it was genuinely fun. We had a challenge - it was to recreate the game Bejewled. I had a lot of fun and after some time, I secured the long awaited internship.

Final Words 🙌

I hope I managed to motivate some junior developer who're struggling with their code right now. With a lot of love and persistence - you can truly learn any technology, framework or anything - really. On top of that, this was a fun way of me to look on how I've improved these past months and I know that the fire within me won't stop burning anytime soon!

Road To An Internship - The Rough Break [2/3]

Andrej Acevski — Thu, 22 Jul 2021 10:56:36 +0000

What's up!

We're continuing to the third part of my Road to an Internship series! Last time I was sharing my experiences with API's and the little Discord bot I made which implemented my knowledge of API's. In this part I'll put a highlight on burnouts in programming and the learning curve I had with React.

The Rough Break 🛑

There was a silent phase from me after the last project. I was making websites who never saw the light of day and I was trying to master Node.js more each day! However one day I decided that I was ready for React and so the journey began. It was a long journey, mainly because I couldn't really get the hand of React, there were multiple tries back and fourth but I couldn't understand the main concept of React. So I began to think of a way to overcome React and I decided to do what I used to do on my previous project and how I learned past technologies - a pet project!

One thing you guys might not know about me is that I love music and I'm always around music, it was always a dream of mine to make a website that displays your favorite artists and tracks from Spotify and one night as I was browsing Spotify's API, I had a breakthrough - I decided to make a website to display a user's favorite artists or tracks using React.

Before I continue I want to talk about the minor burnout I had as a programmer. In my case it wasn't that serious but I was so obsessed on becoming a better programmer it killed my motivation. After I made my Discord bot, my motivation went down and now when I look back to it, the main reason was because I was overworked. This is the main reason I struggled with React so much. It was a big learning curve, I must admit but combine that with a slight burnout and it wasn't the most pleasant experience. No matter what's your skill level, we should all take a step back because a break is almost as important as doing our job.

Now, let's continue where we left off! As I was building my website, I started to fall in love with programming more and more. I found a place where I could share my creativity. After a week and a half, I was finally done and it was time to name the project, so Andrej's Tunes was born!
If you visit it, you can see it's an archived Github repository. Why so? In the next chapter I'll talk on how I reworked this website and how you can always improve your code. So what resources did I lean onto when I was making this website? In this specific chapter of my series I'll give you a tip that is used a lot in the real world. The best resource on learning a new technology is the documentation, I was heavily leaning on these following documentations:

What's next? ⚡

In the next chapter I'll talk about how I burst out of my bubble and surrounded myself by amazing programmers who made me take my programming skills to the next level!

Road To An Internship - Moving On [1/3]

Andrej Acevski — Thu, 22 Jul 2021 10:52:47 +0000

Hey!

This is the second part of my Road To An Internship series, last time we left off right as I was finishing my pet project Omnifoods. It was a simple website with some jQuery mixed with it, however a very important lesson for me to learn! I've had more concrete knowledge on responsiveness.

Moving On 👉

The last project was quite crucial and as a developer, I suggest everyone starting from the very basics. This way you can learn a lot more, even if you feel confident - you can always learn more! However I was far from my final goal. I started reading up on API's and started watching YouTube videos to better improve my knowledge. Some videos that helped me a lot are the following:

Like before, I wanted to start another project, that's the best way for me to learn. I've always wanted to make a Disord bot but not just any Discord bot - I've had in mind to use an API provided by Riot Games for one of their games called Teamfight Tactics. The main goal for this project was to make it display statistics about the username entered, this way I could learn more about HTTP requests and on top of that, I would improve my knowledge with Node.js and Javascript! Here's the API I've used.

After countless of hours, days and a lot of coffees, I finished River Sprite , that was the name I went for when naming the Discord bot. I must admit - it's quite a messy code, I know it's good practice to always have clean code but the knowledge I acquired was priceless. I've decided to use the original code I had, for everyone that is starting and is interested - I hope it motivates you to start off project

In the next chapter... 👾

Next time I'll be talking more about my "Silent Period" - where I focused mostly on React and I'll have a segment on how to avoid burnouts.

Road To An Internship - Starting Off [0/3]

Andrej Acevski — Wed, 21 Jul 2021 15:07:09 +0000

Hey folks!

In December of 2020, I decided to pursue a career as a web developer - in this series of articles I'll be talking about the steps I took. You don't have to follow these exact steps, however I wanted to write about my experience and on top of that I hope to motivate some of you future developers who are currently trying to forge your own path!

I'm far from a full stack web developer, nevertheless I have the mindset of learning new things everyday. Taking that in account, I've accomplished a lot of my goals that I had in mind when I was starting. One of them was securing an internship and working what I love.

Starting Off 🌟

I have to say that I had prior programming knowledge before I started learning with a more serious approach. Where did I start? CSS. I practiced CSS a LOT. It might sound weird, but if you start working with responsive designs, grid designs, flexbox and the rest, you need to know CSS quite well.
I recommend everyone who's a beginner to use Bootstrap's Grid system.
As I was working through the grid system, I was acquiring knowledge in colors. Adobe Color is an amazing tool which assisted me in choosing and picking colors.

My way of learning is making projects - in my opinion that is the best way to learn a skill. I picked up a Udemy course about CSS and created a website called Omnifoods.

It's not the finest websites, however I acquired plenty of knowledge. Some other pretty useful websites if you're starting are
Glyphs, 0to255 and last but not least Octopus.

I'm in love with Octopus since it makes sure you plan out your website prior to doing the programming.

To be continued... 🔜

That's how I started out, in the next article I'll be talking how I learned about API's, Node.js and much more. Thanks for reading!

Building an MVP from Scratch 🚀

Lazar Nikolov — Wed, 21 Jul 2021 13:29:23 +0000

Back in October 2020 I decided to start a pet project with a goal to learn a new technology. I noticed people on Twitter were saying how much they like the Developer Experience of Blitz JS so I decided to use it in this pet project.

But then I thought, this pet project could be something useful to our employees. So, after a little research I decided to build an Absence Tracker, so we can ditch the Telegram group where we reported our absences.

The Inception

I decided to use Chakra UI along with Blitz JS, because it's rich with components and it allows me to quickly build the UI. And it looks 😍. I did a little planning and Database Design in diagrams.net and started to layout the pages.

One month in I decided to stream the whole development process on Twitch! That was one of my best decisions. I've met a lot of cool folks on my streams and they gave me some interesting ideas regarding the implementation. All of my streaming archive can be found on my YouTube channel.

The Challenges

One of the challenges was keeping up with the changes of Blitz JS. When I started the project Blitz was still in alpha. And as we all know, alpha software tends to change and it's totally normal. Blitz JS is maturing in a great way, but keeping track of the changes did require a lot of release notes reading and checking out past PRs.

Another challenge was using Chakra UI with an experimental version of React (default by Blitz JS). I couldn't find a good workaround, so I decided to use the stable version of React. The drawback of that was disabling the Concurrent mode of React, even though I really liked that feature.

The Benefits

This tech stack grew to be my favourite. It really allows you to build your app in a record time! I really like the DX of Blitz JS and Chakra UI and their intuitive APIs. I'll definitely use these technologies for my future projects too.

As I mentioned, streaming on Twitch was one my best decision. I've gotten a lot of followers and met a lot of cool folks that hung around my streams. I've also gotten the attention of Chakra UI! They liked my streams and invited me to join the core team 🤩

The Finale

I decided to bring my colleague @iboshkov as a guest to my live stream where we Dockerized the app and deployed it on our company servers. There was a readymade Docker image for Blitz JS, but we decided to build our own. It wasn't complicated at all. After we set up everything in a Docker Compose network, the deployment was a single line command.

Next on our list is to onboard all of the employees, synchronise the old data with the new platform and officially start using the new platform. It started off as a pet project, a "placeholder" for me to learn a new technology, but it grew into a cool usable app that will make our lives easier. It's been a wild ride, but I'd do it all over again without thinking.

FFMPEG: Screen-recording and video compression made fast and easy (MacOSX guide)

Ivana Rangelova — Fri, 16 Jul 2021 20:47:27 +0000

Intro

You probably already know the "Why" since you're here, or probably you're just a knowledge devourer that wants to know stuff just because one day it might come in handy (trust me, this might come in handy one day).

In your life as a developer you might need to make screen recordings to send to your colleagues or clients to showcase (the progress of) something you've developed. And these screen recordings can result in pretty big file sizes depending on the resolution and the length of the recording. Big files don't work well with slow upload speed and also they take more space on a server ("Thanks Captain Obvious!" - said someone from the audience).

So, since video compression is a thing, I'm going to help you compress those chonky files and help you decrease the effects of the aforementioned problems.

Pre-requisites

The only additional things you will need to accomplish this task are:

Homebrew - a package manager for MacOS (makes life a lot easier)
ffmpeg - a CLI tool which allows video format conversion, compression etc.
basic terminal knowledge (traversing the file system)

Installing the pre-requisites

Open a terminal window
Install Homebrew by running this:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install ffmpeg by running this:

brew install ffmpeg

Screen-recording tutorial

Recording your screen on MacOSX is as easy as pressing Cmd + Shift + 5. I won't explain further, the tool is quite intuitive, fiddle around with it and you'll get familiar with it quite fast.

NOTE: To make your life easier rename your recording to something short and simple like "a.mov".

Video compression tutorial

Open a terminal window
Go to the recording's location (using the terminal of course)
Run:

ffmpeg -i {recording-video} -vcodec libx264 -crf 24 {output-video}

The {recording-video} and the {output-video} have to contain the file extension as well.
(i.e.: ffmpeg -i a.mov -vcodec libx264 -crf 24 b.mov)

And that's about it. If you want to know more about what the options for ffmpeg mean, keep on reading.

Breaking down the `ffmpeg` command

Let's dissect the command first:

ffmpeg | -i {recording-video} | -vcodec libx264 | -crf 24 | {output-video}

Now let's explain it:

ffmpeg is the name of the CLI tool
-i is an option which takes the name of the input video (the video which we want to work on)
-vcodec is an option which takes the video codec's name (in our case it's libx264)
-crf is an option which determines the constant rate factor (I know it's wrong, but I remember this as compression ratio factor, which makes it easier for me to remember that higher values mean higher compression and lower video quality/size)

Outro

I hope this post helped you learn something new. This may serve as a short introduction to ffmpeg for you as well, which is a powerful CLI tool. You can learn more about ffmpeg here.

Also, I've made a multi-platform tool which installs everything automatically. You can look at it here.

Forem: CodeChem

How we spent Hacktoberfest 2022

Knowledge sharing is at the heart of CodeChem

What was your motive to create this course?

What was the process of creating this course?

What’s next?

Tips:

How to protect your eyes as a developer 👀

Try 20-20-20 rule

Think blinking

Check your lighting

Invest in a good monitor

Reduce blue light at night

Drink more water

Prototype vs Minimum viable product

A prototype or an MVP: What should the first version of your product be? What’s the difference between the two? What are they used for?

Prototype vs MVP: Short Definition

Prototype

Minimum viable product (MVP)

In a nutshell

The differences between an MVP and a prototype.

So, which one is better for the first version of your product: MVP or prototype?

COMING UP NEXT:

3 methods that will help prioritize your MVP's features

How to pick your MVP features

Product feature prioritization methods

COMING UP NEXT:

4 popular types of MVP: How to choose the right one for your startup

NEXT STEP ⇢

Road To An Internship - Grinding Period [3/3]

Grinding Period 💪

Final Words 🙌

Road To An Internship - The Rough Break [2/3]

The Rough Break 🛑

What's next? ⚡

Road To An Internship - Moving On [1/3]

Moving On 👉

In the next chapter... 👾

Road To An Internship - Starting Off [0/3]

Starting Off 🌟

To be continued... 🔜

Building an MVP from Scratch 🚀

The Inception

The Challenges

The Benefits

The Finale

FFMPEG: Screen-recording and video compression made fast and easy (MacOSX guide)

Intro

Pre-requisites

Installing the pre-requisites

Screen-recording tutorial

Video compression tutorial

Breaking down the ffmpeg command

Outro

Breaking down the `ffmpeg` command