teleren/devto huggingface dataset:
Introduction
Tags: ist402, intro
Published: 2021-08-29 23:28:44

#####About me
Hello, my name is Liam Kirkland! I am from a suburb right outside of Philly. I've only moved once and it was to a house 5 minutes away from where we originally lived, so I've pretty much been in the same town my whole life. I am a senior at Penn State majoring in IST with a focus in Design and Development (which has since been replaced by HCCD). My hobbies basically revolve entirely around my PC (mostly just playing games), so I figured IST was a solid fit for my major).

#####Why Web Dev
Web development seems like a field with very broad opportunity, meaning there is a lot of possible options to find a job that would interest me. I hope to learn more about the skills required for the field and want to see if it is a good fit for myself. Web development is constantly evolving (from what I can tell) and is still a fairly new and emerging field. It is something used in virtually every business with new positions opening up everyday. It is something that would be worth gaining experience in to get a head start on the rest of just about everyone looking for a job anymore.

I hope to learn a lot from this class and am excited to work with everyone! :D
I just made my first $1 on the Internet!!! 😲💸
Tags: machinelearning, saas, ai, showdev
Published: 2021-08-31 13:34:33

I couldn't be happier right now.

I've been working on www.namy.ai for a while, and yesterday I finally finished making & training an AI model that I was happy with, and deployed it to live. Then I made a *small* announcement on Twitter (~300 followers) about it.

Some people visited and entered prompts, loitered around, but I didn't see anyone actually buy a domain. "Oh well" I said, I still needed to improve my SEO anyways (barely have done anything on that front😅)

BUT TODAY I log into my dashboard, and I see:
balance: €0.99 EUR

😲

It finally happened!!!!!! My FIRST internet money that I earned on my own!!!!

I know it's not a lot and that I have a long way to go (and just making twitter posts is not sustainable. I need to improve SEO.), but damn does it feel good!

It's definitely validating that someone, somewhere paid money for something you built. Great feeling!

Anyways I just wanted to share this little victory with the community here. Wish you all the best!
What are the issues on maintaining open-source projects?
Tags: opensource, productivity
Published: 2021-08-31 13:26:44

Hi Dev.to Fam,

I was wondering what are the main issues you are having while you are maintaining your open-source project?

Is your contributors checking the software-quality, test-quality? How do you keep your pipeline quality? 

Recently, I was digging into some public projects and seeing some badges on top of the readme files. It may turn into a garbage at some point. Do you think those badges are important for you while contributing to a project?

Really curious about your thoughts
Visual Guide of React Native Image ResizeMode: 
Tags: reactnative
Published: 2021-08-31 13:18:56

As a React Native developer, I most of the time find myself checking a visual guide over and over when it came to deciding which ScaleType makes sense for my ImageViews.

Since I’ve been working on a React Native application for a while now, I thought it might be helpful to have a similar visual guide to choose a resizeMode for Image components.

Below are screenshots of all the different resizeModes placed side-by-side:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nwhx85bix8aebvbr0vs.jpg)

<b>The difference between contain and center </b>


As you might have noticed, the results from contain and center are the same in our example. That’s because I’m using an image that is bigger than the <Image> component (in this example, 200 x 200)


If we resize the image to a smaller size than the <Image> component, we will see a difference:

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

As you can visualise above, contain will scale the image (up or down) so that the whole image is “contained” in the view component at the maximum scale possible. However, center will scale the image down only if it’s bigger than the component. Otherwise, it will just show the image in the original scale.


I will also include all resizeMode definitions from the official React Native docs here:

<b>cover:</b> Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

<b>contain:</b> Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

<b>stretch:</b> Scale width and height independently, This may change the aspect ratio of the src.

<b>repeat: </b> Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.

<b>center:</b> Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.

Hopefully this post will make it easier to choose from different resizeModes. Let me know what you think 🙂
ES6 - A beginners guide - Welcome
Tags: javascript, codenewbie, beginners, webdev
Published: 2021-08-31 13:14:49

What is ES6? How can I use it? Follow this series to learn more.

## Welcome
For my employment we have been asked to learn/revisit ES6 as we begin to transfer the JS in our codebase into ES6, if you're here then its likely you already know what ES6 is, if you don't...let me summarise below. 
### What is ES6?
Well, ES6 stands for ECMAScript 6 which has been around now since June 2015, it is also known as ECMAScript 2015. [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript) itself has been around since June 1997 with an annual review of the standards in place. ECMAScript was invented to standardize JavaScript meaning that browsers could be built around that standard ensuring support of the different levels. ES6 introduces us with some new tools which I will go into in more detail in this series, for example:
* Classes
* Arrow Functions
* New Variable scoping (var, let, const)
* Template Literals
* Object and Array Destructuring
* Default Parameters
* Rest and Spread Operators

