teleren/devto huggingface dataset:
Adding external javascript script to React
Tags: javascript, react, programming, webdev
Published: 2022-01-11 11:07:49

I'd like to include & run some `js` file in the `React` using `Helmet` component. Here is the simple code:

*index.js:*

    import React from "react";
    import ReactDOM from "react-dom";
    import { Helmet } from "react-helmet";
    
    import "./styles.css";
    
    function App() {
      console.log("op");
    
      return (
        <div className="App">
          <Helmet>
            <script src="hello.js" type="text/jsx" />
          </Helmet>
          <h1>Hellok CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
        </div>
      );
    }

and ultra simple `js` script to include & run:

*hello.js:*

    console.log("opl882...")
    document.body.style.backgroundColor = "red";

But the script seems NOT to work! - i have no console output and/or background color changed. What's odd when I use the `js` code as an inline code like:

     <Helmet>
       <script type="text/javascript">
         console.log("opl882..."); document.body.style.backgroundColor = "red"
       </script>
     </Helmet>

it works! 

Why doesn't  the external `js` file work?
Connect Firebase Admin SDK to Local Emulator
Tags: firebase, googlecloud, node
Published: 2022-01-11 10:59:10

Firebase Cloud function is a great productivity tool. When it comes to connecting to the local Firebase Emulator suite, you don't have to touch a thing.
Running `firebase emulators: start` will automatically handle the connection of your Firebase cloud function admin SDK to the local emulator.

However, when it comes to connecting the Firebase admin SDK from another server ( for example, one that runs on Google AppEngine), an extra step is needed.

To connect your server to the Firebase Emulator Suite, just add `process.env['FIRESTORE_EMULATOR_HOST'] ='localhost:8080'` before your "initializeApp".

Example in a Nodejs app:
![Nodejs firebase config file with emulator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3epdu84agwcbo1nbqoqe.png)

And Voila!

P.S: if it's not working as expected, just try to restart the server :-)
Build a Video Conference App from Scratch using WebRTC,Websocket,PHP +JS Day 4
Tags: webdev, webrtc, php, javascript
Published: 2022-01-11 10:40:00

 In this video we'll cover how to Add Section Title

Resource Files:https://github.com/learnwithchristopherglikpo/webrtc_project_files

{% youtube pvnbBEOT2m8  %}
What is an Agile Digital Transformation?

Tags: webdev, javascript, programming, react
Published: 2022-01-11 10:39:57

A transformation that is agile is the process of changing an entire business into attractive and  efficient one. It is an agile, collaborative and self-organizing environment that is based in Agile principles.

It is possible to teach agile principles to every organization to help teams to reap the benefits from  healthy flexibility. The organization’s mindset must shift and adopt a new environment of self-organization and cooperation.
Agile transformation allows companies to be responsive to better meet their customers’ needs withless effort. It also requires a lot of resources and support to carry through when things go turbulent.
Cherry-Pick Your Teammate's Changes Without Push 'n Pull-ing To Your Repo In PyCharm
Tags: webdev, programming, python, productivity
Published: 2022-01-11 10:09:35

You asked your teammate for help with a piece of code and they showed you the solution in their editor. Now you need to fetch those changes. Usually, this would mean a series of tedious Git commands for both of you (not to mention that the changes will forever grace your git history), but no longer - GitLive allows you to cherry-pick your teammate's changes straight from their local files without having to push and pull to Git.

In PyCharm, open up the team window by clicking on the GitLive icon on the bottom tool window bar.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/coj6enkdrsrqz1utkixi.png)

This will show a list of your teammates, if they are online (or away) and the issue they are currently working on. Click the arrow on the left-hand side of the teammate that helped you to see the repositories they have cloned, locate the one they made the changes to and click the arrow beside that too.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu4x7ifri3uzu8euk0aw.png)


Here, you can see the list of files changed by your teammate on their branch compared to the main branch. Files with asterisks next to the file icon contain changes made locally by your teammate that have not yet been pushed to the remote repository.

Since we are only interested in their local changes, click the filter icon at the bottom of the team window to filter to only the unpushed changes.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwkaqwsplzticjg1mzzs.png)

