teleren/devto huggingface dataset:
My jorney
Tags: beginners, programming, career, webdev
Published: 2023-01-25 21:42:05

Hello, my name is Roni Kriger and you don't know me... yet!

I am a 17 year old and I started my programming journey a couple of years ago with simple HTML and CSS courses. Multiple courses and a couple of years later I know a bit of python, java, html, css, javascript and AI coding with python but I am just starting. 

I am going to college next year majoring in CS. 

Any tips for an newbie programmer like myself?
Welcome Thread - v210
Tags: welcome
Published: 2023-01-25 21:20:04

---
title: Welcome Thread - v210
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![A 90's looking ad for the Internet. A kid in a backwards cap is surfing on their keyboard into outer space. We see a bunch of kids doing the same behind them and the world is in the background.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpm4kvdmydqrfl9ydgvz.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
AWS Cloud Quest: Highly Available Web Applications Study Note
Tags: aws, cloud
Published: 2023-01-25 21:19:44

This is the DIY challenge of the Highly Available Web Applications task in AWS Cloud Quest.

### DIY Steps:
1. Edit group details for Auto Scaling group `TravelAgencyWebServers`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ofzityhmp257qmee184.png)
2. Edit network for Auto Scaling group `TravelAgencyWebServers`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e26b6ehog9l30lmxmy8j.png)
SRE book notes: Practical Alerting
Tags: sre, books, alerting
Published: 2023-01-25 21:06:10

