teleren/devto huggingface dataset:
Flipping Images in CSS
Tags: css
Published: 2021-09-14 06:57:47

CSS makes flipping images easy.

Here's how you can flip an image horizontally:

```css
img {
    transform: scaleX(-1);
}
```

While this line alone will work in most modern browsers, the following is a more broadly compatible snippet that serves the same purpose:

```css
img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
```

## Flipping images vertically

You can also flip an image vertically in a similar fashion:

```css
img {
    transform: scaleY(-1);
}
```

Once again, I'd suggest adding some extra lines for compatibility with older browsers:

```css
img {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
```

## Flipping images diagonally

This process is really more of a rotation than a "flip", but the following code will turn an image by 90 degrees clockwise:

```css
img {
    transform: rotate(90deg);
}
```

This works for any [degree value](https://developer.mozilla.org/en-US/docs/Web/CSS/angle) between zero and 360. Negative values are valid as well.

## Conclusion

You can rotate other elements than just images using these snippets, but I typically find myself flipping images whenever I have to flip an element.

Thanks for reading.
NFTs (Non Fungible Tokens)
Tags: blockchain, codenewbie
Published: 2021-09-14 06:46:16

Non-Fungible Tokens (NFT) are the new cool investment options. From time to time, asset classes and investment options keep increasing. The moment something new comes into this investment world, it usually takes a boom. For example – during the last decade of the 1900s, stocks and bonds took a boom. The period of 2010-2018 saw the boom of cryptocurrency and other digital assets.


Now, in 2021, the NFTs are on a roll. Solving the long-sought problem of not having a purely digital asset investing option, NFTs are here to stay for at least a decade. Amongst all this chaos and hoorays, people wonder if the hype of NFT is legit. What is creates a bubble, and one random day bursts shattering all hopes? Well, let us find out.

##What exactly is NFT?
n NFT (Non-Fungible Token) is a crypto-based digital asset that investors are buying in exchange for cryptocurrency. The exchange is done majorly in the crypto, Ethereum. This digital asset includes some of the real-world objects and are exchanged by handing out a token. The token represents the originality and ownership of the asset.

Let me explain it to you with an example – The digital asset I am talking about can represent things like art, some form of music, game items, etc. Say I created a digital art and sold it as an NFT. The person who buys it gets the token as proof of ownership of that art. I, in exchange for the art, get compensated in cryptocurrency.

Like crypto-currency, NFTs are also secured with encoding. The form of encoding used in NFTs and Cryptos is almost the same. Although the NFT came around 2014, it took seven years for people to notice it. Since the November of 2017, a whopping $174 million worth of business has been done in NFTs.

##How does an NFT work?

Most of the NFTs are bought and sold with Ethereum cryptocurrency. This is because the majority of NFTs are like a part of a Blockchain system like Ethereum. One can say that the Ethereum blockchain itself supports NFTs.

This has majorly increased the market capitalization and popularity of ETH (Ethereum) coins. Rich celebrities, investors, normal people, everyone can be involved in NFTs, and anything can be bought and sold. You can sell and buy Instagram posts, some tweets, digital art, collectibles, anything. Literally anything!

You won’t believe that the Founder of Twitter, Jack Dorsey, sold a tweet for $3 million! However, the NFTs are more inclined towards digital arts. Say it is a way to boost art appreciation or maybe build a collection of digital art.

We have seen rich people buy paintings and art to hang on their walls. The same is with Art NFTs but only digital. 

Read full article written by me here - 
https://capitalistcabin.com/what-is-nft-non-fungible-token-free-guide-2021/?swcfpc=1
HTML tags | small
Tags: html, tags, small
Published: 2021-09-14 06:16:31

It is used to **represent separate comments or fine print in a text**, such as copyright or legal texts, regardless of its visual style.

Typically **it is rendered with a font one point smaller**, such as `small` or `x-small`.

Although `<small>`, like `<b>` and `<i>`, may appear to bypass the principle of separation between structure and content, all three are valid elements in HTML5. The developer has to decide when to use `<small>` or when to achieve the same effect with CSS.

- Type: *inline*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small) | [Support](https://caniuse.com/mdn-html_elements_small)
How to Create Fixed Header and Footer Using CSS
Tags: balashankargujja
Published: 2021-09-14 06:15:58

Hey Techies!
Today I'm going to explain how to create fixed header and footer using CSS.
You can create fixed or sticky header and footer using the CSS position property. You just need to apply the CSS position property with the value fixed in combination of top and bottom properties to place the element on the top or bottom of the viewport accordingly.
### Your elements have to be placed like this:
```
<div id="container">
<header>Write Text Here</header>
...
<footer>Powered by Hashnode</footer>
</div>
```
Where the #container element is the one that users will scroll by. In other words, your header or footer will not be sticky to the screen if it has another element surrounding them.
At your CSS, you have to write this:
```
header
{ position: sticky; top: 0; }
footer
{ position: sticky; bottom: 0; }
}
```
{% codepen https://codepen.io/balashankargujja/pen/mdwwomq %}
Create automatic background changer with pure css.
Tags: css, html, automatic, firstpost
Published: 2021-09-14 06:06:52

As this is my first post, let's keep it easy and short. 
Today we are gonna see how to make image slideshow using only css and how much it can be fun of.
Let's get started with our simple html.
**HTML**
```
<div id="box"></div>
```
We have made our simple html. Now let's give it style.
**CSS**
```
#box{
  margin: 300px auto; /*as per your preferences*/
  height: 300px;
  width: 450px;
  border: 2px solid crimson;
}
```
Now let's start with making our slider animation.
We have to give our box a animation name (in our case we will give it example)
```
#box{
  margin: 300px auto; /*as per your preferences*/
  height: 300px;
  width: 450px;
  border: 2px solid crimson;
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
```
We have given our animation name and set the duration 10 seconds. We will put 5 Images and each image is gonna last for 2 seconds. Iteration count is set to infinite so it would run continuously.
After that let's give our animation
```
@keyframes example{
   0%{
     background-image: url(image1);
   }
   25%{
     background-image: url(image2);
   }
   50%{
     background-image: url(image3);
   }
   75%{
     background-image: url(image4);
   }
   100%{
     background-image: url(image5);
   }
}
```
You can chose your own images as per your need.
**Conclusion**
We have made simple background image changer animation with simple css. Hope you like this post. Thankyou for reading this.
Node JS Google Authentication under 50 lines of code.
Published: 2021-09-14 05:54:24

Hello and welcome computer geeks. In this post we are going to to learn how to add google authentication in node JS application. We will be going to use Passport JS. So let’s get started.

##Requirements
There are two things required to add Google authentication in node JS project. The first thing is OAuth 2.0 client ID and client secret. The second thing is Passport JS npm package. So lets first generate OAuth 2.0 client ID and client secret.

##How to generate Client ID & Client Secret
In order to generate them you have to go to this link and follow the below steps.

1. Click on Create Credentials -> OAuth Client ID.
2. Select Application type as Web Application.
3. In redirection URL add http://localhost:3000/auth/google/callback
4. Click on Create Button and it’s done.

Read Complete Tutorial and Download Codes from [here](https://crunchythings.xyz/how-to-add-google-authentication-in-node-js-2021/)
Learn about Node.js - Popular JavaScript Runtime ⚡
Tags: node, javascript, beginners, codenewbie
Published: 2021-09-14 05:48:06

## What is Node.js ?

Node.js is a server-side JavaScript run-time environment that works cross-platform and is open source. Node.js uses event drive and non-blocking models that make this framework light weight and efficient. Node.js package ecosystem - "NPM" is the world's largest ecosystem of open source libraries.

## Actually node.js is -

- A platform that allows us to run on a JavaScript computer or server.

- Helps to read, delete and update files.

- Helps to easily communicate with the database.

Recommended:

- 
[Test your JavaScript knowledge - JavaScript quiz!](https://programmingquiz.dev/javascript-quiz-test/)

- 
[Test your programming knowledge - Programming quiz!](https://programmingquiz.dev/)

## Why is Node.js so popular?

- It uses JavaScript.

- Very fast (using V8 engine and non-blocking code)

- Open source package has many large ecosystems such as - NPM

- Very good for real time services such as - Chat service.

## Let's know about some features of Node JS:

1) Swift: Node that S's library code execution is much faster.

2) I / 0 Asynchronous and Even-Driven: All APIs are asynchronous which means the server does not wait for the API to back up the data.

3) Single threaded: Node that uses single threaded model with S event loop.


4) High Scalable: Node that S uses an event mechanism that allows the server to respond to non-blocking manners that make it scalable.

5) No buffering: Node that s processing time significantly reduces when uploading audio and video files. So buffering is not.

