teleren/devto huggingface dataset:
We are the example
Tags: watercooler, webdev
Published: 2021-09-20 06:12:13

Yes, each one of us developer is the example.

As you know, being a developer is about never stop learning, with that comes a mentoring role as well.

No matter what stage you are at in your development life, you should opt to mentor people wherever you can.

## Why being a mentor is important

There are several reasons why it's important to being a mentor.

1. Knowledge transfer

Ofcourse in its most basic form its a way to transfer knowledge to your peers. Making them gain knowledge, but also making working with them easier.
Think about helping them understand git in the right way or how to proper evaluate PR's this will all help you as well.

2. Grow yourself

Mentoring people will also help you grow, in a sense of honing your management skills. But also as a people person it's a super good way to connect to people.

3. Thinking out loud

And a big reason for me is that it is a way to think out loud, this process can help you even deeper understand solutions to problems.
You might already know that the answer is {x}, but do you really know how you even got to that?
Explaining it to someone can really help you grasp the concept even better.

## How do we set the example?

Back to setting the example, I'm a firm believer of treating people the way you like to be treated.
If you want people to handle PR's in a certain way, give that example.

If you want someone to explain code in a certain way, set that example by doing it yourself.

Another way to set the example is by communicating on how you see certain things.
Especially when you work in a team it's important you all think the same about certain aspect of the software.

This doesn't mean one way of doing it is wrong of right, but it helps if you talk about these standards at least come to terms within the team.

## Benefits of setting examples

There are a lot of benefits of setting examples:

- Better workplace relationships

By being and setting the example, you will create a super open and growing workplace. Your colleagues will be more part of the team and this is always a win for team building.

- More productivity

By learning from each others as developers we create more productivity, this might not just be because we grasp the concepts better. But also think about more fun doing the job, or learn about tooling to help us.

- Clear goals

It sets clear goals for yourself, but also for your growth as a developer and the rest of your team.

- Growth

As you see these all work up growth, personal growth as well as team and company goals.

I hope you are already being the best example you can be, if not this surely inspired you to be the best example.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
What is Open Source and how to get started?
Published: 2021-09-20 05:47:17

---
canonical_url: https://blog.avneesh.tech/what-is-open-source
---


### What is Open Source?

Open source is a commonly used term for the code which is publically accessible and people can see, edit, and share the data. In open-source projects, developers from all around the world can contribute to the project and make it better.

### Benefits of Open Source

- Lower cost
- Higher quality software and code
- Secure as code is public
- Flexible
- Faster development 

### Cons of Open Source
- Needs maintenance
- Hidden costs
- Support
- User friendly

### Getting Started
#### Getting started with open source as a maintainer
To get started with open source as a maintainer, you need to do the following steps

- Build a project
- Add it as a public repo to GitHub, GitLab, or BitBucket.
- Add some docs on what it is and how to contribute
- Add a license to your repo
- Add some issues in the issues section (if you have any)
- Let everyone know about it (if no one knows about it then no one will be able to contribute :P)


#### Getting started as a contributor
- Find a repo you want to contribute to
- Add the features or bug fixes
- Make a pull request
- Wait for your code to be merged

