teleren/devto huggingface dataset:
Second Week at Gigih - a Weekly Reflection
Tags: gigih, yayasananakbangsabisa, frontend, react
Published: 2021-07-17 14:02:42


### How much did you know about the subject before we started?

I always started each session of the program by doing a prior research around the materials so I could get a better grasp beforehand. This method really helped me out to learn faster and to better understand the upcoming materials. The facilitators, the instructors, and also my fellow friends in this program gave a lot of references for me to learn from. Furthermore, I knew that if I learn while also practicing the material at the same time, it would really give me more comprehension towards the materials rather than just reading or watching the course given.


### How do you feel about your work this week (homework, assignment)? What parts do you particularly like? Dislike? Why? What did/do you enjoy about this piece or work?

People say that time flies when you’re having fun. Now I genuinely understand the meaning behind that saying. I still can not believe now I am at second week in Gigih Program by Yayasan Anak Bangsa Bisa. I am truly having great time in this program. There are so many great facilitators, instructors and friends that helped me a lot during my journey at Gigih Program. 

Even though it was quite a challenge because I just started my journey in web development but the atmosphere that I get from Gigih Program is quite relaxing and assuring for me to pursue this path. They always told me that it is okay to fail, but one thing that I keep in mind is I have to always try. Now I have been implementing that principal to my daily life. And since then I am always brave to try new things. I am convinced that I am not scared of failure because I know that I would be more disappointed if I did not try at all.

### How can you use this knowledge in future work? 

This knowledge has certainly changed my life forever. Previously, I only knew that frontend was only things such as html, css and js. I didn't really knew that frontend had so many things that I took interested in. Like React, Nodejs, Reactstrap and etc. This new knowledge gave me a fresh new passion to learn more. So that in the future I could build a professional website or application with the knowledge I got from here for collaborations with companies and also for the society.

Lastly, I want to quote a sentence from one of my favorite books, "Atomic habits", that said “You should be far more concerned with your current trajectory than with your current results”. So, with my current trajectory at Gigih Program, I believe that I will reach my goal to be a Frontend Engineer. I give my biggest applause for Gigih Program by Yayasan Anak Bangsa Bisa. Above all, thank you for this amazing opportunity!
Pure CSS Text Typography Effect
Tags: css, html
Published: 2021-07-17 14:01:55

Hello 👋 Guys Hope you are well and safe 😀 so in this post we will learn to create an amazing CSS Text typography using CSS Gradient - conic-gradient

Before we get started please subscribe to my channel 💖😊 I Post coding tutorials

- https://youtube.com/c/Codingfire?sub_confirmation=1

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km4cu0fb3uzekq5044do.png)

This is what it is going to look like 👆

This helps you to get better in CSS so before wasting time lets get into it 

first step is to create a **HTML** file and create a text so in this example i am going to take **<h2>**

```html
  (type any text of you choice ) 
 <h2> Gradient text </h2>
```

So now our html is complete Yes only one h2 to do this or any paragraph or div text

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Conic Gradient</title>
    </head>
    <body>
        <h2>Gradient text</h2>
    </body>
