Latest Tutorials

Learn about the latest technologies from fellow newline community members!

  • React
  • Angular
  • Vue
  • Svelte
  • NextJS
  • Redux
  • Apollo
  • Storybook
  • D3
  • Testing Library
  • JavaScript
  • TypeScript
  • Node.js
  • Deno
  • Rust
  • Python
  • GraphQL
  • React
  • Angular
  • Vue
  • Svelte
  • NextJS
  • Redux
  • Apollo
  • Storybook
  • D3
  • Testing Library
  • JavaScript
  • TypeScript
  • Node.js
  • Deno
  • Rust
  • Python
  • GraphQL

Unlocking Cursor: Your Beginner's Guide to the AI-Powered IDE

Welcome to our opening article about Cursor (AI IDE). In this article, we would cover all the basic and core knowledge that you need to know about it. And which you would be using most of the time. We’ll do it in depth, without cutting any corners! And in our next article , we'll get into even more complex topics, like advanced tips, Cursor’s Cmd+K, Composer, and Agent features. But first, we’ll start from building a really solid background. So, let's jump right in to it! Nowadays, tech grows and moves so fast that sometimes it's hard to keep up. To stay on top, we as the developers, always have to be ready embrace new tools, which can increase our productivity 10X while saving us a lot of time. One of such tools is Cursor, an IDE powered by AI that’s transforming how developers write, debug, and optimize their code. Cursor combines artificial intelligence with the standard features of an IDE to help you easily debug your code, provide smart code autocompletion, and offer many other features that can boost your productivity. Cursor is forked/built from VSCode, one of the most popular IDEs among developers. And it retains not only the familiar user-friendly interface, but large ecosystem of VS Code extensions as well. This foundation means that those already familiar with VSCode will find it relatively easy to transition to Cursor.
Thumbnail Image of Tutorial Unlocking Cursor: Your Beginner's Guide to the AI-Powered IDE

Build Your Own JavaScript Micro-Library Using Web Components: Part 3/4

Here is Part 3/4 of our tutorial series on building a JavaScript micro-library for creating your apps with Web Components. As I pointed out in previous lessons, the micro-library eases the path to development with Web Components, automating a lot of the work so developers can build their apps faster. Here's what we covered so far: Now in this tutorial, Part 3, we will automate another piece of functionality for classes that use our decorator. In this case, we'll automatically attach a Shadow DOM to those classes so that the user of the library does not have to manually create a Shadow DOM for their custom elements.
Thumbnail Image of Tutorial Build Your Own JavaScript Micro-Library Using Web Components: Part 3/4

I got a job offer, thanks in a big part to your teaching. They sent a test as part of the interview process, and this was a huge help to implement my own Node server.

This has been a really good investment!

Advance your career with newline Pro.

Only $40 per month for unlimited access to over 60+ books, guides and courses!

Learn More

Build Your Own JavaScript Micro-Library Using Web Components: Part 4/4

In this capstone tutorial, we're going to actually use the micro-library in app code so you can see how the micro-library makes things easier for developers in real world development. In the previous steps of this 4-part tutorial, this is what we accomplished: In this final tutorial, we will now refactor an example component to use the @Component decorator and the attachShadow function from our micro-library.
Thumbnail Image of Tutorial Build Your Own JavaScript Micro-Library Using Web Components: Part 4/4

Build Your Own JavaScript Micro-Library Using Web Components: Part 2/4

As we covered in the previous tutorial , a micro-library helps developers implement common features more quickly than using the web APIs directly. Now in this tutorial, we will code our class decorator that allows our classes to instantly gain new features without writing the code for them every time. The class decorator eliminates boilerplate and allows users of the micro-library to focus on higher-level concepts while delegating common class setups to the micro-library. Implementing a class decorator is going to significantly improve the developer experience, allowing developers to code Web Components faster. We'll enhance the class-based implementation which custom elements rely on by cleaning up each constructor .
Thumbnail Image of Tutorial Build Your Own JavaScript Micro-Library Using Web Components: Part 2/4

DeepSeek-R1 from A-to-Z

Welcome to the LLM model that's been absolutely everywhere on the Internet and news headlines in recent days – DeepSeek-R1! In this article, we take a comprehensive look at this new, industry-disrupting LLM. We'll investigate if it’s truly deserving of all the noise around it, or if there's something (i.e. censorship and GPT-4 references) more sinister going on beneath the buzz. So, brew some tea and settle in, because this is going to be an interesting ride. We're going to cover:
Thumbnail Image of Tutorial DeepSeek-R1 from A-to-Z