Javascript

Introduction to Babylon.js

Mar 6, 2024

7 min read

Babylon.js is a powerful, open-source 3D engine capable of rendering interactive 3D and 2D graphics using JavaScript. It is a great choice for creating games, demos, visualizations, and other 3D applications for the web or even for VR.

Being free, open-source, and cross-platform, Babylon.js is a great alternative to proprietary 3D engines like Unity and Unreal Engine. It is also a great alternative to other open-source 3D engines like Three.js and PlayCanvas as it provides TypeScript types out of the box, is optimized for performance, and provides advanced debugging tools. Its developer experience is excellent, and it has a large and active community making it a great choice for creating 3D applications for the web for both beginners and experts alike.

Getting Started

Babylon.js supports both ES6 and CommonJS module imports:

CommonJS Babylon.js npm packages support CommonJS/ES6 imports, UMD, and AMD-imports.
For developers seeking optimization through tree shaking, Babylon.js offers ES6 packages. These include @babylonjs/core for the core functionalities, and additional modules like @babylonjs/materials, @babylonjs/loaders, @babylonjs/gui, etc. It's important not to mix ES6 and legacy packages.

If you want to use the CommonJS module imports, you can install Babylon.js as follows:

npm install --save babylonjs

Then, include it in your JavaScript or TypeScript file:

import * as BABYLON from "babylonjs";

If you want to use the ES6 module imports, you can install Babylon.js as follows:

npm install --save @babylonjs/core

Then, include it in your JavaScript or TypeScript file:

import { Engine, Scene } from "@babylonjs/core";

I prefer the ES6 module imports because they allow for tree shaking, which can significantly reduce the size of the final bundle. However, in this tutorial, I will be using the CommonJS module imports because that's what the Babylon.js playground uses.

Creating Your First Babylon.js Scene

The Babylon.js Playground is an essential tool for learning and developing with Babylon.js. It's a user-friendly environment where you can write code and immediately see the results in a live scene. The playground comes with a default scene, and experimenting with it is a great way to start.

Apart from playing around with the default scene, you can also search the playground if you want to see examples of specific features. For example, if you search for "physics," you will find several examples of physics in action.

The playground is also often used to share code snippets on the Babylon.js forum both when asking for help and when helping others. I often found myself googling specific Babylon.js problems or features and finding a playground example that helped me understand and solve my problem.

Creating and Modifying Meshes

Meshes are fundamental in 3D graphics. In Babylon.js, creating a basic mesh, like a sphere, involves a few lines of code:

var sphere = BABYLON.MeshBuilder.CreateSphere(
  "sphere",
  { diameter: 2, segments: 32 },
  scene
);
sphere.position.y = 1;

You can also create materials and assign them to meshes to change their appearance. For example, to make a ground plane red, you would write:

const groundMaterial = new BABYLON.StandardMaterial("Ground Material", scene);
groundMaterial.diffuseColor = BABYLON.Color3.Red();
ground.material = groundMaterial;

Textures can also be added to materials:

var groundTexture = new BABYLON.Texture(
  Assets.textures.checkerboard_basecolor_png.rootUrl,
  scene
);
groundMaterial.diffuseTexture = groundTexture;

Importing and Using Meshes

Babylon.js allows for the importation of complex meshes, which can be scaled and positioned within the scene:

BABYLON.SceneLoader.ImportMesh(
  "",
  Assets.meshes.MyCustomMesh.rootUrl,
  Assets.meshes.MyCustomMesh.filename,
  scene,
  function (newMeshes) {
    newMeshes[0].scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);
  }
);

Making the Scene Interactive

Interactivity is a key aspect of web experiences. Attaching controls to a camera enables user interaction through click-and-drag operations.

var camera = new BABYLON.ArcRotateCamera(
  "Camera",
  0,
  0,
  10,
  BABYLON.Vector3.Zero(),
  scene
);
camera.attachControl(canvas, true);

Adding Virtual Reality Support

Virtual reality is an exciting new technology that allows users to experience 3D environments more immersively. Babylon.js has built-in support for virtual reality, which can be enabled with a few lines of code:

const experience = await scene.createDefaultXRExperienceAsync();
const camera = experience.baseExperience.camera;
camera.attachControl(true);

