teleren/devto huggingface dataset:
DISCUSS: Finding inspiration for new projects
Tags: discuss, watercooler, career, motivation
Published: 2021-05-13 12:23:14

Personal projects are a great addition to your portfolio as a way to showcase not only your skills, but also your general problem-solving and interests! It's the reason why so many people are so focused on it, especially when they haven't been able to make any projects for others yet.

Personally, I don't have difficulty thinking of new projects. (it's usually the anxiety to start them but let's not focus on that 😅) So no, this isn't so much about me.

I'd like this discussion to be for those who can't seem to figure out how to find inspiration for new projects. I see this question being asked so often yet I haven't yet encountered any articles that address this. (feel free to share them if you have some! 😉)

# ✍ Comment below answering the following questions

1. Where do you find inspiration and ideas to start a new project?
2. Most of us devs aren't exactly good at designing. How do you go around that?

---

![Thalita logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa0hfs0886uf0g7c0b7e.png)

[Twitter](https://twitter.com/thalitadev) | [Website](https://thalita.dev)
Node.js RestAPIs upload file to Amazon S3 | using Express, Multer, AWS-SDK
Tags: node, express, amazon, s3
Published: 2021-05-13 12:19:10

https://grokonez.com/node-js/multer/node-js-restapis-upload-file-to-amazon-s3-using-express-multer-aws-sdk

Node.js RestAPIs upload file to Amazon S3 | using Express, Multer, AWS-SDK

In the tutorial, we show how to build a Node.js/Express RestAPIs to Upload Files to Amazon S3 using Multer middleware and AWS-SDK.

Related posts:
- <a href="https://grokonez.com/node-js/sequelize/node-js-express-rest-api-postgresql-example-upload-file-download-file-multer-sequelize-crud#Setting_up_NodeJsExpress_project">Node.js/Express – PostgreSQL example – Upload File/Download File – Multer + Sequelize CRUD</a>
- <a href="https://grokonez.com/node-js/nodejs-express-bootstrap-image">NodeJS/Express – Bootstrap Image example</a>
- <a href="https://grokonez.com/node-js/mongoose-many-to-many-related-models-with-nodejs-express-mongodb">Mongoose Many-to-Many related models with NodeJS/Express, MongoDB</a>

Related pages:
<ul>
<li><a href="https://grokonez.com/nodejs-tutorial">Node.js Tutorial</a></li>
</ul>

<!--more-->
<h2>Technologies</h2>
<ul>
<li>Node.js</li>
<li>Express</li>
<li>Multer</li>
<li>AWS-SDK</li>
<li>Amazon S3</li>
</ul>
<h2>Overview</h2>
<h3>Demo</h3>

<iframe width="853" height="480" src="https://www.youtube.com/embed/v1_g9AO6q1M?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

<h3>Goal</h3>
We create a Node.js project as below ->

<img src="https://grokonez.com/wp-content/uploads/2018/08/nodejs-express-restapis-multer-upload-files-to-aws-amazon-s3-project-structure.png" alt="nodejs-express-restapis-multer-upload-files-to-aws-amazon-s3-project-structure" width="206" height="318" class="alignnone size-full wp-image-14433" />

Expose a RestAPI: <code>'/api/file/upload'</code>

Upload File ->

<img src="https://grokonez.com/wp-content/uploads/2018/08/nodejs-express-restapis-multer-upload-files-to-aws-amazon-s3-upload-file-succesffully.png" alt="nodejs-express-restapis-multer-upload-files-to-aws-amazon-s3-upload-file-succesffully" width="752" height="370" class="alignnone size-full wp-image-14434" />

Amazon S3 ->

<img src="https://grokonez.com/wp-content/uploads/2018/08/nodejs-express-restapis-multer-upload-files-to-aws-amazon-s3-uploaded-file-on-s3.png" alt="nodejs-express-restapis-multer-upload-files-to-aws-amazon-s3-uploaded-file-on-s3" width="728" height="449" class="alignnone size-full wp-image-14435" />
<h2>Practice</h2>
<h3>Setting up Node.js project</h3>
Create a folder <strong>NodejsUploadFileAmazonS3</strong>, then init Node.js project ->

More at:

https://grokonez.com/node-js/multer/node-js-restapis-upload-file-to-amazon-s3-using-express-multer-aws-sdk

Node.js RestAPIs upload file to Amazon S3 | using Express, Multer, AWS-SDK
How to setup Tailwind CSS jit with NextJS
Tags: nextjs, tailwindcss, jamstack, react
Published: 2021-05-13 12:12:07

# The JAMStack


![article meme.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620555129418/Q76AWMbUN.png)

The latest addition to the Tailwind project is the its just-in-time compiler that generates your styles on-demand as you author your templates instead of generating everything in advance at the initial build time.

Here are the advantages that JIT offers:
- Lightning fast build times
- Every variant is enabled out of the box
- Generate arbitrary styles without writing custom CSS (top[-10px])
- Identical CSS in development and production
- Better browser performance in development

## Lets get Started

Create a next project.

```shell
npx create-next-app next-tailwind-tutorial
cd ./next-tailwind-tutorial
```

Next, let's install Tailwind dependencies and create a Tailwind config.

```shell
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/jit
npx tailwindcss init -p
```

![Sucessful tailwind init -p](https://cdn.hashnode.com/res/hashnode/image/upload/v1620847548574/xLVIUp1W6.png)

## A better folder structure

Now we need to modify these two files, but before that lets organize our folder structure

- Create an src folder in the root directory
- Move styles and pages folders inside it.

![Folder Structure](https://cdn.hashnode.com/res/hashnode/image/upload/v1620848604479/-P5kSyICT.png)

1. `tailwind.config.js`
```javascript
module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
```

2. `postcss.config.js`
```javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
```

This will make our development run with Tailwind JIT and in production, it will run JIT one-off.

Now add the Tailwind directives to your 

`global.css`
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

🎉🎉🎉That's it and you are ready to use Tailwind in your next project.

Run the dev server and test out your app.
```shell
npm run dev
```

![Next Home with Tailwind](https://cdn.hashnode.com/res/hashnode/image/upload/v1620850996845/MhRUT4i2O.png)


## Bonus

Tailwind CSS has a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) you can use to speed up development and boost productivity.

Also check out the [Headwind extension](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind), this tool automatically enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.


---

### Refs & Resources

[Tailwind Docs](https://tailwindcss.com/docs)

[Next Tailwind](https://tailwindcss.com/docs/guides/nextjs)

[Tailwind JIT Compiler](https://tailwindcss.com/docs/just-in-time-mode)

If you loved the article and would like to support me, you can [buymeacoffee](https://www.buymeacoffee.com/cryptusneoxys)!
What's new in Angular version 12?🔥
Tags: angular, html, javascript, css
Published: 2021-05-13 12:04:01

Hello Everyone 👋

Angular version 12 was officially released yesterday with some cool features. In this article we are going to see the two new features from Angular 12 release.



**1. Sass support in Component Inline Style**

**2. Nullish Coalescing in Angular Template**


## SASS In Component Inline Style

**Problem**: In the previous Angular versions, Sass features was restricted to use only when it is used in an external `.scss` file. It was not possible to use Sass feature when used as an inline styles in the styles field of the `@Component` decorator.

To explain with the scenario, you can see from the below code, a new variable called `$color-red` is created & assigned it to h1 `color` property. 

```
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Hello world from {{title}}</h1>`
  styles: [
  `
  $color-red: red; // declaring a Sass variable
  h1 {
    color: $color-red; // using the Sass variable here
  }
  `
  ]
})
export class AppComponent {
  title = 'angular';
}

``` 

Ideally, the `h1` content should have shown in the red color. But, it is not. That's the problem till Angular version 11. 

Here's the output from browser:


![older-angular-sass.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620904612521/irGOdIO1O.png)

**Solution:** Starting in Angular version 12, Angular components will now support inline Sass in the styles field of the `@Component` decorator.

With the above same code, if you run the application in the Angular v12, it will show the `h1` content in red color.


![new-angular-11-sass.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620904626370/x5Sw6d5BT.png)

> Note: If you are upgrading from Angular v11 to v12, set `"inlineStyleLanguage": "scss”` to `angular.json` file. If you are creating a new Angular v12, this will be available by default.


## Nullish Coalescing in Angular Template

The nullish coalescing operator (??) was limited to use only in the `typescript` class files. In the previous version of angular, it was not possible to use this operator in the Angular template.

Starting from Angular version 12, it can be used in the `html templates` as well. 👏

Previously, one has to use below syntax to know if the value is null or undefined.
```
{{amount !== null && amount !== undefined ? amount : 0 }}
```

Now, it can be simplified as,

```
{{amount ?? 0 }}
```

I hope it was useful. Thanks for reading it!
Daily Developer Jokes - Thursday, May 13, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-05-13 12:00:03

---
title: "Daily Developer Jokes - Thursday, May 13, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20May%2013%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12588a43d6b.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What do you call an idle server?

___A:___ A waiter.
 -->
I can code well - Now what?
Tags: webdev, careeradvice, career, learning
Published: 2021-05-13 11:58:25

---
title: I can code well - Now what?
published: true
description: Curated learning paths to advance in a career as a software developer
tags: webdev, careeradvice, career, learning

---

When I was in the early stage of my career, a question that always bothered me was — I can code well, but what is next? It took years of research and learning at work to figure out what those skills are(and the list is still incomplete).

We made a list of curated learning paths that helped us find great career opportunities — and do more than just coding.

[https://tiny.school](Tinyschool)

It is a collection of curated learning paths to help developers learn skills to climb up their career path. The skills include more than just coding — things like documentation, collaboration, communication, engineering processes etc.

![Tinyschool career paths](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gyypbjkorg6hu8nt0rd.png)

**Project-based learning** 

You’ll also be able to finish a real-world project and get feedback from mentors. We believe learning is incomplete without practice.

![Tinyschool project-based learning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lu78g7fpa1bwcrez2ynr.png)

And it’s all free to use.
Thanks! Hope it helps.
Why Am I So Bad At This?
Tags: vueforbeginners
Published: 2021-02-08 01:50:14

I have about as much foundational knowledge on JavaScript as a 5th grader...HOWEVER, through multiple hours of rewatching the course lectures and having only one (1) mild breakdown, I think I finally understand Vue! 

Vue, in very watered down language, is a variable swapping framework that allows larger pieces of data (or code) to be swapped into different components of condensed, more complex, and more efficient HTML. Different components of script can be boxed off and edited with your specific information (I hope this is making sense)!

Through creating a Vue function, I had to make sure all of my data transferred over for the HTML and CSS to still look aesthetically pleasing. Through setting the name (look for name with double brackets in code), and other specific, swappable components of my resume, I was able to create a condensed version of my resume. 

Here's a link to my CodePen so you can see my work https://codepen.io/ajtata1999/pen/Rwoamrp


Vue is an extremely powerful tool and can be used to create much more complex pages that have more interactive, "hover over" properties. Hopefully with more foundational knowledge in Vue, I can eventually learn how to create even more elaborate web pages! 

Here's a link to my YouTube Video as well https://www.youtube.com/watch?v=SAcYJpnXnJA&feature=youtu.be

Thanks Everyone!
Riot.Js Cheat Sheet
Tags: riotjs, cheatsheet
Published: 2021-05-13 11:36:26


### Lifecycle

```js
this.on('before-mount', function() {
// before the tag is mounted
})

this.on('mount', function() {
// right after the tag is mounted on the page
})

this.on('update', function() {
// allows recalculation of context data before the update
})

this.on('updated', function() {
// right after the tag template is updated
})

this.on('before-unmount', function() {
// before the tag is removed
})

this.on('unmount', function() {
// when the tag is removed from the page
})

// curious about all events ?
this.on('all', function(eventName) {
console.info(eventName)
})
```
### Router

```js
riot.route('customers/*/edit', (id) => {
})
riot.route('customers/234/edit')
riot.route.start()
riot.route.start(true) // exec the current url
```

### [Nested HTML] Yield to/from

```js
<post>
  <yield to='title'>Hello</yield>
  <yield to='body'>Hey there world</yield>
</post>
```

```js
<post>
  <yield from='title'/>
  <yield from='body'/>
</post>
```

### Nested HTML

```js
<yield/>
```

### [Nesting] Names

```
<my-tag>
  <child name='xyz'></child>
  var child = this.tags.xyz
</my-tag>
```

### Nesting

```
<my-tag>
  <child></child>
  var child = this.tags.child
</my-tag>
```

### API

```js
this.update()
this.update({ data: 'hi' }

this.unmount()
this.unmount(true) // keep parent tag

riot.update() // update all
```

### [Expressions] Events

```js
<button onclick={go}>

this.go = function (e) { ... }
```

### [Expressions] Conditional
```
<div if={error}>
<div show={error}> /* show using display: '' */
<div hide={error}> /* hide using display: none */
```

### [Expressions] Loops

```
<li each={movies}>{title}</li>
```

### Reference
* [Riot.Js Cheat Sheet](https://cheatsheetmaker.com/riotjs) - [Cheat Sheet Maker](https://cheatsheetmaker.com)
Universal Js Module Loader Cheat Sheet
Tags: cheatsheet, javascript
Published: 2021-05-13 11:35:24


### [Supports circular references](https://github.com/umdjs/umd/blob/master/commonjsStrict.js)

~~~ js
(function (root, factory) {

  if (typeof define === 'function' && define.amd) {
    define(['exports', 'jquery'], factory);
  } else if (typeof exports === 'object') {
    factory(exports, require('jquery'));
  } else {
    factory((root.YourModule = {}), root.jQuery);
  }

}(this, function (exports, jQuery) {
  exports.action = function () {};
}));
~~~

### No dependencies

~~~ js
;(function (root, factory) {

  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof exports === 'object') {
    module.exports = factory();
  } else {
    root.YourModule = factory();
  }

}(this, function () {
  return {};
}));
~~~

### [With dependency](https://github.com/umdjs/umd/blob/master/amdWebGlobal.js)

~~~ js
;(function (root, factory) {

  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    module.exports = factory(require('jquery'));
  } else {
    root.YourModule = factory(root.jQuery);
  }

}(this, function (jquery) {
  return {};
}));
~~~

### Reference
* [Universal Js Module Loader Cheat Sheet](https://cheatsheetmaker.com/universal-js-module-loader) - [Cheat Sheet Maker](https://cheatsheetmaker.com)
 * https://github.com/umdjs/umd
NodeJS – Send email by Nodemailer
Tags: node, email, nodemailer
Published: 2021-05-13 11:35:02

https://grokonez.com/node-js/nodejs-send-email-by-nodemailer-example

NodeJS – Send email by Nodemailer

In the tutorial, we show you how to send email from Node.js applications by Nodemailer module.

<!--more-->
<h2>Nodemailer Module</h2>
Nodemailer is licensed under MIT license. It provides an easy way to send email.

To download and install it, we use below commandline:

<pre><code class="language-javascript">
$npm install nodemailer --save
</code></pre>
<h2>Nodemailer Send Mail</h2>
<pre><code class="language-javascript">
var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
  // example with google mail service
  host: 'smtp.gmail.com',
  port: 587,
  secure: false, // true for 465, false for other ports
  auth: {
	user: 'send-email@gmail.com', // replace by your email to practice
    pass: '*****' // replace by your-password
  }
});

var mailOptions = {
  from: 'send-mail@gmail.com',
  to: 'to-email-1@gmail.com, to-email-2@gmail.com',
  subject: 'Sending Email using Nodemailer',
  
  /*
     for plain text body
	 ->	text: 'Just Testing!'
  */
  
  // html body
  html: '<h1>Hello world!</h1><p>The mail has been sent from Node.js application!</p>'
};

transporter.sendMail(mailOptions, (error, info) => {
  if (error) 
    return console.log(error);

  console.log('Email sent: ' + info.response);
});
</code></pre>

More at:

https://grokonez.com/node-js/nodejs-send-email-by-nodemailer-example

NodeJS – Send email by Nodemailer
Hello! I am new to this site! I need help figuring out how to unblock discord. :) If you can help please message me
Tags: help
Published: 2021-05-13 11:34:05

I tried to use  cloudfare from @mrbeanguy but I tried to use the discord unblocked and everything worked until I got to the 

"demo.browsergap.dosyago.com" 

The computer gave me this message, 

"Request Blocked demo.browsergap.dosyago.com is blocked at this timedial tcp 35.226.101.125:80: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond." 

If you could help that would be great!
Atom Cheat Sheet
Tags: atam, cheatsheet
Published: 2021-05-13 11:33:26


### [Notes] ⌘

- For Windows and Linux, `⌘` is the `Control` key.
- For macOS, it's the `Command` key.

### [Shortcuts] Project

| Shortcut | Description             |
| -------- | ----------------------- |
| `⌘⇧p`    | Command palette         |
| `⌘⇧a`    | Add project folder      |
| ---      | ---                     |
| `⌘n`     | New file                |
| `⌘⇧n`    | New window              |
| ---      | ---                     |
| `⌘f`     | Find in file            |
| `⌘⇧f`    | Find in project         |
| `⌘t`     | Search files in project |

### [Shortcuts] Editing

| Shortcut | Description    |
| -------- | -------------- |
| `⌘d`     | Select word    |
| `⌘l`     | Select line    |
| ---      | ---            |
| `⌘↓`     | Move line down |
| `⌘↑`     | Move line up   |
| ---      | ---            |
| `⌘⏎`     | New line below |
| `⌘⇧⏎`    | New line above |
| ---      | ---            |
| `⌘⇧k`    | Delete line    |
| `⌘⇧d`    | Duplicate line |

### [Shortcuts] Git

| `^⇧9` | Show Git pane |
| `^⇧8` | Show GitHub pane |

### [Shortcuts] Symbols view

| Shortcut | Description                      |
| -------- | -------------------------------- |
| `^⌥↓`    | Jump to declaration under cursor |
| `^⇧r`    | Show tags                        |

Symbols view enables Ctags support for Atom.

See: [Symbols view](https://atom.io/packages/symbols-view)

### [Shortcuts] Bracket matcher

| Shortcut | Description                    |
| -------- | ------------------------------ |
| `^m`     | Go to matching bracket         |
| `^]`     | Remove brackets from selection |
| `^⌘m`    | Select inside brackets         |
| `⌥⌘.`    | Close tag                      |

### [Shortcuts] View

| Shortcut | Description            |
| -------- | ---------------------- |
| `⌘k` `←` | Split pane to the left |
| ---      | ---                    |
| `⌘⌥=`    | Grow pane              |
| `⌘⌥-`    | Shrink pane            |
| ---      | ---                    |
| `^⇧←`    | Move tab to left       |

### [Shortcuts] Comments

| Shortcut | Description     |
| -------- | --------------- |
| `⌘/`     | Toggle comments |

### [Shortcuts] Tree

| Shortcut | Description         |
| -------- | ------------------- |
| `⌘\`     | Toggle tree         |
| `⌘⇧\`    | Reveal current file |

### Reference
* [Atom Cheat Sheet](https://cheatsheetmaker.com/atom) - [Cheat Sheet Maker](https://cheatsheetmaker.com)
Web Workers Cheat Sheet
Tags: web, webworker, cheatsheet
Published: 2021-05-13 11:32:29

### [Web workers] Message data

#### [MessageEvent]

```js
bubbles: false
cancelBubble: false
cancelable: false
clipboardData: undefined
currentTarget: Worker
data: "Hello"             ← the data
defaultPrevented: false
eventPhase: 0
lastEventId: ""
origin: ""
ports: Array[0]
returnValue: true
source: null
srcElement: Worker
target: Worker
timeStamp: 1344821022383
type: "message"
```

These are the contents of `message` on onmessage.
### Web workers

#### Client

```js
var worker = new Worker('worker.js')

worker.onmessage = function (message) {
  alert(JSON.stringify(message.data))
})

worker.postMessage('hello!')
```

Messages can be anything that can be serialized into JSON (objects, arrays, strings, numbers, booleans). See: [structured clone](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)

#### Worker

```js
self.onmessage = function (message) {
  ···
}

self.postMessage({ msg: 'hello' })
```

### Reference
* [Web Workers Cheat Sheet](https://cheatsheetmaker.com/web-workers) - [Cheat Sheet Maker](https://cheatsheetmaker.com)