Now we can see the single file that contains the solution we want to copy! Clicking on it will open a diff of the changes so we can make sure it contains only the changes we need. Now all we need to do is to right click on the file and select the cherry-pick option to pick the changes. And voilà - no need for any git push- or git pull -ing!



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8abdjhjeahizjqadtdy.png)

You can also perform the cherry pick at the level above if you want to pick all changes from multiple files at once by right-clicking on the repository and selecting the cherry-pick option.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o471ft83usy81ih949w5.png)


Don't have the GitLive extension installed yet? You can [find GitLive here](https://plugins.jetbrains.com/plugin/11955-gitlive), and if you want to learn more, check out [this blog post](https://blog.git.live/gitlive-8-0-Cherry-picking-your-teammates-changes) or the [GitLive docs](https://docs.git.live/docs/cherrypicking/).
Day 76 of 100 Days of Code & Scrum: Juggling Multiple Things
Tags: 100daysofcode, beginners, javascript, productivity
Published: 2022-01-11 10:06:37

Good day, everyone!

It's difficult to balance multiple things at once. However, I need to do so, if I want to make significant progress as a professional developer. Maybe I should improve my time management and force myself to what needs to be done.

Anyway, let's move on to my daily report!

## Yesterday

I set my goals for this week, which are learning Next.js, updating my website and portfolio, and setting up a workflow that lets me look for work while continuing to build projects and polishing my skills.

## Today

### Company Website

