teleren/devto huggingface dataset:
Git revert vs Git reset
Published: 2022-09-02 18:25:18

Both the **git revert** and **git reset** commands undo previous commits. But if you've already pushed your commit to a remote repository, it is recommended that you do not use **git reset** since it rewrites the history of commits. This can make working on a repository with other developers and maintaining a consistent history of commits very difficult.

Instead, it is better to use **git revert**, which undoes the changes made by a previous commit by creating an entirely new commit, all without altering the history of commits.
Migrating from Stylus/Pug to SASS
Tags: angular, stylus, pug, converter
Published: 2022-09-02 18:13:03

Hi Angular folks! here a late announcement of some packages released by Mynd that will help some projects in the transition to Angular 13+ due to the deprecation of Stylus.

## @myndpm/stylus2scss

This CLI utility convert styl files to scss and also updates their related Angular Components metadata. It allows to spread the conversion in different GIT commits to keep track of the history of the converted files.

It also includes the sass-migration tool to complete the process without additional steps, and some other customizable options that can be checked in the README file: https://www.npmjs.com/package/@myndpm/stylus2scss

The conversion would be as simple as running this in your repo:
```bash
npx @myndpm/stylus2scss --git
```

## @myndpm/pug2html

At Mynd we were using Pug since it was a fancy template engine that was quite aligned with Stylus, but after some years their tooling and support got quite behind and it was time to move to the default HTML templates.

This CLI utility convert pug content to html and also updates the Angular components metadata. It also possible to keep the GIT history or execute the process step by step with the provided --options documented in its README file: https://www.npmjs.com/package/@myndpm/pug2html

Also, running this utility would be as simple as:
```bash
npx @myndpm/pug2html --git
```

## Feedback

Enjoy! and please report any issue at our GitHub repo: https://github.com/myndpm/open-source
Tank Flow Simulation
Published: 2022-09-02 18:05:40

