teleren/devto huggingface dataset:
Hello World!
Tags: firstpost, braziliandevs, beginners
Published: 2020-12-02 01:19:24

*Well, let's see what I can do here... =)*

#About me:

Luana,
Woman she/her, 
28 years old, 
brazilian,
front-end beginner,
student at UNIP

Esse é meu primeiro post, enquanto aprendo a usar novas tecnologias, vou postando sobre e tentando praticar o inglês at the same time.

Meu nickname em alguns jogos e em muitas redes sociais é @nanifool, se for me seguir/adicionar, menciona que me encontrou por aqui =)

**Alguma sugestão, crítica ou dica? Seja bem vindo!**
Being a Programmer Also Means Being a part of a Community
Published: 2020-12-02 01:10:53

One of the best things about being a developer is the fact that you aren’t alone. 

There is an entire community out there willing to support you. You ask a question and quite literally within a few minutes you can receive a response. It’s really incredible and I struggle to think of another field where this scenario is the same.

However, when you’re first starting out and learning to program, asking for help can be intimidating.
Even finding the right terminology to ask questions can be overwhelming. Asking about something that to others may seem like common sense - is absolutely terrifying.

It’s scary for people to put themselves in situations that make them vulnerable. But the truth is, no one cares. 
And the moment you’re able to put your fear aside, you quickly realize that other developers are more than happy to clarify things and help you out. The things you learn as a result - 100% outweigh the fear.

So, don’t be afraid to ask questions, remember - you’re a part of something much bigger.

“In a room full of the smartest people, I belong”
Event Delegation with Vanilla JS
Tags: webdev, javascript
Published: 2020-12-02 00:42:30

One of the most powerful and convenient techniques in jQuery is event delegation - a way in which you can add one event handler to a parent element instead of attaching multiple handlers to many child elements.

So here's how to do it in vanilla!

```html
<ul>
  <li>Sphynx</li>
  <li>Maine Coon</li>
  <li>Bristish Shorthair</li>
</ul>
```

```js
const ul = document.querySelector('ul');
ul.addEventListener('click', e => {
  const { target } = e;
  if (target.matches('li')) {
    callback(); // If target is an li, run callback
  }
});
```

Here we attach just one event listener to the parent <code>ul</code> element, but inside our handler we check if the event's target matches an <code>li</code>. If so, we run our callback function.

This is all well and good for simple HTML lists, but what if the list items contain children of their own? 

```html
<ul>
  <li>
    <span>Blue</span> Sphynx
  </li>
  <li>
    Maine Coon
    <span>Rarer breed</span>
  </li>
  <li>
    <span>Fiesty</span> Bristish Shorthair
  </li>
</ul>
```
With this more complex HTML tree, the event's target may not be the `<li>` element. Any one of the `<li>`'s child spans may be clicked and would register as the target. To handle this, we could either add some extra logic to check for the next closest element up the tree OR we can simply add a CSS <code>pointer-events: none;</code> rule that will force the spans to never be the target of pointer events:

```css
span {
  pointer-events: none;
}
```

With that rule in place, even if the actual clicked element is a `<span>` within the `<li>`, the span is now considered a part of the `<li>`'s content and the event's target is considered to be the `<li>`, thus registering our callback with no fuss, no muss! 😃

----------
Check out more #JSBits at my blog, [jsbits-yo.com](http://jsbits-yo.com/). Or follow me on [Twitter](https://twitter.com/JS_Bits_Bill).
Continuously Deploying an NPM Package with GitLab CI/CD
Tags: devops, gitlab, javascript, npm
Published: 2020-12-03 17:00:41

---
title: Continuously Deploying an NPM Package with GitLab CI/CD
published: true
date: 2020-12-02 00:00:00 UTC
tags: ["devops", "gitlab", "javascript", "npm"]
canonical_url: https://webbureaucrat.gitlab.io/posts/continuously-deploying-an-npm-package-with-gitlab-ci-cd/
---

