teleren/devto huggingface dataset:
CoLlama 🦙 - code autocompletion (local machine and free)
Tags: tutorial, ai, learning, programming
Published: 2024-02-24 19:50:42

In the recent post, I write about using codellama as our local version of code assistant.

{% embed https://dev.to/pavelee/colamma-ollama-as-your-ai-coding-assistant-local-machine-and-free-5694 %}

There was a sentence:

> The extension do not support code completion, if you know extension that support code completion, please let me know in the comments. 🙏

You know what? I found a way to use llama to support code autocompletion! 🥳

As you guess 🤓 you need ollama installed locally, if you don't have, take a look to the previous post 🙏

So what we need:

- ollama model **codellama:7b-code**
- extension CodyAI -> https://marketplace.visualstudio.com/items?itemName=sourcegraph.cody-ai

Let's configure it together, step by step! 🧑‍💻

#### Download codellama:7b-code

Extension require this model, you cannot choose any other 🫣, but it is pretty good optimised to the job ⚙️  

```bash
ollama pull codellama:7b-code
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nh0vlwhquzwq5cjz2b1.png)


#### Install CodyAI extension

You gonna find it in an extension browser bar by searching "cody ai"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ah72kwjcgjjf7hfuvd9.png)

#### Configure CodyAI to use ollama as your companion

- go to vs code settings
- put inside search bar: cody.autocomplete.advanced.provider
- you should see the option
- set it to "experimental-ollama"


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb1dxipwlw3yrumkkuzw.png)

#### Make sure CodyAI autocompletion is enabled

- Click on CodyAI icon at the bottom right bar
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhcctzwut57gkl4d7zci.png)
- make sure option "Code autocomplete" is enabled

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eo26yk4uk7z3nutyhvlx.png)

#### Make sure you are running ollama

That seems obvious, but it's worth reminding! 😅

#### Test it!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qyknggbgi5ti045z6ar.png)

### Summary

So right now you can have ollama supporting you as chat assistant and with code autocompletion as well! 🤩

Locally, secure and free! 🆓

Did you try ollama as code companion? What do you think about it?
Preview images on upload with StimulusJS
Tags: programming, ruby, rails, javascript
Published: 2024-02-24 19:39:50

In web development, providing users with a seamless experience for uploading images is crucial. One way to enhance this experience is by offering a preview of the uploaded image before submission. In this blog post, I'll walk you through how I integrated a new StimulusJS controller to achieve image upload previews.


**Step 1: Creating and Registering the Controller File**

First, let's create a new controller file for our image upload preview feature. In your StimulusJS controllers directory, create a new file, let's call it `image_upload_preview_controller.js`. Once the file is created, ensure that it's registered with your application by importing it in your `index.js` file.

```javascript
application.register('uploads', Uploads)
```

**Step 2: Adding Required Code for Image Upload Preview**

Inside the controller file, we'll need to add the necessary code. We'll define the required targets to manipulate: the form containing the file input and the container for the image preview.

```javascript
export default class extends Controller{
  
  static targets = [ 'form', 'previewContainer' ]
  
  preview(event) {
    if(event.target.files.length > 0){
      let src = URL.createObjectURL(event.target.files[0]);
      this.previewContainerTarget.src = src;
    }
  }
}
```

**Step 3: Connecting HTML Form with the Controller**

Finally, let's connect our HTML form with the controller. Add the data-controller attribute to the form element and specify the name of our controller (image-upload-preview) as the value. Also, include the data-target attribute with the targets we defined earlier.

```html
<form data-controller="image-upload-preview" data-action="change->image-upload-preview#preview">
  <input type="file" name="image" accept="image/*" data-image-upload-preview-target="form">
  <img src="#" alt="Image Preview" data-image-upload-preview-target="previewContainer">
</form>
```

✨ With just a few lines of code we were able to achieve this functionality. StimulusJS is very light weight and does not get in your way.

🤩 By organizing functionality into controllers, StimulusJS promotes clean and maintainable code, making it easier to manage and extend our applications.

👉🏻 I built this feature for my startup [devtree](https://devtree.app?utm_source=devto) where devs can build their portfolios sites and get in front of tech companies without any job search.

I share my journey with everyone on [twitter](https://twitter.com/zainnazirbutt) and [linkedin](https://linkedin.com/in/zainnazirbutt), follow to stay tuned.
Portfolio Website - Devlog #4
Tags: webdev, beginners, frontend, react
Published: 2024-02-24 19:29:58

Fixed responsiveness on My Expertise Section. Started on the next Section - Work Experience.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0x1ozu5fpxk4nkny0so.png)

Next Steps:
Add dropdown in purple title bar, when then shows the description shown below it.
Also maybe display projects in the same way.
Review of LinearMouse: Enhancing Pointer Precision
Tags: tooling
Published: 2024-02-24 19:19:15

In the realm of web development, precision and efficiency in navigating through code and designs are paramount. That's where LinearMouse, a tool that has significantly improved my navigation and interaction with multiple pointing devices, comes into play. Here's a comprehensive review of LinearMouse, focusing on its impact on my productivity as a Front-end Developer. This review is not sponsored.

**LinearMouse: Customization at Your Fingertips**
LinearMouse stands out for its ability to customize pointer speed and scrolling behavior, offering a tailored experience for each pointing device connected to your Mac. Its nuanced control over navigation preferences sets it apart in the market.

**Key Features:**
- **Per-Device Settings**: LinearMouse supports individual settings for each mouse and trackpad, allowing for personalized configurations based on the specific characteristics of each device.
- **Natural Scrolling Customization**: The app provides an option to reverse the scrolling direction for those who find the natural scrolling uncomfortable, ensuring that the user experience is optimized for personal preferences.
- **Pointer Precision**: With LinearMouse, adjusting pointer acceleration and speed for enhanced accuracy is straightforward, a feature particularly beneficial for gamers and designers.
- **Disabling Pointer Acceleration**: For tasks requiring the utmost precision, the ability to disable pointer acceleration ensures that every movement is accurate and predictable.
- **Free to Use**: LinearMouse is freely available, making it accessible to anyone looking to refine their pointing device experience without additional cost.

**Real-World Application:**
My experience with LinearMouse, especially when using the Logitech MX Master 3S mouse, has been transformative. Before LinearMouse, issues like scroll acceleration and incorrect scroll movement were frequent irritants. LinearMouse has effectively resolved these issues, allowing me to navigate and interact with my digital workspace more efficiently and comfortably.

**Conclusion:**
LinearMouse is a game-changer for anyone looking to enhance the precision and customization of their pointing devices. Its array of features caters to the specific needs of a wide user base, from casual users to professionals requiring pinpoint accuracy in their work.

This review is based on my personal use of LinearMouse and is not sponsored. I recommend LinearMouse to fellow developers and designers seeking to optimize their productivity and navigational efficiency with a simple yet powerful tool.
Biggest update for my startup
Tags: programming, ruby, rails, startup
Published: 2024-02-24 19:18:35

The biggest update for devTree to date 🚀 

👩🏻‍💻 Devtree is open for Businesses
If you are tired of outsourcing and paying huge placements fees or your in-house talent team is too busy sourcing talent, then devtree would be right choice. Hire one or hundreds of developers and connect directly without any middlemen. $0 PLACEMENT FEE.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6zjvhy6vrnjbslpjtfi.png)


🌐 Custom Domains
Bring your own domain for your devtree portfolio and make it more personal.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04ikp3o8q56svvg1gsyy.png)

💰 Monthly Subscription
Don't want to spend money on a lifetime deal, no sweat, affordable monthly subscription that starts from $1 (less than netflix subscription). Access to all premium features without any limits.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xal3la6bxmq4qopifmqo.png)


💫 Better Onboarding for developers
When you signup, devtree would take you through all the steps you need to make your profile better to attract right opportunities.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lc5jga3d7yzvo275lo5e.png)


A lot more to come, always open to feedback and new ideas.
Open source web game Adventures in Tmenya
Tags: gamedev, javascript, tabageos, opensource
Published: 2024-02-24 19:12:51

Adventures in Tmenya is an 8bit adventure platform web game.
Utilizing the GameSkeleton Class and ControllerPad Class of the Tabageos JavaScript library it automatically displays touch controls below the game when on a touch enabled device.

You can play the game [here](https://tadgames.itch.io/adventures-in-tmenya) 

And the complete source code and images for the game are
on [github](https://github.com/tabageos/tabageos/tree/main/AdventuresInTmenya).

Feel free to reuse the games code for your own projects.
React vs Vue
Tags: react, vue, webdev, framework
Published: 2024-02-24 19:05:36

As I've recently started learning react , being an **Ex Vue Developer**. I can see the vision as well as difference of what make these two used for same purpose (Website) but in Different Condition.

| React | Vue |
| -- | -- |
| High Learning Curve | Easy to Use |
| Huge Eco System | Minimal & Focused Eco System |
| Flexible Integration capability | Low Integration Capability |
| Prioritise Code Consistency | Prioritise Fast Project Building |

If react is looking very Hard for you to learn , start with vue then you can choose to whether stay with vue or switch to react, as you learn basic concept such as components , props , event handling , conditional rendering faster with vue.

## Lets Dive into CODE

> Below is an Count Increment Example

- React
```jsx
import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
    </>
  )
}