- I worked on my [company website's web development services page](https://www.rammina.com/services/web-dev) and added a hero banner.

### Next.js & SWR

- learned about data fetching in Next.js using SWR.
- went through the first few pages of the [SWR official documentation](https://swr.vercel.app/)

### Scrum

- continue to learn more about Scrum, through reading articles and watching videos.

### Work

- created cold e-mail templates for finding contract/subcontract work and contacting businesses/potential clients.

Thank you for reading! Have a good day!

![Rammina Thank You Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ayfxxxaz2g2hfcqbsk.png)

## Resources/Recommended Readings

- [The 2020 Scrum Guide](https://scrumguides.org/scrum-guide.html)
- [Next.js & React by Maximilian Schwarzmüller](https://www.udemy.com/course/nextjs-react-the-complete-guide/)
- [Next.js official documentation](https://nextjs.org/docs/getting-started)
- [SWR official documentation](https://swr.vercel.app/)

## DISCLAIMER

**This is not a guide**, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

<hr />

## Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>
Unveiling Django-rest-paystack: A minimal plugin for integrating the Paystack payment gateway into a Django API backend.
Tags: python, django, paystack, library
Published: 2022-01-11 10:05:51

## *wtf*(pardon my French) is django-rest-paystack?
First, Django is a tool that helps us build web applications. If/when you feel the need to dazzle your audience, you can call Django a web framework LOOL. Think Laravel, Node, and Spring. Django-rest-framework is built on top of Django. It just makes writing REST APIs with the Django framework so much easier.

Second, Paystack is a service that makes processing payments in our projects easy-breezy. Think Stripe, Paypal, and Razorpay.

Lastly, django-rest-paystack is a library we made. The goal with this project is to make the task of integrating the Paystack payment gateway into a django-rest project a snip.

## Is this even useful?
Well, I'd let you be the judge of that. But from my personal experience, creating those payment endpoints for every single e-commerce project we work on could become redundant and perhaps somewhat boring overtime. While there are different approaches to integrating and processing payments with any payment gateway, in each approach, the flow doesn't really change. If it doesn't change then why repeat yourself? 

## Enter django-rest-paystack
when installed and configured in your project, this package generates all the endpoints you'd need to start and complete a transaction. Literally everything from initializing a transaction, handling webhook, and persisting useful transaction data. This package handles all the mundane payment stuff, just so you could focus on the more dynamic and exciting parts of your project. Did I mention that this package is very extensible?

## How can I get this?
You can install the package in your project with `pip` :
`pip install django-rest-paystack`

You can also checkout the project on [GitHub](https://github.com/Nyior/django-rest-paystack).

## I love this package. How can I thank you?
Just share this with your friends, and leave us a star on the repo. I'd love the attention :)
Javascript Basics
Tags: javascript, tutorial, webdev, programming
Published: 2022-01-11 10:05:37

**Spread Operator**
```
const boo = [1, 2]
const foo = [3, 4]
const zoo = [...boo, ...foo]
console.log(zoo)
// prints [ 1, 2, 3, 4]
```

**Arrow Function**
```
const arrow = (a, b) => a + b
console.log(arrow(2, 10))
// prints 12
```

**Function with Default Parameters**
```
function fundef(a = 10) {
    console.log(a)
}
fundef() // prints 10
fundef(29) // prints 29
```

**Template literals (Template strings)**
```
const word1 = 'Hello'
const word2 = `${word1} World`
console.log(word2)
// prints "Hello World"
```

**String includes()**
```
console.log('orange'.includes('ge')); // prints true
console.log('orange'.includes('zz')); // prints false
```

**String repeat()**
```
console.log('ab'.repeat(4))
// prints "abababab"
```

**String startsWith()**
```
console.log('orange'.includes('or')); // prints true;
console.log('orange'.includes('ge')); // prints false;
```

**Destructing Array**
```
let [a, b] = [1, 2]
console.log(a); // prints 1
console.log(b); // prints 2
```

**Destructing Object**
```
let obj = {
    a1: 10,
    b2: 20
};
let { a1, b2 } = obj;
console.log(a1); // prints 10
console.log(b2); // prints 20
```

**Object.assign()**
```
const obj1 = { q: 12 }
const obj2 = { a: 33 }
const obj3 = Object.assign({}, obj1, obj2)
console.log(obj3); // prints { q:12, a: 33 }
```

**Destructuring Nested Objects**
```
const item = {
    device: "iPadPro",
    brand: "apple",
    year: 2020,
    accessories: {
        pencil: "2ndGen",
        charger: "30W",
    }
}
const { accessories: { pencil, charger }, device } = item
console.log(device, pencil, charger); 
// prints "iPadPro 2ndGen 30W"
```

**Spread Operator**
```
const v1 = {
    firstName: "Web",
    lastName: "Developer"
}
const v2 = {
    ...v1,
    lastName: "Tips",
    sex: "NA"
}
console.log(v1); 
// prints { firstName: 'Web', lastName: 'Developer' }

console.log(v2); 
// prints { firstName: 'Web', lastName: 'Tips', sex: 'NA' }
```
Is self-documenting code a myth?
Tags: webdev, productivity, discuss, programming
Published: 2022-01-11 09:55:23


![meme on documenting code. "when u revisit function u wrote months ago and now it makes no sense and there is no documentation"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnw4ln4b9a2lmanxqz27.jpeg)

To answer our own question - yes. Do you agree?

If after a month you can barely make sense of the code you wrote, imagine how a junior dev joining your team would feel? Or even someone more senior going back to legacy code. Documentation becomes obsolete fast and eventually it renders itself useless. 

[Continuous Documentation 
](https://swimm.io/blog/what-is-continuous-documentation-manifesto-part-1/)calls for creating and maintaining code documentation as a part of the normal development workflow. 

The principles of Continuous Documentation require that documentation is: 

1. Always up-to-date
2. Created at the right time
3. Tightly coupled with the code itself 

So you created a bunch of documentation. Now what? How do you make sure it stays up-to-date? 

{% youtube 5E2eFbamdP0 %}


This [tech](https://swimm.io/blog/how-does-swimm-s-auto-sync-feature-work/) checks docs as code evolves, notifying you if your changes affect your documentation. 

## So, what do you think? Will the "self-documenting" excuse disappear once documentation is (much) easier to maintain and keep up-to-date?
I need to reduce or alter the font size of parent class based on the font size of span tag inside child class
Tags: javascript, html, css, webdev
Published: 2022-01-11 09:42:48

```
<div class="heading">
  <p>Hero<br>
<span style="font-size:20px;">Banner</span><br>
Text</p>
</div>
```

```
.heading {
  font-size: 8.4rem;
  line-height: 7.56rem;
}

```

```
const elements = document.body.querySelectorAll("*[style]")
elements.forEach(element=>{
 if(element.style.fontSize){
   const {value: size, unit} = element.attributeStyleMap.get('font-size')
   element.attributeStyleMap.set('line-height', CSS[unit](Math.floor(size * (8.4/7.56))))
   }
   })
```
Here I can remove only the space below the span tag but not the space above the span tag. Please help to remove the same
Quickly Set up TYK in minutes with Tin
Published: 2022-01-11 09:40:06

Tyk is an open source API gateway written in Go, supporting REST, GraphQL, TCP and gRPC protocols.

Tin is a product of TeamCode that can generate executable applications instantly without manual environment configuration. Users can click to run project directly in the cloud. 
Login to Tin and clone the TYK app

1. Click the Tin URL of TYK.
https://www.teamcode.com/tin/clone?applicationId=268088907964952576
Users who have not logged in should sign up first.

2. Log in to Tin with your email, Github account, or phone number.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/as7ldc7knb46vmh3cx8r.png)

3. (Optional) After logging in, you can change the “Application Name” or “Tag”。

4. Click "Clone" button to clone the Tin app to your workspace.
Note: Tin will give new users a free trial for a certain length of time, which is determined by the instance size. After the free trial time, the Tin app will automatically stop working. You will not be charged for the whole process. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5lgqc8xswxzo0xzliqi.png)

5. Click "RUN NOW" to initiate the application.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecjyepeldylk5w1be6ks.png)

6. Click the "Endpoint List" button to go to the Endpoint list, with the entry points for all apps displayed. Click the URL of entry point. Add  /keyless-test/  at the end of the link in the newly opened window.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mi1m6lgngs5aico6t3u9.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zstf9fq5rtu2xta3s54j.png)

You can use TYK now.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58wbiuj9mxutv5g7qnu4.png)

You can also use the Tin to quickly set up other open source projects, see the guide: https://www.teamcode.com/docs/en-US/tin/create-tin
Is it still worth learning web development if there are already tools that do not require knowing any coding?
Tags: webdev, motivation, career
Published: 2022-01-11 09:39:53

Definitely. The "no-code" tools have existed for over fifty years under various names, and, despite their promise, they never have and probably never will deliver on that promise.

It's an interesting question: if you were not a web developer, how would you verify whether the no-code program does a good job?

With no-code platforms, sites can become complicated and slow, which then leads to a lower search score, resulting in fewer people viewing the site.


The use of no-code tools may be effective for building a simple MVP or landing page, but learning web development will allow you to have more creative and technical control over your website.

Will a no-code tool be easy to use to create 3D UI animations? No, but it might suffice just to have a title with a shadow.

Can we implement a graph database using a no-code tool that lets you focus on how data is stored? Probably not, but we could store some basic information in an excel sheet for convenience's sake.

What about building a startup that supports millions of users? What would be the best way so we can reduce downtime and increase reliability while handling the traffic and usage of our app?
Due to the increasing complexity of features and the increasing amount of customization of UI, we find that no-code tools are simply unable to handle the task.

So, yes, you absolutely should be a web developer if you're curious about these questions and want to delve into the field on a deep level.

No-code tools allow non-developers to update content by using a templated web page that is built by web developers. It is just content to update.

As such, yes, it's worth it if you want to be a heavily in-demand player in the tech industry.
Having no code tools is nothing short of ammunition for the demands of web developers. If no code tools are available, who is going to build them?

As a result of the constant change in technologies as well as the requirement to constantly learn more and hone your skillset, it is clear that web development is still going to generate opportunities for developers in the near future.
Furthermore, it is also essential to mention that there are plenty of different pathways you can follow if you are interested in becoming a web developer.
How to use Tin to quickly set up Swagger-UI in minutes?
Tags: beginners, programming, tutorial, productivity
Published: 2022-01-11 09:34:24

Swagger-UI allows anyone — be it your development team or your end consumers — to visualize and interact with the API’s resources without having any of the implementation logic in place. It’s automatically generated from your OpenAPI (formerly known as Swagger) Specification, with the visual documentation making it easy for back end implementation and client side consumption.

Tin is a product of TeamCode that can generate executable applications instantly without manual environment configuration. Users can click to run project directly in the cloud. 

Login to Tin and clone the Swagger-UI app
1. Click the Tin URL of Swagger-UI.
https://www.teamcode.com/tin/clone?applicationId=270139780752936960

Users who have not logged in should sign up first.

2. Log in to Tin with your email, Github account, or phone number.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypf4pejgmo9w9qag64en.png)

3. (Optional) After logging in, you can change the “Application Name” or “Tag”。

4. Click "Clone" button to clone the Tin app to your workspace.
Note: Tin will give new users a free trial for a certain length of time, which is determined by the instance size. After the free trial time, the Tin app will automatically stop working. You will not be charged for the whole process. 



5. Click "RUN NOW" to initiate the application.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn0yhqzf367uj4sdyvs1.png)

6. Click the "Endpoint List" button to go to the Endpoint list, with the entry points for all apps displayed. Click the URL of entry point. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gua005xefb3v52jxnsdl.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h72soymr47mf8st31mh1.png)

You can use Swagger-UI now.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzwhpmr3dslyxyok6n84.png)