You just create an XR experience, get the camera from the base experience, and attach it to the canvas and you should be all set for VR. If you don't own a VR headset, you can still test your scene in VR using the Immersive Web Emulator Chrome Extension.

Adding Physics

Physics is an important part of many 3D applications. Babylon.js has a built-in physics engine that can be enabled with a few lines of code:

var gravityVector = new BABYLON.Vector3(0, -9.81, 0);
var physicsPlugin = new BABYLON.CannonJSPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);

Physics can be applied to meshes by setting their physicsImpostor property:

sphere.physicsImpostor = new BABYLON.PhysicsImpostor(
  sphere,
  BABYLON.PhysicsImpostor.SphereImpostor,
  { mass: 1, restitution: 0.9 },
  scene
);

Adding Lights

Lights are essential for creating realistic scenes. In Babylon.js, there are four main types of lights, each offering unique properties and effects:

Directional Light: Mimics sunlight, emitting parallel light rays across the entire scene. It's defined by a direction vector and has an infinite range.
Point Light: Resembles a light bulb, radiating light equally in all directions from a single point in space.
Spot Light: Functions like a flashlight, emitting a conical beam of light from a specific position in a given direction. Its illumination area and decay are controlled by angle and exponent parameters.
Hemispheric Light: Simulates ambient environment lighting, defined by a direction, usually upwards. Its effect is influenced by setting different color properties.

Each light type can be customized using properties like intensity and range, and you can control which meshes they illuminate. For more complex lighting scenarios, lightmaps can be utilized to pre-calculate and store lighting effects.

For example, to add a directional light to the scene, you could write:

var light = new BABYLON.DirectionalLight(
  "DirectionalLight",
  new BABYLON.Vector3(0, -1, 0),
  scene
);

Adding Shadows

Shadows are an important part of creating realistic scenes as they can help convey the 3D structure of the scene by providing cues about the relative positions and distances of objects, enhancing the perception of depth and dimension. Babylon.js has several types of shadows, including PCF, PCFSoft, and PCSS. For example, to add PCF shadows to the scene, you would write:

var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
shadowGenerator.usePoissonSampling = true;
shadowGenerator.bias = 0.0001;
shadowGenerator.normalBias = 0.01;
shadowGenerator.setDarkness(0.5);
shadowGenerator.useBlurExponentialShadowMap = true;
shadowGenerator.blurKernel = 32;
shadowGenerator.blurScale = 2;
shadowGenerator.blurBoxOffset = 1;
shadowGenerator.useKernelBlur = true;

shadowGenerator.addShadowCaster(sphere);

Adding Audio

Audio is an important part of many 3D applications. Babylon.js has a built-in audio engine that can be enabled with a few lines of code:

var audioEngine = new BABYLON.AudioEngine();

Audio can be added to the scene by creating a sound object:

var sound = new BABYLON.Sound(
  "Sound",
  `${Assets.sound.cannonBlast.rootUrl}${Assets.sound.cannonBlast.filename}`,
  scene,
  null,
  { loop: true, autoplay: true }
);

This particular example would play a "cannon blast" sound on a loop in your scene. The cannon blast asset is preloaded in the Babylon.js playground. If you were to load a custom asset in your application, you would simply provide a URL pointing to the sound file on the filesystem. For more details, you can check the documentation on playing sounds in Babylon.js.

Adding User Interface Elements

User interface elements can be used to add interactivity to a scene. Babylon.js provides a GUI library extension built on top of the DynamicTexture. For example, to add a dialog to the scene containing a button, you would write:

var guiManager = new BABYLON.GUI.GUI3DManager(scene);

const slate = new BABYLON.GUI.HolographicSlate("down");
slate.minDimensions = new BABYLON.Vector2(5, 5);
slate.dimensions = new BABYLON.Vector2(5, 5);
slate.titleBarHeight = 0.75;
slate.title = "Button!";
guiManager.addControl(slate);

var button = BABYLON.GUI.Button.CreateSimpleButton("button", "Click me!");
button.width = 0.5;
button.height = 0.25;
button.background = "green";
button.textBlock.color = "white";
button.onPointerClickObservable.add(() => {
  alert("Hi!");
});

