teleren/devto huggingface dataset:
5 CSS authors that I recommend reading
Tags: css, programming, webdev, beginners
Published: 2023-04-02 19:25:38

This time is really awesome because we have a lot of resources that help us to learn CSS. Most likely everyone has a list of favorite CSS authors. So I can't miss a chance to share my list of 4 CSS authors that must be read in my opinion. Plus, you will meet an unknown newbie.

Like I said, there are plenty of experts who share knowledge. It's why the selection of authors was a hard task and I had to use the following requirements:

- the author should publish regularly at least one post per month;
- posts should be accessible for easy finding without mixing with other topics.

I hope you'll enjoy!

## Kevin Powell 
Kevin's Youtube channel is the best place where you can find new CSS things. Kevin has perfect teaching skills. It's why his video is simple to understand and interesting to watch it.

https://www.youtube.com/kevinpowell

## Manuel Matuzovic 
Manuel also writes about new CSS things like Kevin. So If you like reading more than watching then Manuel's blog is the best alternative to Kevin's Youtube video.

https://www.matuzo.at

## Temani Afif
Temani is focused on writing tutorials with deep dive into the visual part of CSS. His tutorials with detailed description help readers to repeat the creation process of animations step by step.

https://css-articles.com

## Ahmad Shadeed
Ahmad created the blog that is an indisputable valuable resource if you don't have enough practice with CSS. You will find a lot of practical cases that are explained in detail.

https://ishadeed.com/articles/

## The unknown author
The unknown author is me 😄 Sure, I'm not wanting to compare myself with CSS experts but I too contribute my 5 cents😎 

I write short 230 letters CSS tips with graphics that help people to find mistakes in my opinion and fix them. So if you don't have time to read articles or watch a video you can try to check my content out.  

https://cssisntmagic.substack.com/archive
How to Generate a Quick Node.js Project with TypeScript.
Tags: node, typescript, javascript
Published: 2023-04-02 19:31:22


Photo by <a href="https://unsplash.com/@blakeconnally?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Blake Connally</a> on <a href="https://unsplash.com/photos/B3l0g6HLxr8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

If you're a developer, you know that starting a new project can be a daunting task. Setting up your development environment, installing the necessary packages, configuring the build tools, and more can take a lot of time and effort. Fortunately, TypeScript makes it easy to create a new Node project without all the hassle. In this post, we'll walk you through the steps to generate a quick Node project with TypeScript.

Here are the steps you need to follow:

Step 1: Install Node.js and npm if you haven't done it yet.

Step 2: Open a terminal window and navigate to the folder where you want to create your project.

Step 3: Run the following command to create a new folder for your project:

```
    mkdir my-project && cd my-project
```

Step 4: Initialize npm for your project using the following command:

```
    npm init -y
```

Step 5: Install the necessary dependencies for a TypeScript project:

```
    npm install --save-dev typescript ts-node @types/node
```

Step 6: Create a TypeScript configuration file named `tsconfig.json` in your project's root directory with the following content:

```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
```

Step 7: Create a folder named `src` in the root directory of your project, and create a TypeScript file named `index.ts` inside it:

```
    mkdir src && touch src/index.ts // linux
    mkdir src ;; New-Item -Type File src/index.ts // windows
```

Step 8: Open the `index.ts` file in your favorite code editor and write some TypeScript code, for example:

```typescript
const message: string = 'Hello, TypeScript!';
console.log(message);
```

Step 9: In your `package.json` file, add a new script to compile and run your TypeScript code:

```json
{
  "scripts": {
    "start": "ts-node src/index.ts",
    "build": "tsc"
  }
}
```

Step 10: Finally, run the following command to compile and run your TypeScript code:

```
npm run start
```

This will compile your TypeScript code into JavaScript and run it using `ts-node`. You can also run the `build` script to compile your code and generate JavaScript files in the `dist` folder:

```
npm run build
```


## Thanks and have a great day ahead!


Don't forget to give this post a heart if you found it useful. It helps others discover helpful posts like this one.
How(and why) to commit.
Tags: webdev, git, github, beginners
Published: 2023-04-02 19:28:09

Commiting is an important topic in web development. But a lot of beginners are curious: _What should I commit? and how often should i commit? or how to commit?_
The answer is simple. You should commit everything, every small chage you did - you commit.
**_But why?_**
Imagine you're working on a project 8 hours a day, you've just finished your work and then all your files got corrupted. You've lost all your work! But not if you commit everything - thats why.
To commit our work we use _Git._

**When should I start using git?**
Most of developers say: 

