teleren/devto huggingface dataset:
Why I don’t use JS event handlers
Tags: webdev, javascript
Published: 2021-01-01 04:24:16

JavaScript gives you the ability to attach events to the dom without any mention of the action in the HTML. This is an incredibly useful way to attach events cleaning up you HTML, putting the JS where it belongs. Some frameworks take care of this but this is for those that don’t use one but [do you even need a front end framework][framework]? Most tutorials and courses tell you that you should use JS event handlers instead of putting events in the HTML. Although this is effective in simple sites, it is not always the best in JS rendered applications. Why? Because if you were generating sidebar items for example, you would have to make each element have a different query. Then you would have to select each item and attach a custom event to each item. That’s not a very good approach. 

Let me further illustrate this, If you have the array:
~~~js
[“home”, “dashboard”, “editor”]
~~~

You will want to generate three tags like this:
~~~html
<li onclick="openPage('home')">home</li>
<li onclick="openPage('dashboard')">dashboard</li>
<li onclick="openPage('editor')">editor</li>
~~~
You don't want to create three items with different id's or classes and loop through them to add events to them in JS.

Your probably thinking of course you would do it this way however when I was first leaning JS I did not know this. So should you use html events only when you have to and use JS events most of the time? I would say it depends on the application or site you are developing also on personal preference. I like putting my events in my HTML files because it makes it easier to integrate different pages and integrations. I am not saying that you should put the code in the onclick attribute or whatever event no, but you should only put a function in it with parameters that identify it for the script. I like putting the events in the HTML but I still use JS events like for document for some things. I also have created some pages where xml pages are loaded and having events in the content is the only way to make it a flexible application (for that app).

What are your thoughts?
[framework]: https://dev.to/gypsydave5/why-you-shouldnt-use-a-web-framework-3g24
Como usar variáveis de ambiente no React Native
Tags: reactnative, react
Published: 2021-01-01 04:05:14

Neste artigo você vai aprender como usar variáveis de ambiente no React Native de uma forma totalmente descomplicada. 

## Introdução 
### O que é variável de ambiente? 
Variáveis de ambiente são usadas para armazenar dados confidenciais. Por exemplo, informações de conexão com o banco de dados, chaves de integração com API's ou qualquer outra informação sigilosa. Essas variáveis são geralmente definidas em um arquivo `.env` no diretório raiz, e são utilizadas da seguinte maneira `process.env.NOME_DA_VARIAVEL`, porém neste artigo vamos capturar os valores dessas variáveis um pouco diferente. Mas com a mesma simplicidade.

## Por onde começar?

Em um projeto `react native`, execute o comando abaixo: 
```
npm i react-native-dotenv --save-dev 
```
Ou 
```
yarn add react-native-dotenv -D 
```

Depois adicione na raiz do projeto um arquivo `.env`. Neste arquivo você vai colocar todas suas variáveis de ambiente, por exemplo: 

```
SECRET_KEY=chave-secreta
```
Feito isso, você deve criar um arquivo  `.babelrc` no diretório raiz e adicionar o seguinte: 

```javascript
{ 
  "plugins": [[
       "module:react-native-dotenv", 
      {
        "moduleName": "@env", 
        "path": ".env", 
        "blacklist": null, // opcional 
        "whitelist": null, // opcional 
        "safe": false, // opcional 
        "allowUndefined": true // opcional 
      }
    ]] 
} 
```

## Como capturar os valores das variáveis?

Para usar uma variável em um determinado arquivo, basta importá-la da seguinte maneira:

```javascript
import {  SECRET_KEY } from '@env'
``` 

É isso aí. Não existem muitos segredos. 

## Passo adicional para usar com TypeScript

Se você estiver usando TypeScript é necessário adicionar um arquivo de tipagem para o módulo `@env`, por  exemplo, crie um arquivo `env.d.ts` em `./src/types` e adicione:

```typescript

declare module '@env' {
  export const SECRET_KEY: string;
}
```

Pronto, isso é tudo!

>Não esqueça de colocar o seu arquivo  `.env` no `.gitignore`.
Is email dead?
Tags: vim, email
Published: 2021-01-01 03:22:08

One of the best way to make use of things you normally wouldn't even think of is to work on something new to make the old more interesting.