slate.content = button;
slate.position = new BABYLON.Vector3(-2, 2, 0);

To use the ES6 version, you'll need to install the @babylonjs/gui package:

npm install --save @babylonjs/gui

Then, import it into your JavaScript or TypeScript file like this:

import { GUI3DManager, HolographicSlate, Button } from "@babylonjs/gui";

Tip: In case you don't like the controls that allow users to tilt the HolographicSlate, you can disable them by setting slate._gizmo._rootMesh.setEnabled(false); after adding the slate to your scene.

Adding Animations

Animations can be used to add movement to a scene. Babylon.js has several types of animations, including keyframe, bone, and morph target. For example, to add a keyframe animation to the scene, you would write:

var animationBox = new BABYLON.Animation(
  "myAnimation",
  "scaling.x",
  30,
  BABYLON.Animation.ANIMATIONTYPE_FLOAT,
  BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);
var keys = [];
keys.push({
  frame: 0,
  value: 1,
});
keys.push({
  frame: 20,
  value: 0.2,
});
keys.push({
  frame: 100,
  value: 1,
});
animationBox.setKeys(keys);
sphere.animations.push(animationBox);
scene.beginAnimation(sphere, 0, 100, true);

Here's an explanation of what the code does:

Animation Creation: A BABYLON.Animation object named "myAnimation" is created to animate the scaling.x property, indicating the animation will affect the object's width. It runs at 30 frames per second, with values represented as floats, and loops continuously.
Defining Keyframes: Three keyframes are defined:
- At frame 0, the scale is 1 (original size).
- At frame 20, the scale reduces to 0.2.
- At frame 100, the scale returns to 1.
Applying and Starting Animation: The animation is assigned to the sphere object and starts immediately, looping between frames 0 and 100. This creates a pulsating effect on the sphere's width.

For a deeper dive into animations, you can check out the Babylon.js Animation Documentation.

Debugging

Debugging is an important part of any development process. Babylon.js has a built-in debug layer that can be enabled with a few lines of code:

scene.debugLayer.show();

The debug layer provides a user-friendly interface for inspecting and modifying the scene. It can also show you the current frame rate and other performance metrics and lets you export the performance data.

In case you are using the ES6 module imports, you'll need to install the @babylonjs/inspector package:

npm install --save @babylonjs/inspector

Then, import it into your JavaScript or TypeScript file like this:

import "@babylonjs/inspector";

Once you're satisfied with your creation, you can download it as an HTML file and host it on platforms like GitHub Pages, making it accessible to the world.

You can also share your scene with others by sharing the playground URL. For example, the URL for the default scene is https://playground.babylonjs.com/#6QY4X1#1.

In case you would like to integrate your scene with a framework of your choice, you can check out the Babylon.js External Libraries Documentation where you can find examples of Babylon.js being used with frameworks like React, Vue, or Ionic Angular.

Conclusion