> You should learn git after javascript

But in my opinion: You should start either after css or as you start learning js. 

**How do I get git?**
it's easy! just download git on your pc from [here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git).

**How to use git?**

If you want to start using git in your current project you have to use the command `git init`. after that your local git repository is active and running. The next step is to connect to a remote repository on Github, to accomplish that you firstly need to create a github repository and then connect to it. use the command `git remote add origin [link to your repository]`.
Now your git repo is connected to your github repo.

**How to commit?**
Let's say you've just finished some changes. To commit them use the commands below:

```
git add .
git commit -m "[your commit message]"
git push -u origin
```
note: if you get this error mesage(_error: failed to push some refs to [repo]
hint: Updates were rejected because the remote contains work that you do_) after git push, use the command `git push -f origin` to forcefully push your work on the Github repo.

after that you can refresh your github and your files will be there!

Thank you for reading. Happy coding!
Create a Basic Framework with Express (Part 1.1)
Tags: tutorial, express, errors, node
Published: 2023-04-02 18:57:54

In [Part 1](https://dev.to/devlogbook/create-a-basic-framework-with-express-part-1-4odd), error handling was created. Let's make it easier to throw errors.
Instead of
  ```js
let error = new Error('This is a major issue!!')
error.statusCode = 500
throw error
  ```
We will make it something like this
  ```js
throw new ServerError({ message: 'This is a major issue!!' })
  ```

1. Create a new folder **exceptions**
2. Create **ServerError.js** in the exceptions folder

    ```js
  class ServerError extends Error {
      constructor(resource) {
        super()
        this.name = this.constructor.name // good practice
        this.statusCode = 500
        this.message = resource ? resource.message : 'Server Error'
      }
  }
  module.exports = {
      ServerError
  }
    ```

3. Edit **index.js**, on how to use it

    ```js
    // index.js
    ...
    const { ServerError } = require('./exceptions/ServerError')
    ...
    app.get('/error', async (req, res, next) => {
        try {
            throw new ServerError()
            // or
           // throw new ServerError({ message: 'A huge mistake happened!' })
        } catch (error) {
            return next(error)
        }
    })
    ...
    ```

4. Now go to `localhost:3000/error` to see the 500 server error
Is AI Creating Dangerous Fake Images? Our Image Classifier API Has the Solution!
Tags: generativeai, ai, news, api
Published: 2023-04-02 18:38:57

Are you tired of scrolling through social media and wondering whether that image is real or just a product of some clever AI algorithm? Do you sometimes find yourself getting fooled by fake news stories that feature convincing but entirely fabricated images?

Well, we have some good news for you - our artificial image classifier API is here to help. With our AI-powered tool, you can easily determine whether an image is real or generated by AI, saving you from being fooled by those sneaky digital creations.

We developed this tool because we believe that misinformation and manipulation can have serious consequences, and it's important to have tools that help identify and prevent the spread of fake images. By providing an easy and reliable way to distinguish between real and AI-generated images, we hope to help individuals and businesses make informed decisions based on accurate information.

Now, we have to be honest with you - our artificial image classifier API is not perfect, and it still has room for improvement. In fact, we recently discovered that its accuracy was lacking when it came to classifying some mid-journey images.

But don't worry, we're already hard at work training a new and improved version of our API that will provide even better accuracy. We believe that with the right training and development, we can continue to improve our image classifier API and help individuals and businesses better identify whether an image is real or generated by AI.

We want to be transparent about our API's limitations and our efforts to address them, because we believe that honesty and openness are essential for building trust with our users. We're committed to making our image classifier API the best it can be, and we hope that you'll join us on this journey.

So, if you're ready to join the fight against fake news and AI-generated images, try out our artificial image classifier API today. We're confident that it will help you make more informed decisions based on accurate information, and we're excited to continue improving it for the future.

Github Wiki : https://github.com/privacy-ai/unsafe-or-fake-image-classifier/wiki/Fake-Image-Classifier

Send us your feedback at contactus@skymel.com
Graph Database Security Best Practices: Data Protection, Access Control, and Auditing
Published: 2023-04-02 17:43:00

Graph databases are increasingly being used to store and manage sensitive data, such as financial information and personal data. As with any database, it's important to ensure that the data stored in a graph database is secure and protected from unauthorized access. In this post, we'll explore some best practices for securing graph databases, including data protection, access control, and auditing.

## Data Protection Best Practices
Data protection is a critical aspect of securing graph databases. To ensure that your data is protected, it's important to follow these best practices:

- **Encrypt sensitive data:** Encrypt sensitive data, such as financial information and personal data, to prevent unauthorized access.
- **Use secure connections:** Use secure connections, such as HTTPS, to encrypt data in transit.
- **Secure backups:** Secure backups by encrypting them and storing them in a secure location.

## Access Control Best Practices
Access control is another important aspect of securing graph databases. To control who can access your data, it's important to follow these best practices:

- **Implement role-based access control:** Implement role-based access control to restrict access to data based on user roles and permissions.
- **Use strong authentication:** Use strong authentication, such as multi-factor authentication, to prevent unauthorized access.
- **Monitor access:** Monitor access to the database to detect and prevent unauthorized access.

## Auditing Best Practices
Auditing is a critical aspect of ensuring the security of a graph database. By auditing database activity, you can detect and respond to potential security threats. Here are some best practices for auditing a graph database:

- **Monitor database activity:** Monitor database activity to detect potential security threats.
- **Log database activity:** Log database activity to provide a record of database activity for auditing purposes.
- **Regularly review logs:** Regularly review database logs to detect potential security threats and respond to them in a timely manner.

## Conclusion
In summary, securing a graph database requires careful consideration of several best practices, including data protection, access control, and auditing. By following these best practices, you can ensure that your data is secure and protected from unauthorized access.

Check out Apache AGE, an extension for PostgreSQL that lets you build graph databases using SQL and Cypher language on top of relational database.

- [https://age.apache.org/](https://age.apache.org/)
- [https://github.com/apache/age](https://github.com/apache/age)
Python 🐍 challenge_25⚔️
Tags: python, challenge, beginners, webdev
Published: 2023-04-02 18:29:01

## Valid Braces

-  Write a function that takes a string of braces, and determines if the order of the braces is valid. 
- It should return true if the string is valid, and false if it's invalid.
- All input strings will be nonempty, and will only consist of parentheses, brackets and curly braces: ()[]{}.
- What is considered Valid?
- A string of braces is considered valid if all braces are matched with the correct brace.


#### Examples:

```
    "(){}[]"   =>  True
    "([{}])"   =>  True
    "(}"       =>  False
    "[(])"     =>  False
    "[({})](]" =>  False
```

###### Task URL: [Link](https://www.codewars.com/kata/5277c8a221e209d3f6000b56)


## My Solution:

```
def validBraces(string):

	brackets = ['()', '{}', '[]']
	while any(x in string for x in brackets):
		for br in brackets:
			string = string.replace(br, '')
	return not string
```

## Another Solution:

```
def validBraces(string):

	brackets = ['()', '{}', '[]']
	while any(x in string for x in brackets):
		for br in brackets:
			string = string.replace(br, '')
	return not string
```


### Code Snapshot:


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


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



### Learn Python

######  Python top free courses from Coursera🐍💯🚀

🎥 {% youtube 2VRXU2H4q0c%}


### Connect with Me 😊

#### 🔗 Links

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mahmoud-el-kariouny-822719149/)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Mahmoud42275)
Project 2 - Week 3
Published: 2023-04-02 18:07:51

Since the last blog post, we have implemented: 
- an improved design for the search criteria drop box
- proper icons for badges as opposed to a placeholder img tags
- mapping in badges dynamically from preset list as opposed to a predetermined amount of objects hardcoded

Next up to work on/finish are:
- having icons work properly (likely just an issue with my updates not pushing to github properly)
- implementing primary and accent colors that work dynamically for each badge (likely through a reflexive attribute of some sort on the badge tag)
- having the author text field loading properly with the rest of the fields (not sure why but its staying to its default value from the constructor
- implement the "searching" or rather filtering of badges instead of mapping the entire list of badges in

User interaction pattern diagram:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bsvmubhb6a47zs3vdpd.png)

Real world micro-service use case(s):
- Microservices are typically preferable in cases where you want to aim for speed and scalability
- One example in which this helped was in Walmart in 2012 when high load caused a string of system issues during seasonal peaks of activity
- Walmart re-platformed core businesses tasks to microservices to help address this, their change resulted in: hardware costs dropping between 25-50%, 40% less power usage, prevented downtime during the aforementioned seasonal peaks, and improved integration with their mobile app resulting in more sales, and in turn, revenue.

Current preview:
![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1st5re9tpaybuzc5cclr.png)

The current Vercel deployment and code are viewable here:
- https://badges-list-p4cu1xn12-ethanxo.vercel.app/
- https://github.com/ethanxo/badges-list
Basics of Serving Static Sites from a Server
Tags: beginners, frontend, react, angular
Published: 2023-04-02 17:50:57

As a frontend developer, you may be excited about deploying your projects through various static deployment services like Vercel, GitHub Pages, Netlify, and more. While these services are excellent options for getting your static site online quickly, it's important to understand the basics of serving static sites from a server.

In this article, we'll take a closer look at the basics of serving static sites from a server, including the role of HTTP, different types of servers, and the advantages of serving static sites.

**What is a Server?**
First things first, let's define what we mean by a server. In the context of web development, a server is a computer or software program that stores and delivers web content. When a user requests a webpage or other online resource, the server retrieves the content and sends it back to the user's browser.

**How Static Sites are Served from a Server**
When a user requests a static site, the server simply retrieves the site's HTML, CSS, and JavaScript files and sends them back to the user's browser. Since static sites don't require server-side processing, they can be served quickly and efficiently.

**The Role of HTTP**
HTTP (Hypertext Transfer Protocol) is the protocol used to transfer web content between a server and a user's browser. When a user requests a static site, their browser sends an HTTP request to the server, which responds with an HTTP response containing the site's files. The files are then rendered in the user's browser, creating the final webpage.

**Types of Servers**
There are many different types of servers that can be used to serve static sites. Web servers like Apache and Nginx are popular choices, as are cloud services like AWS and Google Cloud. In addition, many static site generators like Jekyll and Hugo include built-in servers that can be used for development and testing.

**Advantages of Serving Static Sites**
Serving static sites from a server offers several advantages for frontend developers. First and foremost, static sites can be served quickly and efficiently, resulting in faster page load times for users. In addition, since static sites don't require server-side processing, server costs are typically lower than with dynamic sites. Finally, serving static sites can also reduce security risks, since there is no server-side code that can be exploited by attackers.

**Conclusion**
In conclusion, while static deployment services are great for quickly getting your static site online, understanding how static sites are served from a server can help you optimize your site for speed, efficiency, and security. By choosing a server option that works best for your needs, you can provide the best possible experience for your users. So the next time you deploy a static site, remember to take a moment to appreciate the powerful yet simple process that allows your site to be served to users around the world.
How To Write a Resume in 10 Steps
Tags: resume, cv, freshers, experienced
Published: 2023-04-02 17:27:51

Your resume is one of the most important tools you have in your job search. It's often the first thing that potential employers see, and it's your chance to make a great first impression. 
Read more about [Hobbies on a Resume for Freshers: How and What to Include?](https://ezresume.io/blog/hobbies-should-be-on-resume-for-freshers/)
But how do you write a resume that stands out? In this article, we'll give you 10 steps to follow to write a great resume.

Step 1: Choose the right format
There are several formats you can choose from, such as chronological, functional, or combination. Choose the one that best fits your experience and career goals.

Step 2: Choose the right font and size
Use a professional font, such as Arial or Times New Roman, and keep the font size between 10 and 12 points.

Step 3: Start with a strong summary
Write a brief summary at the top of your resume that highlights your key skills, experience, and achievements.

Step 4: Highlight your relevant experience
List your work experience in reverse chronological order, starting with your most recent job. Be sure to include relevant information such as job title, company name, dates of employment, and key responsibilities and accomplishments.

Step 5: Showcase your education and certifications
Include your education and any relevant certifications or training programs you have completed.

Step 6: Emphasize your skills
Create a separate section to list your key skills, such as communication, leadership, or technical skills.

Step 7: Quantify your achievements
Use numbers and statistics to quantify your achievements, such as the percentage increase in sales you achieved, or the number of projects you completed on time and within budget.

Step 8: Tailor your resume to the job
Customize your resume for each job you apply for by highlighting the skills and experiences that are most relevant to the position.

Step 9: Use keywords
Use keywords from the job description to help your resume get past automated applicant tracking systems (ATS).

Step 10: Proofread and edit
Proofread your resume for errors in spelling, grammar, and punctuation. Have someone else read it as well to catch any mistakes you might have missed.

In conclusion, writing a great resume takes time and effort, but by following these 10 steps, you can create a resume that stands out and helps you land your dream job. Good luck!
FullyStacked
Tags: javascript
Published: 2023-04-02 17:26:15

---
title: FullyStacked
published: true
description: A new blog built on Astro
tags: JavaScript 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-04-02 17:24 +0000
---

I’ve started publishing over on my own blog at https://fullystacked.net 

Please add me to your RSS feed. I’ll be writing about CSS, Bun, new web platform features, and JavaScript.