teleren/devto huggingface dataset:
Game Dev From Scratch
Tags: gamedev, c, programming, kids
Published: 2022-04-15 16:07:15

G'day, welcome to our blog!

We are Sam, Sean and Thalia, from Melbourne, Australia. We are learning about programming and game development, and writing about it here in this blog.

1. [Creating Games](https://dev.to/gamedev/creating-games-4dpj), by Sean
2. [Deciding on a Programming Language for Game Dev](https://dev.to/gamedev/deciding-on-a-programming-language-13ba), by Sam
3. [My Simple Programs](https://dev.to/gamedev/my-simple-programs-3g97), by Thalia
4. [Loops and Math in C](https://dev.to/gamedev/loops-and-math-in-c-582i), by Sean
5. [Basic Programming in C](https://dev.to/gamedev/basic-programming-in-c-243b), by Sam
6. [kisskit: Simplifying Game Dev in C](https://dev.to/gamedev/kisskit-simplifying-game-dev-in-c-3hjd), by Sam
7. [Creating Drawings](https://dev.to/gamedev/creating-drawings-229e), by Thalia
8. [Making a Christmas Tree](https://dev.to/gamedev/making-a-christmas-tree-59l3), by Sean
9. [Why Write a Dev Log?](https://dev.to/gamedev/why-write-a-dev-log-27nh), by Sam


## Other links

- our project home page, [game.ucm.dev](https://game.ucm.dev)
- our [open source code](https://github.com/gamedevfromscratch) on github 
- our Facebook group, [Robots and Games](https://www.facebook.com/groups/robotgames)
- our [YouTube channel](https://www.youtube.com/channel/UC2NYuHZIHapsqY_9HnhZ7Qw)
Trigger an Algolia Crawler to reindex on Github Repository Releases
Tags: tutorial, automation, node, github
Published: 2022-04-15 15:59:40

Here at Pipedream, you may have noticed that our [documentation](https://pipedream.com/docs) is powered by Algolia. 

In this Speed Run, we'll automate the reindexing of the Pipedream docs on every Github release.

{% embed https://youtu.be/dDClQTQG9f4 %}

By automating the crawler, we ensure that the search bar in the docs is always up to date with the latest content.

By default, Algolia will only crawl our site once per week. By creating a Pipedream workflow to automate this process, we'll know on every new docs release that the search engine will be up to date!

In this episode we're going to show you how to do this without any code, and leverage a brand new feature here at Pipedream: pre-built native HTTP actions, right in the app.

Learn more and get connected!

🔨  Start building at https://pipedream.com
📣  Read our blog https://pipedream.com/blog
💬  Join our community https://pipedream.com/community

Request to have your idea come to life (and get a shout out too) in a Pipedream Speed Run video:

https://www.jotform.com/220694247042049
About Mongoose and MonogDB
Tags: javascript, webdev, mongodb, react
Published: 2022-04-15 15:52:48

Mongoose is a Node.js-based Object Data Modeling (ODM) library for MongoDB. It is akin to an Object Relational Mapper (ORM) such as SQLAlchemy for traditional SQL databases. The problem that Mongoose aims to solve is allowing developers to enforce a specific schema at the application layer. In addition to enforcing a schema, Mongoose also offers a variety of hooks, model validation, and other features aimed at making it easier to work with MongoDB.MongoDB Schema Validation makes it possible to easily enforce a schema against your MongoDB database, while maintaining a high degree of flexibility, giving you the best of both worlds. In the past, the only way to enforce a schema against a MongoDB collection was to do it at the application level using an ODM like Mongoose, but that posed significant challenges for developers.
Next.js features I'm excited about
Published: 2022-04-15 15:43:53

## Stable Incremental Static Regeneration

Simply speaking, this feature allows you to generate static content dynamically. Let's see a quick example:

Say you have a blog website with a lot of articles. When somebody visits /news/[link] (where [link] is anything), you want to serve them the static page as fast as you can.

But it is possible that you don't want to create all static pages at build time because it would take you a lot of time. In a few cases, this isn't possible at all at build time.

Also, sometimes your content might change, like a quick blog edit - so you don't really want a completely static page forever either. So what's the solution?

Using Next.js 9.5+, now you can generate static pages dynamically to the dynamic path and refresh them.

This means that once Next fetches that particular URL, it'll save it as a static page and serve it statically whenever somebody visits the path. At the same time, it'll be open to accepting new paths dynamically.

Not only can you do this, with a revalidate parameter, you can also actually specify that Next.js should update your static pages once every X seconds in the background if there's any change!

## getServerSideProps

getServerSideProps, as the name suggests, allows you to inject props in your Next.js page from the server itself. And getStaticProps allows Next.js to still create static outputs at build time.

getStaticProps combined with incremental static regeneration is a killer feature in my opinion. You get the many benefits of a dynamic backend without having a dynamic backend.

## Persistent Caching for Page Bundles

Next.js also supports persistent caches for pages that are not changed. Before, when you shipped a new Next.js app, Next.js would throw out the whole app and the user had to download all the CSS/JS again, even if those bundles were unchanged.

In the latest version of Next.js released last week, Vercel introduced persistent caching which is again an absolutely great thing to have performance-wise.
Redux Toolkit
Tags: redux
Published: 2022-04-15 14:22:37

Recently I learned the Redux toolkit. Today I share with you guys what I learn in the redux toolkit.

At first if i explained what is redux toolkit, i want to explain this from their documentation:
Redux is a predictable state container for JavaScript apps.Which is help us write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

**The purpose of Redux Toolkit **
The Redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux:

* "Configuring a Redux store is too complicated"
* "I have to add a lot of packages to get Redux to do anything useful"
* "Redux requires too much boilerplate code"

**What redux actually does our website**

1. It's Make our website more Simple: includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more.

2. It can Makes our application Opinionated & Powerful:
 Provides good defaults for store setup out of the box, and includes the most commonly used Redux addons built-in.

3. It more Effective so you can do more work with less code.
Luos Web App: Alpha Version
Tags: webdev, saas, opensource, luos
Published: 2022-04-15 15:36:50

Your browser interacts with your physical edge or embedded system.

⏩ [https://www.luos.io/blog/luos-web-app-alpha-version](https://www.luos.io/blog/luos-web-app-alpha-version)

Using the web serial API, inspired from several standards like Bluetooth, WebSocket, or USB, you access your system directly on our Luos Web App.

Our current alpha version allows you to test and understand the future possibilities of this project for your needs. Feel free to send us any recommendation or comment based on your experience.
Python, Flask, Elasticsearch - front controller and API documentation - Part 3 Tutorial
Published: 2022-04-15 15:34:07

Hi, the 3d article devoted to the theme: “How to work with ElasticSearch, Python and Flask” already ready for reading. Here will speak about package dependencies we are going to use, some project structure aspects, controller, REST API, flask_apispec package and response/request models. All details are here: ["Python, Flask, Elasticsearch - front controller and api documentation"](https://sergiiblog.com/python-flask-elasticsearch-front-controller-and-api-documentation/). Have a pleasant reading.
Simplifying AI
Tags: ai, machinelearning, deeplearning, datascience
Published: 2022-04-15 15:31:02

Everyone is jumping into AI. Learning Python, writing a few lines of scikit-learn code, training a model on a Kaggle dataset, has become a thing!

![What AI project are you working on](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vldr2k0lhj2ygd6m0psz.png)

We always start with a blank notebook, and always write the same first 2 lines 

```Python
import numpy as np
import pandas as pd
```

and then we pause to think, about what should be the next line we write.

What if I was to tell you that we have created AI that can write the complete source code for any AI project you can think of?

Yes, it is true! We are proud to announce the launch of our AI Code Generator. 8 months of sleepless nights, 10s of setbacks, 100s of code re-writes, and we have finally launched 🎉

Just make a few clicks, and our AI will write your AI code for you. Fully customized code generation for any AI project. 


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


And yes, almost forgot. It is **100% FREE, forever** 👏


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42wgu7f5ewxqqkhlpbod.png)](https://blobcity.com/ai-code-gen)
Should You Learn Next.js as a React Developer?
Published: 2022-04-15 15:18:12


All React Developers know that React is one of the most popular solutions out there for building large skill interactive web applications.

Nowadays, React JS is used by many startups and companies, so it is a very valuable skill to have.

I discovered Next.js a couple of months back, and was intrigued with what it was trying to accomplish.

In this post, I'll describe my personal journey with Next.js also will let you know how come you will be benefited with Next.js


## What Next.js?


According to next JS website, it is a React Framework
for Production that gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route prefetching, and more. No config needed.

## The best thing about next JS:

-Best SEO practices
-Caching and Automatic Static Optimization built-in
-Fully server-rendered pages
-100% React support
-Lambda function support (API routes)
-Fine tweak your webpack/babel config if needed
-And much more!

## Some Next.js features I am excited about

Next.js is evolving really fast. They deprecate old functionalities and introduce shiny new things all the time.

Here are some of my top picks why you should use next JS 

- Stable Incremental Static Regeneration
- Webpack 5 Support
- Dropping of getInitialProps
- Persistent Caching for Page Bundles
- Out of the box support for Sass Modules and TypeScript

I am very excited to learn more about the Next JS. Thank You!
Simple React e-commerce Store
Tags: react, redux, javascript, beginners
Published: 2022-04-15 15:17:56

I've created a super simple e-commerce application with react, react-redux, react-router, and redux-persist.

Each url or "route" was made with react-router in the react index.js file.

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

```
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<App />} />
            <Route path="/cart" element={<Cart />} />
            <Route path="/products" element={<ProductContainer />} />
            <Route path="*" element={<Error />} />
          </Routes>
        </BrowserRouter>
```
All of the products in the application were fetched and moved around using the useDispatch and useSelector functions from react-redux.

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

There were two simple actions made to move items to the cart and to remove them as well.

```
function rootReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TO_CART:
      return {
        ...state,
        cart: [...state.cart, action.payload],
      };

    case REMOVE:
      return {
        ...state,
        cart: state.cart.filter((item) => item !== action.payload),
      };

    default:
      return state;
  }
}
```

Redux-persist was necessary to use to prevent the items in the cart from disappearing when the user would switch to another page.

There was definitely more functionality I wanted to add to this little application, but I either ran out of time or couldn't figure out how to work other installed packages. 

But if you want to play around with the code or read a little bit more about this application, checkout the github for it [here](https://github.com/San-toast/web/tree/main/week14/day1/e-commerce).
🏆Top 10 Best CSS and JavaScript Projects for Beginners!
Tags: html, css, javascript, beginners
Published: 2022-04-15 15:14:10

***🏆Top 10 Best CSS and JavaScript Projects for Beginners!***

***

{% youtube s0C0QPc1hYY %}

***

***🏆Recommended Videos🏆***

🎬Login & Registration Form Using HTML & CSS & JS✨
➤https://youtu.be/I5_T547tHf0

🎬Neumorphism Login Form | HTML & CSS✨
➤https://youtu.be/QWh0S-3D7uY

🎬CSS Text Typing Animation | HTML & CSS✨
👉https://youtu.be/CqBEmgkR_fQ

🎬Top 10 CSS & JavaScript Projects✨
➤https://youtu.be/xhaq1YhelIw

🎬Build a Step Progress Bar | JavaScript✨
➤https://youtu.be/qKjDXXkkg8I
***
**🛴 Follow me on:**
YT:https://bit.ly/3oBQbc0
How to create a database in MYSQL using Nodejs
Tags: javascript, webdev, beginners, tutorial
Published: 2022-04-15 14:58:53

Node.js can be used in database applications. And one of the most popular databases is MySQL.

To enable the code examples that will be explained in this tutorial, you must have MYSQL installed on your computer. [Click here to download MYSQL database for free](https://www.mysql.com/downloads/).

## Installing MYSQL Driver

Once you have MySQL up and running on your computer, you can access it by using Node.js. To access a MySQL database with Node.js, you need a MySQL driver. This tutorial will use the "mysql" module, downloaded from NPM.

To download and install the "mysql" module, open the Command Terminal and execute the following code: `npm install mysql`

 MYSQL database driver has been downloaded and installed on your computer.  

Node.js can use this module to manipulate the MySQL database

**Code Sample:**

`var mysql = require('mysql');`

## Creating Connection in Nodejs with MYSQL database
Now, let's start by creating a connection to the database

**Note:** Always use the username and password from your MySQL database, when connecting to a MYSQL database.

**Code Sample:**

```
const mysql = require('mysql');

const con = mysql.createConnection({
  host: "localhost",
  user: "yourusername",
  password: "yourpassword"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
});
```

Now, save the code above in a file called "demo_db_connection.js" and run the file with this command in your terminal: 
`node demo_db_connection.js`

The code sample above will result to: 

```
Connected!
```

After that, you can now start querying the database using SQL statements.

## How to Query a MYSQL Database in Nodejs

Use SQL statements to read from (or write to) a MySQL database. This is also called "to query" the database.

Note that, the connection object created in the example above, has a method for querying the database.

**Code Sample:**

```
con.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
  con.query(sql, function (err, result) {
    if (err) throw err;
    console.log("Result: " + result);
  });
});
```

The query method takes a sql statements as a parameter and returns the result.


## How to create a database in MYSQL with Nodejs

To create a database in MySQL, use the "CREATE DATABASE" statement.

**Code Sample:**

```
const mysql = require('mysql');

const con = mysql.createConnection({
  host: "localhost",
  user: "yourusername",
  password: "yourpassword"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
  con.query("CREATE DATABASE mydb", function (err, result) {
    if (err) throw err;
    console.log("Database created");
  });
});
```
Now, save the code above in a file called "demo_create_db.js" and run the file in your terminal with the command: 
`node demo_create_db.js`

This will display the result below:

```
Connected!
Database created
```

Thanks for reading...
I believe you gain some knowledge.

**Happy Coding!**
Newly learned technology mongoose and redux
Published: 2022-04-15 14:55:36

Mongoose is a Node JS based Object Data Modelling (ODM) library for MongoDB. Currently, I am learning mongoose because I found some advantages in it. The Mongoose module is one of the most powerful external modules of NodeJS. Mongoose is used to translate the code and its representation from MongoDB to the Node.js server. Collection validation of the MongoDB database can be done easily. In mongoose, a predefined Structure can be
implemented on the collection. Constraints can be applied to documents of collections using Mongoose. Mongoose module built on the top of MongoDB driver and provides an easy abstraction of the query and defines a query. The Mongoose module provides several functions in order to manipulate the documents of the collection of the MongoDB database.
These are the reasons why I’m learning Mongoose for databases. We can use Mongoose for our team project. Because MongoDB allows us to add our team members via invitation. Which we can find in our MongoDB profile and by accepting that each team member can use the database. There are different kinds of roles.

I am also learn redux. 
Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time-traveling debugger.
 This tutorial will introduce you to Redux and teach you how to use it the right way, using our latest recommended tools and best practices. By the time you finish, you should be able to start building your own Redux applications using the tools and patterns you've learned here.

In Part 1 of this tutorial, we'll cover the key concepts and terms you need to know to use Redux, and in Part 2: Redux App Structure we'll examine a basic React + Redux app to see how the pieces fit together.

Starting in Part 3: Basic Redux Data Flow, we'll use that knowledge to build a small social media feed app with some real-world features, see how those pieces actually work in practice, and talk about some important patterns and guidelines for using Redux.
This Week in Python
Tags: python
Published: 2022-04-15 13:38:59


**Fri, April 15, 2022**

**🐇 Easter Edition 🥚**

This Week in Python is a concise reading list about what happened in the past week in the Python universe. 

## Python Articles


- [The Oregon Trail in Python](https://keithmfoster.com/the-oregon-trail/) – Probably the oldest compter game in Python
- [React in Python with Pyodide](https://blog.pyodide.org/posts/react-in-python-with-pyodide/) – Pyodide has many capabilities that make it possible to directly use React and MUI inside Python, without any JavaScript needed
- [Discovering basic blocks of Python bytecode](https://bernsteinbear.com/blog/discovering-basic-blocks/) – Intro to Python bytecode
- [Running minor tasks with a simple job system in Django](https://nessuent.xyz/posts/2022-03-26_Django_jobs.html) – Background Tasks in Django
- [Python f-strings Are More Powerful Than You Might Think](https://towardsdatascience.com/python-f-strings-are-more-powerful-than-you-might-think-8271d3efbd7d) – A good overview about Pythons f-strings


## Projects

- [public-apis](https://github.com/public-apis/public-apis) – A collective list of free APIs – special mention because #100Devs are exploring APIs right now
- [httpie](https://github.com/httpie/httpie) – command-line HTTP client for the API era by @httpie
- [rembg](https://github.com/danielgatis/rembg) – a tool to remove images background
- [simple-login-app](https://github.com/simple-login/app) – The SimpleLogin back-end by @simple_login
- [samila](https://github.com/sepandhaghighi/samila) – Generative Art in Python by @sepkjaer20
Landing Page
Tags: javascript, webdev, nextjs, opensource
Published: 2022-04-15 14:49:16

Hey guys I have just added new Template to [DEV.UI](https://dev-ui.vercel.app/)
Check out this [New landing Page](https://dev-ui.vercel.app/templates/landingpage)

[Github Link](https://github.com/kumard3/dev-ui-templates/tree/main/template-7)
[Deployed Link](https://pixi-world-landing-page.pages.dev/)
DBeaver MySQL csatlakozás SSH tunnelen keresztül
Tags: dbeaver, ssh, mysql
Published: 2022-04-15 14:32:40

Verzió információk:
```
DBeaver: Version 22.0.2.202204041542
MySQL szerver: 8.0.27
```

Hozzuk létre az új kapcsolatot:
![új kapcsolat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5t4tyf638mku3rveb0qa.png)

Állítsuk be az SSH tunnelt (1) én készítettem profilt (2), hogy több kapcsolatnál is tudjam ugyanazt az SSH konfigurációt használni, ezt ki lehet hagyni a "Settings"-nél meg lehet adni a szükséges adatokat:
![SSH tunnel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi82xkdupyuwfgxwxp3q.png)

Adjuk meg a bejelentkezéshez az adatokat (2) és teszteljük a kapcsolatot (3):
![SSH kapcsolat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsro41r7wave8mik9v0l.png)

Eddig jók vagyunk:
![SSH kapcsolat sikeres](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjmwigaoxv2851ass1td.png)
  
"OK" majd "Apply and Close"-al zárjuk be az SSH beállításokat, visszatérünk az adatbázis konfigurációhoz, adjuk meg (1) az előbb létrehozott SSH profilt:
![SSH profil kiválasztás](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwv962gvuy0nixr69i5l.png)

Váltsunk a "Main" tabra és ott adjuk meg (1) az adatbázis eléréshez szükséges adatokat (a tunnel miatt itt a "Server Host" `localhost` és "Port" pedig a szerveren lévő MySQL - általában alapértelmezett - `3306`-os portja), majd teszteljük a kapcsolatot (2):
![Adatbázis kapcsolódási adatok](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a37nsuz6olw1n5zlt58.png)
 
Itt lehetnek problémák, pl:
- nincs engedélyezve a távoli kapcsolat a MySQL szerveren (`mysqld.cnf` konfiguráció)
- a megadott felhasználóval nem tudunk kapcsolódni (`mysql` adatbázis `db`, `host`, `user` beállításai)
- nem megfelelő user + jelszó

Végül pedig amibe belefutottunk:
- SSH jó volt (másik kapcsolat működött)
- másik adatbázishoz másik felhasználó működött
- jó volt a jelszó
- beállításaik szinte 99%-ban megegyeztek (`db`, `host`, `user`)

Ezek után ezt a hibát kaptuk: `Public Key Retrieval is not allowed` a `[Driver properties]` alatt van egy `allowPublicKeyRetrieval` kulcs amit módosítottam `true/yes`-re. Nem oldotta meg, jött a következő: `Access denied for user '<USER>'@'<HOST>' (using password: YES)`.

Itt kezdtem gyanakodni és nyomozni, hogy miben tér el a működő és a nem működő felhasználó beállítása a `mysql` táblákban. Egyetlen dolog volt ami szóba jöhetett (minden más stimmelt) a `user.plugin` oszlopnak: `caching_sha2_password` volt az értéke, a működő felhasználónak pedig `mysql_native_password`.

Módosítsuk az érintett felhasználó bejelentkezését:
```
ALTER USER '< USER >'@'< HOST >' 
IDENTIFIED WITH mysql_native_password BY '<*** PASS ***>';

FLUSH privileges;
```

Ezek után sikeresen tudtam kapcsolódni az adatbázishoz.
3D-Html-css-room
Tags: html, css, 3d, architecture
Published: 2022-04-15 14:26:37

# 3D-css-html-room
## projenin codepen linki:
[Codepen-Project](https://codepen.io/sila-aleyna/pen/ZEvoedB)
## projeden görsel:
![](https://cdn.discordapp.com/attachments/957265762341515264/961967020465852416/Ekran_Goruntusu_139.png)
## görüşürüz:
<div align="center">
<img src="https://media.discordapp.net/attachments/957265762341515264/962703053000179772/Aleyna-Dev.png" align="center" style="width: 100%" />
</div>