teleren/devto huggingface dataset:
LP_Tutorials
Published: 2021-01-25 11:09:00

Hello World. My Name is Lorenzo, I am a senior at Pennstate University on the IST Design and development path, who is interested in using programming and tech in artistic and creative "out of the box" ways. 

My Many Tech Related Interest include but are not limited to : 

##VIDEO GAME MODIFICATION
(and video games in general)

Video games are probably my favorite hobby. My primary platform these days is a PC with an RTX 2070 with a Ryzen 3600  with 16 Gigs of DDR4 , Multiple HDDs, and Two SSDs for Dual booting Windows and Pop OS. I play triple A's and Indies. I have always taken an interest in what makes video games work and started creating “user generated content” for them (modding) a young age. Learning about the systems that go on behind the scenes and customizing the games themselves have also been fun for me as well. So far I’ve created mods for a number of titles including Grand Theft Auto 5, The Legend Of Zelda Breath Of the Wild, and Star Wars Battlefront 2. My mods have been played by close to 100,000 thousand people, and people have even made videos on my work that have been viewed by millions. I enjoy interacting with my community and just chatting with people.

##CONSOLE HOMEBREW AND EMULATION

Unlike most, I grew up with both console's and PC's for gaming. Ever since 4th grade I've had a computer in my room that I've built myself. I grew up with an Original Xbox, a 360, a Game Boy, DS, 3DS.
I have however played Nintendo Wii and Gamecube games through emulation (Specificity with the dolphin emulator)
Console homebrew has always interested me because It opens up a console like a PC. I have a pretty funny story where I hacked my friends, grandparents Wii so I could make (legal) ROM dumps for Emulation on my PC back in 6th grade.
I like to track the idea of reverse engineering hardware to work through software on my personal GitHub account. I've contributed to some testing for open source emulation projects such as CXBX. Most emulation software is OPEN SOURCE so I like supporting and following all modern console emulation. 
I’ve recently managed to get my hands on a rare Xbox 360 XDK, and I can't wait to see what I can do with it.

##DIGITAL ART

In recent years I have taken an interest in digital art, photo manipulation, and animation. I've used a range of different programs to show off my more creative side. These programs include photoshop, Adobe animate, (and the open source) Gimp. I am a self taught artist and I am a YouTube taught Photoshop, Animate and Gimp user. 


##SOME PROGRAMING ON THE SIDE
My years at Penn State have familiarized me with Java, C# and the .Net Framework , C++ , and SQL. I’ve made a number of interactive games, helpful parsing applications, and capstone projects. Most of my professional programming I do is for my internship that I work at over the Summer.

##WHERE I HOPE TO GO

I want my career to take me to a place where I can use these skills with creative freedom.


Below is a video tutorial on my new Youtube channel where I show how to use one piece of technology that I like and I'm very familiar with called Adobe Animate: 
https://youtu.be/PpO5x1odqSM
[Série do Instagram - Primeiros passos como backend] Programação orientada a objetos
Tags: beginners, codenewbie, java, oop
Published: 2021-01-25 11:07:27

---
title: [Série do Instagram - Primeiros passos como backend] Programação orientada a objetos
published: true
description: 
tags: #beginners #codenewbie #java #oop
//cover_image: https://direct_url_to_image.jpg
---