These are the notes from [Chapter 10: Practical Alerting](https://sre.google/sre-book/practical-alerting/) from the book [Site Reliability Engineering, How Google Runs Production Systems](https://sre.google/sre-book/table-of-contents/).

This is a post of a series. The previous post can be seen here:

{% embed https://dev.to/bitmaybewise/sre-book-notes-practices-3lkh %}

This post is rather short, as the chapter is mostly about how Borgmon is used within Google as a tool for monitoring and alerts. Borgmon is a monitoring system similar to Prometheus, or should I say the inverse since Prometheus was born taking inspiration from Borgmon.

---

The most interesting part of this chapter comes from the section Storage in the Time-Series Arena, where it gives a visual explanation of how a time-series database work under the hood.

> a time-series is conceptually a one-dimensional matrix of numbers, progressing through time. As you add permutations of labels to this time-series, the matrix becomes multidimensional.

> ![A time-series for errors labeled by the original host each was collected from](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7bgiqhox2caw38xqs3d.jpg)

It’s super interesting! The content here is valuable to have an overview of how time-series databases work under the hood and their trade-offs. It can be read as an independent chapter without suffering from a lack of context.

I would like to dive more into the topic, but it would derail the purpose of this post. Hopefully, in the near future, I can come back to write about it.

---

> Rather than requiring management of many individual components, a large system should be designed to aggregate signals and prune outliers. We need monitoring systems that allow us to alert for high-level service objectives, but retain the granularity to inspect individual components as needed.

---

> Ensuring that the cost of maintenance scales sublinearly with the size of the service is key to making monitoring (and all sustaining operations work) maintainable.

---

If you liked this post, consider subscribing to my newsletter [Bit Maybe Wise](http://bitmaybewise.com/).

You can also follow me on [Twitter](https://twitter.com/bitmaybewise) and [Mastodon](https://mastodon.online/@bitmaybewise).

---

Photo by [Kevin Grieve](https://unsplash.com/es/@grievek1610begur) on Unsplash
How to create a Conference with Clark Sell
Tags: webdev, javascript, beginners, podcast
Published: 2023-01-25 20:53:02


Original: https://codingcat.dev/podcast/3-2-How-to-create-a-Conference-with-Clark-Sell

{% youtube https://youtu.be/c4bxDsdyq2Q %}

## Questions

1. Can you tell us more about yourself?
2. What made you want to start a conference?
3. One of the things that makes your conference unique is the family friendly aspect, with activities for kids. Where did that idea come from?
4. How did the first conference go?
5. How did you start getting sponsors?
6. What happens when tickets don’t sell?
7. What pieces go into running a successful conference?
8. How do others get involved or submit a talk?

Clark thoughts ( In no order )

* THAT Pillars, Mission, Vision
* THAT Online vs THAT Conference
* IRL vs Online
* Why in person matters
* 4 Pillars of community. Members, Contributors, Sponsors, Vanguards
* User Groups are dying
* How to speak, why to speak, what to do at a conference
* Give, Give, Give, Get
* Supporting one another.
* Where have I failed as an organizer?
* What people don’t realize about a conference 
  * Contracts
  * Costs
  * Business
* Invest in yourself by compounding your learning time. Alex Hormozi
5 Tips to Improve Icon Usage
Tags: icons, ux, uiweekly, webdev
Published: 2023-01-25 20:33:52

**1. Be Consistent**
Consistency thought the whole interface is the key principle, providing design usability. Consistency of icons is much easier to achieve, if you use one icon package for the interface.

**2. Make It Simple**
Usability, beauty, clarity and legibility lie in simplicity. Try to choose not complex icons with various colors. Be sure that icons are easy to recognize and memorize.

**3. Scalability**
The icons should be recognizable also in smaller sizes. Test their scalability to be sure that your design will fit all devices and sizes.

**4. Size & Hit Target**
The most usual size of system icons is 24 x 24dp (I would not recommend to make smaller than 20 x 20dp). However, you should think about the target size, which should take at least 48 x 48dp on mobile devices. Don't forget to check if all icons have the same padding!

**5. Explain Icons**
There are some cases when users just can't understand the meaning of the icon on the first try. In these cases, I would just use labels to explain them. The bright example is the bottom navigation.

I will do a video to showcase this on [My Channel](youtube.com/@wilcrat). Follow me and wait for it.
Dockerized Wagtail 4 + NuxtJS 3 + Graphene 3 + Vuetify 3
Tags: wagtail, nuxt, webdev, django
Published: 2023-01-25 19:30:03

I haven't found any detailed HOWTO or ready repository so I've cooked this all together myself with some explanations of use in README.md and sample page using Vuetify with GraphQL fetch test:
- https://github.com/ordigital/wagtail_nuxt

For now it works as a developement environment but I'm planning to add some instructions for production soon.

Since local `backend` and `frontend` directories are bind to docker containers, it's possible to make changes with live preview!

Enjoy!
TIL: diff-so-fancy; and some funky git config
Tags: git, diff, shell
Published: 2023-01-25 19:12:13

I just discovered [`diff-so-fancy`](https://github.com/so-fancy/diff-so-fancy), and very nice it is too. I immediately added it to my standard git config, which is semi-automatically installed on every machine I use. However, I've not (yet) installed `diff-so-fancy` on all the machines I use, and for those platforms for which it's not packaged I probably won't bother installing it from source.

But if I just follow the author's instructions which amount to adding this to my `~/.gitconfig`:

```
[core]
	pager = "diff-so-fancy | less --tabs=4 -RFX"
```

then `git diff` will break:

```
$ git diff HEAD^
diff-so-fancy | less --tabs=4 -RFX: diff-so-fancy: command not found
```

but there's an easy fix! Whatever is in `pager` is just shell code, so this works:

```
[core]
	pager = "if [ ! -z \"$(which diff-so-fancy)\" ]; then diff-so-fancy | less --tabs=4 -RFX; else less; fi"
```

The output from `git diff` is piped into that little script. If `diff-so-fancy` is installed (ie if `"$(which diff-so-fancy)"` is not zero-length) then it does exactly what `diff-so-fancy`'s author suggests. Otherwise, if `diff-so-fancy` isn't installed, just run `less`.
LeetCode #118 Pascal's Triangle with JavaScript
Tags: javascript, algorithms, leetcode
Published: 2023-01-25 19:10:56

Solution to LeetCode's [118. Pascal's Triangle] (https://leetcode.com/problems/pascals-triangle) with JavaScript.

## Solution
```js
/**
 * @param {number} numRows
 * @return {number[][]}
 */
const generate = (numRows) => {
  let res = [];
  for (i = 0; i < numRows; i++) {
    res.push([]);
    for (j = 0; j <= i; j++) {
      if (j === 0 || j === i) {
        res[i][j] = 1;
      } else {
        res[i][j] = res[i - 1][j - 1] + res[i - 1][j];
      }
    }
  }
  return res;
};
```
- Time complexity: O(n^2)
- Space complexity: O(n^2)
Feedback on my portfolio - 2
Tags: webdev, beginners, programming, css
Published: 2023-01-25 19:04:31

Hi! I’m VulcanWM, a 13 year old full-stack developer from the UK.

---

So [after 8 months](https://dev.to/vulcanwm/give-feedback-for-my-portfolio-2gaa) I decided to redesign my portfolio.
I have definitely improved in my CSS in the last 8 months, but there is still a lot I could improve on.
Once again, can you rate it out of 10, and tell me how I can make it look better.

---

Here is my portfolio link: 
https://vulcanwm.is-a.dev

---

I used Python for the backend (signing up for the newsletter functions) and used HTML, CSS, JS for the frontend.

---

Email me @ vulcanwmemail@gmail.com if you want to talk to me about anything.
My First Mobile Game: Falling Square is Officially Out on App Store and Play Store
Tags: programming, opensource, mobile, gamedev
Published: 2023-01-25 19:00:54

I am excited to announce that my first mobile game, Falling Square, is officially out on the [App Store](https://apps.apple.com/us/app/falling-square-game/id1665452389) and [Play Store](https://play.google.com/store/apps/details?id=fr.emilienleroy.fallingsquare&hl=fr&gl=US)! Falling Square is a fun and challenging game that is easy to pick up and play, but difficult to master.

![Falling Square](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te2gib5gnvklvlgykpr2.gif)

In Falling Square, the goal is to touch the square before it leaves the screen. The game starts with a single square falling from the top of the screen, and the player must tap the square before it reaches the bottom of the screen. As the player progresses through the game, more squares will fall at a faster pace, making the game more challenging.

The game also features a life system, where the player starts with three lives. If the player misses a square, they will lose a life. If the player loses all their lives, it's game over. The game features simple yet challenging gameplay, colorful graphics, and a catchy soundtrack. The game is available for free on both the [App Store](https://apps.apple.com/us/app/falling-square-game/id1665452389) and [Play Store](https://play.google.com/store/apps/details?id=fr.emilienleroy.fallingsquare&hl=fr&gl=US).

Overall, Falling Square is a fun and addictive game that is perfect for anyone looking for a new mobile game to play. I hope you enjoy it as much as I enjoyed creating it!

Links:
- [App Store](https://apps.apple.com/us/app/falling-square-game/id1665452389)
- [Play Store](https://play.google.com/store/apps/details?id=fr.emilienleroy.fallingsquare&hl=fr&gl=US)
- [Github](https://github.com/EmilienLeroy/FallingSquare)
Most Common Five TypeScript Errors
Tags: typescript, commonerrors, javascript, troubleshooting
Published: 2023-01-25 18:49:23


![Common TypeScript Errors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eftndlamv7x7s3zbc6zx.png)

TypeScript is a powerful open-source programming language that is a superset of JavaScript. It adds optional static typing, class-based object-oriented programming, and other features to JavaScript, making it a reliable language for large-scale software development. However, like any programming language, TypeScript is not without its errors. In this article, we will discuss some of the most common TypeScript errors and how to fix them to help developers write reliable code.

## “Cannot find module” error
This occurs when TypeScript is **unable to find a module that has been imported in the code**. This can happen when the module is not installed, or the path to the module is incorrect. To fix this error, ensure that the module is installed and that the path to the module is correct.

## “Cannot find name” error
This occurs when TypeScript is **unable to find a variable or function that has been defined in the code**. This can happen when the variable or function is not properly imported or when there is a typo in the variable or function name. To fix this error, ensure that the variable or function is properly imported and that the name is spelled correctly.

## “Type ‘x’ is not assignable to type ‘y'” error
This error, occurs when TypeScript detects that **a variable is being assigned a value that is not of the correct type**. This can happen when a variable is defined with a specific type but is later assigned a value that is of a different type. To fix this error, ensure that the variable is being assigned a value of the correct type.

## “Property ‘x’ does not exist on type ‘y'” error
This error occurs when TypeScript detects that **a property is being accessed on an object that does not have that property**. This can happen when an object is being accessed with the wrong type, or when the property is not defined on the object. To fix this error, ensure that the object is of the correct type and that the property is defined on that object.

## “Argument of type ‘x’ is not assignable to parameter of type ‘y'” error
This occurs when TypeScript detects that **a function is being called with an argument that is not of the correct type**. This can happen when a function is defined with a specific type for its parameters but is later called with arguments of a different type. To fix this error, ensure that the function is being called with arguments of the correct type.

---
[Check out my website for more...](https://cagkanmert.com)
Using the react-query library
Tags: webdev, javascript, beginners, tutorial
Published: 2023-01-25 18:01:25


Here is an example of using the `react-query` library to handle API calls in a React application:

Install the react-query library:

```JavaScript 
npm install react-query

```
Wrap your application with the `QueryClient` provider:

```JavaScript 
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* Your application components here */}
    </QueryClientProvider>
  );
}

```
Use the `useQuery` Hook to fetch data in your component:


```JavaScript 
import { useQuery } from 'react-query';

function Example() {
  const { data, status } = useQuery('data', () => axios.get('https://api.example.com/data'));

  if (status === 'loading') return <div>Loading...</div>;
  if (status === 'error') return <div>Error</div>;

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

```

You can also pass options to the `useQuery` Hook to customize the behavior of the query:

```JavaScript 
const { data, status } = useQuery('data', () => axios.get('https://api.example.com/data'), {
  retry: 3,
  retryDelay: 1000,
  stale

```

Time: 60000,
});

```JavaScript 

In this example, the `useQuery` Hook takes 3 arguments: the key of the query, 
the function that returns the data, 
and the options. The key is used to identify the query and determine if it should be refetched or not. 
The function that returns the data can be a promise or a callback. 

The options are used to customize the behavior of the query, 
such as retrying the request on failure, or setting a stale time after which the data should be refetched.

It is important to note that `react-query` provides a lot of features such as caching, refetching, pagination, 
and more that help you to handle the API requests easily.

Please note that in this example, `https://api.example.com/data` should be replaced with the actual 
API endpoint you want to fetch data from.

```
️Appwrite + Gitpod: One Click Setup
Published: 2023-01-25 18:00:00


Working with Docker gives developers the ability to develop and deploy applications of all types locally without adding dependencies and binaries to their local development environment. Using Docker is used throughout the development lifecycle for fast, easy, and portable application development.

Appwrite uses Docker to make spinning up multiple services as quickly as possible in a self-hosted environment, but we’re always looking at ways to give developers who are less familiar with Docker ways to try Appwrite. This is where Gitpod comes in. Gitpod is one way to combine the power of Docker and Appwrite together to get started quickly. This post shows you how to use Appwrite and Gitpod together to spin up a REST API with database access, authentication, storage, and more without installing anything on your local computer.

Gitpod is a platform that helps you spin up fresh, automated developer environments for each task, in the cloud, in seconds. The vision of Gitpod is to remove all friction from the developer experience & bring back joy and speed to developers' workflows.

The goal of Appwrite is to make getting started and scaling with application development as quickly as possible. Traditionally, you would need to install Docker on your local machine to run Appwrite. Now with Appwrite and Gitpod, you can spin up Appwrite instances for multiple projects with a couple of steps!

![Appwrite in Gitpod environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bys3ogjqx4se9f34hgah.png)

We’ve set up a template repo with Gitpod and Appwrite together. You can start a new developer environment with this link:

https://gitpod.io/#https://github.com/appwrite/integration-for-gitpod

You can also check out our demo application built with Gitpod, Appwrite, and Svelte

https://github.com/appwrite/demo-todo-with-svelte

Just click the “Open in Gitpod” button, log in to GitHub and you’ll be up and running! You can also fork the repo and customize it even further! 👏

We look forward to integrating more with Gitpod in the future! Check out the [Gitpod homepage](https://www.gitpod.io) for more information and new development environment templates. 

---

## Learn More

🚀 [Getting Started Tutorial](https://appwrite.io/docs/getting-started-for-web)
🚀 [Appwrite GitHub](https://github.com/appwrite/appwrite)
📜 [Appwrite Docs](https://appwrite.io/docs)
💬 [Discord Community](https://discord.gg/appwrite)

If you liked this, click the :heart: so other people will see it. Follow [Alex Patterson](https://twitter.com/codercatdev) and [Appwrite](https://twitter.com/appwrite) on Twitter for more updates!
7- Upload Files in Flask
Tags: flask, python, webdev, programming
Published: 2023-01-24 08:21:10

--- series: Flask a Python web framework ---

Uploading files in Flask is very simple.

Start with creating **upload.html** file using "enctype=multipart/form-data":

```css
<html>
    <body>

        <form action = "http://localhost:5000/uploader" method = "POST"
            enctype = "multipart/form-data">
            <input type = "file" name = "file" />
            <input type = 'submit'/>
        </form>
    </body>
</html>
```

Now create **upload.py** file using "GET" and "POST" methods and return "Upload succeeded":

```python
from flask import Flask, render_template, request
from werkzeug.utils import secure_filename
app = Flask(__name__)


@app.route('/upload')
def upload():
    return render_template('upload.html')

@app.route('/uploader', methods=["GET", "POST"])
def uploader():
    if request.method == 'POST':
        f = request.files['file']
        f.save(secure_filename(f.filename))
        return ‘Upload succeeded.’
    else:
        return render_template('upload.html')

if __name__ == "__main__":
	app.run(debug=True)
```

Execute the Python script with:

python [upload.py](http://upload.py)

In your web brother go to:

[http://localhost:5000/uploader](http://localhost:5000/uploader)

The following page should be opened:


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



Click on “Choose file” to select your file.

Then click on the “Submit” button.

You should see: “***Upload succeeded***”

<p>* If you like the content, please <a target="_blank" href="https://www.youtube.com/channel/UCpbWlHEqBSnJb6i4UemXQpA?sub_confirmation=1">SUBSCRIBE</a> to my channel for the future content</p>
'validate' vs. 'validates'
Tags: ruby
Published: 2023-01-25 17:29:55


Validate let's you create your own validates. Example:

--

validate :users_cant_follow_themselves

  def users_cant_follow_themselves
    if sender_id == recipient_id
      errors.add(:sender_id, "can't follow themselves")
    end

--

Validates - define a table column and then choose from limited options to define the validation. Example:

--

validates :recipient_id, uniqueness: { scope: :sender_id, message: "already requested" }
The 'initialize' method
Tags: ruby, initialize
Published: 2023-01-25 17:27:10

The 'initialize' method is a special method that gets called automatically when an object is created from a class. It is used to set the initial state of the object. The initialize method is defined within the class definition and is typically used to accept and set attributes of the object.

For example, a class Person might have an initialize method that takes in a name and age, and sets those as attributes of the object:

--

class Person
  def initialize(name, age)
    @name = name
    @age = age
  end
end

person = Person.new("John", 30)
puts person.inspect

--

In this example, when Person.new("John", 30) is called, it automatically calls the initialize method, which sets @name to "John" and @age to 30. The inspect method is called on the object, which will display the instance variables and their values.
JSTools Weekly - 2023#3
Tags: javascript, typescript, node, news
Published: 2023-01-25 17:24:54

The latest issues of our weekly newsletter called [JSTools Weekly](https://jstools.substack.com/) just released.

### ⭐TOP new javascript releases in this issue:

![TOP new javascript releases in this issue:](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cby4i1vxlihksvry706a.png)

[See more new javascript releases
](https://jstools.substack.com/p/2023-topjstools-3)

### 🔥HOT javascript tools in this issue:

![HOT javascript tools in this issue:](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjyogiw28cpsswghyogx.png)

[See more hot javascript tools](https://jstools.substack.com/p/2023-hotjstools-3)


### ✨NEW javascript tools in this issue:

![NEW javascript tools in this issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hen2gpx0pkkv4ppvkfi3.png)

[See more new javascript tools
](https://jstools.substack.com/p/2023-newjstools-3)
Except & only methods after using scaffold
Tags: ruby, scaffold
Published: 2023-01-25 17:23:33

You can decide which pages you want to generate after using scaffold using the following methods in the routes file:

resources :follow_requests, except: [:index, :show, :new, :edit]
# generates all pages except index, show, new, and edit.

resources :likes, only: [:create, :destroy]
# generates only create and destroy