I probably never cared so much about emails, but ever since I started playing with neomutt, I just want to start emailing in the terminal. 

Get a mechanical keyboard, because you will love the way it feels and sound. You just want to keep typing away.

Feel free to email me!
My javascript / tech / web development newsletter out later today 01-01-2021
Tags: javascript, tech, webdev, discuss
Published: 2021-01-01 02:45:36

---
title: My javascript / tech / web development newsletter out later today 01-01-2021
published: true
description: 
tags: javascript, tech, webdev, discuss
---
Another edition of my weekly newsletter out later today, lots of great javascript / tech / web development links.

Sign up to have it automatically sent to your email inbox every weekend.

https://markjgsmith.substack.com

I’d love to hear any feedback you have.
⭐️ Create custom iPhone ringtone 📱 🎶
Tags: ios, ringtone, apple, iphone
Published: 2021-01-01 02:21:56

Welcome to my first post 😇 ![hi there](https://usefulshortcuts.com/imgs/yahoo-smileys/103.gif) 

Do you wanna change your iPhone ringtone? ![hi](https://usefulshortcuts.com/imgs/yahoo-smileys/4.gif) Then this post is just for you. Please follow the following steps:

*Assumption: The track is present on your iPhone*

## Steps to create a custom iPhone ringtone

1. Open the application  Garageband from your iPhone or download Garageband if you don’t have it installed 
2. Create a new audio recording by clicking the record button
3. Select the track view button (bricks-wall icon) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/02w8cpa55shzgve1pl8i.jpg)
4. Select the loop browse button
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1kywo1fsd1fnz7gnyj0a.jpg)
5. Browse the track from Files/Music
6. Drag the track from to the left
7. Select the drop-down button from the top left
8. Select my songs
9. Tap and hold the track that just got saved, tap share 
10. Select 'ringtone'

Enjoy! 🎁 🎉 [](https://usefulshortcuts.com/imgs/yahoo-smileys/4.gif)
Looking Back At 2020
Published: 2021-01-01 01:32:39

### January
At this point, I had no idea all the gbas gbos and omo moments were on their way so all that was on my mind was to get a higher GP and start taking frontend more seriously. Paul(@CuriousPaul2 on Twitter) called me to work on a project where I effed up badd as I didn't even know how to make a site responsive. Working on this made me realize how far I was in my tech journey. 

###February-March
School was draining the life out of me as usual but I wasn't drowning sha. Got a new phone(yaaayyy). Attended all DSC Unilag events I could go for. This pushed me to sign up for the Solution Challenge and Frontend Study Group which I flopped in once more. Paul(x2) came to meet me to work on another project again even with how bad I flopped the first time. My grandpa died, then COVID hit, then the lockdown began. At this point, only movies, tiktok and music could keep me company.

###April-June
I would say this was the turning point for me in the year. I first signed up for DSC 30DaysOfCode Challenge(Python Track). This pushed me to learn python and get okay at it. As it was coming to an end, the fire in me wasn't ready to be quenched so I went back to a web development course I had watched about 40% of. Completed the course. Took another CSS Course (Didn't finish it tho). Pluralsight were running a promo where everything was free so I took 2 courses on nodeJS. At the end of June, I got 2 frontend gigs(First Ever). Used the money to beef up my system. In between all these, Paul(x3) contacted me again to work on Coveed. I gladly jumped on board.

###July-September
Got a job which was amazing but I started feeling down(burnout maybe). Bought my first console(This was prolly my happiest moment, cause it had been a long time coming). Close to the ending of September, I sorta lost the job(not because of the console). Depression set in

###October-December
Didn't save up much while working so the money I had was slowly coming to an end. Mid November, my account was empty and my phone screen started to flicker(yes, the phone I got at the beginning of the year). Spoke with Paul(x4) on a call joking about how I didn't know where my next data subscription was coming from and the next day, I got a call for a gig. I was overjoyed. Few days to the new year, the screen went totally black and it's Samsung.

Seeing other people's reviews of their year made me feel like I didn't achieve much but on writing this, it's definitely more obvious. A BIG thank you to Paul. You've had such an impact on me. Thank you to everyone who made my year in every little way.
My plans for 2020? To grow.

