Forem: Omri Grossman

5 Reasons Why Bite-Sized Functions Will Make You a Coding Hero

Omri Grossman — Tue, 10 Sep 2024 21:01:30 +0000

Hey there, fellow code enthusiasts! 👋 Ever found yourself lost in a sea of endless lines, wondering where one function ends and another begins? We've all been there. Today, let's talk about why breaking your code into smaller, manageable chunks isn't just a best practice – it's a game-changer for your development skills and career.

1. Your Future Self Will Thank You

Picture this: It's 3 AM, you're knee-deep in a critical bug fix, and you encounter a function that spans hundreds of lines. Nightmare fuel, right? Smaller code chunks act like friendly signposts in your codebase. They make it infinitely easier to navigate, understand, and modify your code, even when you're running on caffeine and determination.

// Instead of this:
function doEverything() {
  // 200 lines of mixed responsibilities
}

// Aim for this:
function validateInput() { /* 20 lines */ }
function processData() { /* 30 lines */ }
function formatOutput() { /* 25 lines */ }

2. Become the Teamwork MVP

In the world of collaborative coding, being a team player is crucial. Smaller code chunks make your pull requests a joy to review. Your teammates can quickly understand your changes, provide meaningful feedback, and approve your work faster. Plus, you'll significantly reduce the chances of merge conflicts – a win-win for everyone involved!

3. Level Up Your Testing Game

Let's face it: testing is important, but it's not always the most exciting part of development. Smaller code chunks make unit testing not just easier, but sometimes even enjoyable (yes, really!). When each function has a clear, single responsibility, writing tests becomes more straightforward and your test coverage improves naturally.

// Easy to test:
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// Nightmare to test:
function processOrder(user, items, coupon) {
  // 150 lines covering validation, calculation, database updates, and email sending
}

4. Squash Bugs Like a Pro

Bug hunting in a massive function is like finding a needle in a haystack. With smaller code chunks, you're essentially dividing that haystack into manageable piles. This makes debugging faster and more efficient. You can isolate issues more quickly and fix them with confidence, knowing you're less likely to introduce new bugs in the process.

5. Boost Your Code Reusability

Smaller, focused code chunks are like LEGO blocks for your software. They're easier to pick up and use in different contexts. This not only makes your current project more flexible but also builds up a personal library of reliable code snippets you can carry from project to project. It's all about work smarter, not harder!

