Machine Learning (ML) and Artificial Intelligence (AI) are more than just tech buzzwords; they’re rapidly changing the landscape of web development. You might associate these terms with futuristic concepts like self-driving cars, but the reality is, ML is becoming increasingly relevant for front-end developers. If you’re a front-end developer, you might be wondering how you can incorporate machine learning into your skillset and what it means for your career growth. For a while now, AI has captured the imagination, moving from science fiction to tangible projects we see in the news. It’s natural to be curious about how we, as front-end developers, can get involved.
But what do these terms actually signify in practical terms for someone working on the front end? Sorting through the marketing hype to find valuable information can be challenging. Having spent the last few months exploring Machine Learning and Data Science, I understand the difficulty in cutting through the noise. This article shares my journey and how far I’ve come as a JavaScript developer, aiming to shed light on how you too can leverage on-the-job learning to explore machine learning in your front-end career.
Before we dive in, let’s start with a bit of tech humor that perfectly sums up the perception of Machine Learning and AI:
“Difference between machine learning and AI:
If it is written in Python, it’s probably machine learning
If it is written in PowerPoint, it’s probably AI”
Debunking the Myth: Machine Learning Isn’t Just for Math Geniuses
Early in my career, I had my first encounter with Machine Learning while working with a team focused on text recognition. As a front-end developer, my role was to build the user interface for document submission to the backend for processing.
Python is often considered the go-to language for ML/AI, leading me to believe that my exposure to ML as a front-end developer would be limited. However, I soon found myself deeply involved. Text recognition models are sensitive to input formats, so I ended up using JavaScript implementations of Python libraries to preprocess documents directly in the browser to ensure compatibility with the backend. This experience opened my eyes to the existence of JavaScript-based Machine Learning frameworks. I discovered that not only could I use pre-trained models for predictions in the browser, but I could also create and train models using JavaScript.
While it was exciting to see JavaScript’s capabilities extend into ML, I was also aware that Machine Learning is a specialized domain rooted in advanced mathematics like calculus and statistics. Despite my JavaScript proficiency, I felt daunted by the high-level math involved. I began to think that Data Science was a field beyond my reach as a “mere” front-end developer. After that project concluded, Machine Learning took a backseat in my professional life for several months.
From Skeptic to Learner: You Don’t Need a Math Degree to Start with Machine Learning
(Pictured: My initial image of Data Scientists – math whizzes only.)
Despite my initial hesitation, my interest in Python remained. As the organizer of a local meetup, I decided to organize workshops to teach Python to our community (and learn it myself in the process). I collaborated with Michael DuPont, the organizer of the local Python User Group. We planned a series of talks and workshops where Michael would teach, and I would handle logistics and venue booking.
These workshops were a fantastic learning experience, and we even recorded them for YouTube. Through this, I gained valuable knowledge about Python and its ecosystem, and also some intriguing insights into Machine Learning.
During the introductory talk, Michael introduced TPOT – an automated ML tool – and demonstrated how to train a model to predict Boston housing prices. What fascinated me was that TPOT could automatically analyze data, create a model, and train it, essentially bypassing the complex math and statistical processes. This sparked an idea: perhaps a developer’s skillset is enough to begin exploring ML.
JavaScript: Your Gateway to Machine Learning
My involvement in running a podcast led me to Gant Laborde, a JavaScript developer passionate about data science. We interviewed Gant about Machine Learning in JavaScript, delving into practical ways to get started with ML.
Gant also mentioned his upcoming JavaScript Machine Learning course. This was particularly interesting because most ML tutorials focus solely on Python. After the interview, I volunteered to be a guinea pig for Gant’s course, and he generously provided my co-host and me with access.
Shortly after, Gant launched a free introductory Machine Learning course. Naturally, I signed up for that as well.
The main course was designed to be completed in 3 weeks, and the intro course in 5 days.
…It took me about 3 months to finish both.
My extended completion time was due to a busy schedule and my desire to thoroughly understand the material and absorb all the knowledge Gant had packed into the courses.
So, I took my time ⏳, fueled by coffee ☕, and wrote a lot of code 👨💻.
Let’s discuss what I’ve learned 🧙♂️.
Machine Learning: It’s All About Prediction 🔮
The introductory course provided an excellent overview of Machine Learning basics. I learned that ML fundamentally involves reducing datasets to numerical values, analyzing these numbers, and then predicting outcomes for new, unseen data. It also introduced me to different types of Machine Learning and their real-world applications.
The Machine Learning and Data Science we typically encounter are categorized as Artificial Narrow Intelligence (ANI) rather than Artificial General Intelligence (AGN). AGN is the AI of science fiction – robots with human-like intelligence and decision-making capabilities, like SkyNet. ANI, on the other hand, focuses on specific problems or questions. Examples of ANI include identifying cats and dogs in images, predicting sales trends from historical data, or detecting eye blinks in video streams.
But how do algorithms learn to answer these questions?
Using the Boston housing data example, the dataset includes features like location, crime rate, school proximity, and house prices. An ML algorithm analyzes thousands of these data points to estimate house prices based on these features.
Consider a line equation from middle school math: y = x. This formula accurately determines if coordinates lie on the line. Points like (0, 0), (1, 1), and (2, 2) clearly fall on this line because their x and y values are equal.
But how would Machine Learning approach this? Imagine not having a perfect formula. How could ML help?
To solve this with ML, you would feed the model thousands of coordinates, labeled as either “on the line” or “off the line.” After extensive computation and processing, the model could predict, with a certain confidence level (percentage), the likelihood of any given point being on the line.
In essence, Machine Learning is a computer learning through trial and error.
This humorous tweet captures the essence of Machine Learning perfectly:
Machine Learning Job Interview:
Me: I’m an expert in machine learning
Interviewer: What’s 9 + 10?
Me: It’s 3.
Interviewer: Not even close. It’s 19.
Me: It’s 16.
Interviewer: Wrong. Its still 19
Me: It’s 18.
Interviewer: No, it’s 19.
Me: It’s 19.
Interviewer: You’re hired.
Coding in Machine Learning: What’s Involved?
Thankfully, ML frameworks like TensorFlow abstract away the complex mathematical underpinnings (calculus and linear algebra 💀) of model training. We don’t need to build the core algorithms for data processing and model training ourselves.
However, a certain level of mathematical understanding is still needed when working with Machine Learning. You need to process data for ML algorithms and models and understand ML framework settings and configurations.
Data Preparation: The Unsung Hero of Machine Learning
Data scientists spend most of their time preparing data. In our podcast interview with Data Scientist Amelia Bennett, she described herself as a “high-paid data janitor,” calling data science a “21st-century dirty job.”
The secret to computers understanding images, sounds, and language is math. Anything mathematically describable can be converted into numbers and used in ML models. A data scientist’s role is to select and convert this data. In computer vision, images are converted into arrays of pixels (RGB and location data) for algorithm training. Natural language processing mathematically describes soundwaves, using frequency and pitch over time to identify words.
Tools exist to help convert non-numerical data into numbers. TensorFlow offers utilities for image processing. However, you need to know how to use these tools and which ones are appropriate.
Training Configuration: Fine-Tuning Your Model
Machine Learning frameworks simplify the math, but you still need to understand how different algorithms affect training. You won’t be doing math problems by hand, but you’ll encounter mathematical concepts with intimidating names like softmax, sigmoid, and ReLu.
The sheer number of such terms, especially within TensorFlow, can be overwhelming. The TensorFlow API is vast, and mastering it all seems impossible.
Note: AutoML frameworks like TPOT offer automation and require less configuration, but they also provide less control over results. While useful, you’ll likely progress to tools like TensorFlow as you advance in ML.
Embracing Experimentation: The Guesswork in Machine Learning
I found the configuration options overwhelming. I prefer to understand exactly what I’m doing and why. However, this clashed with a data scientist’s typical workflow.
Machine Learning involves significant experimentation. I initially thought models were trained in a single run, but data scientists often train models repeatedly to achieve desired outcomes. Model training involves tweaking numerous settings, and finding the right combination is largely trial and error. I had to accept the need for experimentation and let go of needing complete understanding before diving in.
Data scientists are like fictional mad scientists, but instead of mixing chemicals, they’re combining mathematical functions to find solutions.
JavaScript Machine Learning in Action: Examples
I built a solid foundation in Machine Learning basics, but what could I actually build? Let’s look at practical ML projects for developers.
ML projects fall into two main categories: using pre-trained models or building and training your own models. I’ve included examples of both.
Note: These demos are based on concepts from Gant Laborde’s AI course.
Pre-trained Model Examples: Quick Wins with ML
These projects are fun and require minimal ML knowledge. Utilizing browser APIs and web technology, you can quickly create impressive ML applications.
Image API + MobileNet Demo
In this demo, I used images from the lorem picsum API and React to integrate them with MobileNet, a pre-trained model for image classification.
Lorem Picsum provides random artistic photos from Unsplash, leading to interesting MobileNet classifications.
Webcam + MobileNet Demo
This app connects MobileNet to the webcam browser API, allowing real-time object classification using your phone or camera.
(MobileNet wasn’t trained to recognize humans, explaining some unexpected results.)
Browser-based Model Training Examples: Deeper Dive into ML
These examples are more demanding, especially for low-end devices.
They demonstrate training models directly in the browser using JavaScript and datasets.
FizzBuzz Solver with TensorFlow
This example trains a model on thousands of numbers (100-3100) solved with a fizzbuzz algorithm. It then guesses fizz, buzz, or fizzbuzz for numbers 1-100.
Cat/Dog Image Recognition with TensorFlow
This app uses Gant Laborde’s dogs-n-cats npm package to train a model to recognize dogs and cats.
Try the demo on codesandbox. Training with 2000 images in the browser is resource-intensive.
The dogs-n-cats package simplifies setup by pre-processing and packaging 2000 dog/cat images into tensors, ready for model training.
Beyond Supervised Learning: Exploring Other ML Types
These examples use supervised learning, where algorithms learn from labeled examples. While straightforward, other ML methods exist.
Unsupervised learning involves feeding unlabeled datasets to algorithms for independent discovery and classification. Reinforcement learning trains algorithms to perform tasks through feedback based on outcomes, like a computer learning to play Mario.
I’m eager to explore these advanced ML types, but mastering supervised learning was already a significant achievement!
Data Scientist? Not Yet, But Getting There
Let’s be clear: I’m not a data scientist after this ML exploration.
However, I’ve gained substantial insight into Machine Learning and the work of Data Scientists in driving technological advancements. I now understand the “magic” (math) behind computer vision, natural language processing, and other advanced technologies.
I also recognize the limitations of Machine Learning and the ongoing development in this field. I’m excited about future progress with more data and improved, accessible ML frameworks.
In model training, I consider myself a beginner. Selecting activation functions, filters, and epochs requires intuition and nuance that I’m still developing. I feel capable of basic model training from spreadsheet data, but preparing and labeling images for training remains a significant learning curve.
Final Thoughts: Machine Learning for Front-End Growth
Dipping your toes into Data Science and Machine Learning is rewarding if you’re comfortable with math and experimentation. It’s a challenging and increasingly important area, with significant business investment. Even basic data science understanding is valuable for developers.
I highly recommend Gant’s free intro course for ML/AI concepts. If you want to delve deeper, his paid beginner course on AI/ML in JavaScript is excellent. Gant has made these complex concepts accessible.
I plan to continue expanding my Machine Learning skills. If you have suggestions for my next steps or questions about this article, reach out on Twitter! I’d love to connect.
Written by Lee Warrick, Co-host of the Tech Jr Podcast, Software Engineer, Guitarist, and Gamer. Subscribe to my newsletter! Show your support with SWAG.
