teleren/devto huggingface dataset:
Tinkering Human Anatomy with SVG
Tags: webdev, svg, javascript
Published: 2023-01-04 13:17:31

Let's create Human Anatomy with SVG.


![Human Anatomy with SVG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dg550sbakw28r0oc15kw.gif)


Github Repository : https://github.com/eMahtab/human-anatomy

Last week I spent sometime trying to create human anatomy using SVG. I used Figma to create individual SVGs e.g. head, neck, chest, abdomen etc.

All the body parts were created using polygon shape in Figma except the Orbit, which was created using ellipse shape in Figma. 

Then I exported the  individual SVG to be used in html document. And using CSS set the position of individual body parts/SVG to get the final anatomy as the result.

Each SVG have a different id, so you can handle the events e.g. onclick, onmouseover on individual body part.

**Design in Figma :**

![Figma Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lml88l5mpn7v8cwmtg8u.png)

**Reference :** https://github.com/volcanioo/Human-Body-Rendering-HTML

Happy SVGing 🥳
Using Postman to Test APIs
Tags: postman, api, backend, rails
Published: 2023-01-04 13:08:42

   I must confess it took me a bit to understand the functionalities and purposes of using Postman as a client to make non-GET requests. For some reason I did not see it as a testing app at first and kept using the browser as a client to run my backend API tests. In the browser you can run GET requests and get json data back in the URL or by fetching with chrome dev tools (option + command + J). There is also Curl, which is a client built in your machine terminal that can also fetch and get json data as response. However, it is more complicated and time consuming making other HTTP requests like a POST, PATCH, or DELETE in the browser other than with Postman. Adding more practice to using Postman, I came to understand it better and prefer to use it now to run my backend tests instead of the browser or curl. 
   In case you don't have Postman yet, you can download it in your platform at: https://www.postman.com/downloads/
   While creating a web application with Rails, you need to take HTTP requests and return a json response that follows the idea of client-server communication. In case you forget your HTTP requests, paths, its controller actions, and what is used for you can check this website for references; https://guides.rubyonrails.org/routing.html.

   See Postman request examples below:

GET request to show all 

![Index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hr0u56jg6cmjk3fnevaq.png)


GET request to show a specific id 


![Show](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q17eoas573aga58fx156.png)

GET with id error status and message working 


![Show](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxh5mrqx46c6qghui7bi.png)


POST request to create a new id 


![Create](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7k5w1l74xe9q2brdc6g.png)

PATCH request to update an id


![Update](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ssf6fo6b7s853euq1brc.png)


Last but not least a DELETE request to delete/destroy an id 


![Delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxd5uh567ziwdq1yynuq.png)


Results that your id was successfully deleted. 
You can either check with a Postman GET(index) request to see your last id or you can also close your terminal with (control + C) and in your project directory run (rail c) to run test and see if your updates worked and the data arrived. Then exit to leave your (rails c). A common mistake I did multiple times was to go back to my Postman after running tests with (rails c) and forgetting to open your rails server (rails s). 


   In conclusion, there are different clients (Browser, Curl, Postman) that you can use to run your backend APIs data to get a json response. And it is always up to the developer how they will run their tests depending on what they are more comfortable with using.


REFERENCES 

https://www.postman.com/downloads/

https://guides.rubyonrails.org/routing.html
How do I integrate Kubernetes in SDN
Published: 2023-01-04 13:02:09

Software-Defined Networking (SDN) is a network architecture that allows network administrators to manage network traffic flows and configure network behavior centrally, using software. Kubernetes is an open-source platform that automates the deployment, scaling, and management of containerized applications.

To integrate Kubernetes with SDN, you can use a network plugin that allows Kubernetes to communicate with the SDN controller. This plugin will manage the virtual networking infrastructure and provide network connectivity to the containers in your Kubernetes cluster.

Here are the general steps you can follow to integrate Kubernetes with SDN:

- Install and set up your SDN controller, such as OpenDaylight or ONOS.
- Install and set up your Kubernetes cluster.
- Choose a network plugin that is compatible with your SDN controller and Kubernetes cluster. Some popular options include Calico, Weave Net, and Flannel.
- Configure the network plugin and specify the parameters for your SDN controller, such as the IP address and port number.
- Deploy your applications on the Kubernetes cluster and test the network connectivity.

I hope this information is helpful! Let me know if you have any questions.
How to Make Fast Food Website Using HTML CSS JS
Tags: css, javascript, beginners, tutorial
Published: 2023-01-04 12:53:16

{% youtube 2F0PQEN1254 %}

In this tutorial, I'm going to show you how to build a delicious fast food website using HTML, CSS, and JavaScript. I'll start by showing you how to create a basic HTML page and then add the necessary CSS styles and JavaScript functionality. Once finished, your fast food website should be able to display all types of delicious hamburgers and other tasty fast food items.