Setting up continuous deployment is important to me, even when publishing is as simple as it is on npm. The [official GitLab documentation](https://docs.gitlab.com/ee/user/packages/npm_registry/), though, is a little more than I need and geared toward their own npm repository, so I'd like to gather the information I need here in a brief article.

### Generate and store an Authentication Token

The npm team has made this straightforward.

#### Generating the token in npm

1. Go to [npmjs.com](https://www.npmjs.com/) and log in if you haven't already.
2. Click on your profile picture at the top right.
3. Select the fifth item, "Access Tokens."
4. Click "Generate New Token" on the top right of the page.
5. Select the middle option, "automation" for the right security settings.
6. Click "Generate Token."
7. Copy the token to your clipboard.

#### Storing the token in GitLab

1. Log into GitLab and open the project you intend to automate.
2. Select "Settings" at the bottom of the menu on the left. This will open a submenu.
3. Select "CI/CD."
4. Find the "Variables" section of the CI/CD menu and click "expand" on the right.
5. Click the green "Add variable" button at the bottom.
6. Fill in the "Key" text box with "NPM\_TOKEN".
7. Fill in the "Value" box with the token you copied from earlier.
8. Make sure the "Type" is set to "variable" instead of "file."
9. **Important:** Make sure both checkboxes are checked to protect and mask the variable before saving.

Protecting the variable keeps it from being shared by less-trusted contributors, and masking it keeps the variable from being displayed in the console output when the pipeline runs. The npm authentication token stored in this variable is very sensitive--if an attacker got ahold of it, they could use it to push malicious code to your package repo, so it's important to keep it as secure as possible.

### Set up the pipeline with your _.gitlab.yml_

This is the easy part. Copy the following text and save it to a file called _.gitlab.yml_

_.gitlab.yml_

```yaml
image: node:latest
stages: 
  - deploy

deploy: 
  stage: deploy 
  script: 
    - echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc 
    - npm publish
```

Just to break it down: This file grabs an image that has node installed. It deploys by creating a file called .npmrc that defines where our registry is and what our authentication token is based on the environment variable _NPM\_TOKEN_ we created earlier. With that file in place, `npm publish` will run.

### Celebrate

Update your _package.json_ with a fresh version number to make sure the push succeeds, then commit and push the new _.gitlab.yml_ and the edited _package.json_. The pipeline will succeed every time you increment the version number.
How to get the file name from a path in Node.js?
Tags: node
Published: 2020-12-02 00:00:00

---
  title: How to get the file name from a path in Node.js?
  published: true
  tags: Nodejs
  date: Wed Dec 02 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-filename-from-path-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-f42d0c165c0001cc4b15796252ad3ebf.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-filename-from-path-nodejs)
  
To get the file name or the last portion from a path, you can use the `basename()` method from the `path` module in Node.js.

Let's say we have a pathname called `/app/controllers/index.js` like this,

```js
// pathname
const pathname = "/app/controllers/index.js";
```

We can get the filename from the above path by passing the `pathname` as an argument to the `path.basename()` method like this,

```js
// require path module
const path = require("path");

// path name
const pathname = "/app/controllers/index.js";

// pass the pathname as an argument
// to path.basename() method
// to get the filename or last portion from the path
const filename = path.basename(pathname);

console.log(filename); // index.js
```

- The `path.basename()` method returns the file name.

See this example live in [repl.it](https://repl.it/@melvin2016/get-filename-from-path-nodejs#index.js).

### Feel free to share if you found this useful 😃.

---
Release 0.4: Part1, choosing a open-source project 
Published: 2020-12-01 23:25:09

### First try and failure
In the last weekend, I found the very nice project which is really huge. [PWA Studio](https://github.com/magento/pwa-studio) is a collection of tools that lets developers build complex Progressive Web Applications on top of Magento 2 stores. There are more than 100 contributors.

The issue was even if the filter was changed, it is not actually applied. 
![alt](https://user-images.githubusercontent.com/789614/100354582-aad9f780-2ff0-11eb-8fa9-eb01c42eef5f.png)
The person who raised this issue told that it might be because of GraphQL or any front-end issue. As I didn't know the GraphQL, I tried to find out what it is, then try to install the code and figure out what the problem is. 
After spending couple days on it, I realized this was the thing that was beyond my ability. I needed to find out other project. 

### Small but needed to be changed a lot!
I spent an entire day to search github for this release 0.4. However, I was more careful to choose one after the failure. I didn't want to take another risk.

After all, I have decided to contribute the project that I have done before. The [GreenLight](https://github.com/PerhapsSomeone/GreenLight) has been looking for someone to update the important part of the program since that time. He wants to update the lexical system of the program.
 It requires a lot of coding and changing the program a lot. 
Even if the project is really small, I think this might be worth contribution.

### Plan for this
The issue is making a better system for transpiling the raw code to be read by Node.js. I don't know what would be the best solution for this system. So for next couple days, I will find out what would be the best model for it.

I will keep update the changes.
Responsive on-screen keys
Tags: javascript, css, gamedev, todayilearned
Published: 2020-12-01 22:51:23

For my [most recent little game](https://blog.s1h.org/svelte-multiplayer-game/ "Multris blog post") I noticed that touch input does not work that well with this type of game, but on-screen keyboards of mobile devices do not provide arrow keys, nor can they be forcefully opened without focusing input fields.
So, when played on a device with touch input (smartphone, tablet, etc.), users should be provided with dedicated on-screen keys — CSS to the rescue!

## First try — Size dependent on-screen keys

In a first, naive approach I decided to generally display touch controls on smaller screens. I went with something like the following:

```css
.on-screen-keys {
    display: none;
}
@media (max-width: 768px) {
    .on-screen-keys {
        display: inline-flex;
    }
}     
```

However, screen size is not the best criteria to determine whether to display on-screen keys. 

## Next try — Pointer device

A better approach would be to determine whether we’re dealing with a touch device or not. A little research revealed the [CSS pointer media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer "CSS pointer media query"), a way to determine how accurate the primary pointing device is.
Smartphones, tablets etc. which are primarily using touch input are identified as `coarse` input with limited accuracy, a distinction from `fine` input via mouse / keyboard.

```css
.on-screen-keys {
    display: none;
}
@media (pointer: coarse) {
    .on-screen-keys {
        display: inline-flex;
    }
}
```

## Demo

I put together a little sample on [CodePen](https://codepen.io/s1hofmann/pen/wvzKvoZ?editors=1111 "Codepen sample"). Don’t expect to see anything when visiting it from a device with `pointer: fine`, but when viewed on e.g. a tablet, you should see the same buttons as used [in my game](https://multris.s1h.org "Multris link").

## Conclusion

Never underestimate CSS!
Day 267: Unexpected Turns
Tags: hiphop, code, coding, lifelongdev
Published: 2020-12-01 22:27:38

_liner notes_:
- Professional : Thought today would be super productive. I have no meetings or anything to keep me away from doing my tasks. Come to find out that some unexpected turns were awaiting me to throw my whole day off. Basically spent a lot of my day on the phone waiting for operators and filling out forms online. So yeah, that was my day.

- Personal : Last night, I got the recording of the latest radio show edited and submitted to the station. Also got the email blast ready to be sent. Worked a little on my side project. Not a bad night.

![A view behind a palm tree looking out into the ocean at sunset in Nananu-i-Ra Island, Fiji](https://dev-to-uploads.s3.amazonaws.com/i/c1qpjqk2l9oimb1ger3n.jpg)

Going to have to spend some time to work on things I wasn't able to do today. Just goes to show, you could have a plan and desire but something can just come up to throw a halt to everything. Going to get some work done.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 4zlsMrl6GmA %}
[Java] Change PDF Version 
Published: 2020-10-14 07:28:41

In our daily work, we may find that some devices have strict requirements on the PDF version. Therefore, we need to convert PDF file between different versions for compatibility purpose. This article will show how to change the PDF version by using Free Spire.PDF for Java (Supports the PDF versions from 1.0 to 1.7).

**Installation**
**Method 1:** Download the [Free Spire.PDF for Java](https://www.e-iceblue.com/Download/pdf-for-java-free.html) and unzip it.Then add the Spire.Pdf.jar file to your project as dependency.

**Method 2:** You can also add the jar dependency to maven project by adding the following configurations to the pom.xml.

```xml
<repositories>
        <repository>
            <id>com.e-iceblue</id>
            <name>e-iceblue</name>
            <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
        </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.pdf.free</artifactId>
        <version>3.9.0</version>
    </dependency>
</dependencies>
```

**Change PDF Version:**

```java
package com.spire.pdf;

public class ChangePdfVersion {

    public static void main(String[] args) {

        //Create a PdfDocument object
        PdfDocument document = new PdfDocument();

        //Load a sample PDF file
        document.loadFromFile("test.pdf");

        //Change the PDF version to 1.6
        document.getFileInfo().setVersion(PdfVersion.Version_1_6);

        //Save to file 
        document.saveToFile("PdfVersion.pdf", FileFormat.PDF);
        document.close();
    }
}
```

![](https://dev-to-uploads.s3.amazonaws.com/i/wjhm0udn8t9kizj270md.png)
My first Hacktoberfest 2020! 
Tags: hacktoberfest
Published: 2020-10-25 19:50:32

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### My first Hacktoberfest!
 
### Hi , I'm Denice, I am new to coding and new to DEV, I have been learning to code now for about 6 months (self taught), learning HTML, CSS, Javascript and a bit of Python. I stumbled across Hacktoberfest on a facebook post that popped up and decided to have a look and I'm so glad I did.!

### 
Having read all about it and that is was totally suitable for beginners I decided I would have a crack at this.
###
I had heard about open source projects before but just thought they were for experienced programmers only really. Never would I have thought I could actually participate- I would not know where to start. But there were so many repository's set up for beginners to have a go at and so well explained that I took part and completed four pull requests.

###
My contributions included making a canvas artwork, making a personalised CSS card, a python joke machine and a To-Do list using JavaScript.
I have to admit I mainly stayed within my comfort zone of what I thought I could do apart from canvas which I had never really used before and had fun learning and playing around with this.

### Thoughts..
I am so glad I was able to take part ,It was fun!! it has taught me how to confidently use Git and GitHub, it has given me confidence that I can contribute to open source and that I can look for some open source projects that I can help with at any time. It has given me the opportunity to take part in something meaningful. Okay so my contributions this time were purely coding exercise's really, but next year I will have learnt that bit more and next time I can contribute more meaningful code to open source projects. 
So thank you Hacktoberfest and Digital Ocean!!
9 EASY PYTHON PROGRAMMING PROJECT IDEAS
Tags: python, codenewbie, programming
Published: 2020-12-01 21:38:56

![alt text](https://codehance.com/media/images/beginner-python-project-ideas.max-755x400.png "CODEHANCE | 9 Easy Python Programming Project Ideas For Beginners")

In this article, you'll learn how you can get started on 9 Python project ideas that are just right for a beginner Python developer. They will challenge you enough to help you become a better programmer but will still be achievable! The more you practice the faster you learn.

So you have been learning Python, reading up about it watching online tutorials about it, and now you ask yourself, what cool easy python programming projects can I do? Look no further you have come to the right place.

Python is an awesome programming language, it is used to build so much more than just web applications and mastering it can open up so many doors in your future career, so here I have created 9 lists of easy python programming ideas for beginners.

These projects are tailored for you as a junior developer, it will help you revise some of what you have already learnt and it will challenge you to learn the fundamentals of Python as a powerful programming language, these are fun projects too! so I hope you enjoy coding them.

**9 EASY PYTHON PROGRAMMING PROJECT IDEAS FOR BEGINNERS**

Below are 9 easy project ideas perfect for a beginner learning to code Python.

1. [Acronym](https://www.codehance.com/blog/9-easy-python-programming-project-ideas-for-beginners/#1-acronym)
2. [Password Generator](https://www.codehance.com/blog/9-easy-python-programming-project-ideas-for-beginners/#2-password-generator)
3. [Word Count](https://www.codehance.com/blog/9-easy-python-programming-project-ideas-for-beginners/#3-word-count)
4. [Rock, Paper, Scissors Game](https://www.codehance.com/blog/9-easy-python-programming-project-ideas-for-beginners/#4-rock-paper-scissor-game)
5. [Guessing a number](https://www.codehance.com/blog/9-easy-python-programming-project-ideas-for-beginners/#5-guessing-a-number)
6. [Hangman](https://www.codehance.com/blog/9-easy-python-programming-project-ideas-for-beginners/#6-hangman)
7. [Snake Game](https://www.codehance.com/blog/9-easy-python-programming-project-ideas-for-beginners/#7-snake-game)
8. [URL Shortener](https://www.codehance.com/blog/9-easy-python-programming-project-ideas-for-beginners/#8-url-shortener)
9. [Face Recognition](https://www.codehance.com/blog/9-easy-python-programming-project-ideas-for-beginners/#9-face-recognition)


To read the post in full details, click the link below:
*[Read Full Article...](https://www.codehance.com/sh/WyBvDXp)*
Tips for a better a Product Hunt launch
Tags: sideprojects, beginners, tutorial
Published: 2020-12-01 21:23:15

Product Hunt is still a great source of traffic for new (or reworked!) products. While it won't make or break your idea, it does help generate momentum and awareness. Here are some tips I've picked up from my recent launch.

### What worked

1. **Build in public** - Weeks before the launch I documented everything I was doing on Twitter. This helped build up an audience that was "primed" to upvote when the launch went live.
1. **Get early upvotes** - Product Hunt starts its 24 hour clock at midnight PST. And your first hour is important in getting to the front page. Ask a friend to help promote when it goes live. Don't stay up late - you want to be active during the day!
1. **Live tweet** - Tweet in the morning that you launched and continue to update the thread throughout the day. Talk about big wins (visits, sign ups, sales, etc.) and interesting comments. The more you comment on the thread the more it will re-appear in folks' newsfeeds.
1. **Be genuine** - Don't ask for upvotes (or comments), ask for _support_. You're probably nervous, let folks know! I found this helps folks resonate with why I'm promoting the launch. They will want the same in return when they go live.

### What didn't work

1. **Day-of e-mail campaigns** - Unless you have a _huge_ number of subscribers this won't be worth it. Think of it this way: if you have 1000 subscribers, 10% click through, and 10% of those upvote you only looking at a single upvote.
1. **Twitter ads** - I spent $15 and received 2 clicks. Crazy! If I was linking directly to a paid service $7.50 CPA might be worth it, but not for fake internet points.
1. **Obsessively refresh metrics** - This doesn't help anyone. If the numbers change you get a small dopamine rush. But when they don't the "down" is worse than the "high" - stick to checking on regular intervals (e.g. every hour).


### (BONUS) What could have worked

1. **Post to Indie Hackers** - A great community that offers a ton of support to public launched. Somehow this missed my radar and I totally forgot. Don't make the same mistake!
1. **Get hunted** - I couldn't find someone "important" to hunt my product in time. Maybe it would have made a difference in the beginning, but I can't say for sure. My advice is that if you can do it, well, it can't hurt.

P.S. I'm [Joe Masilotti](https://twitter.com/joemasilotti), I blog about this kind of stuff on [Masilotti.com](https://masilotti.com). The product I launched is [Mugshot Bot](https://mugshotbot.com). Cheers!
My Portfolio Website
Tags: portfolio, html, css, javascript
Published: 2020-12-01 20:39:22

I created my portfolio website using HTML, CSS, JavaScript, Bootstrap, and JQuery plugins...
Visit my website - https://arwazkhan189.github.io
Code of website - https://github.com/arwazkhan189/arwazkhan189.github.io

#How I started and Which tools I used?
1. First of all I draw a rough design of my portfolio website on a white page. That contains all the basic HTML of the website and placements of elements.

2. Then I started with the code part of this website in the section vise (**Navigation**, **Home**, **About**, **Resume**, **Certificates**, **Projects**, **Contact**, **footer**). First I code the navigation bar and footer then code all the part in section vise.
 
3. In the Home section I use a cover pic with my name and my role using **typedjs** library.

4. **Animate on scroll (aos)** is used for the scrolling effect.

5. About and Resume sections are customized with CSS and Javascript.

6. In the Certificates section I used the **lightbox** library for showing the modal of the image. (same use on the **Certificates page**)

7. In the Projects section I use a flip-card to show my projects.
and added GitHub readme stats.

8. In the Contact Section, the static contact form added which links with **Pageclip (a server for  HTML forms)** which sends me an email when a response is submitted. Social media icons are designed using CSS.

9. Navigation bar, Scroll bar, back to top button, footer, and other elements are designed using CSS and Javascript.

10. Libraries used - **JQuery easing**, **Fontawesome**, **Animate CSS**, **Google fonts**, **Lightbox**, **PageClip**, **Bootstrap**, **Typedjs**.

11. Hosted on **Github** and domain from **NameCheap** (Expired) and I use **Google Analytics** and **Google Site** to analyze my website performance. 

**❗ One Secret page also there but 404 (page not found) 😁😁😁**
##Thankyou 🙏##