teleren/devto huggingface dataset:
Migrating to React 17 and Fixing the JSX Runtime Error with Emotion
Tags: emotion, react, jsx, runtime
Published: 2020-11-08 09:27:10

If you use [Emotion](https://emotion.sh) in your project and you're migrating to react 17, you might run into this error if you use the `css` prop:

```sh
pragma and pragmaFrag cannot be set when runtime is automatic.

> 1 | /**@jsx jsx */
    | ^
  2 | import {
```

This error is due to the new JSX runtime feature introduced by [React 17](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)

After researching several solutions, here are some solutions that fix this:

## Solution 1

Add another jsx pragma that configures the new jsx runtime to `classic` mode.

[🔗 Reference](https://github.com/system-ui/theme-ui/issues/1160)

```diff
+/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/core';
```

## Solution 2

Change the jsx pragma

[🔗 Reference](https://github.com/emotion-js/emotion/blob/master/packages/core/CHANGELOG.md#minor-changes)

```diff
- /**@jsx jsx */
+ /** @jsxImportSource @emotion/core */
```

## Solution 3

- Remove the jsx pragma `/**@jsx jsx*/` from all files
- Install `@emotion/babel-preset-css-prop` as `devDependency`
- Upgrade `@emotion/core` to `10.1.1`

```json
{
  "presets": ["@emotion/babel-preset-css-prop"]
}
```

[🔗 Reference](https://emotion.sh/docs/@emotion/babel-preset-css-prop)

If you find this useful, feel free to like this post and share it.

Cheers!

> If you had this issue in your project and managed to solve it a different way, feel free to comment below.
How To Set Up GitLab SSH Key on macOS
Tags: git, gitlab, macos
Published: 2020-11-08 09:15:43

*Originally posted at [blog.milhamh.dev](https://blog.milhamh.dev/how-to-set-up-gitlab-ssh-key-on-macos)*

## Prerequisite
- GitLab account
- macOS

If you want to clone a repository from GitLab, there are 2 ways to do it.

The first choice is using `HTTPS`, but you need to insert your GitLab username and password every time you clone a repository. 

The second choice is using `SSH` key. By using SSH key, you can clone a repository from GitLab without inserting username and password. Because, SSH key will handle the authentication.

Today, we will learn how to set GitLab SSH Key on macOS.

## Generate SSH Key

- Open your terminal, go to .ssh directory

```sh
cd ~/.ssh
```
- Create your SSH Key. We will use RSA SSH key configuration.

```sh
ssh-keygen -t rsa -C "your_email_address"
```

- You'll see a message to insert file name for SSH key. For example, I insert: `id_rsa_gitlab_key`

```sh
Generating public/private rsa key pair.
Enter file in which to save the key (/home/user/.ssh/id_rsa):
```
- Next, you'll be asked to enter passphrase. Just leave it empty

```sh
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
```
- Congratulations, you just create your own SSH Key. To check SSH key exist or not, run:

```sh
ls -al
```
- You will find two files:

```sh
id_rsa_gitlab_key // private key
id_rsa_gitlab_key.pub // public key
```

## Register SSH Key 
To make sure your mac able to authenticate automatically with GitLab, you need to register your SSH key to SSH agent in your mac.

- Start the ssh-agent.

```sh
eval $(ssh-agent -s)
```

- Add your SSH key to SSH agent.

```sh
ssh-add -K ~/.ssh/id_rsa_gitlab_key
```

- Open SSH config file.

```sh
nano ~/.ssh/config
```
- To make sure your SSH key added automatically to SSH agent after a reboot (or logout/login), we need to set config file.

```
Host gitlab.com
   AddKeysToAgent yes
   UseKeychain yes   
   # IdentityFile is your ssh key file location
   IdentityFile ~/.ssh/id_rsa_gitlab_key
```
- Save config file by using `ctrl + x`.

- Check your SSH key in SSH agent.

```
ssh-add -l
```

- You will see your SSH key has been registered to SSH agent.

## Insert SSH Key to GitLab Account

- Copy your SSH Key. This key will be copied to your GitLab account.

```sh
pbcopy < ~/.ssh/id_rsa_gitlab_key.pub
```

- Go to gitlab.com, then go **Profile >> SSH Keys** menu (`https://gitlab.com/profile/keys`).

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

- Paste your SSH Key to **Key** input, and also add the **Title**.

- Press **Add Key** button.

- To test whether your SSH key was added correctly, run:

```sh
ssh -T git@gitlab.com
```
- It should return:

```
Welcome to GitLab, @your_gitlab_username!
```

Great, now you can clone and push a repository in GitLab, getting work done and have a time with your family 😁 . 

## Source

- [GitLab - GitLab and SSH keys](https://docs.gitlab.com/ee/ssh/)
-  [jirsbek - Saving SSH keys in macOS Sierra keychain](https://github.com/jirsbek/SSH-keys-in-macOS-Sierra-keychain)
Include
Tags: cpp, beginners, computerscience, oop
Published: 2020-11-08 09:13:29

---
title: Include
published: true
description: Using the #include preprocessor directive
tags: cpp, beginners, computerscience, oop 
cover_image: https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80
series: Programming 101 with C++
---

In order to use stream I/O, we have to *include* **iostream**.

> \#include \<iostream\>

The **#include directive** allows us to - 

* include a file into our application
* opens up a world of libraries and capabilities

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3l6xouze32mjv2p6oozm.png)

To access anything in the **C++ STL**, that is all you have to do, just include it. For some other libraries, they might need to be linked as well.

Based on the library, it can be accessed as a -
i) **Header only library**: like STL, simply write #include to use it
ii) **Linked library**: needs to be linked with your object files by the linker

Using code that is already written **saves us time and testing effort** and it allows us to build our application on top of it.

Please leave out comments with anything you don't understand or would like for me to improve upon.

Thanks for reading!
WebAssembly for Enterprise Developers
Tags: webassembly, webdev, javascript
Published: 2020-11-08 08:49:26

We've all heard about WebAssembly, but most of the times it's mentioned in the context of building video games, image and video compression, VR/AR etc. However, a lot of us do not work as game developers and we don't encounter these problems in our day to day work. This brings out the question - should I even learn WebAssembly? In this talk, I want to show some use cases in building business/enterprise applications where WebAssembly can be applied. The talk is practical and we will see how WebAssembly can improve your apps performance by order of magnitude and hopefully convince you why WebAssembly is here to stay.

{% youtube fNH409IXylI %}
Import npm package from skypack.dev
Tags: codepen
Published: 2020-11-08 08:49:21

---
title: Import npm package from skypack.dev
published: true
tags: codepen
---

<p>The domain of front-end development on the web is moving toward a place where you can pick-and-use standard components reusing modules, components and functionality in an easy way. NPM works very well for node.js "backend" javascript development, but pulling NPM packages into frontend can be hard.</p>

<p><a href="https://Skypack.dev">Skypack.dev</a> tries to fix this problem serving "front-end ready" NPM packages.
This is an example where I use one import to pull in a funny package "<a href="https://www.npmjs.com/package/canvas-confetti">canvas-confetti</a>" which is just funny :-) </p>

{% codepen https://codepen.io/netsi1964/pen/KKMxjNy %}
First shot at open source
Tags: hacktoberfest
Published: 2020-11-08 08:40:26

Around mid-October, my friend introduced [Hacktoberfest 2020](https://hacktoberfest.digitalocean.com/) to me. It looked so interesting that I decided to sign up even though I had no experience with contributing to open-source.

### Background

I'm going to talk a little about myself. I'm new to the coding scene and started my journey with a bootcamp and now I'm working as a junior software engineer. During this time, whenever there were discussions about contributing to open source, it sounds so distant because I feel like I don't really have anything to contribute with my current skill level.

### Process

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->
Nonetheless, the event and reward for participation drew me in. Onboarding was simple, all I had to do was link my Github account to the event. They even had a short video walkthrough to guide newbies like me. Some important takeaways were how to look for projects that were open-source and contribution guidelines. To find projects, here's a list of online tools that I found very helpful:
 - [Awesome for Beginners](https://github.com/mungell/awesome-for-beginners)
 - [Good First Issues](https://goodfirstissues.com/)
 - [Up For Grabs](https://up-for-grabs.net/#/)

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->
The video walkthrough also held my hands through making a first PR with an open-source project, DigitalOcean Community's [haiku collection](https://github.com/do-community/cloud_haiku). It helped me to understand the most non-disruptive way of contributing:
1. look through the issues tab to find suitable problems to tackle
1. fork the repo
1. clone it to local
1. make changes
1. push changes up to forked repo
1. submit a pull request

The next repo I worked on was to write a readme for [cipher diaries](https://github.com/happycoder0011/CIPHER_DIARIES) explaining how the rail fence cipher works. 

After that, I found another project that collects solutions for [algorithms](https://github.com/ZoranPandovski/al-go-rithms). I helped code out an implementation for rail fence cipher which I learned while writing the readme for the previous project. How convenient!

A more impactful project that I took on was to help a [certificate generator](https://github.com/Greatgabbar/Certificate-Generator) with front-end code. I managed to refactor their view files by making partials for pages to reduce repetition. This way, the `.ejs` view files can be kept short without having to write a full HTML document for every page created. This was fulfilling because it added scalability to the project. 

### Reflections

Having tried out various ways of contributing, I feel that solving a project's pain points returned the most sense of satisfaction. I'll be looking forward to Hacktoberfest 2021. In the meantime, I'll definitely be looking at the issues tab of the common open-source libraries to find ways that I can contribute.
My #100DOC - Day 73
Tags: 100daysofcode, challenge
Published: 2020-11-08 08:20:50

### Day 73: November 07, 2020

#### **Today's Progress**: 
1. **[DI theory](https://github.com/pablohs1986/dam_di2021)** (1h):<br>I began to study the theory of the subject.
2. **[Environment for SGE](https://github.com/pablohs1986/dam_sge2021)** (2h):<br>I prepared my work environment, installing and configuring a new virtual machine with Ubuntu Server and a SSH connection with Putty and pgAdmin.
3. **[File Java Class](https://github.com/pablohs1986/dam_ad2021)** (30min):<br>I ended the second part of the exercise 4 making the JavaDoc.
    
#### **What I learned**: 
* Basics of Java Swing.
* Review of how to make a virtual machine in VirtualBox.
* How to install and configure Ubuntu Server.
* What's Putty and its use.
* What's pgAdmin and its use.
* How to install and configure a SSH connection with Putty and pgAdmin.

#### **Total time**:
3h 30min.
Modern JavaScript for Python Developers
Tags: python, javascript, webdev
Published: 2020-11-08 08:12:47

JavaScript is the lifeblood of the modern web application. You need it to do anything remotely complex on the web.

But, for many Python developers, the modern JavaScript ecosystem is intimidating. The tools feel complex. There are often several ways to achieve the same goals. It's hard to choose a framework—and then once you do, it's hard to know exactly how to integrate it into a Flask or Django project.

This talk aims to demystify modern JavaScript for Python-minded developers. It will cover major advances that have been made to JavaScript in recent years and how you can use the JavaScript ecosystem - including tools like npm, webpack and babel - to write Python applications for the modern web.

{% youtube F9wFVM_6KcA %}
🔥 Roast my site! 🔥
Tags: comment, showdev, portfolio, webdev
Published: 2020-11-08 07:17:08

I relaunched my portfolio a couple of days ago and would love to hear your feedback. Over the past decade it’s been through a few [iterations]( https://web.archive.org/web/*/Charanj.it), but I think I’ve found a format I’m really happy with. It’s actually my second attempt of the year, I went a little too minimal first time round and after a change in jobs I threw it all away and started again.

It should be fast, lightweight and to the point. Despite its simplicity I still learnt so much putting it together and got to brush up on a few things too, which is always a good thing.

So, good or bad, let me know what you think!

https://charanj.it
Get a scraped database instantly!
Tags: webscraping, database
Published: 2020-11-08 07:07:19

Want to build a SaaS? Or find new leads? Or supercharge your marketing? [IndieData](https://indiedata.app) gives you the benefits of scraping without the headache of scraping. Get a scraped database instantly 🚀. Build your next SaaS product with our SaaS (Scraping as a Service)
How to split the records in Kumologica
Tags: aws, microservices, kumologica, integration
Published: 2020-11-08 07:07:02

In this article I am going to demonstrate on how to split a given input object or record in Kumologica. In order to split an object or an array or a string,  Kumologica provides split and join node which are required to be used in combination.  You may wire as many parallel path between split and a join node. Every path wired between split and join node will be invoked for each iterated or record splitted.

**Split node supports**

1.  Iterating or lopping through an array. 

2. Tokenizing a simple string based on provided character separator.

3. Splitting a object based on keys.

Join node is always used along with split node in order to close the loop or to combine the response from different flow path initiated from the split node.

Let's go through each of the above mentioned operations supported by the Split node.

<h3>Iterating or lopping through an array</h3>

When you have a requirement for a an array to be iterated or looped through and do some actions with the each record or object that has been iterated then you can choose this option.

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

**Configuration in Split node in Kumologica**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6xuqq1lg74izsmf3ric5.png)

<h3>Splitting a simple string based on provided character separator</h3>

When you have a requirement for a string to be tokenized based on some separator then you may use this option.

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

**Configuration in Split node in Kumologica**

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

<h3>Splitting a object based on keys</h3>

When you have a requirement for iterating through an object based on its keys then you may choose this option.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/93hskf34vqpbf6t9fjix.png)

**Configuration in Split node in Kumologica**

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

**Flow demonstrating the split and join**

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

<h3>References</h3>

https://docs.kumologica.com/docs/references/CoreRouting.html#split

https://docs.kumologica.com/docs/guide/GettingStarted.html

https://www.youtube.com/results?search_query=kumologica
Github Actions for PHP Laravel
Tags: github, php, laravel, devops
Published: 2020-11-08 07:05:53

Can anybody help me with the Github Actions for PHP Laravel?
My colleague and I are working on a project and want help with Github actions.
I have already found a solution for NodeJS and it is working like a breeze.
But Stuck with Laravel without the test cases. And we're finding all the solutions with the test cases.
Any help will be appreciated.
Thank you.
LeetCode Problems 1-10
Tags: leetcode, java, javascript, python
Published: 2020-11-08 07:05:37

---
title: LeetCode Problems 1-10
published: true
description: LeetCode 1-10 problems and solutions
tags: [LeetCode, Java, JavaScript, Python]
cover_image: https://assets.leetcode.com/static_assets/public/images/LeetCode_Sharing.png
---

Howdy fellow devs :wave:! In order to improve every day, we must practice continuously of what we have learnt.
Solving problems on online learning platforms is one of the most common ways to do so.

[LeetCode](https://leetcode.com/) is one of the most widely used platforms for solving problems. They have a wide variety of problems of varying difficulty levels i.e., **Easy**, **Medium** and **Hard**.

I also try to solve each problem every day to keep my brain juices flowing :smiley:. Since humans tend to forget most of the information, it's only logical if we document the analysis of a problem, approach we took to solve that problem etc. Therefore, as soon as I solve the problem, I try to write a blog with all the information I used to solve that problem.

Below are the blog posts for LeetCode problems 1 - 10. 

1. [Two Sum](https://redquark.org/leetcode/0001-two-sum/)
2. [Add Two Numbers](https://redquark.org/leetcode/0002-add-two-numbers)
3. [Longest Substring Without Repeating Characters](https://redquark.org/leetcode/0003-longest-substring-without-repeating-characters)
4. [Median Of Two Sorted Arrays](https://redquark.org/leetcode/0004-median-of-two-sorted-arrays)
5. [Longest Palindromic Substring](https://redquark.org/leetcode/0005-longest-palindromic-substring)
6. [ZigZag Conversion](https://redquark.org/leetcode/0006-zigzag-conversion)
7. [Reverse Integer](https://redquark.org/leetcode/0007-reverse-integer)
8. [String To Integer (atoi)](https://redquark.org/leetcode/0008-string-to-integer-atoi)
9. [Palindrome Number](https://redquark.org/leetcode/0009-palindrome-number)
10. [Regular Expression Matching](https://redquark.org/leetcode/0010-regular-expression-matching)

I hope you will find them useful. I have implemented the solutions to these problems in four programming languages - Java, Python, JavaScript and Kotlin.

You can find the complete source code on my [GitHub](https://github.com/ani03sha/RedQuarkTutorials/tree/master/LeetCode) repository. If you like what you learn, feel free to fork 🔪 and star ⭐ it.

Keep practicing... keep coding... stay safe and Namaste :pray:.
Dockerize an existing Laravel application with docker-compose
Tags: laravel, docker, devops, php
Published: 2020-11-08 07:04:04

in the main folder of your Laravel app, create a file named Dockerfile and insert this code:
```
FROM php:7
RUN apt-get update -y && apt-get install -y openssl zip unzip git
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
RUN docker-php-ext-install pdo pdo_mysql
WORKDIR /app
COPY . /app
RUN composer install
CMD php artisan serve --host=0.0.0.0 --port=8181
EXPOSE 8181
```

In the same main folder of Dockerfile, create a file named docker-compose.yml and insert this code:

```
version: '2'
services:
  app:
    build: .
    ports:
      - "8009:8000"
    volumes:
      - .:/app
    env_file: .env
    working_dir: /app
    command: bash -c 'php artisan migrate && php artisan serve --host 0.0.0.0'
    depends_on:
      - db
    links:
      - db
  db:
    image: "mysql:5.7"
    environment:
      - MYSQL_ROOT_PASSWORD=yourpassword
      - MYSQL_DATABASE=yourdbname
      - MYSQL_USER=root
      - MYSQL_PASSWORD=yourpassword
    volumes:
      - ./data/:/var/lib/mysql
    ports:
      - "3306:3306"
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
      - 8090:80
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: yourpassword
```

Open the terminal command line and go inside the laravel folder, and launch this commands:

`docker.compose build`

`docker-compose up -d`

if have need to create and migrate the db, or use other commands, launch the Laravel commands in this way:
`docker-compose run app php artisan`

The app will available at the address http://0.0.0.0:8009
When was the last time you used float?
Tags: css, discuss
Published: 2020-11-08 06:58:04

Browsing through some old articles and blog posts I had bookmarked but never got around to, one example required the float property. It got me thinking, I don’t think I’ve used that property for a new project over the past 10 years or so. I’m sure I’ve used it for something on a legacy project, but overall just a handful of times in 10 years.

Given the headaches the float property gave me over the early years of my career, I’m so much happier using flexbox and CSS grid.

When was the last time you used it? Is there still a place for floating in CSS?
Hacktoberfest 2020 done right!
Tags: hacktoberfest
Published: 2020-11-08 06:56:58

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




### My experience 

As lockdown started and I had devoted my surplus time in learning new stuff, I started pushing all my projects/codes on GitHub.Yet, I was unaware about the open source contribution and the importance of PRs as well as solving issues. Somewhere, I read about Hacktoberfest but it was mid of October already. So I instantly learned about pull requests and made 4 PRs related to data structures that I have learnt so far. They all were accepted which elevated my happiness and it has given me enough confidence. I will continue doing open source contributions. 

I am waiting for October 2021 now. Also, I am happy to join DEV community.
Learning redefined
Tags: hacktoberfest
Published: 2020-11-08 06:55:27

Hello devs.. I am Sanjog Samuel Samantaray. Learning is what drives me, developing is what interests me and motivation is what ignites me to dig deep in the vast ocean of knowledge to explore the unknown and refine myself.
I always wanted to know what is open source contribution and how it helps in development. Suddenly I came across this fest through my friend and hoped into this fest without any second thought.

I always like to learn new things. This fest gave me a number of informative insights to learn open source contribution through effective use of Github.

I have completed 4 successful PRs and the last one is under review. I really loved to contribute my projects and share my knowledge with other developers.

I contributed one of my web dev projects, helped a developer with some necessary changes in his code, and contributed some of my C programs.

Link:-
https://github.com/SanjogSamuelSamantaray/algorithmsUse
https://github.com/SanjogSamuelSamantaray/projects
https://github.com/SanjogSamuelSamantaray/Hacktoberfest-web
https://github.com/SanjogSamuelSamantaray/my-portfolio


This fest taught me the importance of open source contribution in developing oneself and also helping others to do so. I will definitely take part in the upcoming Hacktoberfest. Not only this, but I will also look forward to indulging myself more in such open-source contributions so as to explore the unexplored and refine my skills.