[Source code](https://www.patreon.com/posts/crispy-fast-food-76773639?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link)


⏱️ Timestamps
-----------------------------
0:00 - Demo
4:12 - File structure
5:08 - Project initial
14:05 - Header
37:46 - Hero section
47:07 - Popular section
58:05 - Menu section
1:09:00 - Schedule section
1:17:26 - Reservation section
1:27:51 - Footer
1:47:13 - Media queries
1:45:54 - Media queries
The easiest way to make a glass effect in CSS 💎
Tags: webdev, css, html, tutorial
Published: 2023-01-04 12:49:38

Salute everybody, i hope y'all doing well.

Recently i have seen a lot of designs and websites using the glass effect which makes the website looks smoother 💎. So you might be wondering how have they done this effect.

Today i will show you the easiest way to use this effect in your project in 4 steps.

---

## 1- Create a new div
So first things first we create a new div in our html file and giving it a class name like so:

```html
<div class="box">
  <button class="my-btn">Click me!</button>
<div>
```

![Step 1 results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npahevp3lahcqtlao00i.png)
---

## 2- Remove extra space
Secondly we go to our CSS file to remove all the extra space from the html elements.

```css
* {
  margin: 0;
  padding: 0;
}
```
---

## 3- Center the content
Adding a beautiful background to the body & align our div to center.
```css
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("<https://images.unsplash.com/photo-1488718729626-53eaa41c0848?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=633&q=80>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
```

### Third step results

![Third step results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbvfi6b3u1gd34n07iln.png)

---

## 4- Add glass effect
Adding some styling & glass effect.

```css
.box {
  position: relative;
  width: 400px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  backdrop-filter: blur(15px); /* glass effect */
}
```

Congrats 🎉🎊 you have created the glass effect successfully!
This is how the final result looks like ! 💯

For the "Click me" button here is the CSS:
```css
.my-btn {
  cursor: pointer;
  padding: 15px 40px;
  background-color: black;
  color: white;
  border: none;
  outline: none;
  border-radius: 5px;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s;
}
```
---

🌐 Here is a link if you want to visit the whole code [HERE](https://codesandbox.io/embed/interesting-bohr-v9ujs?fontsize=14&hidenavigation=1&theme=dark).

[Connect with me](https://twitter.com/zyacouri) if you have any question.

👌 I hope this post helped you to create your own glass effect.

💖 If you find this post a bit useful let me know in the comment section.
Digital Marketing Course in Chennai
Tags: webdev, beginners
Published: 2023-01-04 12:29:11

Learn all regarding Digital Marketing techniques through our [Digital Marketing Course in Chennai](https://intellimindz.com/digital-marketing-course-in-chennai/) at IntelliMindz. This digital Marketing Training in Chennai can cause you to master Google PPC Ads, Digital Marketing Strategy, Email, Social Media Marketing, SMM, SEO, Google Analytics, YouTube, and Email within 30+ real projects. Learn google tag manager and google analytics from scratch and right call for your business growth. be part of the simplest Digital Marketing course in Chennai to become a well google certified digital merchandiser. This course can assist you to perceive the advanced digital Marketing Strategy to extend traffic and improve your Business. we tend to conjointly offer each online Training and schoolroom coaching. begin Learning with the U.S., register in our Digital Marketing Training in Chennai, and become an associate knowledgeable in Digital Marketing. Contact 9655877577 for a lot of details.
Custom Software Development
Tags: customsoftwaredeveloper, customsoftware, softwaredevelopment, development
Published: 2023-01-04 12:28:21

Are you trying to find a company develops custom software? With more than 8 years of expertise, QServices is the best [custom software development](urlhttps://www.qservicesit.com/) business in the United States and Canada. The process of creating apps precisely to meet your organization’s needs known as software development. We offer custom software app development services that will satisfy requirements, whether you are a start-up or a big business with original and creative ideas. 

 Contact us for additional information: **[QServices Inc.](https://www.qservicesit.com/)**
Why Django in 2023
Tags: programming, python, django, webdev
Published: 2023-01-04 11:02:02

Well my reason to explore Django is purely Official Requirement as at office I would also start working on Full-Stack Based Project whose Backend is powered with Django. 

But After Exploring Python and Django in few days I have observed that Django is so popular and a person have great career in Django if He/She go with this.

**Why Django ? Let's Discuss :**

Django is a popular **web framework** for building web applications with **Python**. It is free and open-source, and has a large and active community of developers. **There are several reasons why you might want to learn Django in 2023:**

**1)**Django is a powerful web framework that makes it easy to build complex, database-backed web applications quickly. It provides a lot of the functionality that you would normally have to build yourself, such as user authentication and authorization, database ORM (Object-Relational Mapping), and more.

**2)**Django is highly customizable and flexible. You can use it to build almost any type of web application, from a simple blog to a complex social media platform.

**3)**Django is well-documented and has a large community of users, which means that it is easy to find help and resources online when you are learning.

**4)**Python is a popular programming language that is used in a wide variety of fields, from data science to web development. Learning Django will not only give you the skills to build web applications, but it will also give you a strong foundation in Python that you can use in other areas.

**5)**Django is a mature and well-established framework, with a long history and a strong track record. It has been used to build many high-profile websites and applications, including Instagram, Pinterest, and The Washington Times.

**6)**Django is scalable and performant. It is designed to handle high levels of traffic and data, and has a number of built-in tools for optimizing performance.