Many ES6 tutorials will also cover various Array "helpers". I'll be looking to touch on these too as they are frequently used, but I have found often referred back to as a reminder of how to write it "properly". So those are:
* forEach
* map
* filter
* find
* every/some
* and reduce (save the hardest til last!)

In this series, for each of the above I will try to include a variety of examples and real-world use cases
Client for WebSockets based on Node.js
Tags: javascript, soap, ensemble, node
Published: 2021-08-31 13:11:06

WebSockets as a communication technology wins increasing importance.  
In the SAMPLES namespace, you find a nice example for running a WebSocket Server.  
There is also a useful example for a Browser Client. JavaScript does most of the work. 

My point is:  
How to consume the output of a WebSocket Server in your application?

You may take the engineering approach and use the available tools and classes to handle  
everything around protocol switching, encoding, encryption, ....   
It is great if you are able to achieve this and if you are willing to invest the required time and find a sponsor to support it.

On the other hand, this is re-inventing the wheel. This works already in almost every browser.  
e. g JavaScript has excellent and verified libraries to support what you need.

And there is the engine to run it without a browser: **Node.js**  
And Caché, IRIS, Ensemble have meanwhile a well-established interface module ready.

So I took a closer look after managing to get the correct versions together.

Once the WsockDemo.js was assembled and tested you launch it over CPIPE or $ZF(....)  
You provide control information from the server and get back the result to the server.

If you are used to JavaScript there are no big surprises. The major difference to accept and  
understand is that yo operate in an almost total asynchronous environment and callback  
methods and their interaction are probably the most important difference to traditional  
programming.