You can also use the Tin to quickly set up other open source projects, see the guide: https://www.teamcode.com/docs/en-US/tin/create-tin
Percabangan Di Vue Js
Tags: tutorial, vue, javascript
Published: 2022-01-11 09:32:40

Tutorial kali ini akan membahas penggunaan percabangan di vue.Disini kita akan menggunakan directive **v-if**,**v-if** ini sendiri biasa digunakan untuk menentukan apakah suatu element mau dirender atau tidak ,kalau istilah kerennya **conditional rendering**.

Pada tutorial ini akan dicontoh penggunaan beberapa bentuk :
1. **v-if**
2. **v-if** dengan **v-else**
3. **v-if** ,**v-else-if**  dan **v-else**

##### Contoh penggunaan **v-if**

**v-if** pada umumnya kita gunakan jika hanya memiliki satu kondisi yang harus benar.


```vue
<div v-if="isShowNama">{{nama}}</div>
```

Jika variabel **isShowNama** bernilai false maka element **div** yang berisi **nama** tersebut tidak akan dirender ke browser.

##### Contoh penggunaan **v-if** dengan **v-else**

Digunakan jika kita punya 2 kondisi jika tidak sesuai kondisi if,maka akan menjalankan else.

```vue
<div v-if="isShowEmail">{{email}}</div>
<div v-else>Tidak ada email</div>
```