**7)**Django follows the "batteries included" philosophy, meaning that it includes a lot of functionality out of the box. This can save you a lot of time and effort when building an application, as you don't have to spend as much time integrating different libraries and frameworks.

**8)**Django has a large and active community of developers and users, which means that it is constantly being improved and updated. There are also many resources and tutorials available online, making it easier to learn and get help when you need it.

Finally, Django is a great choice for building web applications because it is easy to use and has a friendly, welcoming community. Whether you are a beginner or an experienced developer, you will find it enjoyable and rewarding to work with Django.
Boost Your Query Performance with Function-Based Indexes in PostgreSQL
Tags: postgres, sql, webdev, database
Published: 2023-01-04 12:19:29

Are you fed up with slow PostgreSQL queries that search for case-insensitive matches? Look no farther than indexes based on functions!

An index that is constructed based on the result of a function or expression is known as a function-based index. This means that it can be used to accelerate searches that repeatedly evaluate the same function or expression.

For example, let's say you have a table called **_employees_** that contains a column called **_first_name_**. You frequently run queries that search for employees with a given first name, but you want the search to be case-insensitive. One way to achieve this is to create a function-based index on the lower() function of the **_first_name_** column:

```
CREATE INDEX lower_first_name_idx ON employees (lower(first_name));
```

Now, when you run a query like the following:

```
SELECT * FROM employees WHERE lower(first_name) = 'john';
```

PostgreSQL will use the **_lower_first_name_idx_** index to search for rows that match the condition, which should be faster than a full table scan.

It's important to remember that function-based indexes can only be used if the indexed expression is in the WHERE clause of a query and is used in an exact match (i.e., = or IN) or a range condition (i.e., BETWEEN). If the expression is used in a **_SELECT_** list or an **_ORDER BY_** clause, they can't be used.

So, if you want to make your queries run faster, think about using function-based indexes in PostgreSQL the next time you want to do that. Your database will thank you, as will your users.
How to pass parameters to useQuery using Axios
Tags: javascript, react, nextjs, reactquery
Published: 2023-01-04 12:15:38

There are two 'correct' ways to pass parameters to useQuery using Axios and one "looks and feels" cleaner than the other.

## Method 1: Destructuring

The query function that is passed to useQuery is given a context object. On this object, we have a `queryKey`. This contains the parameter that you're passing to the function. We destructure the context object to get the `queryKey` and destructure that array to get the param we're passing `[_, userId] = queryKey`

I'm not a fan of this one simply because of the `_` being used to discard a non-needed item from array destructuring. It feels messy and non-explicit.
```js
const fetchPosts = ({ queryKey }) => {
  const [_, userId] = queryKey;
  const { data } = axios.get(`https://yourapiroute.com/posts/${userId}`);
  return data;
};
const { data } = useQuery(["posts", userId], fetchPosts);
```
## Method 2: Anonymous functions (my go-to)

We're passing exactly what we need using an anonymous function. It's easier to read and reason about. We know what's being passed without searching for the function in question and checking what is being destructured and how.
```js
const fetchPosts = (userId) => {
  const { data } = axios.get(`https://yourapi.com/posts/${userId}`);
  return data;
};