The main trouble for every beginner while starting to contribute is finding repositories.
So here are some useful articles-
-  [8 resources to start with opensource immediately](https://blog.greenroots.info/8-resources-to-start-with-opensource-immediately)

-  [Find Open Source Projects To Contribute As A Beginner](https://catalins.tech/find-open-source-projects-to-contribute-as-a-beginner)

-  [A curated list of beginner-friendly issues for Hacktoberfest 2021](https://vinitshahdeo.dev/beginner-friendly-issues-for-hacktoberfest-2021)


If you were ever thinking of contributing to open source, now is the perfect time to start 😉


**Useful links**

[Open Source Initiative](https://opensource.org/) 

[All socials](https://avneesh-links.vercel.app/)
Major updates for bundlejs.com v0.0.3
Tags: javascript, typescript, bundling, esbuild
Published: 2021-09-20 05:52:52

---
title: Major updates for bundlejs.com v0.0.3
published: true
description: Ranging from PWA screenshots to copy, wrap, format & reset buttons, bundlejs.com v0.0.3 is packed full of features.
date: 2021-09-20 05:46:54 UTC
tags: javascript, typescript, bundling, esbuild
canonical_url: https://blog.okikio.dev/major-updates-for-bundlejscom-v003
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb2tgt2lvls5ezy597ss.png
series: bundlejs.com
---

{% twitter 1439825148769619972 %}

I released major updates for https://bundlejs.com, they include

- add copy, wrap, format & reset btns
- add PWA screenshots & sharing to PWA
- detect offline/online mode
- faster preloading & prefetching
- prefetch workers
- preload monaco.min.js for faster perf
- and more....

You can read more about bundlejs.com on the Github repo,

{% github okikio/bundle %}
Random Joke Fetching in React
Tags: javascript, react, node, webdev
Published: 2021-09-20 05:45:22

#Hello 👋, 

Today, you will learn to **fetch random joke from a node module in React JS**

Let's get started,
###Create React App
```npx create-react-app joke-boi```

### Install this node module
```npm i one-liner-joke```

### Now create **App.js**
```js
import React from "react";
import Joke from './Joke'

class App extends React.Component{
  render(){
    return(
      <div>
        <Joke/>
      </div>
    )
  }
}

export default App;
```

### Now we'll create a component called Joke in **Joke.js**
```js
import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import './Joke.css';
import {Card} from 'react-bootstrap'
const oneLinerJoke = require('one-liner-joke');



class Joke extends React.Component{
    componentDidMount() {
        window.addEventListener('load', this.handleGet);
     }
    
     componentWillUnmount() { 
       window.removeEventListener('load', this.handleGet)  
     }
    handleGet(){
        const getRandomJoke = oneLinerJoke.getRandomJoke();
        document.getElementById('joke').innerText = getRandomJoke.body;
    }
    render(){
        return(
            <div className="container">
                {/* <input type="text" className="form-control" id="joke" disabled/>                 */}
                
                <Card>
                    <Card.Body>
                    <h2 id="joke">Try refreshing the page if you can't find the joke. Note: It is not a joke</h2><br /><hr />
                       <button className="btn btn-info nextBtn" onClick={this.handleGet}>Don't click here for next joke 😑</button>
                    </Card.Body>
                </Card>
            </div>
        )
    }
}

export default Joke;
```

### And all set! now you can run in console
```npm start```

##Check out GitHub Repository and fork
[Joke App in React JS]('https://github.com/snowbit-coderboi/joke-boi')

#Happy Coding!
Array.map() Method in JavaScript 🚀
Tags: javascript, webdev, beginners
Published: 2021-09-20 05:43:21

 Hello, guys today we are covering one of the most important topic.
 Today we are learning map() method, so let's start today's article. 

👉 Article Content
• What is Array.map() method ?
• Syntax of Array.map() method ?
• Use of Array.map() method ? 
• Example of Array.map() method ?
• Explanation of example


👉 What is Array.map() method ? 
=> The map() method is used for array transformation. It takes another custom function as an argument and on each array item applies that function.

👉 Syntax of Array.map() method ? 
=> ![syntax ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q2xsuvzs1krsfhscqko.jpg)


👉 Use of Array.map() method ?
=> Map() method used to iterate over an all array item one by one and apply function on each array items. 

👉 Example of Array.map() method 
=> See following image 
![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kaafkhqh861uc06l309t.jpg)

👉 Explanation 
=> As shown above image we need an array with some values. That's why I am created an array and it's name is 'arr' and stored [1,2,3,4,5] this values. 

Now I am using map() method to increase every array item by one. 

I used map() method and pass a function and this function takes one argument and this argument hold all the array items. 

When this method call all array items iterate one by one and apply function. When array item '1' is pass through a map() method it's simply increment by 1.

👉 Map() method take a function which will be arrows function or normal Js function. 

👉 This method works like a loop and it's similar to for and forEach. 

🙏 Thank you for reading....
How to get an Internship as a Student
Tags: programming, programmingjob, internship
Published: 2021-09-20 05:17:32

Getting an internship as a student is the best thing a student can have. As it will increase your knowledge as well as it will help you to earn some money. 

First of all, you need to learn some skills and become comfortable with them. For example, you can learn Android Development from youtube, udemy, blogs, and other mediums.

After that, start applying to an internship on different portals like "Internshala", "Linkedin Jobs" etc.
full stack developer
Tags: reactnative, react, rails
Published: 2021-09-20 04:48:50

Interested in developing bespoke technology solutions for tier ones through to start-ups? Will suit full stack developers after  a collaborative environment, the diversity of multiple projects and who prefer to think about solving problems over simply being told what to do. 

Experience with Ruby on Rails and/or javascript (React/Node) will lay the foundation for success and a knowledge of CI, automated testing, and CD are a definite plus. 

Leverage the experience and skills of a progressive design and development team across Australia, the UK and USA. Whilst the range of industries you will serve is broad, a passion for sport has driven a specialisation in the sector where solutions involve working with high volumes of live complex data, video integration, subscription offerings, payment gateways and more. 

If this is something you might like to explore further, feel free to reach out. tim@dpahr.com.au.
[Cerpen] Malam Itu - Pena Malam
Tags: books, literatur, cerpen, novel
Published: 2021-09-20 04:40:35

Teet..Teet..Teet! Suara alarm yang berasal dari ponsel pintarku membangunkanku dari nyenyaknya tidur malam itu. Aku meraba kesamping untuk meraih ponsel itu dan mematikan alarm, jam menunjukan pukul 3 dini hari. Mataku mengerjap beberapa saat sebelum benar-benar terbuka, kuturunkan kakiku dari ranjang dan ku tekan saklar yang membuat lampu kamarku yang semula mati menyala kembali. Dengan kesadaran yang belum sepenuhnya terkumpul, aku melangkahkan kakiku menuju kamar mandi. Kubasuh wajahku untuk menghilangkan kantuk yang sulit hilang, ku lap wajahku dengan handuk sebelum berjalan mengambil segelas air putih untuk kuteguk. Kulihat ayah, ibu dan adikku yang masih bergelut dengan mimpi mereka, tak kuhiraukan,aku kembali melanjutkan kegiatanku. 

Sumber: <a href="https://www.penadiksi.com/2020/10/malam-itu.html">Cerpen Malam</a>
Mapa conceptual sobre aspectos generales de la programación
Published: 2021-09-20 04:35:19

Este mapa mental fue creado para una tarea de la Universidad Francisco Gavidia, utilizando Lucidchart y tomando como referencia el siguiente video:
https://www.youtube.com/watch?v=_jnRi7NF-qc
![Mapa mental](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h55x84xyb8i6bd5g2wv.png)
FIx termux Repository under maintenance
Published: 2021-09-20 04:28:24

Langkah1.

cd ..
cd usr/etc/apt/sources.list.d
ls
rm game.list
rm science.list
Cara atasi Termux gagal update

read more: https://www.jopamungkas.com
Perintah rm pada termux adalah untuk menghapus file yang terpasang pada termux.

Jika sudah melakukan perintah di atas. Close aplikasi termux, kemudian buka lagi aplikasi tersebut. 

Langkah terkahir kalian bisa mencoba ketikan pkg Update.

Semoga tutorial ini bermanfaat.
Using a directory in your cephfs on kubernetes
Published: 2021-09-20 04:02:15

---
title: Using a directory in your cephfs on kubernetes
published: true
description: We look into how to setup kubernetes easily on one machine and then get cephfs mounted into a pod. Using ceph you could balance workloads or share resources easily in your kubernetes cluster.
tags:
cover_image: https://i.ytimg.com/vi/-hX1cqs4K68/maxresdefault.jpg
---

{% youtube -hX1cqs4K68 %}

We look into how to setup kubernetes easily on one machine and then get cephfs mounted into a pod. Using ceph you could balance workloads or share resources easily in your kubernetes cluster.
Add EsLint to existing Angular Project and Configure WebStorm
Tags: angular, eslint, webstorm, linting
Published: 2021-09-20 03:36:39

So as Angular CLI no longer generate new project with deprecated tslint, after we create new one we need to add linting manually.

For that we are going to use a library called [angular-eslint](https://github.com/angular-eslint/angular-eslint), the process is as easy as just using

```bash
ng add @angular-eslint/schematics
```

After that we will have `.eslint` in the app root directory, so we will be able to enjoy keeping the quality of the code.

## Add it to IDE

To enable ESLint on the IDE we should do some configurations on the IDE

##### WebStorm

Inside the IDE press `ctrl + alt + s` to open settings, head to `Language & Frameworks > JavaScript > Code Quality Tools > ESLint`

If it is disabled, you can enable it by setting it to Automatic or Manual ESLint configuration, which I prefer the manual config as we can use the field `ESLint package` to introduce `.eslint` to the IDE.


##### VSCODE

[Extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
[ESLint + VSCode](https://daveceddia.com/vscode-use-eslintrc/)



Hope you like it,
Thank you for reading
Deploy NodeJS app on Qovery
Tags: qovery, cloud
Published: 2021-09-20 03:31:24

**Before you begin, this page assumes the following:**
- You have installed nodejs on your system

## Make your NodeJS app

Make your nodejs app first, if you already have, try test them locally once.

Here's a simply website coded with express for example:

```js
const express = require("express");
const app = express();
app.get("/", (req, res) => {
    res.send("Hello");
});
const port = 8080;
app.listen(port, () => {
    console.log(`Site running on port ${port}`);
});
```

## Make a package.json

Easily make a package.json by using the `npm --init` or `yarn init` terminal command

After that's done, you need to add all packages which you use in the package.json by using the `npm install --save <package name>` or `yarn add <package name>` command

## Add a Dockerfile

You need a valid Dockerfile to run your nodejs app in qovery. If you are not familiar with Docker, you can take a look to [this article](https://hub.qovery.com/guides/tutorial/how-to-write-a-dockerfile/). Here is the content of our Dockerfile.

```dockerfile
FROM node:16
RUN mkdir -p /src/user/app
WORKDIR /src/user/app
COPY . .
RUN npm install --production
EXPOSE 8080
CMD ["npm", "start"]
```

A small note: this Dockerfile installs node v16, change `FROM node:16` to `FROM node:<version>` where `<version>` is the major version of node you want to install

## Sign up into Qovery

Now, you need to sign up or sign in on Qovery.

Sign in to the [Qovery web interface](https://start.qovery.com).

## Deploy our NodeJS app

Creating a project `myapp`.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5idwmh8768h5fsdxpgf.png) 
Creating an environment `main`.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg9rsl9j1sv2e3kxp48d.png) 
Creating an app by selecting your nodejs app repository, build mode > Dockerfile, and the port 8080 (not required if you are not hosting a website, for the current example it is required).
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvqzq9csauffzmudb5zc.png) 
And deploy! That's it 🔥... nothing more. Our NodeJS app is ready.
CSS-Display:none vs Visibility:hidden, what's the difference?
Published: 2021-09-20 02:43:40

Not too long ago I was asked in a semi-professional setting if I was confident in CSS. My answer was that I knew the basics, but it’s much easier when you're in an IDE environment and have autofill to help along the way if you’re not entirely sure how to reference something. I figured I’d be able to answer the question being tossed at me without having to dig too deep. The question was: did I know the difference between display: none and visibility: hidden? Nope, actually I had never even come across visibility: hidden and wasn’t well-versed enough to fully explain what display: none did other than not display something (but that piece is pretty obvious from the name). So I set out to figure out what each of these meant and what the difference between is. They both make an HTML tag invisible but in different ways. 

**Display: none**- [is commonly used with JavaScript to hide and show elements without deleting and recreating them.](https://www.w3schools.com/css/css_display_visibility.asp) This option completely removes an element from the page. Meaning, it won’t appear on the page, doesn't take up space, it’s like it doesn’t exist. 

**Visibility: hidden**- [also hides an element however, the element will still take up the same space as before. The element will be hidden, but still affect the layout.](https://www.w3schools.com/css/css_display_visibility.asp) While the element is not visible as with display: none it won’t appear on the site page but where it differs is the element does still take up the space it would have if it weren’t hidden. 

![Screen Shot 2021-09-19 at 10.22.02 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no09o3jpb2ib530buu2t.png)

Because I’m still kind of wrapping my head around these two CSS properties, I don’t have any test cases for when they’d be put into practice. If you’ve used either of these please feel free to let me know which and why you used it. There are some good visual examples on MDN if you want to check those out here: 


https://developer.mozilla.org/en-US/docs/Web/CSS/visibility 
https://developer.mozilla.org/en-US/docs/Web/CSS/display
To Comment or Not To Comment
Tags: productivity, programming
Published: 2021-09-20 02:27:59

Sometimes I feel like writing comment is a controversial topic in programming. Some will take the stance of:

> Code is like humor. When you have to explain it, it’s bad.

Of which, I don't 100% agree with.

---

## Mis-interpretation

Let's take a bit of a bad example:

```typescript
function applyDiscount(to: number, rate: number): number {
   ...
}
```

At a glance, the code is quite obvious: Apply discount to a number, pass on the rate and the function will return the final result.

Two months goes by and somebody else wanted to use this function and at a glance they use:

```typescript
const finalPrice = applyDiscount(100, 10);
```

expecting the `finalPrice = 90` but instead got `finalPrice = -900`

In this case, there's an illusion where the code is already self-documenting and self explanatory, but interpretation of a word between each developer might be different! What `rate` means for the original coder is the rate of discount after it is divided by 100. But the next coder who tried to use it interpreted it as a percentage number.

> Naming things is always regarded as one of the hardest thing in programming. Mis-interpretation will always happen when glossary of words between developers are different.

---

## Too Much Focus on What but not Why

Consider this bad and exaggerated example:

```typescript
function applyDiscount(to: number, percentage: number): number;

...

function submitOrder(order: Oder) {
  order.setFinalPrice(applyDiscount(order.subTotal, 10);
  ...
}
```

Sure now the code is obvious, every order will be given 10% discount. But it's now missing an important context on:

> Why should every order be applied 10% discount?

Most of the time we can easily understand the code on what it does by tracing it line by line. But when things gets complicated, only focusing on what the code does loses the context where we need to know

> Why the code is written as it is?
> Or, why there's a branching condition?

---

## Comment your intent

Most of the times, comment should never explain what the code does. But rather what the intention is.

Let's again take a look of this simple example:

```typescript
function doPayment(cardNumber: string) {
  if (isVisa(cardNumber)) {
    processPaymentOnlyForVisa(cardNumber);
    return;
  }

  ...
}
```

Sure we know how to read that there's a special treatment for payment using Visa. But after maybe 1-2 months or when the original coder leave, the context of why Visa payment should be different is lost. 

> It might be business decision, it might be caused by some technical hurdles.
But as long as the intention was not documented, the cause is lost for the next person who touched the code.

---

[Cover image credits to: Artur Shamsutdinov](https://unsplash.com/photos/Gll-v69L8iA?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink)
35mm a Rails App for your pictures...
Tags: ruby, rails, app, javascript
Published: 2021-09-20 02:10:08

As I like photo Stuff, my Ruby on Rails project was uploading photos and sharing through an application. I kept working in refactoring the code and also adding some cool stuff.

The scope was to create a good user experience and great look. So the app allows you to upload photos, add tags like or not like them. Also you can create an account logging with your Facebook credential, cool right?? . Once you Sign in and create an account you will be able to add photos, modify and also delete them as well as check other users pictures and comment on them. This is all possible thanks to Ruby on Rails. 

Check it out and have a look at the code. It might be fun.

[35mm](https://github.com/JcBonassin/photo_35mm)

What I learn:

- Complete and run a whole project in Ruby on rails.

- Integrate varius Gems like Device and Omniauth and Shrine to enhance the user experience of your app.

- Create an app that serves as a community to add photos and share them.

- It is kind of cool to work out of your comfort zone and add new stuff like JS. It will help you for your future projects.

Thanks for reading ..