Happy New Year🌻
My Journey as a Student Entrepreneur in 2020
Published: 2021-01-01 01:18:31

Hi there 👋😄 !!!!
It's my first time here, so please bear with me...all kind of constructive criticism is welcome.

Hi, I am Shantanu Jain, A 3rd Year Undergrad pursuing Engineering in Computer Science.

I also happen to be the co-founder of Sterling Media Labs, A Digital Media Agency Based in Bengaluru which I started with my friend in 2018 (freshmen year). 

What just started with a Simple WordPress Website is now a Full-Service Agency which provides multiple Services. You can check that out here.

2020 has been a constructive year for me overall as it helped me evolve as an Entrepreneur and as a Person.

##Top 5 things I learned in 2020

The dream is Free, Hustle is sold Separately.
The world needs more innovative thinkers rather than hard workers.
Wisdom beats knowledge any day.
Clarity and purpose are the foundation of productivity.
Money just unlocks choices, freedom being one of those.
	
##Top 5 Achievement 2020
Completed our 30th Project as an Entrepreneur
Selected as Timesnext Young Entrepreneur 2020.
Got our first Overseas Client.
Read 20 Books (will write a separate blog about it)
Started blogging 😄.

##Top 5 thing I will be doing this year.
Create an Instagram Page to share the little knowledge & Experience I have gained.
Working on  a personal portfolio website (update soon)
Writing more content here.
Launch my dream Edtech project Eduvoke.
Read 40+ Books this year.😅😅😅

Thanks for reading my stupid content about what am I going to do, I would like to hear from you all what are you going to do differently this year?


Keep Supporting...Comment your thoughts about this😄.
Everything you need to know about Givemevibes
Tags: givemevibes, music, video, naija
Published: 2021-01-01 01:11:08

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u4gak7w457ojpktwon3s.jpeg)
Givemevibs is an entertainment blog created with the aim of bringing the latest Gossip, Entertainment, Music, Video, News, and much more to its blog readers around the world. We try our best to source for latest songs, videos, news, and current happenings to feed our users so they can be satisfied.