export default App
```

- Vue

```vue
<script setup lang="ts">
   let count = ref(0)
</script>

<template>
  <div>
    <div class="count" @click="count++"> 
      {{ count }}
    </div>
  </div>
</template>

<style scoped>
.count {
  background-color: #323232;
  padding: 1.5em;
}
</style>

```

As you can see , the same purpose can be acquired by both the Tech.

## Conclusion

__Learn React__ 💙
- If you want to get a job in frontend as fast as possible
- Want an Huge Eco System Support

__Learn Vue__ 💚
- Want to learn frontend concepts quickly
- Start building Projects
Calculating Your Freedom Number: How Much You Need to Escape the 9to5
Tags: 9to5business, beginners, discuss, ai
Published: 2024-02-24 18:57:38

In my last post, I introduced the concept of achieving financial independence while working a regular 9-5 job. Today we're going to talk about calculating your "Freedom Number" - essentially, how much money you need saved to be able to quit your job and maintain your current lifestyle.

**Why Your Freedom Number Matters**
Knowing your Freedom Number is crucial because it determines when you can realistically break free from reliance on your 9to5 income. It's the finish line you are working towards. Having a clear target makes creating a savings plan much easier.

Your Freedom Number is calculated based on your annual expenses and the rate of return you expect from investments. We'll cover the formula shortly. Do note your Freedom Number is highly personal based on your spending habits and desired lifestyle.

For me, reaching my Freedom Number means having the freedom to spend more time with family, work on passion projects, and not be chained to a desk and commute. What does freedom look like for you? Keep that vision in mind as motivation.

**How to Calculate Your Freedom Number**
Figuring out your number involves just three key variables:

Annual Spending - This includes all your living expenses, debts, and discretionary spending averaged over the past few years. Be brutally honest here!
Safe Withdrawal Rate - The percentage you can safely withdraw from savings each year. A rate of 3-4% is commonly used.
Expected Investment Returns - The annual return you expect on investments like stocks, bonds, etc. 6-7% is a reasonable average.
Here is the simple formula:

**Annual Spending / Safe Withdrawal Rate = Freedom Number**

So for example, if your current average annual spending is $50,000, and you use a 4% safe withdrawal rate, your Freedom Number would be $50,000 / 4% = $1,250,000

This means once your total savings reach $1.25 million, you'll be able to retire!

**Next Steps**
Knowing your Freedom Number is a huge first step. Next, we'll talk about saving strategies and how to invest wisely so you can work towards hitting your number. The key is consistency and optimizing every area of your finances.

Now you have a specific savings target - let the quest for financial freedom begin! Share any thoughts in the comments.
Review of Warp: The AI-Powered Terminal
Tags: productivity
Published: 2024-02-24 18:56:12

In the rapidly evolving tech landscape, having tools that streamline the development process is key to staying productive and focused. Warp is one such tool that has transformed my command-line experience, making it more efficient and intuitive. Here's an unbiased review of Warp, focusing on its features and applications in my day-to-day work as a Front-end Developer. This review is not sponsored.

**Warp: Revolutionizing the Terminal Experience**
Warp redefines the traditional terminal with a modern twist, incorporating AI and collaborative tools to enhance productivity. Built with Rust, it offers speed and an intuitive experience right out of the box.

**Key Features:**
- **Modern Editing Capabilities**: Warp allows for easier command writing and editing, akin to working within an IDE. Whether you're keyboard-centric or prefer using a mouse, Warp accommodates both with default keybindings or Vim support.
- **Warp AI**: The AI feature is a standout, offering smart completions and the ability to ask for command suggestions or programming guidance. This functionality significantly reduces the need to search for commands or debug errors externally.
- **Warp Drive**: A unique feature that lets you organize frequently used commands, making them readily accessible without the need to switch contexts or dig through history.
- **Customizable Themes**: With Warp, personalizing your terminal is straightforward. It comes with a selection of beautiful themes for both dark and light modes and offers the possibility to create or auto-generate custom palettes.
- **Privacy and Security**: Warp ensures that all AI interactions remain private and secure, a crucial aspect for developers concerned about confidentiality.

**Real-World Application:**
My experience with Warp has been overwhelmingly positive. The AI-powered auto-completion and the ability to recall past commands with ease have made my workflow significantly more efficient. The terminal's speed and the seamless editing experience have allowed me to focus more on development tasks rather than spending time on repetitive command-line operations.

**Conclusion:**
Warp is a modern terminal that stands out for its speed, AI integration, and user-friendly features. It's designed to boost productivity for developers of all levels, from beginners to seasoned professionals. For those looking to enhance their command-line experience with a tool that's both powerful and a joy to use, Warp is worth exploring.

This review is based on my personal experience with Warp. My aim is to share valuable tools that have made a significant impact on my productivity as a Front-end Developer.
Review of Spark: Reinventing Email Productivity
Tags: productivity
Published: 2024-02-24 18:55:29

In the quest for productivity tools that genuinely make a difference in managing daily tasks, Spark has emerged as a game-changer for my front-end development work. This professional review of Spark is based on my experience and is not sponsored.

**Spark: A Smarter Approach to Email Management**
Spark revolutionizes the email experience by prioritizing focus and efficiency. Its suite of features is designed to reduce noise and enhance the way professionals interact with their inbox.

**Key Features:**
- **Smart Inbox**: Spark intelligently categorizes emails, separating important messages from newsletters and notifications, allowing me to focus on what truly matters.
- **Priority Emails and Gatekeeper**: Important contacts are highlighted, and unwanted senders are screened out, ensuring that I never miss critical communications.
- **Group by Sender and Mute Threads**: These features help organize the inbox by bundling messages from preferred senders and auto-archiving irrelevant threads, streamlining email management.
- **Productivity Tools**: With functions like Send Later, Reminders, Done Marker, and Set Aside, Spark optimizes my workflow, enabling better time management and focus on deep work.
- **Cross-Platform Accessibility**: Spark's fast, cross-platform capability means I can sync all my mail accounts in one place, making it incredibly convenient to manage my professional and personal communications seamlessly.
- **Focus on What’s Important**: The app's design nurtures new habits to gain greater control over workflow, embodying a philosophy that aligns with my approach to productivity.

**Real-World Application:**
Spark has significantly improved how I handle email communications. The ability to group emails by sender and color-code them per account is particularly beneficial, especially when dealing with daily coding newsletters and project updates. The "focus" features, such as automatic reminders and the option to set aside emails for later, have been instrumental in freeing up headspace and allowing me to concentrate on critical development tasks.

**Conclusion:**
Spark has transformed my email management routine from a chaotic necessity into an organized, productive part of my day. Its focus on cutting out distractions and enhancing workflow efficiency makes it an invaluable tool for anyone looking to master their inbox and boost productivity.

This review is not sponsored. My intention is to highlight how Spark can be an asset for front-end developers and professionals alike, seeking to optimize their email management and enhance overall productivity.
Review of Cursor: The AI-First Code Editor
Tags: productivity
Published: 2024-02-24 18:54:48

In the dynamic world of front-end development, staying ahead with the latest tools can significantly enhance productivity and creativity. My latest exploration led me to Cursor, an AI-first code editor designed to turbocharge the software development process. This post aims to share my insights on Cursor.

**Cursor: Revolutionizing Code Editing with AI**
Cursor redefines the coding experience by integrating AI directly into the code editor, facilitating a unique pair-programming experience with artificial intelligence. Its array of features is tailored to streamline development workflows and boost efficiency.

**Key Features:**
- **AI-Powered Interactions**: Cursor allows developers to "chat" with their projects, offering tailored answers and insights directly related to the repository, which significantly reduces time spent searching through code.
- **Enhanced Codebase Navigation**: Asking about your codebase or where to start making changes becomes intuitive, saving valuable time and effort.
- **Direct References**: The ability to directly refer to documentation, code definitions, and files within the editor simplifies the development process.
- **Effortless Code Generation**: From generating code from scratch to making complex changes with simple prompts, Cursor enhances focus on high-level logic by handling the low-level coding.
- **Bug Detection and Debugging**: It scans for bugs and assists in debugging, pinpointing the root cause of errors efficiently.
- **Copilot ++**: An advanced version of Copilot suggests completions and diffs, understanding the context of changes being made swiftly.
- **Privacy and Migration**: Cursor emphasizes privacy with a mode that ensures code remains private. It also offers a seamless migration process for VSCode users, supporting extensions, themes, and keybindings.

**Real-World Application:**
My experience with Cursor has been transformative. The AI's ability to understand and generate code based on high-level instructions has doubled my productivity. Debugging and navigating the codebase have become less of a chore and more of an interactive dialogue with the project.

**Conclusion:**
Cursor stands at the forefront of AI integration in code editing, offering an unparalleled development experience. Its focus on privacy, combined with the seamless migration from VSCode, makes it a compelling choice for developers looking to leverage AI in their workflow.

This review reflects my experience and is not sponsored. I believe Cursor represents a significant leap forward in the evolution of code editors, and I recommend it to any developer eager to harness the power of AI in their projects.