Here we use physics, mathematics, matlab functions like plot and fill to bring life into this image showing water flowing in and out of a tank. 
{% embed https://www.youtube.com/watch?v=4-f9ROjLkdE %}
The matlab code can be found [here](https://github.com/talk2laton/TankFlow-Simulation)
Modern React Data-Fetching with TypeScript, React-Query, and Zod
Tags: typescript, react, api, fetch
Published: 2022-09-02 17:53:16

While my current stack of choice is based on the fantastic [T3 Stack](https://github.com/t3-oss/create-t3-app) utilizing [tRPC](https://github.com/trpc/trpc), I'm also the lead frontend developer on a JavaScript React app created with [Create React App](https://create-react-app.dev) backed by a Rails API. As I port this app to TypeScript, I find myself yearning for the automatic type-safety that tRPC provides.

Luckily, there's a relatively straight-forward solution to the problem of interacting with untyped APIs in TypeScript-based React.

## The Building Blocks

The first piece of this puzzle is the incredible [React Query](https://tanstack.com/query/v4/docs/adapters/react-query). If you're not currently using React Query in your project you should immediately take a step back and ask yourself why. Data fetching has long been a contentious topic in React, and since the arrival of hooks, a lot of developers (myself included) have made the mistake of misusing `useEffect` or rolling our own data-fetching libraries. Much like rolling your own authentication system, this can bite you.

The second piece is [Zod](https://zod.dev). While there are a lot of validation libraries out there, Zod is the current frontrunner and you should be using it unless you _absolutely, positively_ have a reason to use something else. Zod's validation and ability to easily infer TypeScript types is going to be key to typing our untyped API.

## Putting It Together

The solution is surprisingly concise: Write a Zod validator for the API endpoint, use it to parse the response from the API, and get a typed result in React Query. Let's look at an example of this with a user information API endpoint:

```typescript
// Schema for what the API endpoint should be returning
const UserSchema = z.object({
  id: z.number(),
  email: z.string().email(),
  displayName: z.string().min(1),
  role: z.enum(['USER', 'ADMIN']),
});

// Optionally, if you want to export this type to pass around
// elsewhere, you can export it:
export type User = z.infer<typeof UserSchema>;

// Query the endpoint and parse the response with Zod schema,
// which will type the response for us
const query = useQuery(["user"], async () => {
  const response = await (await fetch('/me')).json();
  return UserSchema.parse(response);
});

query.data // will be typed
```

That's it! The resulting `query.data` will be typed as either the schema or `undefined` (since queries can fail). If the response from the API fails validation, you'll get an error which you can deal with in development or even catch in production with whatever exception logging tool you're using.

While this solution isn't as automatic as tRPC and requires you to write a bit of boilerplate, it does scale well and makes dealing with untyped API endpoints less painful in TypeScript.
Appwrite Community Report #21
Published: 2022-09-02 17:48:11

Hello from team Appwrite!👋


How has been your week? For us, it has been quite productive as we work towards more integrations and features! 👀

**TLDR;** This week we have a lot of new announcements, feature updates, and more! Stay tuned till the end! 😉

---

## 📢  What’s new 

- Appwrite just announced a special Vue.js sponsorship! Show us what you are building with Appwrtite and Vue! 😎
{% embed  https://medium.com/appwrite-io/appwrite-is-proud-to-become-the-special-sponsor-for-the-vue-js-project-c16e753a6dd7 %}

- New versions for [Appwrite’s Flutter and Dart SDKs are out now](https://twitter.com/appwrite/status/1565298830186250240?s=20&t=wU4WLh84T5kXZ2wksJ5O6A)!

- Here’s how React-native-permissions was built is being maintained {% embed https://twitter.com/appwrite/status/1565044545473110022?s=20&t=wU4WLh84T5kXZ2wksJ5O6A %} 
 
If that story resonates with you and you would like some support, Appwrite OSS Fund is still accepting [applications](https://appwrite.io/oss-fund)!

---


## ✅ Issues solved

Here’s to making Appwrite better everyday! Issues we have worked on this week:

- Looks like a new release is around the corner! 👀 Here’s a sneak peek:
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3745)

- Here’s how Queries V2 will be handled by Appwrite
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3689)
- Implementation of list queries V2 in multiple endpoints
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3702)
- Made UI changes for queries V2
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3742)
- UX improvements made on Function variables
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3634)
- Fixing CI/CD issues
🔗[Link to PR](https://github.com/utopia-php/domains/pull/17)

---

## ⚒️ What we’re currently working on

- Addition of MongoDb adapter 
- Preparation for Hacktoberfest is underway
- A whole new Appwrite version is around the corner! Brace yourself! 😉

---

## 🗣 Discussions

Let’s talk about Appwrite permissions
🔗[Join the discussion here](https://github.com/appwrite/appwrite/discussions/3612)

---

## 📘 Resources

- New versions for [Appwrite’s Flutter and Dart SDKs announced now](https://dev.to/appwrite/announcing-new-versions-for-appwrites-flutter-and-dart-sdks-4l5j)
- Learn all about Appwrite in 30 days! {% embed https://30days.appwrite.io/ %}
How to make responsive agency website using Html CSS JavaScript
Tags: css, javascript, beginners, tutorial
Published: 2022-09-02 17:40:39

{% youtube e-XVD_8zA20 %}

How to make responsive agency website using Html CSS JavaScript

This video will show you how to build a responsive agency website using html css javascript

[Github Repo](https://github.com/codewithsadee/solutry)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

🔗 Essential links
-----------------------------
[Download the starter file to practice](https://drive.google.com/file/d/1AjqR5_7oVHMwGC-p3LO7E-Ocg4Q4gQFD/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
4:07 - File structure
4:37 - Project initial
8:46 - Header
21:24 - Hero section
28:34 - Features section
34:37 - Service section
40:46 - Blog section
49:29 - Newsletter section
53:31 - Footer
1:08:33 - Go top button
1:12:23 - Media queries
1:32:11 - Deploy on Github

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
React Project Contest
Tags: challenge, react, beginners, sso
Published: 2022-09-02 17:34:19

Hey Community,

Ready for the contest? We are glad to invite you all to the 1st  competition: 

🏆** React Project Contest** 🏆

Duration: September - December 2022

In prizes: ₹40,000 every month


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

1. You have to use [Logify](https://logify.id) as login service in your project.
2. Project should be accessible online and in working condition.

**Helpful resources:**
https://logify.id/articles/react-logify-basic

To know more, visit:
https://logify.id/contest/
Using Variables with SASS Tutorial
Tags: productivity, programming, tutorial, beginners
Published: 2022-09-02 17:30:07

SASS effectively gives us a lot of the programmatic benefits of working with code, only now with the ability to apply it to stylesheets.

Over the next few posts we’ll be diving right into the features of SASS.

First up let’s introduce **variables**.

## Definition
Variables are a way to store information that you want to reuse throughout your stylesheet.

They allow us to store values for colors, fonts or really any CSS value that you want to reuse!

We use the `$` symbol when we wish to make something a variable.

### Example
In our SCSS, let’s define a color variable:
```scss
$color-primary: #ffff00; // Yellow
 
body {
  background-color: $color-primary;
}
```
This will of course, set our `background-color` to yellow. It’s that simple!

Note: You can use single line comments in Sass with `//`.

When we then run our compile, it’ll output the following CSS:
```css
body {
  color: #ffff00;
}
```
Note: We'll be covering the compilation process further on in this series. For now it’s good to know that when we save our code into `sass/main.scss`, it’ll automatically compile into the `css/style.css` file!

This becomes extremely powerful when working on large projects!

If you wish to make a change to a color used throughout your stylesheets, it’s much simpler to alter if the color is defined in one location as a single variable.

The alternative to changing the value of one variable defined at one location is finding and replacing every reference to the value you want to change. This is a much more tedious task, especially if you want to implement a quick change to test out a different color or font.

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)
VSCode Extension - TODO Tree
Tags: vscode, productivity, webdev, markdown
Published: 2022-09-02 17:06:00

I would like to highlight, recommend and dedicate this publication to the [TODO Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) extension.

[![TODO Tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/415zbad8yhhw2jr24zl8.png)](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

For me, is on top of my top 10 favorite extensions because of its versatility to create todos, notes, bookmarks, and even checklists.

No matter the software language, as long as you have commenting syntax you will be able to use the **TODO Tree**... but if you want to unleash its true potential, let's make some changes.

---

## Configurations

```json
{
  "todo-tree.general.showActivityBarBadge": true,
  "todo-tree.general.tags": ["NOTE", "TODO", "FIXME", "MARK", "[ ]", "[x]"],
  "todo-tree.highlights.defaultHighlight": {
    "type": "tag",
    "fontWeight": "bold",
    "foreground": "#000000",
    "opacity": 90
  },
  "todo-tree.highlights.customHighlight": {
    "NOTE": {
      "background": "#FFA500",
      "iconColour": "#FFA500",
      "icon": "file"
    },
    "TODO": {
      "background": "#FFD703",
      "iconColour": "#FFD703",
      "icon": "tasklist"
    },
    "FIXME": {
      "background": "#FF01FF",
      "iconColour": "#FF01FF",
      "icon": "bug"
    },
    "MARK": {
      "background": "#157EFB",
      "iconColour": "#157EFB",
      "icon": "tag"
    },
    "[ ]": {
      "background": "#ff000080",
      "iconColour": "#ff000080",
      "icon": "square"
    },
    "[x]": {
      "background": "#00ff0080",
      "iconColour": "#00ff0080",
      "icon": "square-fill"
    }
  },
}
```

It will give us a list of different available possibilities to use as tags.

![todo-tree example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0j4d41hx1r27mrkrg9bc.png)

### Create Tag

If those tags are not enough, you can create a lot more, using this example, and include them inside the `"todo-tree.highlights.customHighlight"` property.

```json
"HOT": {
  "background": "#f80b2180",
  "iconColour": "#f80b2180",
  "icon": "flame"
}
```

`icon` property is used to set a different icon in the tree view and Must be a valid [octicon](https://octicons.github.com).

---

## In Action

Now is ready to use. You can find the extension on the VSCode sidebar bar menu, and clicking it will open a tag explorer.

![Todo Tree in Action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ofbxhuvg75kfb71sgg3.png)

It has available different types of views, grouping, and filters.

![Views](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4exxz8si0ra2dhf90tja.gif)

And also, one of my favorites. The support on Markdown to create a task list with colors.

![Task List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjs4f12tbemxbn179ak1.png)

---

**That’s All Folks!
Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)
Руководство по процессу разработки локальной тестовой сети
Published: 2022-09-02 17:03:14

Это руководство описывает end-to-end процесс разработки в локальной тестовой сети.

> **CLI ИЗ ИСХОДНИКОВ, А НЕ С GITHUB**
> Это руководство некорректно, если вы используете `aptos` CLI из релиза на GitHub или из `cargo install`, только если вы собираете его самостоятельно из `aptos-core`, как описано ниже.

Пожалуйста, внимательно прочитайте это руководство. В этом руководстве рассматривается локальный метод разработки в тестнете. Этот метод не будет работать, если вы создаете в devnet.

## Запустите локальный тестнет из `aptos-core`

Выберите и зайдите в `aptos-core`:

```
git clone git@github.com:aptos-labs/aptos-core.git ~/aptos-core && cd ~/aptos-core
```
Запустите локальную тестовую сеть:

```
cargo run -p aptos -- node run-local-testnet --with-faucet --faucet-port 8081 --force-restart --assume-yes
```
Вы можете добавить параметр `--release` после `cargo run`, если хотите собрать релизную версию CLI для запуска локального тестнета.

Теперь вы запускаете локальную тестовую сеть, собранную из основы `aptos-core`.

## Typescript: Использование SDK из aptos-core
Важно: В этом методе разработки важно не использовать SDK из npmjs. Вместо этого вы должны использовать тот же SDK, из которого собран `aptos` CLI, что мы опишем ниже.

Это руководство предполагает, что вы выполнили предыдущий шаг по локальному тестированию. Мы также предполагаем, что у вас установлен `yarn`.

Сначала зайдите в `aptos-core` и соберите SDK:

```
cd ~/aptos-core/ecosystem/typescript/sdk
yarn install
yarn build
```
Создайте новый проект, если у вас его еще нет:

```
mkdir ~/project && cd ~/project
yarn init
```

Сделайте свой проект целевым для SDK из локального `aptos-core`:

```
yarn add ../aptos-core/ecosystem/typescript/sdk
```
Вы также можете использовать полный путь, например, `/home/daniel/aptos-core/ecosystem/typescript/sdk`.

Установите все:

```
yarn install
```
Теперь все готово! Вы должны увидеть в `package.json`, что ваш проект нацелен на локальное `aptos-core`:

```javascript
{
  "name": "project",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "aptos": "../a/core/ecosystem/typescript/sdk/"
  }
}
```
Таким образом, ваша локальная тестовая сеть и SDK, который вы используете, совпадают, что означает, что вы не увидите никаких проблем с совместимостью.

Теперь вы можете использовать модуль aptos в своем коде следующим образом:

```javascript
import { AptosClient, AptosAccount, FaucetClient } from "aptos";

const NODE_URL = "https://127.0.0.1:8080/v1";
const FAUCET_URL = "https://127.0.0.1:8081";

(async () => {
  const client = new AptosClient(NODE_URL);
  const faucetClient = new FaucetClient(NODE_URL, FAUCET_URL);
})();
```
**Примечание**: Обратите внимание, что этот код создает клиентов, которые общаются с вашим локальным testnet, а не devnet.
What beginner (and advanced) developers would like to read on blogs?
Tags: discuss, question, webdev
Published: 2022-09-02 16:11:59

Hey, everyone!

I want to know what you as a beginner who just started to learn to code or already started first job would love to read on some other developer’s blog?

I want to get my hand dirty with next.js and thought that I could create my personal website with blog in it, but I don’t want to have it empty and for motivation purposes, to write there, I want to know what you would read!

I am a frontend developer, I have been working professionally 4+ years, had some people telling me that I would be a great teacher, so this is part of why I want to start a little blog.
Stuff a coder should buy?
Tags: webdev, programming, help
Published: 2022-09-02 15:59:24

Got a suggestion for thing to help a programmer code faster?
Like keyboards software tool etc. 
Thanks.

—-EDIT—-
I should have listed some of the stuff that I already have. 
M1 MacBook Air. 
2018 Mac Mini. 
AMD Ryzen build running Linux Mint. 
Three monitors (I think one big one would be better though). 
A sit/stand desk. 
An office chair that could use replacing. 
A Ducky One 2 tkl keyboard. 

Thanks for taking the time to offer your suggestions! I really appreciate it.
Massively spellcheck Markdown files with Linux and MacOS
Tags: markdown, jamstack, hugo, writing
Published: 2022-09-02 15:49:19


Today I've learned how to **spellcheck a batch of [Markdown](https://roneo.org/markdown/) files with [Aspell](https://en.wikipedia.org/wiki/GNU_Aspell), a free software spell checker supporting more than 90 different languages***

**This post was written for Debian and should work with any Linux flavour**: Ubuntu, Linux Mint, ArchLinux, etc.  
**MacOS** should also be [supported](https://formulae.brew.sh/formula/aspell), I didn't test it though.

### 1. Install aspell

Here with the english dictionnary:

```bash
sudo apt install aspell aspell-en
```

A list of available dictionnaries can be found on [gnu.org](https://ftp.gnu.org/gnu/aspell/dict/0index.html)

### 2. Open a terminal

### 3. Navigate to the root of your project

### 4. Run the following command:

```bash
grep -rlP 'title:' content/ | xargs -o -n1 sh -c 'aspell check "$@" --master=en_US --lang=en_US  --sug-mode=slow -x --mode=markdown < /dev/tty' whatever
```

(You may want to adjust `--master=en_US --lang=en_US`)

### 5. Browse the suggestions and apply with a single keystroke

Shortcuts and suggestions are shown at the bottom of the screen:


![A screenshot of Aspell spellchecker with Markdown files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhaxaohewioagu0xjs1t.png)


## References

- Original post: [Massively spellcheck Markdown files with Aspell](https://roneo.org/en/markdown-spellcheck-multiple-files-with-aspell/) on [roneo.org](https://roneo.org/en)
- Aspell's [presentation on Wikipedia](https://en.wikipedia.org/wiki/GNU_Aspell)
- This post was inspired by [vendelin.org](https://vendelin.org/geeky/hugo/spell-check-build-publish-hugo/)


*Supported languages: Arabic, Breton, Esperanto, Kurdi, Quechua, Tamil, Swahili, Yiddish, Zulu, see [the complete list](https://ftp.gnu.org/gnu/aspell/dict/0index.html)
User Geo Data in a Kubernetes cluster
Tags: aws, kubernetes, cloud, nginx
Published: 2022-09-02 15:45:03

At some point, we've faced a rather classic task - to determine the geo-data of our users (IP address, country, and city).

But since all our services/applications are running in a Kubernetes cluster on [Amazon EKS](https://aws.amazon.com/eks/) at [Cooper Pet Care](https://cooperpetcare.com), the IP addresses in the end applications are local addresses within the cluster. It is impossible to determine the real location of customers from them.

We conducted a research and tried to patch the main Nginx Ingress Controller but it was impossible. Maybe we didn’t pay enough attention to details, but another solution came to the rescue - to use the geo-data that AWS CloudFront can provide in the request headers.

Here is the approach we had:
```
Client → (request) → Route53 → Nginx Ingress Controller → (intra-cluster routing) → Application
```

And it became the following:
```
Client → (request) → Route53 → CloudFront Distribution → Network Load Balancer → Application
```

It is quite easy to reconfigure Amazon Route53 → CloudFront Distribution routing in the AWS interface. As for the application itself, it was necessary to update the Service (change its type and add a few annotations so that EKS understands how the service works).

Here is what we had:
```
kind: Service
metadata:
 name: my-service-name
 namespace: my-namespace
spec:
 type: ClusterIP
 ports:
  - port: 3000
   targetPort: 3000
```

Here is what it has become:
```
kind: Service
metadata:
 name: my-service-name
 annotations:
  service.beta.kubernetes.io/aws-load-balancer-type: "nlb"
  service.beta.kubernetes.io/aws-load-balancer-backend-protocol: "http"
  service.beta.kubernetes.io/aws-load-balancer-ssl-ports: "https"
  service.beta.kubernetes.io/aws-load-balancer-ssl-cert: "arn:aws:acm:..."
  service.beta.kubernetes.io/aws-load-balancer-proxy-protocol: "*"
spec:
 type: LoadBalancer
 ports:
  - name: http
   port: 80
   targetPort: 3000
  - name: https
   port: 443
   targetPort: 3000
```

Apart from it, for the new Load Balancer, we started using an annual SSL certificate issued by Amazon (its ARN is indicated in the aws-load-balancer-ssl-cert annotation) instead of LetsEncrypt certificates valid for 3 months.

You can easily add any additional headers you want to receive with each request to the application at the Distribution settings (Behaviors tab).

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

That's about it. No need to use any external services for obtaining geo-data outside of the Amazon AWS infrastructure.