teleren/devto huggingface dataset:
Build a Blog with React and Google Sheets | PART 4 | FullStack Course | Learn Coding
Published: 2024-02-14 06:19:35

In this 6 PART series, you will learn how to build a complete full-stack ReactJs blog with Google Sheets as a backend using [SheetDB](https://sheetdb.io/r/rrf7b8) as the API.

I will walk you through the step-by-step process and code and also teach you about React concepts and fundamentals.

If you like this series please leave your feedback in the comments and subscribe to the [channel](https://www.youtube.com/@JutsuPoint) and follow on [GitHub](https://github.com/strongSoda/) and [Twitter](https://twitter.com/EhThing).

{% embed https://www.youtube.com/watch?v=bjr1xjvcT4I %}
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Full Course: https://www.youtube.com/playlist?list=PLGRqF6fp4AC51IwKEBLOUtA0CCQpZxnut

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Link to the code: https://github.com/strongSoda/react-blog-tutorial

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

## About Me

I’m a Senior Product Engineer from India, working in web and mobile development. I enjoy turning complex problems into simple, beautiful, and intuitive software. I blog to share my software knowledge with others.

My job is to build your idea so that it is functional and user-friendly but at the same time attractive. Moreover, I add a personal touch to your product and make sure that is eye-catching and easy to use. I aim to help you validate and scale your startup most creatively.

### Quick Links
- [Hire Me](https://imran.wiki/)
- [Coding YouTube Channel](https://www.youtube.com/@JutsuPoint)
- [LinkedIn](https://www.linkedin.com/in/imrankhan001/)
- [Twitter](https://twitter.com/EhThing)
- [🎁 Screen Recording Software](https://screen.studio/@Xenr1)
Setup ESLINT and PRETTIER in React - TypeScript Version
Published: 2024-02-14 06:09:07

This article is base on
https://dev.to/markliu2013/how-to-create-a-react-application-with-webpack-43b5

We want to add eslint and prettier for the project.

**Install Eslint and Prettier**

```

npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier
npm i -D eslint-plugin-react eslint-plugin-react-hooks
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

```

**Create .eslintrc.js**

```javascript
module.exports = {
  settings: {
    react: {
      version: 'detect'
    },
    'import/resolver': {
      typescript: {}
    }
  },
  env: {
    browser: true,
    es2021: true
  },
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  rules: {
    'react/react-in-jsx-scope': 'off'
  }
};

```

**Create .prettierrc.json**

```javascript
{
  "semi": true,
  "tabWidth": 20,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none"
}
```

**Run Eslint and Prettier**

```javascript
"lint": "eslint ./src --ext .ts,.tsx,.js,.jsx",
"lint:fix": "eslint ./src --ext .ts,.tsx,.js,.jsx --fix",
"format": "prettier 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --write"
```
Creating Business Apps is Now a Prompt Away
Tags: nocode, appdevelopment
Published: 2024-02-14 05:41:41

Cloobot X is a Next Gen No-Code platform built for Enterprises having in-house IT teams with the below value proposition:
1. Overcome limitations of existing No-Code Platforms (Scalability, Vendor lock-in, etc)
2. Support problem solvers including consultants, domain experts, product managers, designers and end users at every stage of the Software development lifecycle  
3. Cutting down time to delivery by 10x with instant deliverables in the form of Prototypes, MVP, Workflow Apps & Codebase (In a programming language of choice) using just prompts.
4. Enable Enterprises to adapt Gen AI while addressing the concerns around it (Platform can be deployed on-premise, Can run on custom LLMs, code is generated by proprietary algorithm and not by Code-based LLMs).
Using the Ollama API to run LLMs and generate responses locally
Tags: llm, machinelearning, python, opensource
Published: 2024-02-14 05:39:43

Ollama allows us to run open-source Large language models (LLMs) locally on our system. If you don't have [Ollama](https://ollama.ai) installed on your system and don't know how to use it, I suggest you go through my [Beginner's Guide to Ollama](https://dev.to/jayantaadhikary/installing-llms-locally-using-ollama-beginners-guide-4gbi). It will guide you through the installation and initial steps of Ollama.
In this article, I am going to share how we can use the REST API that Ollama provides us to run and generate responses from LLMs. I will also show how we can use Python to programmatically generate responses from Ollama. 

### Steps
1. Ollama API is hosted on localhost at port 11434. You can go to the [localhost](http://localhost:11434/) to check if Ollama is running or not. 
2. We will use curl in our terminal to send a request to the API.
`curl http://localhost:11434/api/generate -d '{
  "model": "llama2-uncensored",
  "prompt": "What is water made of?"
}'`
Here I am using the llama2-uncensored model but you can use any available models that you downloaded through Ollama.
We can also send more parameters such as stream, which when set to false will only return a single JSON object as a response.
![Curl to Ollama](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgjd9agir9mouqxwbh76.png)
3. Now, as we see, the `/api/generate` endpoint is used to generate a response/completion for a given prompt. There are various endpoints that we can use for different purposes. You can check them out at the [API Documentation](https://github.com/ollama/ollama/blob/main/docs/api.md) of Ollama.

### Generating Responses through Ollama API using Python

Now that we know about the REST API Ollama provides, we can use Python to generate responses programmatically. 

1. Create a python file. Import requests and json library.
`
import requests
import json
`
2. Create the url, headers, and data variables with values like the image below 
![variable declaration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjbpr7zg38nomcewo533.png)
3. Now use the post method of the response library and pass in the url, headers, and data variables that we created above. Store the response in a variable.
`response = requests.post(url, headers=headers, data=json.dumps(data))`
4. Now check the status code of the response. If it is 200, print the response text, else print the error. We can extract the exact response text from the JSON object like the snapshot below. 
![Response text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0lz4dlqgnfbzleyrk5b.png)
5. Run the program :)

The complete snapshot of the code is attached below. 
![Code snapshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uho1mp16j322zgbl4fgv.png)

### Conclusion

By following the steps above you will be able to run LLMs and generate responses locally using Ollama via its REST API. You can now use Python to generate responses from LLMs programmatically. Ollama is an amazing tool and I am thankful to the creators of the project!
🎬 HTMX
Tags: webdev, html, htmx, websocker
Published: 2024-02-14 05:17:23

I just came across HTMX and I'm sharing with you guys what features it offers over regular HTML.

Some of the feature of HTMX is
**HTMX** gives you access to **AJAX**, **CSS Transitions**, **WebSockets** and Server Sent Events directly in HTML, using attributes, so you can build modern user
Software Development Lifecycle (SDLC)
Published: 2024-02-14 05:12:00

In the realm of software engineering, the Software Development Lifecycle (SDLC) stands as a cornerstone—a cost-effective and time-efficient process employed by development teams to design and build high-quality software. The ultimate goal is to mitigate project risks through meticulous planning, ensuring that the software not only meets but exceeds consumer expectations during production and beyond.

Why is SDLC Important?

SDLC provides a systematic management framework, delineating specific deliverables at each stage of the software development process. The benefits are manifold:

- Increased Visibility:
  - All stakeholders gain insight into the development process, fostering transparency.

- Efficient Estimation, Planning, and Scheduling:
  - Precise project planning, leading to accurate estimation and efficient scheduling.

- Improved Risk Management and Cost Estimation:
  - Identification and mitigation of risks, coupled with accurate cost estimation.

- Systematic Software Delivery and Consumer Satisfaction:
  - A methodical approach ensures systematic software delivery, contributing to heightened consumer satisfaction.

How Does SDLC Work?

SDLC involves a series of tasks that collectively contribute to building a software application.

1. Plan:
   - Set expectations, define goals, estimate costs, create a schedule, and formulate a detailed plan aligning with consumer needs.

2. Design:
   - Engineers analyze requirements, identify optimal solutions, and assess integration with existing IT infrastructure.

3. Implement:
   - The development team breaks down goals into manageable tasks, building the product incrementally to achieve the final result.

4. Test:
   - Combining automation and manual testing, the development team ensures software quality by identifying and rectifying bugs.

5. Deploy:
   - Push the software from the build or testing environment to the production environment for consumer use.

6. Maintain:
   - Address bugs, resolve consumer issues, monitor system performance, security, and user experience, and identify opportunities for improvement.

SDLC Models:

1. Waterfall:
   - Sequential, linear approach with well-defined phases.

2. Iterative:
   - Repeated cycles of development, refining and improving the software in each iteration.

3. Spiral:
   - Emphasizes risk assessment and incremental development in a spiral pattern.

4. Agile:
   - Embraces flexibility and collaboration, delivering software incrementally in short iterations.

In conclusion, SDLC is the compass guiding development teams through the intricacies of software creation. From meticulous planning to systematic deployment and maintenance, SDLC ensures a comprehensive and effective approach to delivering software that not only meets but exceeds consumer expectations.
The three pillars of how to scale any system horizontally
Tags: cloud, aws, systemdesign, serverless
Published: 2024-02-14 04:23:06


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

Horizontally scaling a system to handle more load is vital but comes with challenges. There are three core strategies to scale out: distributing, caching, and asynchronous processing. Each approach also involves tradeoffs to consider.  

## Distributing

Distributing spreads the workload across multiple hardware resources or systems:

- Common tactics include **load balancing** and **sharding** data across nodes
- **Benefits**
    - Handles more users and transactions without single point of failure
    - If one node fails, others take over for reliability  
- **Drawbacks** 
    - Increases complexity around networking, deployment, and data consistency
    - Sharding introduces specific data consistency challenges 

## Caching 

Caching stores frequently accessed data in fast access storage:

- **Benefits**
    - Reduces load on backend systems
    - Lowers response times by avoiding repeat queries
- **Drawbacks**
    - Potential for increased stale data
    - Requires managing scaling of cache resources 

## Asynchronous Processing

Async decouples non-critical tasks using queues and events:

- **Benefits** 
    - Improves user experience by keeping app responsive
    - Enables better resource use by spreading loads  
- **Drawbacks**
    - Increases complexity around failure handling and consistency
    - Eventual delays can still degrade consistency

In distributed systems, there are inevitable messy tradeoffs to make.

Read more on [my blog](https://firstfinger.in/).
6 Best Amazon Prime Video Alternative
Tags: amazon, softcodeon, alternativeto, bestofdev
Published: 2024-02-14 03:52:19


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

 As streaming enthusiasts, we're always on the lookout for fresh content and new experiences. While Amazon Prime Video offers a robust library of movies, TV shows, and originals, there's a myriad of alternatives that deserve our attention.

From Apple TV+ with its award-winning originals to HBO Max's blockbuster movies and exclusive specials, the options are endless. Peacock offers a mix of classic sitcoms and current NBC series, while Paramount+ delivers a wide array of CBS shows and exclusive originals.

Let's explore, discover, and embrace the diversity of content available across various streaming platforms. Your next binge-worthy obsession awaits!
Visit this link for further detail
[**6 Best Amazon Prime Video Alternatives**](https://softcodeon.com/alternatives/6-best-amazon-prime-video-alternative.htm)

Visit for Complete detail
[Softcodeon](https://softcodeon.com/)
🚀 Day 18-19/100 🚀
Tags: 100daysofhomelab, devops, postgres, database
Published: 2024-02-14 03:39:29

---
title: 🚀 Day 18-19/100 🚀
published: true
description: 100 Days Of DevOps
tags: #100DaysOfHomeLab #DevOps #PostgreSQL #Databases
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-02-14 03:36 +0000
---

PostgreSQL Disaster Recovery Testing:

- Restore DB to a specific backup in Patroni HA on both VM/Container
- Sync Standbys with pgbackrest
- Remote S3 Backups with pgbackrest
Building Microservices with FastAPI and React
Published: 2024-02-14 03:26:18

**Introduction**

Microservices architecture is a design pattern for developing applications as a suite of small services, each running in its own process and communicating with lightweight mechanisms. In this article, we will be building a simple product management system using FastAPI for the backend and React for the frontend.

**Backend with FastAPI**

FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.6+ based on standard Python type hints.

**Setting Up FastAPI**

First, install FastAPI and an ASGI server, such as Uvicorn.

```
pip install fastapi uvicorn
```

**Creating the CRUD Operations**

Let’s create a simple CRUD (Create, Read, Update, Delete) operations for managing products.

_Python_

```
from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class Product(BaseModel):
    id: int
    name: str
    price: float

products = []

@app.post("/product/")
def create_product(product: Product):
    products.append(product.dict())
    return product.dict()

@app.get("/product/")
def get_products():
    return products

@app.get("/product/{product_id}")
def get_product(product_id: int):
    product = next((product for product in products if product["id"] == product_id), None)
    return product

@app.put("/product/{product_id}")
def update_product(product_id: int, product: Product):
    index = next((index for (index, d) in enumerate(products) if d["id"] == product_id), None)
    products[index] = product.dict()
    return products[index]

@app.delete("/product/{product_id}")
def delete_product(product_id: int):
    index = next((index for (index, d) in enumerate(products) if d["id"] == product_id), None)
    return products.pop(index)

```

**Frontend with React**

React is a JavaScript library for building user interfaces. It allows you to compose complex UIs from small and isolated pieces of code called “components”.

**Setting Up React**

First, install Node.js and npm. Then, use Create React App to set up a new React project.

```
npx create-react-app product-app
```

**Consuming the REST API**

We will use the fetch function built into most modern browsers to consume our FastAPI backend.

```
import React, { useEffect, useState } from 'react';

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('/product/')
      .then(response => response.json())
      .then(data => setProducts(data));
  }, []);

  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>{product.price}</p>
        </div>
      ))}
    </div>
  );
}

export default App;
```

**Conclusion**

In this article, we have seen how to build a simple product management system using FastAPI and React. 

**References**
1. https://fastapi.tiangolo.com/
2. https://react.dev/
Create a Gradient Border with just 2 Lines of CSS
Tags: webdev, tutorial, css, beginners
Published: 2024-02-14 03:12:01


![cover image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8afgrt7f4r9ar43hl17v.png)
##The Problem with border-color and border-image:
When you try to add a gradient as a property value to the border-color or to the border itself (same) you will see nothing, the border is completely vanished, this happens because CSS border property doesn't allow gradients only allows colors, and if you tried the border-image it will do the same effect but only on rectangles, it won't respect the border-radius if you set the border-radius of the element, so the solution here must do the following:
- Make the border color to be any kind of gradient (linear, radial, conic, etc)
- respect the shape of the element and its radius

##Returning to the Roots of CSS aka the BOX MODEL:
what is the CSS Box Model, will I could tell from experience it's concept that tells us about a BOX that wraps around every HTML element, and it consists of 4 different parts:
1. Content Box: where is the initial content of the element exist, and the width and height properties applied to it.
2. Padding Box: Clears an area around the Content Box but still inside the element this is the difference between it and margin-box.
3. Border Box: the area that wraps around the Padding Box and the Content Box.
4. Margin Box; Clears an area around the Border Box, so it's outside of the element itself.

##Implementing the soltion
We will make use of the padding-box and the border-box in creating to gradient backgrounds, first will be treated as the color of the content box so it will be a gradient of the the same color, second gradient will be treated as the color of the border, and this is the fun part of mixing colors, then you must assign the border-width to a certain value like (10 px or what) and make sure it's transparent so the second background could be shown otherwise its color will cover our gradient

```
.element {
    ...
    background: 
        linear-gradient(#222, #222),
        linear-gradient(crimson, blueviolet);
    border: 10px solid transparent;
}
```

Also I made a short tutorial [here](https://www.youtube.com/watch?v=adjoIKgqgwM) so you could understand better
Fork me on GitHub Css Ribbon - Animated
Tags: javascript, github, beginners, tutorial
Published: 2024-02-14 02:44:09

> Visit - https://sopkit.github.io/github-corners/

---

```html
<a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
```

{% github https://github.com/tholman/github-corners %}
More Options -

> https://github.blog/2008-12-19-github-ribbons/

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

- Add fork me on github ribbon to website
A new way to CSS (SML)
Tags: css, xml, javascript, html
Published: 2024-02-14 01:47:47

I recently completed a proof of concept project for something that had been on my mind for a long time - a better way to style markup for web pages. Something about CSS bugs me, and I think others, so this project was my way of trying to contribute to a better cssociety... haha.

I call it **Style Markup Language (SML)**, and I'd love if you'd take a look at it and give me your feedback: https://github.com/Seth-Harlaar/SML
Am I on to something or should I lock this in the basement and never look back?
DAY19: Python day 27
Published: 2024-02-14 01:26:02

**Advanced python arguments**
- arguments with default values 
```
def function(a=1, b=2, c=3):
```
unlimited positional arguments
- put `(*args)` when defining the function 
- creates a tuple 
- often goes with a loop

unlimtited keyword arguments
- put `(**kwargs)` when defining function 
- creates a dictionary
- use `.get()` method to access values without error

**GUI: graphical user interface**
- intro to tkinter 
- widgets: button, entry, label 
- `pack()`, `grid()` functions
Eslint Error while doing code in nextjs technology
Published: 2024-02-14 01:21:33

"I'M " -> how to tackle this problem error for eslint.
I tried to tackle this problem but i didnt find out any solution for that, then for now i just wrap them in curly braces like -> {"I AM"} -> like this but i want "I'M" -> this way , please tell me how to do that while coidng in next js.
Big data with Software Systems
Tags: softwareengineering, bigdata
Published: 2024-02-14 01:18:08

Ever wondered how much data is generated by the Software systems day in day out ? Answer could be enormous !
Let's take an example of software patches every week.
Let's consider an example of software development life cycle which comprises of analyzing the tool to pick for software development, build tasks, resolving compilation errors, resolving code compatibility issues, resolving the defects, resolve security vulnerabilities, deploy to production, address defects that surface in production systems due to platform dependencies etc. All these stages and phases generate data !
So, we are talking about huge structured data in terms of relationship of the assets, versions, known software defects, compatibility issues, cost associated to build and operate etc.
Also, there is a lot of unstructured data in terms of system performance logs, system patching exercise, system upgrade tasks, system failover tasks etc.
This is the big data we all need to understand, be aware of so we know the dependencies, impacts to already running software and age old systems in the process of upgrades.
Please comment and share your experiences with legacy software applications, their build and operate errors you have experienced, would love to hear and let us learn together in this community.