const { data } = useQuery(["posts", userId], () => fetchPosts(userId));
```
Software Engineering Team Size
Tags: management
Published: 2023-01-04 12:00:00

The right size of a software engineering team and the number of engineers an Engineering Manager (EM) can properly support is at the core of organizational design in tech companies.

The [Scrum Guide](https://scrumguides.org/scrum-guide.html#scrum-team) states that "*The Scrum Team is small enough to remain nimble and large enough to complete significant work within a Sprint, typically 10 or fewer people*". The Two-Pizza Teams, coined by [Jeff Bezos](https://en.wikipedia.org/wiki/Jeff_Bezos) at [Amazon](https://en.wikipedia.org/wiki/Amazon_(company)), also says that "*We try to create teams that are no larger than can be fed by two pizzas*", which I guess can't feed more than 8 or 9 people.

A more accurate answer depends on how the team operates. Teams at big tech, for example, are responsible for innovation, keeping the lights on, on-call processes, among other responsibilities. By the way, those teams are usually [not running the Scrum framework to manage projects](https://newsletter.pragmaticengineer.com/p/project-management-in-tech) anyway.

The truth is, this question has been puzzling me for a while. I feel I've been in both extremes of this *dilemma*: Small teams that lack skills and are highly impacted by vacation, on-call, sick leave, etc.; and big teams that get too complex to manage, loose focus easier, and don't adapt fast. Both usually don't perform as expected.

Being in the EM's seat, having a small team impels you to act hands on with your engineers, whereas with a big team you can't properly support all engineers the way you wish. Neither helps your career development as an Engineering Manager.

In his book [An Elegant Puzzle](https://www.amazon.com.br/gp/product/B07QYCHJ7V), [Will Larson](https://lethain.com/) offers, from his experience, a playbook on sizing teams at big tech, which I feel is well aligned with my perceptions.

From his playbook we can get valuable insights:

1. Managers should support 6 to 8 engineers
	- Those who supports fewer than 4 engineers are hands on Tech Lead Mangers (TLMs)
	- Those who supports more than 8 engineers, typically act as **coaches** and **safety nets for problems**
2. Managers of managers should support 4 to 6 managers
	- Managers supporting fewer than 4 managers should be in a period of active learning (Ramp up)
	- Coaches: Supporting more than 6 managers leaves you functioning purely as a problem-solving coach
3. On-call rotations want 8 engineers
4. Small teams (fewer than four members) are not considered teams

This is a simple and straightforward set of principles that can guide the way we organize teams effectively.
💡 Private IP resolution service
Tags: startup, saas, idea, networking
Published: 2023-01-04 11:59:38

Here's an Startup/SaaS idea you might like to try executing on:

## 🌎 Private IP resolution service

Finding out your public IP is a funny fundamental problem on the internet -- turns out one of the easiest practical ways is to actually just ask some other device outside the network!

Turns out it's actually quite taxing to run this service (despite it's relative simplicity), and [so many people used it that it made HackerNews when they shut it down](https://news.ycombinator.com/item?id=27415537). The site was getting 30B requests a day -- I'll let you do the math on if what this could be worth if you can get 1% of people who need/use this functionality to become paying customers, and get them to pay some reasonable amount per 1000 requests.

There's some risk here of technical difficulty scaling up (30B is a lot of requests), but if you start small and make sure to build in profitability from the get go, sell to proper enterprise clients who may need SLAs, security features, or latency guarantees, there's lots of meat on this bone.

**NOTE** This might also be a fun project for trying out something like Cloudflare Workers or other gratuitous free tier functions-as-a-service providers.

This was originally posted @ [Unvalidated Ideas (Edition 4)](https://unvalidatedideas.com/editions/4)
Blockchain - Simply Explained
Tags: blockchain, etherium, bitcoin
Published: 2023-01-04 11:48:48

## Intro
A blockchain is a digital record of transactions. Each transaction is recorded on a block, and multiple blocks are linked together to form a chain. This chain is distributed, meaning that copies of it are stored on multiple computers (also known as "nodes") around the world.

## Features
One of the main features of a blockchain is that it is decentralized, meaning that it is not controlled by a single entity such as a bank or government. Instead, the network of computers that make up the blockchain is responsible for verifying and recording transactions. This makes it difficult for any one person or group to manipulate the record of transactions.

Another important feature of a blockchain is that it is transparent and secure. All transactions are recorded on the chain and can be viewed by anyone, but they are also encrypted, making it difficult for anyone to alter or tamper with the record of transactions.

## Blockchain behind the scenes
A blockchain is a decentralized, distributed database that stores a growing list of records, called blocks, which are linked and secured using cryptography. Each block typically contains a cryptographic hash of the previous block, a timestamp, and transaction data. By design, a blockchain is resistant to modification of the data.

Here's an example of how a blockchain works:

Imagine that Alice wants to send Bob some money over the internet. Alice initiates the transaction by sending a message to the network indicating that she wants to transfer a certain amount of money to Bob. This message, called a transaction, is broadcast to all the nodes in the network.

The nodes, or computers, in the network verify the transaction by checking that Alice has the necessary funds and that she has not already sent the money to someone else. Once the transaction is verified, it is added to a block, along with other transactions that have been verified around the same time.

The block is then cryptographically hashed, and the hash is added to the previous block in the chain, forming a chain of blocks, hence the name "blockchain." This chain of blocks is then distributed to all the nodes in the network.

The transaction is now complete and the money has been transferred from Alice to Bob. Because the transaction is recorded on multiple blocks in the chain and the chain is distributed across the network, it is very difficult to alter the transaction retroactively without the consensus of the network. This makes a blockchain an secure and transparent way to record transactions.

## Conclusion
Overall, a blockchain is a way of securely and transparently recording transactions digitally, without the need for a central authority.