teleren/devto huggingface dataset:
How To Open, Read, Write Files with Python
Tags: python, beginners, programming, tutorial
Published: 2021-12-30 16:35:57

Files are an essential part of working with computers, thus using Python to write to and read from a file are basic skills that you need to master. In this article, I’ll show you how to do the things you came here for, e.g.:

- [How to open a file in Python](https://python.land/operating-system/python-files#Open_a_file_in_Python)
- Reading a file with Python (both at once or line-by-line)
- Writing to a file with Python
- Copy, move, rename, and delete files

When working with files, there will come that point where you need to know about file modes and permissions. I included an explanation on this topic as well, in case you need it.

The the full article in the free Python Land tutorial: [How To Open, Read, Write Files with Python](https://python.land/operating-system/python-files)
How to Customize WordPress Login Page
Tags: wordpress, webdev, beginners, tutorial
Published: 2021-12-30 16:24:10


![Customize WordPress Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzoulqigibwrbb250sij.jpg)
When you customize a website for a customer, the first preference of your work is usually the WordPress login page. As we know, by default, every WordPress login page looks exactly the same. This is not a strong initial impression at all. If you are running a WordPress woo-commerce store, you may have many users to see a login page. For a better user experience, we need to customize the default WordPress login page.

The default WordPress login page looks like this.

![default WordPress login page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5d5e03n6mubrpsp8t4b.png)
In this post, We will see how to customize your WordPress login page easily. So let's get started.

##Customize WordPress Login Page by using plugin

You can customize the WordPress login page using plugins and tools. There are many plugins to provide this feature but here, we will use the best plugin called [Custom Login Page Customizer](https://wordpress.org/plugins/loginpress/) made by LoginPress.

1. Go to WordPress Dashboard.
2. Click on Plugin >> **Add New**.
3. Type **LoginPress**in search bar.
4. Click on **Install Now**.
5. After Installing click on **Activate**.

Once you activated this plugin you will see a window to allow the permissions.

So, if you are seeking a more functional solution that provides you a lot of free effects, then Custom Login Customizer is perfect for you. Also, they have paid version with other amazing features.

I shared this post from [How to Customize WordPress Login Page](https://softcodeon.com/wordpress/customize-wordpress-login-page.htm) you can read in detail from there.

I hope you like this article, if you have a question about creating a custom WordPress login page? please discuss below help to improve. Thank you.
Never manually change your copyright date again with this innovative cloud-based API. 🗓
Tags: webdev, javascript, discuss, beginners
Published: 2021-12-30 16:09:25

Fed up of changing your websites copyright date by hand EVERY year? Looking to offload complex date calculations to the cloud? Travelled here from the future and looking for a definitive confirmation of the current year? This FREE current year API is here to help.

**[https://current-year-api.addy.codes/](https://current-year-api.addy.codes/)**

## API Documentation
### Basic Usage
If you don't need to factor in timezones and are content using UTC, the basic usage is the simplest way to get up and running with the Current Year API. Simply make a request to the API URL with your preferred method to receive the current year in JSON format.

`https://current-year-api.addy.codes/what-year-is-it`

### Advanced Usage
For those that need accurate current year calculations based on timezone data, you can add a timezone parameter.

**[Read more...](https://current-year-api.addy.codes/)**

{% twitter 1476582732083904514 %}

PS. Just in case – yes, this is satire!
PostgreSQL Fast deploy and Easy Remote Admin
Tags: postgres, deploy, use, note
Published: 2021-12-30 16:04:46


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmp3rpfziv3o60xkf494.png)  
PostgreSQL managed servers are expansive, why not just using your own VPS to add one?  
This is a really short memo, the purpose is to have a PostgreSQL server running on a single computer as fast as possible to start dev things.  

# PostgreSQL

## Installation
To allow connexions from any host on the internet  
Edit the __postgresql.conf__ file
```bash
sudo pico /etc/postgresql/13/main/postgresql.conf
```  

```
# - Connection Settings -

listen_addresses = '*'          # what IP address(es) to listen on;
```  

Add users authentification
```bash
sudo pico /etc/postgresql/13/main/pg_hba.conf
```  

```
host    all             all              0.0.0.0/0                       md5
host    all             all              ::/0                            md5
```  

Create your first remotely allowed __superuser__  

```BASH
sudo -u postgres psql
```

```SQL
postgres=# CREATE USER username WITH PASSWORD 'password' CREATEDB SUPERUSER CREATEROLE INHERIT LOGIN REPLICATION BYPASSRLS;
CREATE ROLE
postgres=# \q
```  

```bash
sudo service postgresql restart
```  

# Admin
The best way to admin the database will be to remotely use __pgAdmin__ you
could add users, change passwords and add databases on demand.  
Enought reading here, start reading on [My Blog](https://blog.cgifl300.com/postgresql-memo.html)
Persisting Pokémon API data in local PostgreSQL | Node.js Tutorial
Tags: node, javascript, beginners, tutorial
Published: 2021-12-30 15:57:30

How to handle fetching and persisting data from an API in a local PostgreSQL database. In this example we will be working with the Pokémon API as an example. Using Node.js we fetch data from the Pokémon API and parts of the data returned in a local PostgreSQL DB.

{% youtube loogJSd5ulM %}
What is Node JS ?
Published: 2021-12-30 15:30:00

#Node JS: 
Node JS is an extremely powerful framework developed on Chrome’s V8 JavaScript engine that compiles the JavaScript directly into the native machine code. It is a lightweight framework used for creating server-side web applications and extends JavaScript API to offer usual server-side functionalities. It is generally used for large-scale application development, especially for video streaming sites, single-page applications, and other web applications. 

#What are the Difference between Nodejs and JavaScript ?

#NodeJS:
1. Type: Interpreter and environment for JS.
2. Utility: Used for accessing or performing any non-blocking operation of any operating system.
3. Running Engine: V8(Google Chrome).

#JavaScript:
1. Type: Programming Language.
2. Utility: Used for a client-side activity for web application.
3. Running Engine: Firefox, Safari, V8(Google Chrome), etc.
 
#Why Node.js is single-threaded ?
 
Node.js uses a single-threaded model in order to support async processing. With async processing, an application can perform better and is more scalable under web loads. Thus, Node.js makes use of a single-threaded model approach rather than typical thread-based implementation.
 
#Where Node.js can be used ? 

Node.js can be used to develop:
1. Real-Time Web Applications
2. Network Applications
3. Distributed Systems
4. General Purpose Applications

#Benefits of using Node.js ! 

1. Fast: Node.js is built on Google Chrome’s V8 JavaScript Engine which makes its library very fast in code execution.
2. Asynchronous: Node.js based server never waits for an API to return data thus making it asynchronous.
3. Scalable: It is highly scalable because of its event mechanism which helps the server to respond in a non-blocking way. 
4. Open Source: Node.js has an extensive open source community which has contributed to producing some excellent modules to add additional capabilities to Node.js applications.
5. No Buffering: Node.js applications simply output the data in chunks and never buffer any data. 

Happy Learning !!
NumPy (Part 1)
Tags: python, numpy, pythonmodules, machinelearning
Published: 2021-12-30 15:39:06

In coding, we often use arrays / tensors to represent data. One may think of these arrays as matrices. When we want to make sets of data interact with each other and come to results, we do the same thing that we would in Algebra - we perform operations on the matrices. 

Now, we have already established that Python as a language exists only to make our lives easier. So obviously, there is a module in Python that lets us do all kinds of functions on our matrices: NumPy.

Read on to start off with NumPy.

*Note: It is recommended that you know basic algebra and matrices in order to understand all the functions.*

## Importing the module
 
The first thing we need to do is install NumPy. The only pre-requisite to do this is having Python itself. Now, I personally use pip for installing modules. However, you may also use conda.

For pip run, the following in terminal - 

```
pip install numpy
```

If you are using conda, the command would be -

```
# If you want to install from conda-forge
conda config --env --add channels conda-forge

# The actual install command
conda install numpy
```

After this, it is a simple import statement -

```
import numpy as np
```

And there you go! You have imported NumPy module into your code.

*Note: I have imported NumPy and given it the reference variable `np` to make it easier to run the functions. You may use any other variable name or skip it all together.*
 
## Creating Arrays

From this point on, I will be using IDLE Shell to run commands for the sake of simplicity.

To create the array, we use function `array()` from NumPy module.

```
arr = np.array([])
```
Let's test it out by putting in some values and creating a 2X3 matrix -
```
arr = np.array([1,2,3] , [4,5,6])
arr
```
When we run this in shell, Python returns the matrix to us:
![arr output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xykuurbl827a1p80lvsm.png)

As you can see, we only put in the values. Python made the matrix for us on its own.

## Indexing of Arrays

On many occasions we will be faced with situations where we would want to extract the elements of the array individually. For this, we need to understand how they are numbered or indexed. 

Sticking to the example array we created (`arr`), the indexing would look like this - 
![Indexing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5bexcdlupuu4xqhqkpe.png)
 

So, if we want to get the element in the 0th row and 1st column, we would run -

```
arr[0,1]
```

And it would give us `2`.

We can also find out the dimensions of an array by executing:

```
arr.shape
``` 
This will return a tuple with the syntax `(rows, columns)`. In this case, it would be `(2,3)`.

So, now you know how to install and import the module, create matrices and access elements in it. Follow the blog for part 2 coming very soon.
SimpleTask using Ruby on Rails 7, Stimulus and TailwindCSS
Tags: rails, hotwire, tailwindcss, stimulus
Published: 2021-12-30 15:36:38

I created a SPA application to manage tasks using Ruby on Rails 7.

This project was just to study the new framework pattern with turbo-rails and stimulus-js.

It was an incredible experience, I found it very simple to develop with it!

Follow the link below from github with the code!

Hugs !
Link Heroku: http://simple-task-hotwire.herokuapp.com
Link Github: https://github.com/nemuba/simple_task
Twitter: https://twitter.com/OjedaAlef
How should I structure a game engine/graphics library?
Tags: help, discuss, typescript, webdev
Published: 2021-12-30 15:22:26


I'm writing a graphics library in TypeScript, but I don't really know how to structure it.

My file structure looks like this:

- `src`
 - `lib.ts` (Imports and exports everything from the other files)
 - `game.ts` (Manages and renders the game)
 - `canvas.ts` (Puts the image data from a `Game` object onto a canvas)
 - `math.ts` (Math definitions like `Vec2`, `Rect`, and `dist()`)
 - `util.ts` (Useful functions like getting a circles bounding box)
 - `sprites.ts` (Sprite classes like `CircleSpr` and `RectangleSpr`)
- `dst` (The compiled JavaScript code with maps)
 - `lib.js`
 - `lib.js.map`
 - `game.js`
 - `game.js.map`
 - etc.

I feel like I'm doing it wrong because I of things like `lib.ts` where I just import everything and export it.

If anyone has made a game engine/graphics library, then please let me know how you structured it :)
100 Days of Code
Tags: 100daysofcode, web3
Published: 2021-12-30 15:09:29

## New Year, New Technologies!

Hey everyone, with 2022 right around the corner people all around are making New Years resolutions and I figured I would get started on mine earlier rather than later!

### Goals

- Learn Web3 fundamentals
- Learn Solidity and Blockchain fundamentals
- Create a Decentralized Application
- Continue to improve Web Development skills
Feminine Themes und Blöcke für Kadence - Restored 316
Tags: wordpress, kadencestartertempla, kadencewp, wordpressthemes
Published: 2021-12-30 15:27:55

---
title: Feminine Themes und Blöcke für Kadence - Restored 316
published: true
date: 2021-12-30 15:01:00 UTC
tags: WordPress,kadencestartertempla,KadenceWP,WordPressThemes
canonical_url: https://bloggerpilot.com/restored316/
---

![Restored 316 - Kadence Themes und Blöcke](https://bloggerpilot.com/wp-content/uploads/2021/11/restored316.png)

Heutzutage gibt es eine ganze Reihe von femininen WordPress-Themes, was eine gute Nachricht für alle ist, die sich einen femininen Look für ihren Blog wünschen. Auch wenn die meisten Themes für Frauen entworfen wurden, sind die meisten von ihnen eher schlicht als elegant, und das ist nicht der Look, den du für deinen Blog willst. Die gute Nachricht ist, dass du ein elegantes Theme für WordPress finden kannst. Allerdings ist nicht jedes Theme, das du findest, elegant, denn elegante Themes sind selten.

Der Original-Artikel erschien auf [Feminine Themes und Blöcke für Kadence - Restored 316](https://bloggerpilot.com/restored316/).

Du weißt es vielleicht nicht, aber die beliebtesten Themes, die von Männern erstellt werden, sind in der Regel so männlich, dass sie überhaupt nicht feminin sind. Deshalb habe ich zwei Monate damit verbracht, ein feminines WordPress-Theme zu entwickeln, das den Anschein einer wunderschönen, stilvollen Website erweckt.
What is React JS ?
Published: 2021-12-30 14:57:00

#ReactJS:
ReactJS is a JavaScript library. It’s used for developing complex and interactive web and mobile UI, especially for a Single Page Application(SPA). ReactJS helps to build reusable UI components because it follows the component based approach. 

#React Higher-Order components and example: 
Higher-order component is an advanced way of reusing the component logic. 
Examples: 
1. Render high jacking.
2. Props manipulation.
3. State abstraction and manipulation.
4. Code reuse, logic, and bootstrap abstraction.

#Difference between Virtual Dom and Real Dom:

#Virtual Dom:
1. Fast update but can’t directly update HTML. 
2. DOM manipulation is very easy.
3. No memory wastage. 
4. Update JSX, If element update.

#Real Dom:
1. Slow update but directly update HTML. 
2. DOM manipulation is very expensive.
3. Too much memory wastage.
4. Create a new Dom if element update.

#UseState in React: 
UseState is a built-in hook that allows adding state to functional components in react package. We use it inside a function component. We use it to create a piece of state without switching to class components.

#Reduce in React: 
Reduce is a function that specifies how applications state changes in response to an action. It works by taking previous states and actions then returning new values.

#Difference between JSX and JS:

#JSX
1. JSX is JavaScript XML. Which is a combination of HTML and JavaScript.
2. Use to write react component.
3. Making the code easier to read and understandable for the user.

#JS
1. JS is a scripting language of ECMAScript.
2. Use to make the webpage more interactive.
3. Basically, it adds life and creativity to a website, making it more engaging.

#ReactJS Optimization: 
By using the below roles we optimize a react application-
1. Dependency optimization.
2. Using immutable Data structures.
3. Avoiding props in initial states.
4. Memorize React components.
5. CSS animation Instead of JS animation.

Happy Learning !!
Convert video to gif in python
Tags: python, abipravi
Published: 2021-12-30 14:44:36

## How to convert `video file` to `gif` format using **Python** programming language

1. First install module
```pip
pip install MoviePy
```

2. Now Code the following
```python
from moviepy.editor import *
clip = (VideoFileClip("./video1.mp4"))
clip.write_gif("output.gif")
```

You can also trim the video from one part and then convert them into gif
```python
from moviepy.editor import * 
clip = (VideoFileClip("./video1.mp4").subclip((0:00),(1:00)).resize(ACCORDING TO THE USER WISH)) 
clip.write_gif("output.gif")
```
Thanks for Reading
![Image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nefpdykghwyfpuve2f2.gif) 
If you like this article please like and leave us an comment
Create React app with TypeScript
Tags: react, typescript, devjournal
Published: 2021-12-30 14:17:55

Run the following command.

```
$ npx create-react-app my-app --template typescript
```

After finish the creating process...

```
$ cd my-app
$ npm start
```

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

## What's next...?

It was really easy to create an application.
Then, What I should do next?

I am not a designer, so I would like to develop a website as easy as possible.
Maybe [Material UI](https://mui.com/) is the best library for people like me?

Let's install it.

```
$ npm install @mui/material @emotion/react @emotion/styled
```

And I also want to use cool icons.

```
$ npm install @mui/icons-material
```

Then, just comment out the code on `src/App.tsx` and add `Button` (Also add a style to the button on `src/App.css`). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/newm124jf7wb807d8ykr.png)
 
After just saving the code.

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

Awesome. How about a header?
The official website shows how to add a header named [AppBar](https://mui.com/components/app-bar/).

I just copied the code.

```javascript
import './App.css';
import { AppBar, Button, IconButton, Toolbar, Typography } from '@mui/material';
import { Box } from '@mui/system';
import MenuIcon from '@mui/icons-material/Menu';

function App() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

export default App;
```

Then...

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

Great!
It seems too easy to develop a website using those components...
How to Access Object's Keys, Values, and Entries in JavaScript
Tags: javascript, objects, react, design
Published: 2021-12-30 14:08:48

          <div>
         
           {
              Object.entries(slot).map(([key, value]) =>
              <div>
                {console.log("key", key)}
                <span>{key}</span>
                <div>
                
                {value.map(g => (
                  <div>{console.log("g", g.eTime)}
                  <span>{g.eTime}</span>
                  </div>
                ))}
                </div>
              </div>
            )
           }
         </div>
leetcode 55. Jump Game
Tags: javascript, java
Published: 2021-12-30 13:59:57

I found that solution very popular and helpful:   
[https://www.youtube.com/watch?v=y9xmDnqixOI&ab_channel=EricProgramming](https://www.youtube.com/watch?v=y9xmDnqixOI&ab_channel=EricProgramming)
Bootstrap vs Tailwind CSS
Tags: beginners, css, webdev, tailwindcss
Published: 2021-12-30 13:59:28

##Bootstrap
 Bootstrap is **Component-based** framework. It is based on **object-oriented CSS**.

Bootstrap comes with a set of **pre-made components** that are used to design a typical website quickly.

Bootstrap CSS is an **easy-to-learn framework** that maintains consistency for different browser and devices. If you know CSS, then it is pretty easy to learn customization in Bootstrap for website development.

##Tailwind CSS
  **Tailwind is known as Utility-first CSS Framework.**
  
The most interesting feature of Tailwind CSS is **high customization.** You can style each component of your website as the Tailwind UI demands form it.

This framework has **no ready-made components** for designing. You **build your own custom components** with the utility classes.

**

##Performance of Bootstrap vs Tailwind CSS 

**Bootstrap** requires four main files to be incorporate in the project for development which requires heavy space to be occupaied about **300 kb.**

In **Tailwind CSS** , we need style sheets to get our task done. This CSS file occupies about **30kb** of the space.

##Build time of Bootstrap vs Tailwind CSS 

In **Bootstrap**, we have a lot of overhead code and this causes the build time to be around **160 seconds**.

As **Tailwind** has built-in utility libraries, this shortens the build time up to **8 to 10 seconds**.

##Which one to Pick and why?
So, we can conclude that if you are working as a new backend developer or a "Full-Stack" developer, you should opt for Bootstrap first. Whereas if you are working as front-end developer then Tailwind CSS is the better option for the custom designs.

but in the end, it is your choice either you want to go with Bootstrap for responsive design, or you want high customization in style your web with advantages of Tailwind CSS. it depends on project requirements and personal preferences.




one more thing you can do for me 
[buymeacoffee](https://www.buymeacoffee.com/kamranah)