I have placed the [example here with more docs](https://github.com/rcemper/WsockClient.js) as an invitation to break out  
(for most developers) of your traditional environment and find something new and useful.

 I have to admit that this was my first exercise into Node.js and I'm far from taking the best  
and most advanced solution. But the result in relation to the effort was convincing.  

Remember:

<pre>This is a coding example working on Cache 2018.1.3  
 It will not be kept in synch with new versions      
 It is also <b>NOT</b> serviced by InterSystems <b>Support</b> !</pre>
What is “Write a Clean Code”?
Tags: webdev, devops, database
Published: 2021-08-31 13:07:51

It’s a difficult and at the same time simple line to grasp. For any newbie developer, your effort is always towards writing lines of code to perform a certain specific function. As you go by, you will realize there is more than just writing codes. It’s not all about implementing a function, but making it easier for other developers to understand.

Yes, you will be employed and after a certain period, you will leave the company. How will your code be looked upon by other developers who will take over your job of maintaining it? Put yourself in the shoes of that developer. Are you able to read and make changes to what he/she has created?

Here are the questions to ask after writing your code

Can I read and explain what I have written?

May I know the working of this function I have implemented?

Am I able to make some changes whenever the product managers ask for them?

 Will another developer be able to understand any of my code within a short period?

The best journey to writing clean code

Just write your code the way you want at first. Implement what you need to and make sure it’s running smoothly. All these functions need to be in order. After deploying it, and it seems to perform the duty well, at the stage of testing, revisit your code. Remove all redundant codes. They always make your application huge, which slows down your website. Look into all HTML, CSS, and JavaScript to eliminate these lines that are doing nothing.

Then on each function in your code, either java, CSS, js, or python, make comments. Let the comment define what that function is doing. Also, make sure the function titles talk more. Let’s say it’s an addition function for money. Then you can name it, addTotalMoney(). This is simple because the other developer will understand that the function is adding the total amount of money collected.

It goes to all the classes. Use noun words to stand for something. Let’s say you want to develop a school portal, so you might name the class as School().

In your code, make sure there is space from one category to another. This goes to your HTML page to ensure for every grid there is a space with a comment for another developer to understand where the image or this design is located in the code. Be precise and simple. In the backend languages also space your words. Like for example a+b=c, might be a + b = c. There is a huge difference between these two. The second one is easier to read than the first one. Remember you won’t be punished for that, but it’s good practice to space your work. 

What to avoid:

Use of letters like add a +b

Too many comments on the same functions, yes it can be two to three licenses, but not more than five.

Leaving behind unused lines of code. This will slow down your loading time.

Lastly, remember another creature will work on that code as it grows. Kindly give others humble time. Let them shower words of praise upon you.
Web 3.0 Summer Camp - learn and win awards by participating in hackathons!
Tags: blockchain, webdev, hackaton, webmonetization
Published: 2021-08-31 13:03:00

[MVP Workshop](https://mvpworkshop.co/)'s R&D Lab, [3327](https://3327.io/), is organizing a Web 3.0 Summer Camp.
It is a hackathon that consists of 6 challenges, which lasts two weeks each. The goal of the challenges is to go through all the significant subjects of Web 3.0 technology, ranging from dApps to Layer 2 solutions on the Ethereum blockchain.

3rd out of 6 challenges is currently in progress, but you can tune in on any of the upcoming challenges. To help you do that materials and solutions from previous challenges are available to all participants, as is the help of our mentors.
For every challenge, there is a reward for the best 3 projects that consists of 3000 USDT for 1st place, 1500 USDT for 2nd place, and 500 USDT for 3rd place.

If this sounds interesting and you want to join, you can click on [this](https://3327.io/summer-camp/) link to find out more. Check the dates, see what problems are being solved and join us on this exciting Web 3.0 adventure!
Presenting Enigma Reloaded(a self hosted, offline, DIY, encryption webapp)
Tags: privacy, security, webdev, react
Published: 2021-08-31 12:40:55

## Background

As you already know in 2021 human privacy is at the mercy of large tech corporations. All data in and out including our private messages is being scanned and analyzed whether if you like it or not.

## What is enigma reloaded?

It's a simple tool that works as a contact book where you can keep the public keys and conversations with your contacts.  It works inside your browser without any:
- external service or server
- dependency on the internet (it has 100% offline support)
- all data stored in the browser is encrypted using AES
- dependency on the domain, `enigma-reloaded.github.io`. You can self host it, it's simple HTML, CSS and JS.

## Use case

Take this message:
`Hey Bob, how are you?`

Without being encrypted you see the message, Bob sees the message, your app from your phone or browser sees the message, bob's app sees the message, and maybe more than that.

Enigma reloaded helps you turn that message into
`oayt2NqA kTlEB6 vzYArrD 0OXUw 1Z H 8ZX gFIGa1wM A1fC2Oil qA,mw iU8vPnhuw 8Jmbtk 4 mTp1 WP8cq asM ZP`

Which looks like a text fragment from analyzer point of view. But the true meaning is indecipherable, unless you are Bob, the true receiver who can decipher back the text using his Enigma Reloaded with his public key.


## How to get it?
You can use Enigma Reloaded directly here: [https://enigma-reloaded.github.io/enigma-reloaded](https://enigma-reloaded.github.io/enigma-reloaded)

Or even better, to have 110% control, download gh-pages branch: https://github.com/enigma-reloaded/enigma-reloaded/tree/gh-pages as a zip and host it's content.

You can also check the source code for it here: https://github.com/enigma-reloaded/enigma-reloaded

## Other nice features:
- Encrypt and decrypt files
- Time based PIN access control
- backup and restoration from encrypted backups
- PWA installation
What is the difference between these two ways of serving React App 
Tags: help, react, node
Published: 2021-08-31 12:28:28

I would like to serve a react project from the nodejs server. I encountered the two ways of doing it , the first ways is to use express to serve just the build folder for whatever the req made.

```javascript
const express = require('express')
const app = express()
const path = require('path')

app.use(express.static(path.join(__dirname,'build')))

app.get('*',function(req,res){
    res.sendFile(path.join(__dirname,'build','index.html'))
})
module.exports = app;

```
The second way is one using `ReactDOM.hydrate` and `ReactDOMServer.renderToString` to serve the app.
refer this link https://www.digitalocean.com/community/tutorials/react-server-side-rendering


What is best way to achieve the good SEO from the above mentioned ways? and also when to choose one over other.

Thnak you!!!
How I created a PHP function to transform a Local DateTime to UTC
Tags: php, functional, datetime
Published: 2021-08-31 12:19:41

Today I had to resolve a problem at work, at first sight it could be simple, but hands on, it was not so.

Probably You will find another solution, but to me this was simple to code and enough easy to maintain. The idea is to use the functions that starting from PHP 5.4 we have to solve this problem.

I had an API which received the DateTime and the timezone, and I had to transform it in UTC before sending it to the DB, using Unix timestamp was not an option.

``` PHP
<?php
//we can specify GMT or for example a timezone name, under the snippet I'll provide the link to de documentation to find the names of the different timezones

$userTimezone = new DateTimeZone('GMT+2');

$myDateTime = new DateTime('2021-08-31 10:48', $userTimezone);

//get the offset of the selected timezone from UTC
$offset = $userTimezone->getOffset($myDateTime);

//create the corresponding DateTime in UTC
$myInterval=DateInterval::createFromDateString((string)$offset . 'seconds');
$myDateTime->sub($myInterval);

//print the result
$result = $myDateTime->format('Y-m-d H:i:s');
Echo $result;

```

## Usefull links

I have to mention this article which helped me very much, my snippet is an adaptation of this one [here](https://blog.serverdensity.com/handling-timezone-conversion-with-php-datetime/).

Also, for a better implemantation, i suggest to use the strings accepted by the method, you can consult the list in the PHP DOC [here](https://www.php.net/manual/en/timezones.php)
Retrospective of an hackathon
Tags: watercooler
Published: 2021-08-31 12:18:07

Yesterday I found some notes written the past year about a personal retrospective after the participation to my first remote hackathon.

I want to share with you some hints I learned:

* There are a lot of tools to organize and manage the work of a remote team without too much pains.
Well, but I think everybody learned it in these strange time.
  
* Use every library, framework or everything else you know to prototype the result in a quick way. In this context: "the idea is better than the solidity of the solution".

* Invest some time implementing a base build and deploy workflow will have great ROI in the last part of event.
  
* Invest more time into the initial brainstorming and then plan some global checkpoints to fix the idea.

* Do few quick video chat and maintain an active textual chat to align in real time the team about the progress of single tasks.

* Simplify, simplify and simplify.

* Be available and pro-active.

* Work to unblock the work of other members of the team.

Italian 🇮🇹 speakers can found the article [here](https://www.owlcode.eu/blog/cosa-resta-di-un-hackathon/)
Random numbers in Node.js with Crypto
Tags: crypto, node, math
Published: 2021-08-31 12:15:29

Until not long ago the way to get a random number in JavaScript was to use `Math.random()`, which it will give you a "random" number between 0 and 1, and if you needed to have a number between 0 and 10, you probably did something like this:

```javascript
const number = Math.floor(Math.random() * 10);
``` 

But the are a few problems with the above.

The first thing is that is not cryptographically secure, to a point that you can even predict the value you are going to get, and you can read an interesting stackoverflow answer [here](https://security.stackexchange.com/questions/181580/why-is-math-random-not-designed-to-be-cryptographically-secure) if you want to know more.
The second thing is that is rather clucky as a solution, you are literally getting a number like `0.7478816910932602`, then multiply by 10 and just use `Math.floor` to get rid of the decimal numbers.
There must be a better way to do it, and indeed you do.

While in the browsers you can use `Crypto.getRandomValues` (more [info here](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues)), with Node.js you can access to the [`crypto`](https://nodejs.org/api/crypto.html#crypto_crypto) library, which gives you access to a much more complete set of tools than the browser has, and it simplify actions like "get a random number between 1 and 10".
To replicate the code we had at the beginning, you just need to use the `crypto.randomInt(min, max)` method, so our code will look like this:

```javascript
const { randomInt } = require('crypto');

const number = randomInt(0,10);
```

And the `crypto` library is by design cryptographically secure and it's much simpler to use in my opinion.
Here another example on how to use it randomly select a value from an array:

```javascript
const { randomInt } = require('crypto');

const colours = ['red', 'blue', 'green', 'yellow'];

const pick = colours[randomInt(0, colours.length - 1)];

console.log(pick); // blue
```

> Note: the `crypto` library was added from v14.10.0 and v12.19.0 onwards.
ESLint Config for React and React Native Development
Tags: reactnative, react, eslint, prettier
Published: 2021-08-31 12:15:02

Over the years of working with `React Native` I've collected several plugins and rules which I use in my development and finally gathered it in a single package which is ready to be shared.

I initially started with `TSLint` but when it was announced that it was deprecated switched to `ESLint`, first with `TSLint` plugins to have smooth transition and then to completely abandon `TSLint`.

I had issues with configs like `AirBnB` and `Google` because they didn't cover some things and were not strict enough, so I decided to do what suits me best rather than overriding things I needed, this also let me to check what rules `ESLint` offers.

Primarily this config is made for `React Native` + `TypeScript` development but it also works well with `React` projects.

Plugins which I use:
* [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint)
* [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import)
* [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react)
* [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks)
* [eslint-plugin-react-native](https://github.com/Intellicode/eslint-plugin-react-native)

There are also [TSConfig](https://github.com/svbutko/eslint-config-react-strong/blob/master/configs/tsconfig.md) and [Prettier](https://github.com/svbutko/eslint-config-react-strong/blob/master/configs/prettierrc.md) config.

If you are like me and want to have a strict set of rules, then give it a try!

{% github svbutko/eslint-config-react-strong no-readme %}