Olar, no [primeiro artigo](https://dev.to/kamilahsantos/serie-do-instagram-primeiros-passos-como-backend-logica-de-programacao-2ahb) dessa série listei os posts sobre lógica de programação que escrevi como parte da série, e nesse artigo vamos rever os posts sobre orientação a objetos da última semana:

### [Primeiros passos como backend #5 -  Objeto, atributo, método, o que é isso? ](https://www.instagram.com/p/CJ52jBTAmhv/)


### [Primeiros passos como backend #6 -  O que é programação orientada a objetos ] (https://www.instagram.com/p/CJ8auVRAYkv/)

### [Primeiros passos como backend #7 -  O que é abstração?] (https://www.instagram.com/p/CJ_W78XAFdN/)

### [Primeiros passos como backend #8 -  O que é encpasulamento?] (https://www.instagram.com/p/CKCEHcyACrp/)


### [Primeiros passos como backend #9 -  O que é herança?] (https://www.instagram.com/p/CKOcqJ_goIX/)

### [Primeiros passos como backend #10 -  O que é polimorfismo?] (https://www.instagram.com/p/CKZEOY6gMJk/)


### Algumas recomendações para aprender mais sobre programação orientada a objetos:

[Curso de poo - Curso em vídeo](https://www.youtube.com/watch?v=KlIL63MeyMY&list=PLHz_AreHm4dkqe2aR0tQK74m8SFe-aGsY)

[O que é Programação Orientada a Objetos - Conceitos Básicos de POO - Bóson Treinamentos](https://www.youtube.com/watch?v=dG7LlYne2VA)

[Abstração, Herança e Polimorfismo a base de um bom código
] (https://www.youtube.com/watch?v=qiGTRJlCnlA)

[Curso de Java - Loiane Gronner](https://www.youtube.com/watch?v=LnORjqZUMIQ&list=PLGxZ4Rq3BOBq0KXHsp5J3PxyFaBIXVs3r)

[ORIENTAÇÃO A OBJETOS em 8 minutos: Encapsulamento - DevMedia](https://www.youtube.com/watch?v=vkLEVgPGcyo)


Até o próximo artigo :D
What's in my toolbox #1 : surge.sh (Version Française)
Tags: french, webdev, surgesh, node
Published: 2021-01-25 10:56:42

---
title: What's in my toolbox #1 : surge.sh (Version Française)
published: true
description: 
tags: french, webdev, surgesh, nodejs
https: https//dev-to-uploads.s3.amazonaws.com/i/hjfbdkgrjcnlz0dewbv2.png
---
Vous êtes vous déjà retrouvé dans une situation où vous aviez développé un site static. Il est beau, grandiose, magnifique même. Vous voulez, non, vous DEVEZ le montrer au monde. Il est impératif que vous l'hébergiez et le publier.
Mais à ce moment-là vous n'avez pas d'hébergeur, et vous vous retrouvez obligez à devoir :
- Créer un compte chez un hébergeur
- Prendre un abonnement 
- Récuperez les accées FTP /sftp
- Lancer FileZilla ou autre logiciel de transfert FTP
- Transférez les fichiers

Bref, beaucoup d'étapes.
Trop pour un petit site static selon moi.
Selon les créateurs de _surge.sh_ aussi.

Surge est un outil sous la forme de CLI qui permet la mise en ligne de site static sous des noms de domaines du type : __domaine-aleatoire.surge.sh__.

Pour utiliser Surge, il vous suffit d'installer une version récente de **Node.js** et **NPM**. Ensuite tout va très vite : 
- Lancer `npm install --global surge` pour installer 
- Lancer 
```
surge
 path/to/my-project
 my-project.surge.sh
```
Success! Published and running at my-project.surge.sh
Et voilà. Tout est fait.
Votre site est en ligne. J'ai l'impression d'avoir oublié des étapes tellement ça va vite.

En plus de simplement pouvoir mettre en ligne des sites facilement, surge vous propose d'autres fonctionnalités : 
- Utilisez vos propres noms de domaines
- Créez des certificats ssl pour vos noms de domaines
- Créez des équipes
- Automatisé les compressions/décompressions Gzip
- Redirigez automatiquement les noms de domaines "www"
- Listez vos projets
- Sécurisez vos projets par mot de passe
- Mettez en place des publications incrémentales

Je vous conseille de tester cet outil. Il est très approprié pour la mise en prod d'un petit site statique, ou d'un prototype de projet pour montrer au client.
Même si il fonctionne également pour des sites de plus grande envergure, j'aurais tout de même tendance à m'orienter vers d'autres outils. Mais ça je vous en reparlerais plus tard.

A bientôt. De l'amour, des bisous. Salut.



_PS : Ce post devait être publié il y a 2 semaines... Désolé du retard, je vais y arriver à mettre en place une routine pour écrire chaque semaine 🤞_
Welcome, Fellow Dummies!
Published: 2021-01-25 10:29:06

Hello, World! My name is Kevin Hughes and I'm a senior at Penn State University studying Information Science and Technology and Security and Risk Analysis. IST is my third major, and from how much I've enjoyed studying it, will probably be my last.

I'm from a small town in Northern New Jersey called Jefferson. When I'm not taking advantage of the largest lake in New Jersey, which is located just miles from my home, I can usually be found on my Xbox playing Destiny 2 or BSing with my buddies in a party chat.

Something about technology has always interested me, especially the way it's used to bring about change in the world. Intelligence and information, and the way we perceive it, has been changed by the emergence of new and incredible technological advances. We know more now, and have more avenues to learn than ever before.

Although I've always been interested in technology, I have not always had the opportunities to learn as much as I would have liked to in the past. My high school never offered any sort of technology or information science courses, so I came into college with far less knowledge than most of my peers. In my first few IST courses, I felt vastly undereducated, and I contemplated moving to a new field of study. I am so glad that I didn't, because the work I've done to get a solid understanding of the technology I use every single day has proven to be one of the most rewarding journeys of my entire life. Failure and trial and error have played huge parts in this journey, as well as triumph and personal breakthroughs. I am far from proficient in any IST practice, but I can at least say that I'm not a newbie anymore, and when my professors lecture me, I actually know what they're talking about, which is more than I can say about my entire freshman and sophomore years here at PSU.

One of my goals is to try and ensure that people who are like I was, when I felt like the biggest dummy in the College of IST, have an outlet to see that a degree in IST is possible regardless of past knowledge of the subject. My brand is designed to do just that. If I can explain anything simply enough that someone with little to no technological understanding can comprehend it, I will consider this venture a success. (A few laughs along the way wouldn't hurt, either.)

I've linked the information for my channel/brand, ForDummiesKH, below as well as a link to my first video, briefly explaining some of what I've covered here as well as a little more detail about something that I find interesting. Thanks for stopping by, and I hope to see you (digitally) again soon!

YouTube Channel: ForDummiesKH - https://www.youtube.com/channel/UCg0smZlQLzzOmf7aPsNjf1g

Video Link - https://youtu.be/yNCvInL3RJw
Mark Portfolio (React Hooks & GSAP) 😍
Tags: 100daysofcode, gsap, javascript, react
Published: 2021-01-25 10:15:46

Mark portfolio Using React Hooks & GSAP 🎉😎

Demo : https://mark-portfolio.netlify.app/

Repo : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day34
CSS grid compatibility for iOS
Tags: help
Published: 2021-01-25 09:50:33

I have a strange issue that a design I did using CSS grid is not displaying properly on iOS devices, irrespective of the browser (Safari, Chrome, etc). On the other hand, the grid is displayed normally on Android devices. Is there a particular incompatibility between the operational system and this CSS rule? If you are an iPhone owner and you want to test, the page I am talking about is this: https://may4eto.github.io/gallery/ (the images appear stretched out vertically). I tried changing the viewport settings in the HTML and used autoprefixer for the CSS but still doesn't work.
Hire Dedicated Angular Developer in India
Tags: angular, android, webmonetization
Published: 2021-01-25 09:42:03

Web Idea Solution is one of the most preferred companies to Hire Dedicated Angular Developer in India based web application development as our Angular JS developers have had demonstrated work involvement with building, conveying and appointing a verity of Angular JS based web applications and entries.

http://www.webideasole.com/

Email: info@webideasole.com

Contact: 9932555605
Some small Css tips #003
Tags: webdev, css, html
Published: 2021-01-25 09:27:03

---
title: Some small Css tips #003
published: true
description: I try to tweet a small css tip every day. Here is a collection of some of them.
canonical_url: https://since1979.dev/some-small-css-tips-003/
cover_image: https://since1979.dev/wp-content/uploads/2021/01/some-small-css-tips-003.jpg
tags: webdev, css, html
---

To continue on my [previous post](https://dev.to/vanaf1979/some-small-css-tips-002-13b6) here are some more tweets with little Css tips that might help you in your projects. 

### Attribute selections
{% twitter 1342053474356367366 %}
Check out the full documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

--- 

### Missing attribute selection
{% twitter 1342748105209499648 %}
Text version is here: https://gist.github.com/vanaf1979/743529e1910c7f39eada070a41eba40c

Css :not() documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

To check for more a11y issues i recommend you check out checka11y.css https://github.com/jackdomleo7/Ch

--- 

### Left aligning your html lists
{% twitter 1343156984506437632 %}
Full text version is here: https://gist.github.com/vanaf1979/f1107b152e21560ac47a529ce733c808 

--- 

### Simple columns
{% twitter 1343504851980972034 %}
Full text version is here: https://gist.github.com/vanaf1979/27ce8660def0de2c58a34c21e7ccf98c

--- 

### Adding icons to your links
{% twitter 1343889546946236417 %}
Full text version: https://gist.github.com/vanaf1979/1f73caabf97a70ee9629ef80052aa81b

Attribute selectors docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Font Awesome with pseudo-selectors docs: https://fontawesome.com/how-to-use/on-

--- 

### Responsive headers with clamp
{% twitter 1344255463332990977 %}
Live example in CodePen > https://codepen.io/Since1979/pen/KKgQzKw?editors=1100

Css Clamp Docs > https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

Css Clamp browser support > https://caniuse.com/?search=Clamp

--- 

### Want more of this?

If you would like to have these tips, and other stuff, in your twitter timeline come and follow me [@Vanaf1979](https://twitter.com/Vanaf1979). If you just want the gist you can follow me here on dev.to [@Vanaf1979](https://dev.to/vanaf1979) as well. Or you could check out my blog at [Sinse1979.dev](https://since1979.dev)

**Thanks for reading and stay safe.**
Top 5 coding websites in 2021
Tags: codenewbie
Published: 2021-01-25 09:26:59

Hello programmers this is Satyam again back with another awesome blog and in this blog I am going to discuss the best coding sites you need to visit in 2021.So programmers let's get started.




1.Codechef:CodeChef is known as a non-profit educational organization founded by Direct, an Indian software company. You can immediately resolve the issue on their website through their online editor support tool. And depending on your level, choose the challenges listed on the website. Also, its highlight is that you can communicate with other developers if you have difficult questions or answer questions from other developers.The rating system in Codechef is a very slow process and if you want a fast rating system then it's not for you but if you want to practice more then codechef is good for you.


2.Codeforces:It is one of the most popular website for coding and contests are held regularly it it and the rating system of codeforces is pretty fast and the questions are literally difficult.It is maintained by a group of competitive programmers from ITMO University led by Mikhail Mirzayanov. Since 2013, Codeforces claims to surpass Topcoder in terms of active contestants.


3.Hackerrank:Hackerrank is a very interactive website for coding unlike codeforces and codechef the questions are easy and personally I enjoy while using this site for coding because of it's friendly UI.HackerRank's programming challenges can be solved in a variety of programming languages (including Java, C++, PHP, Python, SQL, JavaScript) and span multiple computer science domains.


4.Topcoder:Topcoder is a crowdsourcing company with an open global community of designers, developers, data scientists, and competitive programmers. Topcoder pays community members for their work on the projects and sells community services to corporate, mid-size, and small-business clients. 


5.Leetcode:This is another awesome website for coding. There are 800+ questions (and growing), each with multiple solutions. Questions are ranked by level of difficulty: easy, medium, and hard. Similar websites include HackerRank, Topcoder and others.

This article is originally published at:https://www.devtipsntricks.com/2021/01/top-5-coding-websites-in-2021.html?m=1


Thanks for Reading
Adding MongoDB (Mongoose) to Next.js APIs
Tags: javascript, mongodb, nextjs
Published: 2021-01-25 09:19:42

After you have created a `Next.js` app, install mongoose `yarn add mongoose` then create `next.config.js` at the root directory of your app if it doesn't exist and in it add your MongoDB connection url string.

## next.config.js

```javascript
module.exports = {
    env: {
        mongodburl: "Your MongoDB connection String",
    }
};
```
Then create a MongoDB connect middleware that will be called to create a new connection to DB or reuse the existing one whenever we do an operation to DB, in my case I added `middleware` folder in the root directory of the app and added it there.

## middleware/mongodb.js

```javascript
import mongoose from 'mongoose';

const connectDB = handler => async (req, res) => {
  if (mongoose.connections[0].readyState) {
    // Use current db connection
    return handler(req, res);
  }
  // Use new db connection
  await mongoose.connect(process.env.mongodburl, {
    useUnifiedTopology: true,
    useFindAndModify: false,
    useCreateIndex: true,
    useNewUrlParser: true
  });
  return handler(req, res);
};

export default connectDB;
```

Then create your models, in my case I added `models` folder in root directory of the app and created a `User` model in it.

## models/user.js

```javascript
import mongoose from 'mongoose';
var Schema = mongoose.Schema;

var user = new Schema({
  name: {
    type: String,
    required: true
  },
  email: {
    type: String,
    required: true
  },
  password: {
    type: String,
    required: true
  },
  since: {
    type: Date,
    default: Date.now
  }
});

mongoose.models = {};

var User = mongoose.model('User', user);

export default User;
```

Then lets create an api for `user` and add create a new user functionality in it in the `pages/api/user` directory.

## pages/api/user.js

```javascript
import connectDB from '../../middleware/mongodb';
import bcrypt from '../../middleware/bcrypt';
import User from '../../models/user';

const handler = async (req, res) => {
  if (req.method === 'POST') {
    // Check if name, email or password is provided
    const { name, email, password } = req.body;
    if (name && email && password) {
        try {
          // Hash password to store it in DB
          var passwordhash = await bcrypt.sign(password);
          var user = new User({
            name,
            email,
            password: passwordhash,
          });
          // Create new user
          var usercreated = await user.save();
          return res.status(200).send(usercreated);
        } catch (error) {
          return res.status(500).send(error.message);
        }
      } else {
        res.status(422).send('data_incomplete');
      }
  } else {
    res.status(422).send('req_method_not_supported');
  }
};

export default connectDB(handler);
```

We are done here, just make a post request to `http://localhost:3000/api/user` in the request body include: `name` `email` and `password` you will get a response either `user object` if user is created successfully or an `error message` if something went wrong.

### Happy Hacking!
You need to try this NPM Package
Tags: npm, javascript, node
Published: 2021-01-25 09:14:23

The title might sound clickbait but I really find this NPM Package to be extremely useful. The Package I'm talking about is [patch-package](https://www.npmjs.com/package/patch-package).

Last week I've made an app, [Postzy](https://postzy.cc), and I needed a clean way to slightly modify one NPM Package I was using. This is when I come across [patch-package](https://www.npmjs.com/package/patch-package). I was so happy because it was doing exactly what I needed it to do (and this rearely happens with a package 😃).

## How does it work?
It's very simple to use.

### Patch a package
You first need to go and make some changes to a package inside your node_modules folder.

After that, you can run `npx patch-package [package-name]` or yarn, if you're using yarn. 

It will create a folder called "patches" inside the root folder of your project. You'll need to commit this folder to git to share the patch with your team and also deploy the changes to your server (depending on your deploy flow).

### Apply a patch
After you made a patch, to apply it you can define a npm run command like `"postinstall": "patch-package"`. You can run this command on the server after `npm install` or on your local machine to apply the patch.


**If you have any question, don't hesitate to [contact me](https://statescu.net).**
A functional application of Array.every() and Array.some()
Tags: javascript, functional
Published: 2021-01-25 09:07:57

---
title: A functional application of Array.every() and Array.some()
published: true
description: A functional application of Array.every() and Array.some()
tags: javascript, functional  
cover_image: https://assets.change.org/photos/2/jh/ux/SmjHUXRmuTXZhqY-800x450-noPad.jpg?1523545691---

TL;DR

```javascript
const and = (...fns) => (x) => fns.every(f => f(x))
const or = (...fns) => (x) => fns.some(f => f(x))
```
(work it out yourself if you can't be bothered reading 🙃)

---

You know the functional functions `compose` and `pipe`?

```javascript
const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);
const compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x);
```

Well, I was writing some code to detect if a window was tiled to the left of the screen, i.e. aligned to the left of the screen and full height.

I already had the functions `isLeftAligned` and `isFullHeight` and so wrote a new function `isTiledLeft`:

```javascript
function isTiledLeft(window) {
    return isLeftAligned(window) && isFullHeight(window)
}
```

But I didn't like the repetition of `window`, heck what if there are more conditions to pass for the window to be considered tiled left?

In a spark of misguided insight I thought "Ah!, I can use compose"

```javascript
const isTiledLeft = compose(isLeftAligned, isFullHeight)
```

and call it like this:
```javascript
if (isTiledLeft(window)) {
    // Do something
}
```

Job done! Neat! Clean! Functional! Legend! 

NOT! The more astute of you (and probably the downright stoners) would immediately know that this is not an application of `compose`!

The problem is that `compose` takes the output of each function and passes it to the next. `isLeftAligned` outputs `true/false` and `compose` then calls `isFullHeight(true/false)`!!! Doh! You're a legend in the same sense that Homer is a legend.

But it was so neat! I wanted to use compose 😞.

And straight after 💥 (I'm bipolar) - the signature of `compose` composed another idea in my head - i can use Array.every()

```javascript
const and = (...fns) => (x) => fns.every(f => f(x))
```

```javascript
const isTiledLeft = and(isLeftAligned, isFullHeight)
```
NICE!

And while I'm here I might as well do:
```javascript
var isTiledRight = and(isRightAligned, isFullHeight)
```
and:

```javascript
const or = (...fns) => (x) => fns.some(f => f(x))
```

And I did use compose after all, just not in code!