Why learn LangChain (as a JavaScript developer)?

My main scope for this article is to detail why learning LangChain is a worthwhile investment, both for seasoned and beginner JavaScript developers. As a disclaimer, just wanted to let you know that yesterday was the official launch date of the 📘 LangChain ... more

How the “LangChain for JavaScript Developers” book came to be

The first time I wrote a computer program was 26 years ago, in Turbo Pascal. To someone who did not know how to code it felt like casting spells. But I understood how spells were made. If - then - else statements, functions, variables. This was how you ... more

[Js-Craft #53] LangChain for JavaScript developers, podcast interview, Italy trip, StructuredOutputParser

Ciao amici 🇮🇹👋 ! It's Daniel here. I run the js-craft.io website. This edition of the Js-Craft newsletter will be a short one as I am in Rimini, Italy on a short family vacation. First trip with our 7mo baby daughter 🤞. In this edition of the newsletter: ... more

[Js-Craft #52] Integrate AI models in Javascript apps, interview question, and Prompt Templates

Hey firends! It's Daniel here, the guy who manages the js-craft.io website. I hope your week was great! Mine was fairly busy with meetings, book writing and more. But it was a fun kind of busy. Let’s learn! In this edition of the newsletter: 📕 Langchain.js ... more

StructuredOutputParser with Zod schema in LangChain (Javascript version)

The StructuredOutputParser from Langchain.js is maybe the most versatile output parser we ca use. It can be used to return multiple fields or, if you want complex structures, such as a JSON object with arrays of strings, we can mix it with the Zod Schema. ... more

The createStuffDocumentsChain in LangChain (Javascript version)

The createStuffDocumentsChain is one of the chains we can use in the Retrieval Augmented Generation (RAG) process. RAG is the process of optimizing the output of a Large Language Model, by providing an external knowledge base outside of its training ... more

LangChain is the jQuery of integrating LLMs into Javascript apps

What is LangChain? In a simple answer, LangChain is a framework that was designed to simplify the making of applications that integrate Large Language Models - LLMs. LangChain provides all the AI integration building blocks together in one framework. ... more

LangChain Js – an intro to prompt templates, partial templates and composition

LangChain is designed to simplify the creation of applications using LLMs. Its scope is to simplify any task you wish to accomplish using LLMs. Given that LLMs have text as their main inputs and outputs it's natural that LangChain has a core module dedicated ... more

[Js-Craft #51] Integrate AI into Javascript web apps with Lanchain.js book sample chapter

Good morning, friend! It's Daniel here, the guy who manages the js-craft.io website. I hope you had a good week! I admit mine was a bit stressful, but we made it through. Let's learn! In this edition of the newsletter: 📕 Product updates: Getting Started ... more

[Js-Craft #50] What is Lanchain.js and how can it help us integrate AI models into web apps

Hi there, friend! It's an anniversary edition of the Js-Craft newsletter. The 50'th edition 🎂🎉! Just checked the newsletter archive and saw that the first newsletter was sent on May 02, 2018. Almost 6 years ago 🙂 In this edition of the newsletter: ... more

Listening notes #4: The Rise of the AI Engineer with Shawn Wang

Artificial intelligence engineers are developers who make the tools, systems, and processes that enable artificial intelligence to be applied in the real world. An AI engineer facilitates the integration between an LLM and a traditional software app. ... more

7 things Langchain can do for Javascript developers

Langchain is a framework meant to facilitate the interaction between an AI model and a traditional web application. Langchain is to the LLM - webapp communication kind of what jQuery is to Javascript, or Django to Python. It gives you a standardized ... more

Autoscroll to bottom in React

Hey folks! Let's see how we can make React automatically scroll to the bottom of a div or any other container. For example, let's say we are building something like a logging screen or a chat system where new items are added every few seconds. In a scenario ... more

Is setState() in React async? A practical example

The setState() hook in React is asynchronous. This can lead us to some undesired results as we will see in the folowing example. The problem A friend asked me to help him with the following code: // ✋🛑 there is a bug here const App = () => { const ... more

The pitfalls of using Index as Keys in React

The bugs generated by using the index of the map function as keys in React can be quite hard to identify and frustrating. Let's see how we can avoid them! The key property uniquely identifies an element from a list. React uses it to check if the element ... more

[Js-Craft #47] The Guide to React book, CSS Grid, using console.trace(), image color inverting in Javascript and more

Hey, there friend! It's Daniel here, the guy who runs the js-craft.io website. I hope your past 2 weeks were great! Mine were full, and also fun, as I've been grinding out to finish the React book. Let's gooo! In this edition of the newsletter: 📘 The ... more

Inside the Developer’s Toolbox: Console Trace for JavaScript Debugging

I find myself sometimes using the console.trace() to check from where a method was called. That is when I am too lazy to set breakpoints in the Javascript debugger. By using console.trace() , we have the get to display the stack trace of every function ... more

Craft a Responsive CSS Grid with just 3 properties

What if I told you that you only need to know only 3 CSS properties to make a fully responsive CSS grid like the one below: You can also watch a video for this article below: Let's start with the HTML layout. Just a container and the divs corresponding ... more

JavaScript – invert the colors of a picture on a canvas

Let's see how to build a small Javascript app where we will load an image, invert the colors in the image, and download the resulting image. The final app is shown in the below video: Uploading the image The first step will be to upload the image from ... more

React – example of useRef() with array

While working on the React pincode field component, I came to a point where I needed to store the references to an array of objects. While this is an easy task for documentSelectorAll, it turns out that is not a good idea to use documentSelectorAll() ... more

Make small projects and throw them away

When starting to learn new technologies such as React, or NextJs what type of projects should I build? A basic Hello World or a full-scale Instagram clone? This is a recurring question I get. Overall I believe that you can get more learning value out ... more

[Js-Craft #46] The React book, 2023 yearly review, CSS Flexbox Bar Chart, React copy text to clipboard and more

Good morning friends and happy 2024! I hope y'all have a great start to your new year. I've recapped my 2023 here! Thank you so much for reading and being around this year and now. I've loved reading your replies, and being able to chat with y'all! In ... more

React copy text to clipboard

In order to implement a copy text to clipboard functionality in React the easiest solution is to use the navigator.clipboard API. Let's say we want to build a simple React component that automatically copies a given text to the clipboard: The above example ... more

CSS Flexbox Bar Chart

For simple one-off visualizations, CSS Flexbox or CSS Grid can be great tools for rendering simple charts. I thought it might be worth sharing how easy it is to make a small demo of implementing a basic bar chart using only CSS Flexbox. By the end of ... more

The 2023 yearly review of Js-Craft.io

At the end of each year, I try to do a personal annual review. At least a list of meaningful moments I should remember from that year. I thought this year to do the same for this blog, given that it has become an important part of my life. Therefore ... more

Making a React pincode field component

Recently I needed to add something similar to a pincode in a React application. Something like when you enter your pin at the ATM, only that this one could accept also letters, not just numbers. And of course, I ended up reinventing the wheel, instead ... more

React useState() – primitives vs objects in component rendering

When working with the useState() hook in React it's important to keep in mind how Javascript manages primitive and object values. For example, let's first create a component that puts a constant primitive number in the state: const WithPrimitive = ()=> ... more

JavaScript digit pincode field with paste support

The fun project of the day is building a pincode that accepts pasting across multiple input fields. And we want to do all of this using just pure vanilla Javascript, no extra libraries. So, the requirements are as follows: when manually typing it will ... more

React add wrapper component based on condition

In order to have a given React component wrapped another component based on some condition we can use a pattern like the one below: const WrapperConditional = ({ condition, wrapper, children }) => return condition ? wrapper(children) : children; } ... more

[Js-Craft #41] Infinite scrolling in NextJs 13, Javascript date formatting, and working from a Greek island

Hey friends! I hope the last couple of weeks were great for you! I had a great time working remotely from the Greek island of Skopelos. I realized that permanent contact with nature and light makes me a much better version of myself. The environment ... more