6) Open Source: Being open source, Node JS has come up with many amazing models that are used to add better capability to Node JS applications.

7) License: It is licensed under MIT.

Recommended:

- 
[JavaScript - ES6 Cheat Sheet | Download PDF](https://mrezaulkarim.com/es6-cheat-sheet/) 

- 
[Difference between Primitive and Reference type data in JavaScript](https://mrezaulkarim.com/difference-between-primitive-and-reference-type-data-in-javascript/) 

For more exciting tips and tricks about programming and coding please read our  [others articles](https://mrezaulkarim.com/blog/)

Find My page on Instagram:  [@stack.content](https://instagram.com/stack.content)

Find Me on Twitter:   [@mrezaulkarim_](https://twitter.com/mrezaulkarim_)
Amazing Tools for Web Developers 🤩
Tags: webdev, tools
Published: 2021-09-14 05:24:30

Web development tools always make our work easy and smooth. As a web developer, I know lots of work is there. That’s why I listed tools that I use all the time. 

Well, there are lots of tools available in the world, so we do not claim this list a complete one. You can share your favorite tools out from the list in the comments section below.

## 1. [Bootstrap cheatsheet](https://bootstrap-cheatsheet.themeselection.com/)
![Bootstrap cheatsheet](https://www.codesnail.com/wp-content/uploads/2021/09/image-1024x538.png)

The best cheat sheet for Bootstrap 5 classes, variable, and mixins. It also helps you to find the difference between Bootstrap 4 and Bootstrap 5 so you can easily migrate.

## 2. [Gitignore.io](https://www.gitignore.io/)
![Gitignore.io](https://www.codesnail.com/wp-content/uploads/2021/09/image-3-1024x466.png)

gitignore.io is a web service designed to help you create .gitignore files for your Git repositories. The site has a graphical and command-line method of creating a .gitignore for your operating system, programming language, or IDE.

## 3. [Nibbler](https://nibbler.silktide.com/)
![nibbler](https://www.codesnail.com/wp-content/uploads/2021/09/image-5-1024x498.png)

Nibbler is a free tool for testing websites. Enter the address of any website and Nibbler will give you a report scoring the website out of 10 for key areas, including accessibility, SEO, social media, and technology.

## 4. [CSSreference.io](http://cssreference.io/)
![cssreference.io](https://www.codesnail.com/wp-content/uploads/2021/09/image-8.png)

cssreference.io is a free visual guide to CSS. It features the most popular properties and explains them with illustrated and animated examples.

## 5. [Regex101](https://regex101.com/)
![regex101](https://www.codesnail.com/wp-content/uploads/2021/09/image-14-1024x499.png)

The application offers both instruction for creating regular expressions and a ready environment for writing and testing expressions. Additionally, after creating an expression, we get a detailed explanation of it. So this is also the best tool from all tools for web developers.

Check out the other 10 tools here: [Fantastic Tools for Web Developers That You’re Not Using Yet 🤩](https://www.codesnail.com/fantastic-tools-for-web-developers/)

Thank you <3
Cypress : Next-Generation modern automation testing tool
Tags: softwaretestingcompany
Published: 2021-09-14 05:24:06

Cypress is a web automation testing tool which is used to automate testing for modern web applications. Cypress doesn’t build on Selenium WebDriver. Cypress is fundamentally and architecturally different than Selenium. It is based on Mocha and Chai syntax which is common amongst the Javascript users. If one has ever worked with Javascript, it will be especially easy to start using Cypress.

Selenium is made up of bindings, or libraries, and the WebDriver. All those components help test engineers when controlling the browsers. These two components work through the JSON network. But Cypress uses its own DOM manipulation strategy. There’s no network communication or what so ever. The only disadvantage with using Cypress is that it only supports Chrome right now. But other browsers will be added in near future.

Let’s see how Cypress works in real action!

Pre-requisites for Cypress
NPM should be installed and working
Knowledge about Mocha and Chai syntax
wgit - copy/paste files from Github
Tags: productivity, github, cli
Published: 2021-09-14 05:21:04

Today we are going to take a look at a small command line tool called `wgit` which will help you to copy paste one or more files from a Github repository into your local machine. 

## Why?
The primary reason why I have created this tool is to easily and effectively copy config files, templates, and scripts from one repository to another. I often use this tool to copy eslint configs, git ignore files and so on for my new and old projects.

## How?
Let's see how this tool works. Once you enter the `wgit` command in your terminal, it will ask for a Github username and the repository name from where to copy the files. Then it will list out all the files, you can then choose multiple files by selecting them and press Enter to copy to your current directory.

It's a very simple tool to use and it got an intuitive user experience with the file chooser prompts.

## Install
You can install this package as a global npm module with the following command:
```
npm install -g wgit
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/al4r5lgiohj9drv26k0e.png)

## Usage
```
wgit
```
You can also use npx to run:
```
npx wgit
```

Please give the tool a try and let me know for any issues or improvements you want the tool should be having. The source code for the tool is public and hosted in [Github](https://github.com/rajasegar/wgit)

Happy hacking!
Array.forEach() Method  in JavaScript 🚀
Tags: javascript, webdev, beginners
Published: 2021-09-14 05:18:39

 How can we iterate array items through a loop in JavaScript ?? 
 
 If you know the above question answer then give the answer in comment section. 

 Today we are learning the most important method in JavaScript. 

 Array.forEach();
 
 • What is Array.forEach() 
   method ?
 => In which method we can 
   iterate array items through 
   a loop it's called 
   Array.forEach() method. 
  
 • Syntax of Array.forEach()
 => arr.forEach((item, index) 
    => { // code here.. })
 
  This method return a callback function.

• Example 

![example 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/408p0t55ft6dtm8rrp8z.jpg)

• Explanation 
  (1) Let's create an array and give any name as per you but I gave 'arr' as name. 
  (2) Now, I used here in next step arr.forEach() method. 
  (3) As we know this method return a callback function and this has two parameters 'item' and 'index'as shown above example. 
  (4) The forEach method iterate all items like a for loop one by one. 
  
• Advantages of forEach() method
  (1) It has a clear syntax. 
  (2) the forEach method keeps the variables from the callback function bound to the local scope
  (3) The forEach method is less error prone. 

🙏 Thank you for reading...
Generate cryptographically safe passwords with Python in 4 lines of code
Tags: python, cryptography
Published: 2021-09-14 05:18:20

---
title: Generate cryptographically safe passwords with Python in 4 lines of code
published: true
description: The secrets module is used for generating cryptographically strong random numbers suitable for managing data such as passwords, account authentication, security tokens, and related secrets.
tags: python, cryptography
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5fpx6jia6l8o2qq975q.jpg
canonical_url: https://milindsoorya.com/blog/generate-cryptographically-safe-passwords-with-python 
---

## Introduction

The secrets module is used for generating cryptographically strong random numbers suitable for managing data such as passwords, account authentication, security tokens, and related secrets.

In particular, secrets should be used in preference to the default pseudo-random number generator in the random module, which is designed for modelling and simulation, not security or cryptography.

read more from the [docs](https://docs.python.org/3/library/secrets.html)

## Using `secrets.token_hex`

This is the easiest method to generate a random text of string, in hexadecimal. 

```python
>>> token_hex(16)  
'f9bf78b9a18ce6d46a0cd2b0b86df9da'
```
In a single line, you get a good enough password. But, yeah there is a but, if you want real hardcore, unbreakable password this is how to do it.

## Using `secrets.choice`
 
`secrets.choice` return a randomly-chosen element from a non-empty sequence. we just have to provide enough variation as the input string.

```python
import string
from secrets import choice

characters = string.ascii_letters + string.punctuation + string.digits
print(characters)
# abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~0123456789

password = "".join(choice(characters) for x in range(0, 32))
print(password)
# ONFe[)P>5^(jnJ\7ZgYw,|671BZ&!8R"
```

## Conclusion 

There you go a strong 32 character password 🎉🎉

Follow me on [Twitter](https://twitter.com/milindsoorya)

## Related articles

If you like this article I am pretty sure you would like the following ones too 😉

- [Build a Spam Classifier in python](https://milindsoorya.com/blog/build-a-spam-classifier-in-python)
- [Introduction to Word Frequencies in NLP](https://milindsoorya.com/blog/introduction-to-word-frequencies-in-nlp)
Is there any previewer available for the base64 to following formats xlsx/xls, docx/doc, pptx/ppt,txt?
Published: 2021-09-14 04:54:34

Here is my problem statement. Am having a base64 for the following list of document types that I mentioned above. I want to show the document like a previewer in view when the user click on a particular document type on react js. 
     I analyse some of the npm packages but nothing will support the conversion of base64 to the above-mentioned document type.
     I want to know is there any way that we can show it by using free or paid package. Is there a way that we can achieve this?
30+ Amazing Features In TYPO3 v11.4!
Published: 2021-09-14 04:37:19

Yay! TYPO3 v11.4 comes with a lot of Backend and user functionality improvements. With vital new features and improvements, our favorite TYPO3 CMS is just getting better.

Unlike us, you must be waiting excitedly for TYPO3 version 11 to launch. Beta TYPO3 version 11.3 is out and we have been following the TYPO3 version 11 development closely and trying out the new features on our test sites. For each TYPO3 version 11.4 released, I’ve provided key specific insights concerning any new features and functionality.

One more thing, this blog is dedicated to TYPO3 people who contribute to the betterment, improvement and enhance the richness of the amazing TYPO3 OpenSource Project.

In this article, we will show you what’s coming in T3v11 with its new power packs added in the latest release.

TYPO3 v11.4 

File List Module
Columns Selector Filter
Workspaces Module
Languages/Translations
TYPO3 Redirects
Development Changes for Developers & Integrators
File folder Configurations
TCA Foreign Table
TCA Option treeConfig
Custom Icon Registration
Forms Framework: Datepicker.js
Workspaces Module
Database Identifier Quotation 
Important Fields 
New Option: showNewRecordLink 
SoftReference Parsers 
Indexed Search 
Icons in Reports Module 
CKEditor Plugin "Autolinking"
Doctrine DBAL: New Method notInSet()
The HtmlParser Class
TYPO3 CLI
Global Namespace 
PSR-14 Events
Attribute "Channel" for Logger Injection (PHP v8) 
New Class LinkResult
Application Information 
Extbase ObjectManager 
Generic Extbase Domain Classes
Collection Types of Non-persistent Objects
Fluid ViewHelpers
Fluid ViewHelpers
Fluid View Clean-up
Conclusion

Checkout all 30+ features on our blog here, https://t3terminal.com/blog/typo3-v114/
Fundamentals of Sorting in Python
Tags: python
Published: 2021-09-14 04:36:01

The easiest way to sort is with the sorted(list) function, which takes a list and returns a new list with those elements in sorted order. The original list is not changed. Sorting is a process of arranging items in ascending or descending order. This process can be implemented via many different algorithms.

For more details please go through below link:
https://www.devglan.com/python/sorting-in-python
Git Dos and Don'ts | Best Practices for Git
Tags: git, tutorial, productivity
Published: 2021-09-14 04:31:24

At [Syncfusion](https://www.syncfusion.com/), we’ve been using the Git workflow to manage complex products across a variety of products. However, to successfully collaborate with team members using Git, it’s important for everyone to be on the same page regarding how best to utilize version control for their specific use cases. Here is a list of dos and don’ts to help you navigate Git. 

{% youtube _Nqq5QNu4Nw %}
Easily deploy your Python Flask web apps online with Gitlab and Heroku
Tags: gitlab, heroku, flask, python
Published: 2021-09-14 04:04:22

# About the tools

We will start with a summary of the tools that we will use:


- VS Code: Popular code editor.
- Flask: Small web server that we can set up with little code.
- Gunicorn: A simple WSGI HTTP Server in which we can mount Flask.
- Postman: An easy platform to test our Rest APIs.
- Gitlab: Version control service in the cloud and DevOps integration.
- Heroku: Platform that allows us to upload projects and deploy them online.

# What do we need?

- Create your web app with Flask.
- Prepare your project repository with Gitlab.
- Create an account in Heroku.

# Configuring our project: Flask and Gunicorn

In this section we gonna prepare our Flask app, the Heroku deploy file and the Gitlab CI configuration.

Now I have a developer blog, continue reading this post here: https://hhsm95.dev/blog/easily-deploy-python-flask-app-with-gitlab-heroku/

Thank you!