</html>
```

Now we need to add our style.css make sure that you linked it in your html file

after this go to css and write this 👇

```css
h2 {
    /* Here we are setting the font size to 8rem */
    font-size: 8rem;

    /* Now you need to set gradient but not normal one - 
    you need to set
    Conic gradient (this is the main part of the gradient */

    background: conic-gradient(
            #CA4246 16.666%, 
    #E16541 16.666%, 
    #E16541 33.333%, 
    #F18F43 33.333%, 
    #F18F43 50%, 
    #8B9862 50%, 
    #8B9862 66.666%, 
    #476098 66.666%, 
    #476098 83.333%, 
    #A7489B 83.333%
    );
    /* Settings the background clip to text */

    /* so the background is like a text which i wrote and  */

    /* Number 1 - here what we do is we set the background to text and then make our text color transparent) */ 

    /* -webkit-background-clip: text;
    color: transparent; */

    /* Seconds way */

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
```

And BOOM! 🌟 we are done - if you want to know it better check my youtube tutorial here

 - https://www.youtube.com/watch?v=Lg7fCUWx1Pc&t=85s

hope you like it please subscribe 💖😊
Functional Keyboard
Tags: codepen
Published: 2021-07-17 13:53:36

<p>Keyboard where if you click a key that key gets displayed in the textarea. Due to a bug, there aren't the keys '&lt;', '&gt;' and '&amp;'. Any suggestion is well accepted</p>

{% codepen https://codepen.io/iyalii/pen/JjNNaGR %}
Installing Portainer for managing Docker instances
Tags: docker, portainer, tutorial
Published: 2021-07-17 13:50:32

---
title: Installing Portainer for managing Docker instances
published: true
description: This post show how to install and configure Portainer.
tags: docker, portainer, tutorial
cover_image: https://eduardohitek.com/images/portainer/3.png
---

[Portainer](https://www.portainer.io/products/community-edition) is an Open Source application for managing Docker on local machines or servers.
Through its graphical interface it is possible to view and edit your Containers, Images, Volumes and so on. And its installation is very easy as it is distributed as a Docker image.

Just perform the following steps:

1) Create a `volume` to persist your settings:
```
docker volume create portainer_data
```
1) Run the docker command to create the container and inform some initial configuration parameters:
```
docker run -d -p 9000:9000 --name=portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce
```
With this command we are telling Docker to run this container in the background mode, export port 9000, set the name to `portainer`, set the restart policy to always restart and link the container volumes to local volumes on your machine.

After executing the command, just access http://localhost:9000 and set the admin password.

![Set Portainer Access Password](https://eduardohitek.com/images/portainer/1.png)

The next step is to point which environment you want to manage, in my case I will select the local docker instance.

![Select environment for management](https://eduardohitek.com/images/portainer/2.png)

And that's it, you'll have the lists of active containers, their status and possible available actions.

![List of containers](https://eduardohitek.com/images/portainer/3.png)
Javascript Format Date without Moment.js (Eg: 17 July, 2021 )
Tags: javascript, react, reactnative
Published: 2021-07-17 13:42:44

Almost everyone like me  might be using the plugin moment.js to format a date-time-stamp to a readable date or time - Eg: 14 July 2021 or 11:58 pm

Fortunately, there is a native javascript API to format date and time.

##Demo and Example to format date: 

With the help of `toLocaleDateString` we can format a date-time-stamp to a readable language sensitive representation.

```const date = new Date();```
```Sat Jul 17 2021 19:04:31 GMT+0530 (India Standard Time)```

```date.toLocaleDateString("en-IN", {
  "year": "numeric", 
  "month": "long", 
  "day": "numeric"
})```

```"17 July 2021"```    (Formatted Date)


##Demo and Example to format time: 

With the help of `toLocaleTimeString` we can format a date-time-stamp to a readable language sensitive representation.

```const date = new Date();```
```Sat Jul 17 2021 19:04:31 GMT+0530 (India Standard Time)```

```date.toLocaleTimeString("en-IN", {"hour": "numeric"})```

```"7 pm"```   (Formatted Time)


If you liked my content you can follow me on twitter for more such content-

https://twitter.com/frontend_jsx
Why should every DEV use a screen reader? The answer might surprise You.
Tags: productivity, a11y, webdev
Published: 2021-07-17 13:16:00

As a developer, You probably know the pain of eyestrain. Screen readers may come to the rescue.
#How will it help Me?
You read docs and articles every day. They sometimes don't even provide You with a dark theme! To save Your eyes, let's make a screen reader read them for You.
##Additional benefit
When using a screen reader, You get better at designing an accessible user experience. For instance, You'll quickly find out how crucial semantic HTML is in helping You jump through websites' sections with ease.
#Word of caution
Using a screen reader might take some time to master. It's similar to learning to write fast on a keyboard. It takes practice, but it's also quite rewarding.
#What screen reader should I use?
There are plenty of screen readers available. My personal favourites are [TalkBack](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback) for android and [NVDA](https://www.nvaccess.org/download/) for windows. I've heard a lot of good opinions about VoiceOver for Mac too. For the first one, I recommend You to check out TalkBack. It's the most user-friendly.
Bulletproof React 🛡️ ⚛️
Tags: webdev, react, architecture, frontend
Published: 2021-07-17 12:48:38

---
title: Bulletproof React 🛡️ ⚛️
published: true
description: A simple, scalable, and powerful architecture for building production ready React applications.
tags: webdev, react, architecture, frontend 
cover_image: https://reactjs.org/logo-og.png
---

## Introduction

React is a great tool for building frontend applications. It has a very diverse eco-system with hundreds of great libraries for literally anything you might need. However it can be overwhelming to be forced to make so many choices.

React is also very flexible, you can write React applications in any way you like but that flexibility comes with a cost. Since there is no pre-defined architecture developers can to follow, it often leads to messy, uncosistent or over-complicated codebases.

This is an attempt to present the way of creating React applications using the best tools in the eco-system with a good project structure that scales very well. It is based on the experience of working with many different codebases, and this architecture turns out to be the most effective one.

The goal of this repo is to serve as a collection of good practices when developing React applications. It is supposed to showcase solving most of the real-world problems of an application in a practical way and help developers writing better applications.

## Includes

- Project Configuration
- Project Structure
- Components And Styling
- Forms
- API Layer
- State Management
- Auth
- API Mock Server
- Testing
- Error Handling
- Performance

Feel free to explore the repo to get the most value out of it.

https://github.com/alan2207/bulletproof-react



I hope you will find this useful, if you have any questions, feel free to reach out to me via email at alan.alickovic@gmail.com or via [Twitter](https://twitter.com/alan_alickovic) or [LinkedIn](https://www.linkedin.com/in/alan-alickovic/).
How to save Base64 encoded image to Django ImageField?
Tags: django, base64, python
Published: 2021-09-14 15:39:15

---
title: How to save Base64 encoded image to Django ImageField?
published: true
date: 2021-07-17 12:47:50 UTC
tags: django, base64, python
canonical_url: https://idiomaticprogrammers.com/post/how-to-save-base64-encoded-image-to-django-imagefield/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6pzytc0tedziy3hlpsh.png
---

I had to create an API that had to accept an image in Base64 encoded format and save it to Django image field, which requires an image file. So today I learned how to do this.

## Step 1: B64 to PIL

The first step will be to convert this B64 image to an image file in memory, I will be using Pillow for this. You can install Pillow using this bash command.

```bash
$ pip install pillow
```

Make sure you have pip installed. If you're using Linux or Mac OS, then you might have to use `pip3` instead of `pip`. But I'm using virtual env, so who cares.

after that, write this function.

```python
import base64
import io
from PIL import Image

def decodeDesignImage(data):
    try:
        data = base64.b64decode(data.encode('UTF-8'))
        buf = io.BytesIO(data)
        img = Image.open(buf)
        return img
    except:
        return None
```

This function will return a PIL image if the B64 data is valid, or it will return None.

## Step 2: PIL to Django ImageField

After getting the PIL image, wrote a function that will take this PIL image, convert it into a JPEG file buffer and then inserted it to Database instance using `InMemoryUploadedFile`

**sources: [InMemoryUploadedFile](https://kite.com/python/docs/django.core.files.uploadedfile.InMemoryUploadedFile)**

What is InMemoryUploadedFile? This is basically a representation of the image in memory, that's as simple as it is.

```python
from django.core.files.uploadedfile import InMemoryUploadedFile

img = decodeDesignImage(data)
img_io = io.BytesIO()
img.save(img_io, format='JPEG')
design.image = InMemoryUploadedFile(img_io, field_name=None, name=token+".jpg", content_type='image/jpeg', size=img_io.tell, charset=None)
design.save()

```

The InMemoryUploadedFile class takes 6 parameters:

1. `File buffer`: This is the JPEG format IO buffer I created in line 5.
2. `field_name`: There wasn't much information about this, if you have any idea then please comment below.
3. `name`: This is the name of the file, make sure you add .jpg at the end.
4. `content_type`: This is pretty self explanatory.
5. `size`: The size in bytes of the file.
6. `charset`: The character set, the file data is using. In this case None.

Now if you check your Media folder, you'll see that image as if you've uploaded it via a form.

So that's it for today's "Today I Learned"
Daily Developer Jokes - Saturday, Jul 17, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-07-17 12:00:18

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

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

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

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

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

<!-- 
Joke text:
___Q:___ What diet did the ghost developer go on?

___A:___ Boolean
 -->
How to Install Wine and Run Windows Software on Linux
Tags: linux, windows, tutorial, ubuntu
Published: 2021-07-17 11:56:52

By following this guide, you will be able to run Windows application on Distributions such as Ubuntu, Fedora, Pop!_OS, Elementary OS, Linux Mint, Zorin OS etc.

## Installing Wine - Ubuntu

> This part of the tutorial is also applicable for Pop!_OS or any other Ubuntu based distros.

* Download the Wine repository
```bash
wget -nc https://dl.winehq.org/wine-builds/winehq.key
```

* Add the repository key to your system
```bash
sudo apt-key add winehq.key
```

* Add the repository | Ubuntu 21.04
```bash
sudo add-apt-repository 'deb https://dl.winehq.org/wine-builds/ubuntu/ hirsute main'
```

* Add the repository | Ubuntu 20.10
```bash
sudo add-apt-repository 'deb https://dl.winehq.org/wine-builds/ubuntu/ groovy main'
```

* Update System Packages
```bash
sudo apt update
```

* Finally, Install Wine
```bash
sudo apt install --install-recommends winehq-stable
```



## Installing Wine - Fedora

* Add the Repository | Fedora 34
```bash
sudo dnf config-manager --add-repo https://dl.winehq.org/wine-builds/fedora/34/winehq.repo
```

* Add the Repository | Fedora 33
```bash
sudo dnf config-manager --add-repo https://dl.winehq.org/wine-builds/fedora/33/winehq.repo
```

* Install Wine
```bash
sudo dnf install winehq-stable
```

## Downloading and Running Windows Applications

* To keep this short [download Notepad++](https://notepad-plus-plus.org/downloads/v8.1.1/)

* Double click on the Installer File (`exe`), It'd launch a Wine instance.

* Because this is our first use, wine might ask us to install  one or two additional packages required to run Windows Applications. Allow to install them.

* After that our installer for Notepad++ would start and we'd proceed to install the app as if we were on Windows.

![Notepad++ on Linux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cne0aaqfjf4kk4rwhev4.png)

Well, we're up and running folks!

You can access your installed application later by the Application Menu

![Windows App on Linux Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17cic71i51ftu12x0pls.png)
Intelligent Train Maintenance
Tags: rails
Published: 2021-07-17 11:55:43

Since 1991, DINGO has given Trakka, our exclusive condition the executives programming, to clients in resource concentrated businesses. The innovation and projects created as a team with our worldwide mining customers have given the establishment to our contribution in the rail business. 

As of now, in excess of 11,000 diesel train greased up parts are being observed every day in Trakka. By utilizing the amazing examination in our Trakka programming, our rail clients have acknowledged expanded armada accessibility, decreased work and support costs, and expanded motor life. 

A showing of the advantages of Trakka when utilized in rail applications. This video strolls through the distinguishing proof of coolant and fuel weakening issues in motors and a direction disappointment in a gearbox. 

A typical information climate for rail line upkeep choice help permits you to proactively deal with your rail route resources dependent on current and recorded track and rail resource information. You can join resource condition information with ecological, monetary, and plan information to comprehend both the condition of the resources and how they are disintegrating after some time. Financial plan, assets, and access requirements can be explored outwardly alongside the anticipated disintegration of the resource and the effect of resource disappointment on the general framework. This permits you to work on the viability of support work arranging. 

Upgrading support for rail resources is fundamental for conveying a protected, dependable, and beneficial rail organization. Having precise data about your rail resources is a critical piece of a prescient upkeep choice help climate. 

Our answer consolidates resource condition information with ecological, monetary, and plan information for you to comprehend the state and working state of key rail resources for work on the general trustworthiness and security of your rail organization. Please check <a href="https://www.dingo.com/"><b>DINGO</b></a> for more information.
Setting Up Custom 404 Error Page
Tags: error404, webdev
Published: 2021-07-17 11:50:59

### What does HTTP 404 mean?

The HTTP 404, 404 Not Found, 404, 404 Error, Page Not Found or File Not Found error message is a Hypertext Transfer Protocol standard response code, in computer network communications, to indicate that the browser was able to communicate with a given server, but the server could not find what was requested. 

<hr>

**The Default 404 error pages are not good looking and don't have any type of navigations**

Following are some methods you can use to auto-redirect to a custom error page.


- Website Running on Apache webserver


1. Create a custom webpage for 404 error and name it 404.html

2. Create a file name `.htaccess`

File content: ErrorDocument {error_code}  {custom file path}
```
ErrorDocument 404 /404.html 
``` 
OR

```
ErrorDocument 404 https://yourwebsite.com/404.html 
```

Now the site will redirect to 404.html whenever the user gets a 404 HTTP response or browse the wrong URL path on your website.

**Here are some hosting services that run on Apache webserver**

<table>
<tbody>
  <tr>
    <td>Hostinger</td>
    <td>Heroku</td>
    <td>GoDaddy</td>
  </tr>
  <tr>
    <td>Netlify</td>
    <td>BlueHost</td>
    <td>1&amp;1</td>
  </tr>
  <tr>
    <td>Cloudways</td>
    <td>SiteGround</td>
    <td>HostGator</td>
  </tr>
</tbody>
</table>

<hr>

- Website Hosted on Vercel.com


1. Create a custom webpage for 404 error and name it 404.html

2. Create a file name `vercel.json`

File content:
```
{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/(.*)", "status": 404, "dest": "/404.html" }
  ]
}
```

Read more at official docs: https://vercel.com/guides/custom-404-page


<hr>


- **Website hosted on Github Page**

    *The simplest so far*



1. Create a custom webpage for 404 error and name it 404.html

2. Add this file to your repository

3. Done 

<hr>

- **Website running on Heroku**

For a PHP app hosted on Heroku follow the same method as of Apache Server

OR

1. Create a custom webpage for 404 error and name it 404.html

2. Run this command on Heroku CLI

```
heroku config:set \ 
ERROR_PAGE_URL=//yourwebsite.com/public/404.html
```

Read more at official docs: https://devcenter.heroku.com/articles/error-pages

<hr>

*Note: Make sure the 404.html is present in your root directory with index.html*

**Video Tutorial [Apache Server]** : https://www.youtube.com/watch?v=QkB5ZxeYaJQ&t


### Social Links

[Instagram](https://instagram.com/reboot13_dev) | [Youtube](https://youtube.com/krutikraut)  | [Twitter](https://twitter.com/reboot13_dev) | [Codepen](https://codepen.io/reboot13)


<center> ThankYou </center>
Pure css ADV
Tags: performance, showdev, css, codepen
Published: 2021-07-17 11:35:11

---
title: Pure css ADV
published: true
tags: performance, showdev, css, codepen
cover_image: https://images.unsplash.com/photo-1617062004315-a7c65e9015c8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80
---

The last task assigned to me is to convert a js based adv component to pure css.

> As always, the analysis was focused on what I could have lost by not using the js or on what the css would have "tied my hands".
> I managed to keep every feature.

The strategy to achieve the desired result involves the arrangement of the elements on different **z-index** and the use of **CSS Combinators** (+ and ~).

I definitely excluded the links`:target` because, unlike the inputs, they do not allow the maintenance of the assigned stage if not their focus.
Furthermore, among the checkbox and the **radio**, the latter were the most appropriate solution to define a *boolean* stage.

{% codepen https://codepen.io/tamer_aka_remat/pen/LYyxqWo %}