Visit [Givemevibes](https://www.givemevibes.com) for more information.

[Givemevibes on Ello](https://ello.co/givemevibes)
[Givemevibes on Wiseintro](https://wiseintro.co/givemevibes)
[Givemevibes on Video-bookmark](http://www.video-bookmark.com/mybookmarks.html)
[Givemevibes on Myopportunity](https://myopportunity.com/profile/james-amadi/sl)
Crystal Spec CLI Gotcha (--help)
Tags: crystal, testing
Published: 2021-01-01 00:48:57

When calling `crystal spec --help` you actually get the spec description but the options list of the `crystal` CLI instead of the specs.

```bash
❯ crystal spec --help
Usage: crystal spec [options] [files]

Options:
    -d, --debug                      Add full symbolic debug info
    --no-debug                       Skip any symbolic debug info
    -D FLAG, --define FLAG           Define a compile-time flag
    --error-trace                    Show full error trace
    --release                        Compile in release mode
    -s, --stats                      Enable statistics output
    -p, --progress                   Enable progress output
    -t, --time                       Enable execution time output
    -h, --help                       Show this message
    --no-color                       Disable colored output
    --warnings all|none              Which warnings detect. (default: all)
    --error-on-warnings              Treat warnings as errors.
    --exclude-warnings <path>        Exclude warnings from path (default: lib)
```

To get the options list for specs, run `crystal spec -- --help`.

```bash
❯ crystal spec -- --help
crystal spec runner
    -e , --example STRING            run examples whose full nested names include STRING
    -l , --line LINE                 run examples whose line matches LINE
    -p, --profile                    Print the 10 slowest specs
    --fail-fast                      abort the run on first failure
    --location file:line             run example at line 'line' in file 'file', multiple allowed
    --tag TAG                        run examples with the specified TAG, or exclude examples by adding ~ before the TAG.
    --order MODE                     run examples in random order by passing MODE as 'random' or to a specific seed by passing MODE as the seed value
    --junit_output OUTPUT_PATH       generate JUnit XML output within the given OUTPUT_PATH
    -h, --help                       show this help
    -v, --verbose                    verbose output
    --tap                            Generate TAP output (Test Anything Protocol)
    --no-color                       Disable colored output
```

Maybe this was obvious to everyone but I had no idea until I was told about it.
Year end wrap up
Published: 2021-01-01 00:31:04

  It's been a difficult year. I think if I do a review maybe that will help get the negatives of the year out of the way.

##The year of no meet ups.
This year travel was restricted. Non essential travel was reduced. Conventions and meetups went online For much of the US this stated in March or April. Here in Nashville we lost meetups earlier than that.
In February several of the local meetup groups lost their location. The company that provided the space changed insurance and it no longer covered the non-company events. Little notice was given and groups had to find somewhere else to go. Some went online which turned out to be a good test for the year. Others found a spot for the moment. One turn out to be about a mile from my house. I had conflicting plans so couldn't make that one. I thought next month for sure. Then March happened.
March 2 tornados hit Nashville. This happened late at night and a large portion of the city lost power. Schools were closed for a week. People were asked not to travel in the affected areas. Meetup that week were cancelled. The city got power restored and started clean up. This was about the time the area had the first confirmed Covid cases. 
Schools retuned a week later. But they started sending alerts on how they were cleaning nightly for Covid prevention. Across the country some schools were starting to shutdown. We got three days of classes before they said they were closing early for Spring Break. They didn't go back after Spring Break. The lockdown started. Meetups moved online. We all learned Zoom.
Once meetup and Conventions went virtual I got to attend many that I wouldn't have otherwise. I went to several online Conventions that I would not have been able to attend in person. 
##New friends
I joined Virtual Coffee which grew from developer seeking to make human connection outside of their bubbles. The group is extremely welcoming. It great to have a weekly meeting to look forward to. They are also the main reason I completed HacktoberFest this year. I got to help build on the VirtualCoffee.io site and get to learn a bit about 11ty.

##Side Projects and Learning
I returned to blogging. With Covid hitting and meeting reduced I decided I needed to start blogging regularly. I committed to blogging at least once a week. I've had look for subject to blog about and that had helped me dig deeper into CSS and Accessibility. I've done a couple CSS series and learned a few trick while building things. I made a post of ALT tags and want to do more on accessibility.
I've also built a couple minigames with Javascript. And have a Python project, I want to complete. 

I'm hoping for much better things in the new year.
How to know your Ghost version 👻
Tags: ghost, css, javascript, writing
Published: 2021-01-15 01:57:30

---
title: How to know your Ghost version 👻
published: true
date: 2021-01-01 00:15:00 UTC
tags: ghost, css, javascript, writing
canonical_url: https://www.benjaminrancourt.ca/how-to-know-your-ghost-version
cover_image: https://www.benjaminrancourt.ca/5246f48d-2000.jpeg
---
If you use **[Ghost](https://ghost.org/)** only as a **headless CMS** , [_with its Content API_](https://ghost.org/docs/api/v3/content/), you may not know its version if you do not host it yourself. But, if you do not have this information, how do you know if it is up to date? Or what are the latest features that have been added or bugs that have been fixed?

Fortunately, Ghost (or the theme you are using) injects the following meta data into the header:

```html
<meta name="generator" content="Ghost 3.37" />
```

If you are like me, you probably do not want to check the **source code** every time to see if the software has been updated or not. As [**Eleventy**](https://www.11ty.dev/) generates my static site, I do not use Ghost as a frontend. So one solution might be to display the version.

You will find below the code that I have been applied into the _Settings_ → _Code Injection_ section. The end result can be seen on the cover image of this post.

## Site Header

The CSS below applies styling to ensure the version is always on top of the content and is widely visible.

```html
<!-- These styles are applied only on the "backend" website -->
<style>
    /* Advertise the Ghost version, to easily follow the new versions */
    .generator {
        position: fixed;
        bottom: 1rem;
        left: calc(50vw - 6rem);
        z-index: 9999;
        color: red;
        font-size: 3rem;
    }
</style>
```

## Site Footer

The following JavaScript code gets the meta tag from the head section and creates a new div with the CSS class defined above.

```html
<script>
      const div = document.createElement("div");
      const generateBy = document.querySelector('meta[name="generator"]').content;
      const contentText = document.createTextNode(generateBy);
      div.appendChild(contentText);
      div.classList = "generator";
      document.body.appendChild(div);
</script>
```

## Bonus

If you have carefully examined the cover image of this post, you may have noticed that the view also has a **red dashed border**. While I was in the previous settings, I was wondering if there was anything I could do to indicate that I was not on my real website, as they looked almost identical in its early versions.

So I have applied the following CSS in the style section:

```css
/* Show visually that we are not on the "frontend" website */
html, .site-nav-main { 
    border: 5px dashed red;
}
```

## Conclusion

One of the downsides of using these settings for this is that we can no longer use them from the Ghost API. In my case, I did not use them, so I have not lost any functionality.

Do you have another tip if you are currently using Ghost only as a backend?
Love Octocat
Published: 2021-01-01 00:12:42

You can create your own Octocat.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9yjug66flu3r2o6eruk2.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s4ooldlvweuxy8txq2hw.png)
C++ logging library - something I've been working on
Tags: cpp
Published: 2021-01-01 00:07:05

Hello everyone,

I'm writing this post in regards to the logging library I am currently working on.

It's design points are performance, configurability, feature-completeness and clean code.

Features and usage examples of the library are present in the README in the repository, as well as features that are YET TO BE implemented.

I have done benchmarks against spdlog, and you can take a look at them in the README.

I would be very glad and honored if you drop a critique, an opinion, an idea, or want to contribute to the project:https://github.com/ChristianPanov/lwlog

Also, feel free to star the project if you find it interesting and of enough quality for usage, that way you will help it get shown to people more often.

Thank you for your time and happy new year!
What Success Means to Me
Tags: watercooler
Published: 2021-01-02 15:15:02

---
title: What Success Means to Me
published: true
date: 01/01/2021
tags: "watercooler"
canonical_url: https://martincartledge.io/what-success-means-to-me/
---

![wall garden](https://i.imgur.com/kIHFVQD.jpg)

_Success_ is a funny word.

It can drive someone completely insane or make them feel completely at peace.

If you asked five different people what they consider _success_, you would probably get five different answers.

I think that is a good thing though. I consider the meaning and pursuit of _success_ to be an art form, unique to every single person on the planet.

I am willing to bet, that over the years your taste in any form of art (photography, illustration, music, movies, books, etc) has changed. I would also assume that you enjoy that these preferences have evolved over time.

This is what I consider _growth_ to be.

If someone asked you what _success_ meant to you when you were ten years old, chances are your answer would be far more simple than it would be today, but it does not have to be.

For the longest time, I tied _success_ to a career, a job title, and how much money was in my bank account.

Personally, as I get older, I realize that _success_ is broken into two categories.

- The happiness of loved ones
- Personal fulfillment in my job and hobbies

These categories fluctuate and continually evolve but, I think that is good.

I think success can (and should) mean something different for everyone; however, I think it is a necessary indicator to be aware of because it encourages growth.

This does not mean growing a bank account or a business. Growth can be cleaning out your garage more frequently, or learning to say “I’m sorry” more often.

That is the beauty, growth is what you make it!

2021 has just begun, and I know many of us are excited to have a new start.

Regardless of what your personal definition of success is, I hope you find it this year.
How to set a maximum character limit for an input or textarea tag in HTML?
Tags: html
Published: 2021-01-01 00:00:00

---
  title: How to set a maximum character limit for an input or textarea tag in HTML?
  published: true
  tags: HTML5
  date: Fri Jan 01 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-maximum-characters-of-input-tag-textarea-tag-html
  cover_image: https://melvingeorge.me/_next/static/images/main-2787b0df705cfa5acfd7004c50b0411a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-maximum-characters-of-input-tag-textarea-tag-html)
  
To set a maximum number of characters on an `input` or `textarea` tag in HTML, you can use the `maxlength` attribute on either of those tags and pass the maximum numbers of characters it should take as an integer value to it.

For example, let's say we have an `input` tag of type text and we want to limit the characters to `30`. We can achieve this functionality like this,

```html
<input type="text" maxlength="30" />
```

You can also pass the `maxlength` attribute to a `textarea` tag to limit characters like this,

```html
<textarea maxlength="100"></textarea>
```

See the above examples live in [JSBin](https://jsbin.com/ciporajose/2/edit?html,output).

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

---