// Highly reusable:
function capitalizeString(str) {
  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

// Limited reusability:
function formatUserData(user) {
  // 100 lines of specific data manipulation
}

Bonus Tip: A Tool to Keep You on Track

Keeping your code chunks small and focused is a skill that develops over time. To help developers on this journey, I created a VS Code extension called Live Code Metrics. It provides real-time feedback on your function sizes, acting like a friendly code reviewer that's always by your side, gently nudging you towards better coding practices.

Live Code Metrics offers features like:

Real-time visualization of function sizes
Customizable thresholds to match your team's standards
Support for multiple languages including Java, JavaScript, TypeScript, React, and Python

You can easily find Live Code Metrics in two ways:

Check out the featured list in the VS Code marketplace
Follow this link: Live Code Metrics

It's exciting to see the extension featured in the marketplace! If you're looking to build good habits and improve your code structure over time, give it a try. Remember, tools like these are meant to assist, not replace, your judgment. Use them as guides to develop your intuition for clean, maintainable code.

Wrapping Up

Remember, the goal isn't to make every function tiny – it's about finding the right balance for readability and maintainability. Start by being mindful of your function sizes, and you'll naturally develop an instinct for when to break things down.

So, next time you're coding, challenge yourself to keep it small and focused. Your code (and your fellow developers) will thank you for it!

Happy coding, and may your functions be ever concise and clear! 💻✨

What are your thoughts on managing code chunk sizes? Do you have any favorite techniques or tools? Share in the comments below – I'd love to hear your experiences!

Streamline Your Front-End Development with Tailwind Color Matcher for VSCode

Omri Grossman — Mon, 11 Dec 2023 19:25:03 +0000

As front-end developers, we are constantly looking for tools that not only enhance our workflow but also save precious time. That's where the "Tailwind Color Matcher" VSCode extension steps in - a game-changer for anyone working with Tailwind CSS.

What is Tailwind Color Matcher?

"Tailwind Color Matcher" is an innovative extension for Visual Studio Code that makes it incredibly easy to convert HEX color values to their nearest Tailwind CSS class equivalent.

How Does It Save Time?

Gone are the days of manually searching for color equivalents or flipping back and forth between documentation and your code editor. With this extension, you can:

Instantly Translate Colors: Simply input a HEX color value in VSCode's command palette, and the extension suggests the nearest Tailwind class.
Use the Color Picker: Not sure about the HEX value? Use the built-in color picker for real-time suggestions.

A User Experience That Stands Out

What makes "Tailwind Color Matcher" stand out is its focus on a seamless user experience. The intuitive interface allows you to:

Easily navigate and use features without any learning curve.

View color previews as you select, ensuring you're always confident in your choices.

Save Colors for Later Use

A unique feature of this extension is its ability to save your chosen colors. This means you can:

Maintain a consistent color scheme throughout your project.
Quickly access frequently used colors with a quick copy action, streamlining your workflow even further.

In Conclusion

Whether you're a seasoned front-end developer or just starting with Tailwind CSS, "Tailwind Color Matcher" is designed to make your development process smoother, faster, and more enjoyable. Try it out today and experience a new level of efficiency in your coding journey!

Why You Should Use Python Data Classes

Omri Grossman — Sun, 02 Jan 2022 14:01:44 +0000

Introduction

If you just started or already coded using Python and like Object Oriented Programming but aren't familiar with the dataclasses module, you came to the right place!

In this article, we will learn:

What are data classes, and what are their benefits.
How exactly they are different from regular Python classes.
And when you should use them.

Data Classes Background

Data classes are used mainly to model data in Python. It decorates regular Python classes and has no restrictions, which means it can behave like a typical class.

A small example of a Data Class:

from dataclasses import dataclass

@dataclass
class Car:
   color: str
   manufacturer: str
   top_speed_km: int

`dataclasses` was introduced in Python 3.7 as part of PEP 557

Let's dive into some code examples

The Benefits of Data Class

Special methods build-in implementation

When using the @dataclass decorator we don't have to implement special methods ourselves, which helps us avoid boilerplate code, like the init method (_init_ ), string representation method (_repr_ ), methods that are used for ordering objects (e.g. lt, le, gt, and ge), these compare the class as if it were a tuple of its fields, in order.
Read about a few other extra built-in methods in the official documentation.

How will it look with a regular class:

class Car:
  color: str
  manufacturer: str
  top_speed_km: int

  def  __init__(self, color: str, manufacturer: str, top_speed_km: bool):
    self.color = color
    self.manufacturer = manufacturer
    self.top_speed_km = top_speed_km

  def __lt__(self, other_car):
      return self.top_speed_km < other_car.top_speed_km

red_ferrari = Car(color='red', manufacturer='Ferrari', top_speed_km=320)
print(red_ferrari) # <__main__.Car object at 0x7f218789ca00>
black_ferrari = Car(color='red', manufacturer='Ferrari', top_speed_km=347)
print(red_ferrari < black_ferrari) # True

Note those two points:

Because we didn't implement the _repr_ special method, when we print the Car instance, we get the name of the class and the object address.
To compare between 2 Car instances, I had to implement the "less than" (_lt_) method by myself.

Example with dataclass decorator:

from dataclasses import dataclass

@dataclass(order=True)
class Car:
  color: str
  manufacturer: str
  top_speed_km: int

slow_tesla = Car(top_speed_km=261, color='white', manufacturer='Tesla')
print(slow_tesla) # Car(color='white', manufacturer='Tesla', top_speed_km=261)
fast_tesla = Car(top_speed_km=280, color='white', manufacturer='Tesla')
print(slow_tesla < fast_tesla) # True

It's necessary to set `order=True` if we want special order methods implementation to be included in the dataclass (e.g. lt)

When we try to print the slow_tesla object, we see the actual values of the object, not the object's address, unlike the previous example.
We can compare two objects without any need for us to implement special methods.

Inheritance

Same as regular python classes, inheritance can come to our advantage here too, no need to deal with the parent class construction:

from dataclasses import dataclass

@dataclass
class Car:
  color: str
  manufacturer: str
  top_speed_km: int

@dataclass
class ElectricCar(Car):
  battery_capacity_kwh: int
  maximum_range_km: int

white_tesla_model_3 = ElectricCar(color='white', manufacturer='Tesla', top_speed_km=261, battery_capacity_kwh=50, maximum_range_km=455)

print(white_tesla_model_3)
# ElectricCar(color='white', manufacturer='Tesla', top_speed_km=261, battery_capacity_kwh=50, maximum_range_km=455)

Just for reference, here is how it will look like using a regular class:

class Car:
  color: str
  manufacturer: str
  top_speed_km: int

  def  __init__(self, color: str, manufacturer: str, top_speed_km: int):
    self.color = color
    self.manufacturer = manufacturer
    self.top_speed_km = top_speed_km

class ElectricCar(Car):
  battery_capacity_kwh: int
  maximum_range_km: int

  def __init__(self, color: str, manufacturer: str, top_speed_km: int, battery_capacity_kwh: int, maximum_range_km: int):
      super().__init__(color, manufacturer, top_speed_km)
      self.battery_capacity_kwh = battery_capacity_kwh
      self.maximum_range_km: maximum_range_km

white_tesla_model_3 = ElectricCar(color='white', manufacturer='Tesla', top_speed_km=261, battery_capacity_kwh=50, maximum_range_km=455)
print(white_tesla_model_3)

I hope you can see that we saved much boilerplate code even in this small code snippet and didn't repeat every parameter initiation.

Frozen Instances

By passing frozen=True to the data class decorator, it lets us create immutable Python objects.

from dataclasses import dataclass

@dataclass(frozen=True)
class Car:
  color: str
  manufacturer: str
  top_speed_km: int


white_tesla = Car(color='white', manufacturer='Tesla', top_speed_km=261)
white_tesla.color = 'Red'

Trying to modify white_tesla to a red tesla, will give us a FrozenInstanceError error message:

dataclasses.FrozenInstanceError: cannot assign to field 'color'

Note: Using Frozen Instances will hurt the performance a bit so use it carefully

Now, you:

Are familiar with what data class is and how to use it.
Learned about the benefits and use cases of data classes.
Have some code examples which can help you get started.
Can start using it in your projects.

Conclusion

dataclasses is a powerful module that helps us, Python developers, model our data, avoid writing boilerplate code, and write much cleaner and elegant code.
I encourage you to explore and learn more about data class special features, I use it in all of my projects, and I recommend you to do it too.

Extra Resources

https://docs.python.org/3/library/dataclasses.html
https://realpython.com/python-data-classes/

Run Machine Learning models in your browser with TensorFlow.js (ReactJS)

Omri Grossman — Wed, 28 Jul 2021 14:59:51 +0000

TensorFlow.js (or, in short, tfjs) is a library that lets you create, train, and use trained Machine Learning models in Javascript!
The main focus is to let Javascript Developers enter the Machine Learning & Deep Learning world by creating cool and intelligent web applications that can run on any major browser or Node.js servers using Javascript.

Introduction

TensorFlow.js can run almost everywhere, all major browsers, servers, mobile phones, and even IoT devices. This demonstrates how huge potential this library has. TensorFlow.js backend can run on the device GPU through WebGLAPI, which gives Javascript code to run on the GPU, which means that TensorFlow.js can have excellent performance even though it runs on the browser.

After reading this post, you will:

Learn about TensorFlow.js and the ways you can use it.
Know how to load Machine Learning models into your Javascript project and start using it.
Gain the skills to create such a project by yourself
And finally, gain more knowledge about Machine Learning.

So, how does it work?

There are several options that we can choose from:

1. Run existing models:

TensorFlow.js provided us few attractive pre-trained models that we can import into our project, provide input, and use the output to our requirements, here you can explore the models they are providing for us: TensorFlow.js Models, and they keep adding more models as time goes by.
In addition to that, you can find many attractive pre-trained models developed by the TensorFlow.js community all across the web.

2. Retrain existing models:

This option allows us to improve an existing model for our specific use-case. We can achieve that by using a method called: Transfer Learning.
Transfer learning is the improvement of learning in a new task by transferring knowledge from a related task that has already been learned.
For instance, in the real-world, the balancing logic learned while riding a bicycle can be transferred to learn driving other two-wheeled vehicles. Similarly, in machine learning, transfer learning can be used to transfer the algorithmic logic from one ML model to the other.

3. Develop ML with JavaScript:

The third option will be used for situations where the developer wants to create a new Machine Learning model from scratch, using TensorFlow.js API, just like the regular TensorFlow version.

Now let’s get our hands dirty and do some Machine Learning with Javascript

In this article, our primary focus will be adding and running a pre-trained Machine Learning model to a Javascript project. You will see how easy it is to install, load, and run predictions on the machine learning model.

So let’s get started!

I've built an application that demonstrates the use of a pre-trained image tag classification model created by the Tensorflow.js team. The model is called MobileNet, and you can find more information about it here

The demo application is built with React.js, and Ant Design for the UI components.

React is an open-source, front end, JavaScript library for building user interfaces or UI components.

Let’s walk through the main parts of the application together:

First, dependencies

After we set up our React application, we will need to install tfjs and the image classification model — mobilenet, by running the commands below:

$ npm i @tensorflow-models/mobilenet
$ npm i @tensorflow/tfjs

Now, after we installed the packages, we can import them to our App.js file:

We imported the image classification model and the TensorFlow.js engine, which runs the machine learning models in the background every time we invoke the model.

Next up, we need to load the model into our component for future use. Please note that the model.load() function is an asynchronous function, so we need to wait for it to be completed.

The mobileNet model has a method called classify, after we loaded the model we can call this method：

This method accepts 2 arguments:

img: A Tensor or an image element to make a classification on.
topk: How many of the top probabilities to return. Defaults to 3.

In the next step we want to read the user input image and load the uploaded file into a canvas element of type HTMLCanvasElement

After the image is loaded into the canvas we can run the classification method.

The output of the model.classify method is an array of classified labels and their prediction score. The output looks like this:

Once we saved the predictions array in our component we can loop over the array and render them to the screen:

So that’s it, we have a living Machine Learning model in our browser, congratulations!

You're welcomed visit those links for:

The full code of the application can be found in this repository.
Full code + live demo: TensorFlow.js Image Classification.

You can upload your own images, get predictions, and can even be more creative and try to add new features by yourself!

Conclusion

There is no doubt that the use of machine learning is continuously increasing. With Javascript development becoming even more popular, the TensorFlow.js community will grow and get more powerful. I think we will see more and more production-grade applications running TensorFlow.js in the browser or Node.js servers for simple, light-weight tasks that Machine Learning models can solve.

After you’ve all seen how fast and easy it is to integrate TensorFlow.js to a Javascript application, I invite you all to try it by yourself and create some cool projects and share them with community.

Forem: Omri Grossman

5 Reasons Why Bite-Sized Functions Will Make You a Coding Hero

1. Your Future Self Will Thank You

2. Become the Teamwork MVP

3. Level Up Your Testing Game

4. Squash Bugs Like a Pro

5. Boost Your Code Reusability

Bonus Tip: A Tool to Keep You on Track

Wrapping Up

Streamline Your Front-End Development with Tailwind Color Matcher for VSCode

What is Tailwind Color Matcher?

How Does It Save Time?

A User Experience That Stands Out

Easily navigate and use features without any learning curve.

Save Colors for Later Use

In Conclusion

Why You Should Use Python Data Classes

Introduction

In this article, we will learn:

Data Classes Background

dataclasses was introduced in Python 3.7 as part of PEP 557

Let's dive into some code examples

The Benefits of Data Class

Special methods build-in implementation

It's necessary to set order=True if we want special order methods implementation to be included in the dataclass (e.g. lt)

Inheritance

Frozen Instances

Note: Using Frozen Instances will hurt the performance a bit so use it carefully

Now, you:

Conclusion

Extra Resources

Run Machine Learning models in your browser with TensorFlow.js (ReactJS)

Introduction

After reading this post, you will:

So, how does it work?

1. Run existing models:

2. Retrain existing models:

3. Develop ML with JavaScript:

So let’s get started!

You're welcomed visit those links for:

Conclusion

`dataclasses` was introduced in Python 3.7 as part of PEP 557

It's necessary to set `order=True` if we want special order methods implementation to be included in the dataclass (e.g. lt)