Babylon.js is a powerful, open-source 3D engine capable of rendering interactive 3D and 2D graphics using JavaScript. It is well supported and maintained, providing a good developer experience with many interactive playground examples and a supportive community forum, making it a great choice for creating games, demos, visualizations, and other 3D applications for the web (and eventually even for native platforms as I've heard out of the box React Native support may be coming).

This blog post hopefully gave you an overview of some of its capabilities and how to get started with it along with pointers to more in-depth documentation.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Jan Kaiser

Software engineer passionate about everything web-related. Particularly loves Angular, SCSS, TypeScript, soccer and dachshunds

@honzikec @honzikec

Understanding Vue.js's <Suspense> and Async Components

In this blog post, we will delve into how and async components work, their benefits, and practical implementation strategies to make your Vue.js applications more efficient and user-friendly. Without further ado, let’s get started! Suspense Let's kick off by explaining what Suspense components are. They are a new component that helps manage how your application handles components that need to await for some async resource to resolve, like fetching data from a server, waiting for images to load, or any other task that might take some time to complete before they can be properly rendered. Imagine you're building a web page that needs to load data from a server, and you have 2 components that fetch the data you need as they will show different things. Typically, you might see a loading spinner or a skeleton while the data is being fetched. Suspense components make it easier to handle these scenarios. Instead of manually managing loading states and error messages for each component that needs to fetch data, Suspense components let you wrap all these components together. Inside this wrapper, you can define: 1. What to show while the data is loading (like a loading spinner). 2. The actual content that should be displayed once the data is successfully fetched. This way, Vue Suspense simplifies the process of handling asynchronous operations (like data fetching) and improves the user (and the developer) experience by providing a more seamless and integrated way to show loading states and handle errors. There are two types of async dependencies that can wait on: - Components with an async setup() hook. This includes components using with top-level await expressions. *Note: These can only be used within a component.* - Async Components. Async components Vue's asynchronous components are like a smart loading system for your web app. Imagine your app as a big puzzle. Normally, you'd put together all the pieces at once, which can take time. But what if some pieces aren't needed right away? Asynchronous components help with this. Here's how they work: - Load Only What's Needed: Just like only picking up puzzle pieces you need right now, asynchronous components let your app load only the parts that are immediately necessary. Other parts can be loaded later, as needed. - Faster Start: Your app starts up faster because it doesn't have to load everything at once. It's like quickly starting with the border of a puzzle and filling in the rest later. - Save Resources: It uses your web resources (like internet data) more wisely, only grabbing what’s essential when it's essential. In short, asynchronous components make your app quicker to start and more efficient, improving the overall experience for your users. Example: ` Combining Async Components and Suspense Let's explore how combining asynchronous components with Vue's Suspense feature can enhance your application. When asynchronous components are used with Vue's Suspense, they form a powerful combination. The key point is that async components are "suspensable" by default. This means they can be easily integrated with Suspense to improve how your app handles loading and rendering components. When used together, you can do the following things: - Centralized Loading and Error Handling: With Suspense, you don't have to handle loading and error states individually for each async component. Instead, you can define a single loading indicator or error message within the Suspense component. This unified approach simplifies your code and ensures consistency across different parts of your app. - Flexible and Clean Code Structure: By combining async components with Suspense, your code becomes more organized and easier to maintain. An asynchronous component has the flexibility to operate independently of Suspense's oversight. By setting suspensible: false in its options, the component takes charge of its own loading behavior. This means that instead of relying on Suspense to manage when it appears, the component itself dictates its loading state and presentation. This option is particularly useful for components that have specific loading logic or visuals they need to maintain, separate from the broader Suspense-driven loading strategy in the application. In practice, this combo allows you to create a user interface that feels responsive and cohesive. Users see a well-timed loading indicator while the necessary components are being fetched, and if something goes wrong, a single, well-crafted error message is displayed. It's like ensuring that the entire puzzle is either revealed in its completed form or not at all rather than showing disjointed parts at different times. How it works When a component inside the boundary is waiting for something asynchronous, shows fallback content. This fallback content can be anything you choose, such as a loading spinner or a message indicating that data is being loaded. Example Usage Let’s use a simple example: In the visual example provided, imagine we have two Vue components: one showcasing a selected Pokémon, Eevee, and a carousel showcasing a variety of other Pokémon. Both components are designed to fetch data asynchronously. Without , while the data is being fetched, we would typically see two separate loading indicators: one for the Eevee Pokemon that is selected and another for the carousel. This can make the page look disjointed and be a less-than-ideal user experience. We could display a single, cohesive loading indicator by wrapping both components inside a boundary. This unified loading state would persist until all the data for both components—the single Pokémon display and the carousel—has been fetched and is ready to be rendered. Here's how you might structure the code for such a scenario: ` Here, is the component that's performing asynchronous operations. While loading, the text 'Loading...' is displayed to the user. Great! But what about when things don't go as planned and an error occurs? Currently, Vue's doesn't directly handle errors within its boundary. However, there's a neat workaround. You can use the onErrorCaptured() hook in the parent component of to catch and manage errors. Here's how it works: ` If we run this code, and let’s say that we had an error selecting our Pokemon, this is how it is going to display to the user: The error message is specifically tied to the component where the issue occurred, ensuring that it's the only part of your application that shows an error notification. Meanwhile, the rest of your components will continue to operate and display as intended, maintaining the overall user experience without widespread disruption. This targeted error handling keeps the application's functionality intact while indicating where the problem lies. Conclusion stands out as a formidable feature in Vue.js, transforming the management of asynchronous operations into a more streamlined and user-centric process. It not only elevates the user experience by ensuring smoother interactions during data loading phases but also enhances code maintainability and application performance. I hope you found this blog post enlightening and that it adds value to your Vue.js projects. As always, happy coding and continue to explore the vast possibilities Vue.js offers to make your applications more efficient and engaging!...

Apr 24, 2024

6 mins

VueWeb PerformanceUXJavaScript

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024

Join us backstage at CityJS Conf for this conversation with Jason Lengsdorf. In this discussion, we explore strategies for reducing stress and anxiety among engineers, ensuring they maintain relevance in the dynamic world of coding. Jason emphasizes the importance of self-assurance and the role of play in fostering continual engagement with evolving technologies. Moreover, we get a sneak peek into Jason's latest venture, "Web Lunch," a platform where he converses with developers who have found harmony between their careers and personal satisfaction. Coding isn't just a job; it's a passion and a lifestyle. Jason highlights the significance of pursuing work that excites and challenges us, echoing the sentiment that coding can be both a career and a hobby. By infusing enjoyment and creativity into our coding endeavors, we can shape our professional trajectories in alignment with our values and interests. This approach not only minimizes regret but also maximizes happiness and fulfillment in our careers. Central to our discussion is the pivotal role of effective leadership in creating a supportive and encouraging work environment. Leaders who prioritize the well-being and happiness of their team members foster a culture of collaboration and empowerment. Through mentorship, guidance, and opportunities for growth, these leaders enable developers to align their personal goals with organizational objectives, leading to increased job satisfaction and professional fulfillment. Adaptability is key to sustained success in software engineering. Jason emphasizes the value of remaining open-minded and continuously learning, even when it means stepping out of our comfort zones. Embracing discomfort is an integral part of personal growth, allowing us to overcome obstacles and unlock our full potential. By nurturing a spirit of curiosity and adaptability, developers can navigate the complexities of their careers with resilience and enthusiasm....

Apr 25, 2024

2 mins

JavaScriptMentorship

New Core Web Vitals and How They Work

Core Web Vitals, introduced by Google in 2020, have been around for a while now. And after four years, a significant change is coming in March 2024. In this article, I will try to tell you everything you need to know to be prepared. But first, let's briefly talk about what Core Web Vitals are. What are Core Web Vitals? Web Vitals is a Google initiative that aims to provide developers with guidance on authoring the best user experience on the web as well as tools to assess and measure it. Core Web Vitals are a subset of Web Vitals and currently consist of three main metrics: - Largest Contentful Paint (LCP): This metric measures the time it takes for the largest content element to be rendered on the screen. It should reflect the _loading_ aspect of the user experience. - First Input Delay (FID): This metric measures the time it takes for the browser to respond to the first user interaction. It should reflect the _interactivity_ aspect of the user experience. - Cumulative Layout Shift (CLS): This metric measures the amount of unexpected layout shifts of visual elements on the page. It should reflect the _visual stability_ aspect of the user experience. Part of the Core Web Vitals are also the thresholds that define what is considered a good experience. These thresholds are currently set to: | Metric | Good | Needs Improvement | Bad | | ------ | -------- | ----------------- | -------- | | LCP | ≤ 2.5 s | 2.5 - 4 s | > 4 s | | FID | ≤ 100 ms | 100 - 300 ms | > 300 ms | | CLS | ≤ 0.1 | 0.1 - 0.25 | > 0.25 | While the reward of providing a good user experience should be enough for you to strive for great results in these metrics, that is not the only reason you should care about them. Google is reflecting these metrics in its search ranking algorithm as it wants it to "reward content that offers good user experience". What's Changing in March 2024? The change affects how _interactivity_ is measured. The First Input Delay (FID) has been deemed no longer sufficient to measure the interactivity aspect of the user experience. It will be replaced by the Interaction to Next Paint (INP) metric on March 12, 2024. INP, unlike FID, measures the response of all interactions up to a URL change. It then picks the slowest response from all interactions. (If there are more than 50 interactions, it picks a percentile instead, most often the 98th) making it much stricter than FID. Why the Change? There are three main reasons why FID is being replaced by INP: 1. FID is not strict enough: Upwards of 90% of websites meet the good threshold for FID nowadays, making it a poor differentiator between good and bad user experiences. 2. FID is not representative of the full interaction: FID only measures the first part of the reaction delay, up to the point before the response bubbles to JavaScript, not accounting for the (often quite long) time it takes for the JavaScript to process the response and for the browser to paint the next frame. 3. FID only measures the first interaction: According to Google, 90% of interactions happen _after_ the first load, making FID not representative of the full user experience. INP aims to address these issues by measuring the full interaction and by being stricter in its thresholds (according to Google, ~70% of websites should pass the good INP threshold now) and thus capturing a more representative picture of the user experience. How Does INP Work? As I previously mentioned, INP measures all interactions on the page and picks the slowest one or a percentile, which solves one of the issues with FID not representing the whole experience of interacting with a website. This way of measuring is not dissimilar to how CLS measures the unexpected layout shifts on the page as it also captures the full scope of the stay on the page. The interactions considered by INP are: - Mouse clicks - Touchscreen taps - Keyboard presses (including virtual onscreen keyboards) If an interaction is composed of multiple events, such as a keystroke, consisting of the keydown, keypress, and keyup events; INP groups them and measures the latency as the maximum duration of all the included events. Unlike FID, it captures not only the time taken by tasks blocked by the main thread (the _input delay_) but also the _processing time_ (events and JavaScript processing) and the _presentation delay_ (the time it takes for the browser to paint the next frame), making it a much better reflection of the full user experience, but also much harder to pass. So while FID reflects the first impression, INP should capture the overall _responsiveness_ of a page. For more information about interactions with comprehensive diagrams of what actually happens in the browser, check out the web.dev article on INP. Google defined the thresholds for INP as follows: | Metric | Good | Needs Improvement | Bad | | ------ | -------- | ----------------- | -------- | | INP | ≤ 200 ms | 200 - 500 ms | > 500 ms | How to Prepare for INP? Let's start with some general steps you should take to prepare for the new Web Vital: 1. Measure Start with measuring your INP score. The easiest way to measure it is using PageSpeed Insights, but if you need to measure it locally, you can use Lighthose user flows which already support INP. If your INP scores are _good_, you're fine and you can probably stop reading further. 2. Do not panic While, according to Tim Kadlec, only 17% of React websites and 11.8% of Next.js websites in the "top 100k" pass the _good_ INP threshold, so it's very likely that you will have to do some work to pass; framework authors have been working on improving their performance and things may be as hot as Tim paints them. According to Google’s stats, ~80-90% of desktop sites pass the _good_ INP threshold depending on the framework as of June 2023: | Technology | Passing on Mobile [%] | Passing on Desktop [%] | | ----------------- | --------------------- | ---------------------- | | Angular (v2.0.0+) | 28.6 | 83.6 | | Next.js | 28.5 | 87.3 | | Nuxt.js | 32.0 | 91.2 | | Preact | 48.6 | 92.8 | | Vue (v2.0.0+) | 50.3 | 94.1 | | Lit | 50.0 | 88.3 | 3. Optimize In case your INP scores are not _good_, you should start optimizing your website. Identify the pages that perform the worst and start with them. Focus on: - Code splitting and tree shaking to make sure only the necessary JavaScript is included. - Deferring non-critical JavaScript events until the main thread is idle. Consider also offloading heavy tasks to a Web Worker. - Debouncing or throttling frequently fired events. - Breaking up long JavaScript tasks into smaller ones. - Using passive event listeners. - Reducing the presentational delay e.g. by using the will-change CSS property, and preferring transform and opacity over the display and position properties in animations. - Eliminating third-party scripts. Very often, third-party scripts, be it for analytics, cookie consent, or other purposes, have a significant impact on performance. Considering which of them are not absolutely necessary, and either removing them or replacing them with a more performant solution is highly recommended. - Upgrading your dependencies to make sure you are taking advantage of the latest performance-improving features. If you want to read more about the general INP optimization tips, you can check out this Vercel article. While a lot of these optimizations, such as code splitting and tree shaking, are already taken care of by modern frameworks, I believe that it’s worth going through this list to see what you can do to make your website faster and thus a better experience for your users. We will explore concrete performance tips for popular frameworks in the next article. Conclusion The change in Core Web Vitals is coming and it's going to be a significant one. The new metric, Interaction to Next Paint, is going to be much stricter than the current First Input Delay and it's going to be much harder to pass. However, the good news is that framework authors have already been working on making the frameworks more INP-friendly, and while it may take some effort, you should be able to improve your INP score. INP, however, should not be just another Lighthouse threshold we have to satisfy. This change should encourage us to look beyond surface-level metrics and dive deeper into the nuances of user interaction. As we adapt to these changes, our focus should remain on the end goal: creating a good and inclusive user experience for our visitors....

Feb 14, 2024

6 mins

JavaScriptWeb PerformanceUXSEO

6 Steps to AI Adoption: Benefits of LLMs & SLMs with Jerome Hardaway and Rob Ocel

Rob Ocel and Jerome Hardaway continue their series on AI adoption by exploring the world of AI, focusing on small language models (SLMs) and large language models (LLMs). They compare the unique capabilities of SLMs against the vast knowledge encompassed by LLMs, and highlight the transformative potential of AI in driving creativity, problem-solving, and user-centric design in technology. SLMs are designed to excel at specific tasks, offering faster processing and cost-effectiveness due to their open-source nature. These models have proven to be invaluable in sectors like finance, where data security is of utmost importance. By leveraging SLMs, organizations can enhance their security measures and protect sensitive information. Moreover, SLMs provide a stepping stone for engineers to adapt to new technologies and incorporate AI into their work, ultimately improving user experiences. On the other hand, LLMs encompass a wide range of knowledge, making them incredibly versatile. These models have the potential to transform industries by providing insights, predictions, and solutions to complex problems. With advancements in AI chip technology by tech giants like Apple, Nvidia, Google, and Meta, LLMs are becoming even more powerful and efficient. Evaluating AI models based on factors like stability and industry support is crucial to harnessing the full potential of LLMs. The conversation also addresses some ethical questions related to AI implementation. While AI brings numerous benefits, concerns about job displacement cannot be ignored. As AI continues to evolve, it is essential to strike a balance between automation and human involvement. Engineers must focus on improving AI sophistication and seamless integration into user interactions, ensuring that AI enhances human capabilities rather than replacing them. Additionally, ethical guidelines and regulations must be established to address potential biases and ensure responsible AI implementation. Download this episode here....

Apr 23, 2024

2 mins

Engineering Leadership

Introduction to Babylon.js

Getting Started

Creating Your First Babylon.js Scene

Creating and Modifying Meshes

Importing and Using Meshes

Making the Scene Interactive

Adding Virtual Reality Support

Adding Physics

Adding Lights

Adding Shadows

Adding Audio

Adding User Interface Elements

Adding Animations

Debugging

Conclusion

Jan Kaiser

You might also like

Understanding Vue.js's <Suspense> and Async Components

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024

New Core Web Vitals and How They Work

6 Steps to AI Adoption: Benefits of LLMs & SLMs with Jerome Hardaway and Rob Ocel

You might also like

Understanding Vue.js's <Suspense> and Async Components

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024

New Core Web Vitals and How They Work

6 Steps to AI Adoption: Benefits of LLMs & SLMs with Jerome Hardaway and Rob Ocel

Getting Started

Creating Your First Babylon.js Scene

Creating and Modifying Meshes

Importing and Using Meshes

Making the Scene Interactive

Adding Virtual Reality Support

Adding Physics

Adding Lights

Adding Shadows

Adding Audio

Adding User Interface Elements

Adding Animations

Debugging

Hosting and Sharing Your Scene

Conclusion

Jan Kaiser

Understanding Vue.js's <Suspense> and Async Components

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024

New Core Web Vitals and How They Work

6 Steps to AI Adoption: Benefits of LLMs & SLMs with Jerome Hardaway and Rob Ocel

Understanding Vue.js's <Suspense> and Async Components

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024

New Core Web Vitals and How They Work

6 Steps to AI Adoption: Benefits of LLMs & SLMs with Jerome Hardaway and Rob Ocel