Bisa dilihat pada contoh diatas jika **isShowEmail** bernilai true maka akan menampilkan nama,jika **false** maka akan menampilkan **Tidak ada email**.

##### Contoh penggunaan **v-else-if**

Digunakan jika kita memiliki lebih dari 2 kondisi.

```vue
<div v-if="nilai >= 75 ">Lulus</div>
<div v-else-if="nilai >= 60 && nilai<75 ">Cukuplah</div>
<div v-else>Kurang</div>
```

Contoh diatas kita punya 3 kondisi ,lulus,cukup dan kurang.Jika kita masukkan nilai **74** maka akan menampilkan **Cukuplah**.

Kurang lebih kode lengkap untuk semuanya seperti dibawah ini.

```html
<template>
  <div id="app">
    <div v-if="isShowNama">{{nama}}</div>
 
    
    <div v-if="isShowEmail">{{email}}</div>
    <div v-else>Tidak ada email</div>
    

    <div v-if="nilai >= 75 ">Lulus</div>
    <div v-else-if="nilai >= 60 && nilai<75 ">Cukuplah</div>
    <div v-else>Kurang</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => {
    return {
      nama: "budi",
      email: "budi@gmail.com",
      isShowNama: false,
      isShowEmail: true,
      nilai: 64
    };
  }
};
</script>
```

Untuk lebih jelas bisa dilihat langsung demo untuk ketiga contoh diatas disini => [Demo v-if](https://codesandbox.io/s/v-if-95hby?file=/src/App.vue).

Jika ada kurang dipahami bisa ditanyakan dibawah.