teleren/devto huggingface dataset:
How I've created Photo in single div CSS
Tags: css, javascript, hack, hacking
Published: 2021-08-06 20:41:18

---
title: How I've created Photo in single div CSS
description: Hack I used to generate Photo into single div CSS.
published: true
tags: CSS, JavaScript, Hack, Hacking
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyh3lyyzmh6rc48yy476.png
---

So the history of this is short. I've seen on twitter that someone posted an image and a link with message that he created this in CSS. The link was fake, just message that this is a prank.

I can call myself a hacker as in original sense (see definition from [jargon file](
tinyurl.com/jargon-hacker)). So I decided that it should be quick and cool hack to create a script that will generate the CSS from an image. Long ago I've created this demo [CSS Draw](https://cssdraw.jcubic.pl/) the idea is the same. You generate bunch of box-shadow with pixels. But there would be much more data.

I've created quickly demo on Codepen:

{% codepen https://codepen.io/jcubic/pen/KKmxOQr %}

I've used this image from [placekitten.com](https://placekitten.com/).

![Kitten](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpgowphdbqfkjozvpkdt.jpeg)

First attempt was using image directly from URL but it was not working, because I was not able to get pixels using canvas, because that's blocked by Same Origin Policy. So I need to upload the file.

When I upload the file it frozen the browser few times, but with few attempts I was able to create a working demo, that generated single div CSS (later I've refactored the code a bit so it's cleaner). But there was a problem when I've tried to copy the CSS into a file. First attempt was to put the CSS into textarea, but it was too much data and browser tab frozen. Then I've tried to select the div in the Dev Tools but dev tools frozen when I've selected the div. But the element panel was fine, because there was not to many DOM nodes. So in next attempt I was able to edit html of the style attribute and copy whole CSS. I had few problems with editors on my GNU/Linux box (it was few MB of data) but finally I was able to create simple html page with single div. You can see it at [jcu.bi/kitten-css](https://jcu.bi/kitten-css). The file have 3.3MB of data, and there are almost no HTML.

After some time I've updated the demo and added file download of the output HTML file that can be use standalone. Also changed rgb colors to hex, that made the output little bit smaller.

Please share in comments what you think about this hack, and follow me on twitter [@jcubic](https://twitter.com/jcubic).
Next.js: how to access browser "window" object
Tags: nextjs, javascript, dom
Published: 2021-08-06 20:07:30

---
title: Next.js: how to access browser "window" object 
published: true
description: Se how to access "window" HTML DOM object in Next.js framework.
tags: nextjs, javascript, dom
//cover_image: https://direct_url_to_image.jpg
---

If you are trying to access "window" object from HTML DOM in your Next.js app and have this error message:

`Unhandled Rejection (ReferenceError): window is not defined`

Just keep you code as the example:

```
componentDidMount() {
   console.log('window.innerHeight', window.innerHeight);
}
```  


Another solution to just execute your code during rendering on the client side only, is:

```
if (typeof window !== "undefined") {
   var width = window.innerWidth;     
}
```

---

I hope you enjoy it!

Follow me on [Twitter](https://twitter.com/lucasmezs)
Sponsor my open source projects on [GitHub](https://github.com/sponsors/lucasm)
How to Use Requests-HTML Library in Python
Tags: python, programming, computerscience
Published: 2021-08-06 20:05:25

Requests-HTML is a Python Library that is specially created to make HTML Parsing as much easy as possible. Sometimes we need to Parse HTML to get our Required Data from the Webpage that we are scrapping. So in these scenarios, Requests-HTML will be a good candidate to choose for this task.
**How to install Requests-HTML?**
In order to use Requests-HTML, we first have to install it. For the installation, we can use the pip. the following command will help us to install Requests-Html. 
Note: Python 3.6 or greater Version is needed for the installation of this Library.

pip install requests-html

To Learn More about Requests-Html Please check this Article.
[Use Requests-HTML Library in Python](https://www.alixaprodev.com/2021/02/how-to-use-requests-html-library-in-python.html.html).
Enabling API Access for Google Sheets
Tags: api, googlesheets
Published: 2021-07-21 21:15:18

---
title: Enabling API Access for Google Sheets
published: true
description: Explains how to add API access for google sheets
tags: api,googlesheets
series: Google sheets from PHP
//cover_image: https://direct_url_to_image.jpg
---

Before you can connect to Google Sheets what you will need to do is enable API Access for Google Sheets. This involves logging on to Googles Cloud API console and enabling the API for google sheets and google drive. Once you have completed this step you can then create a OAuth client id and client secret so that your users can authenticate to your application using OAuth.

Google didn’t make this step super easy but basically once you have created a new project (let me know in comments if you would like to see how to create a new project), you then need to open the APIs & Services page and select Library.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hehrokfn9pwqsb8gd5aa.png)
This brings up a page with all google API services.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2e4gwzpbyou2yf4j8w9.png)
Run a search for sheets

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zh3qyetm5rvat47es8jh.png)
Once you select Google Sheets API this will bring up the enable API page.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7nseoh8kkfdd1snt2pi.png)
Clicking on Enable will enable the API for use.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d92wbmsw8s3pw4o277fb.png)
I then repeated the process for Google Drive and you can repeat this process for any API you would like to connect to.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayz5x70hqk1io3ajoxfm.png)
In my next post I will show how to create client credentials for google OAuth so that you can connect via a web application.
0% revenue share for Shopify App Store developers
Tags: ecommerce, shopify, developer
Published: 2021-08-06 19:56:22

---
title: 0% revenue share for Shopify App Store developers
published: true
description: Shopify app developers might now have 0% on the first 1,000,000 USD in annual gross app revenue share, check out the details about it.
tags: ecommerce, shopify, developer
canonical_url: https://rafaelcg.com/blog/shopify-revenue-share/
cover_image: https://i0.wp.com/rafaelcg.com/wp-content/uploads/2021/08/Shopify-revenue-share.jpeg?resize=1024%2C576&ssl=1
---

Amazing news was announced at Shopify Unity 2021, but the one that made my year was the 0% revenue share.

Since August 1, 2021, app developers can register for a reduced revenue share plan. Shopify collects 0% on the first 1,000,000 USD in annual gross app revenue earned through the Shopify App Store and when you exceed 1,000,000 USD annually you might pay 15% instead of the previous 20%.

![0% revenue share for Shopify App Store developers](https://i2.wp.com/rafaelcg.com/wp-content/uploads/2021/08/Capture-de%CC%81cran-le-2021-08-06-a%CC%80-13.49.46.png?resize=840%2C306&ssl=1)

## Revenue share registration details

The registration is simple, all partner accounts need to complete a one-time registration to have the benefit. But now, new Shopify partner accounts will have to pay a $99 USD fee per partner account. Developers must identify all Associated Developer accounts during registration.

All billing is subject to a 2.9% processing fee and applicable sales tax.

![Shopify registration to unlock 0% revenue share](https://i1.wp.com/rafaelcg.com/wp-content/uploads/2021/08/Capture-de%CC%81cran-le-2021-08-06-a%CC%80-13.54.33.png?resize=840%2C623&ssl=1)

Shopify registration to unlock 0% revenue share

After complete your registration they will validate it!

![Updates to revenue share for Shopify App Store developers](https://i0.wp.com/rafaelcg.com/wp-content/uploads/2021/08/Capture-de%CC%81cran-le-2021-08-06-a%CC%80-13.55.22.png?resize=771%2C348&ssl=1)

If you have any questions about it yet you might be able to solve it check the [official page about it](https://help.shopify.com/en/partners/rev-share-faq#associated-developer-accounts), but in case you're looking forward to creating your next Shopify app like me, [let me help you](https://rafaelcg.com/contact)!
Returning to a Drupal 7/9 Migration — with Paragraphs
Tags: webdev, php
Published: 2021-08-06 19:54:29

After a week of migrating our multisite system from D8 to D9 on our test server, I am now shifting to migrating another site from Drupal 7 to Drupal 9. Thankfully, this is just one site and not a multisite system. It is primarily used as a content management service so that both Android apps and Powershell applications can pull down and organize content with a series of GET requests. That said, there are a few complexities: It uses the Group module, which allows us to assign content permissions based on project teams. It also has a custom module that allows us to simulate how particular activities will look in a mobile app. Finally, the videos use the media module so those may have to be re-added.

I started migration tests back in March 2021 and then put the whole thing on pause when it became clear that a lot of changes to both content and configuration would be happening.

Now I am back in it. My first step is to refresh my local setup based on our production site. Then I will be turning off all the modules we will not need again in order to simplify the migration process.

## Paragraphs
Because this is a fairly simple site, we get a lot of mileage out of Drupal's out-of-the-box graphic user interface. That said, we do need to write custom scripts to migrate paragraphs. For those new to paragraphs, they are essentially "fields of fields." The paragraphs modules is similar to the Field Collection module except that it is  compatible with Drupal 8 and 9.

After a lot of effort, I was able to get a paragraphs migration protocol working back in the Spring, and since then, we have had a proliferation in the number of paragraph types - and the nodes that use them - on our live site. So I will be writing additional scripts that will move over all those new paragraphs and their nodes to D9. We may also have to re-add some videos.

That's about it for now. If you develop in Drupal and are curious as to how this goes, check back here for further updates.
Git for beginners
Tags: github, git, beginners
Published: 2021-08-06 19:51:26

The content is from this youtube tutorial where it covers how to use SourceTree, Github, and terminal from VScode to manage the project.

#Before creating repository on Github
`git init`
Then register your username and email. 
`git config --global user.name "(your name)"`
`git config --global user.email "(your email address)"`

Git is basically putting the current version of your project in a time capsule. 
`git status` command shows the files that are untracked, meaning the files just created by you.
You can put the current state of files in the time capsule using the command, `git add -A`.
The changes to be committed will be shown when you type `git status` again.

You bury the time capsule using `git commit -m "First Commit"`

In order to push your commit the changes to the online repository, use `git remote add origin https://github.com/angelayoon/PETase-igemcolab-database.git` Origin is the default name of the master branch and you can change its name. Then `git push -u origin master` push the changes to the cloud repository(origin) on master branch. 







#When you created repository and want to commit the progress on the existing github
Modern clean architecture
Published: 2021-08-06 19:28:30

I am pleased to announce the release of the [modern-clean-architecture](https://github.com/bertilmuth/modern-clean-architecture) project.

Clean architecture follows these principles:
* The domain code and use cases of an application are independent of frameworks, UI, the database or any external agency, e.g. external services.
* Through this clear separation of concern, the domain code and use cases become testable independent of the framework, UI or infrastructure.
* The user interface, database technology, external services and framework specific code can change without affecting the domain code and vice versa.

Modern clean architecture provides a fresh view on clean architecture, in a Spring Boot environment. It reduces the effort required to create a clean architecture through the following constraints:

* **Serialization of immutable requests and responses** without serialization specific annotations.
* **No necessity for DTOs**. You can use the same immutable value objects for requests/responses in web layer and use cases.
* **Generic endpoint** that receives and forwards POST requests. New behavior and domain logic can be added and used without the need to write framework specific code.
* **Testing with a repository double** that acts like a normal repository. No need for mocking it.

Visit the [website](https://github.com/bertilmuth/modern-clean-architecture), I'm happy to hear your thoughts.
How To Generate apk Using React Native Expo
Published: 2021-08-06 19:25:50


## Introduction

Hey everyone! Here is a quick article on how to generate an apk for your react native expo app. 

---

## Install expo CLI
I assume, if you are reading a blog on exporting the app , you have already installed the expo CLI  👀.

To check if you have expo CLI install run 

```sh
 expo -V
```

In the command line, If you get a version number that indicates you have expo install.

![image](https://user-images.githubusercontent.com/51131670/127814024-8697efc2-0006-4f94-b390-0d3c260be416.png)

In case you don't. You can install it using npm.

We also need the eas build tools

```
npm install --global expo-cli eas-cli
```

---

## Create expo account and login
First requirement for generating the apk file is creating an expo account.
[Create an account here](https://expo.dev/signup)

![expologin](https://user-images.githubusercontent.com/51131670/126792240-918e98cf-1e7b-4904-aba4-55aeee94bdc7.PNG)

After logging in, you will be redirected to your expo dashboard.

![image](https://user-images.githubusercontent.com/51131670/127813228-178ea418-c012-4768-a305-8aeece560f12.png)

---

## Login to expo CLI
- Open cmd
- Login to expo account using the command :
```
expo login
```
![login](https://user-images.githubusercontent.com/51131670/126795309-6f36664b-4edd-4bab-9710-d332635f6dea.PNG)
To check which user you are logged in with, use the command
```
expo whoami
```
![image](https://user-images.githubusercontent.com/51131670/127814587-67a4f021-fd70-4b9f-943c-b635e67ba5bd.png)

---

## Edit Config
By default the eas build tool will give you a playstore build file.

If you want a .apk file you need to create a `eas.json` file and add a `buildType` as `apk`.


```
{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "production": {}
  }
}
```


You can check out more about the eas build tool [here](https://docs.expo.dev/build/introduction/).

---

## Build
Open cmd in your app directory.

Run the build command 
```sh
eas build -p android --profile preview
```

Wait for the build to complete...

---

## Download apk
After the build is complete you can go to the builds section in your dashboard and download the apk.

![apk](https://user-images.githubusercontent.com/51131670/128470787-bba9becb-7cee-416f-a00b-ecfe3fefc953.PNG)

---
Hope you found this useful. See you in the next one!
6 Tips To Finish Projects Your Started
Published: 2021-08-06 18:40:00

Many people I know have problems finishing projects they start. I used to have this problem a few years back. Building up a story about the launch in my head and making it a big deal and thereby psyching myself “out” of it. There are 3 main reasons why people don’t launch.

1. Thinking forward all the time: They don’t have any idea about the number and the kind of steps that are left for the launch because they don’t think backward. They only think forward.

2. Perfectionism: People want it to be perfect, and therefore they keep adding to what their product can do.

3. They have weird expectations about launching: They have unrealistic expectations about launch day, and they have built it up in their head.

Here are a few ways to think about, approach it which might work as an antidote to this perennial postponement problem. I have used all of them in the many projects that I have done to get them out of the gate, including my latest SAAS product Proxies API.

1. Unpsyche yourself: Don’t make a big about the day of the launch. Build a false narrative about the next day being a huge day is very helpful for me and also highlights the fact that I am getting nervous about a ridiculous thing. I do the same with my first client, my first ten clients, my first 100 clients, my first 10k in revenue, etc. Don’t build it up. It's no big deal. Don’t even celebrate it if you have this problem, so that you send a message to your brain that you won’t have had any of it next time.

2. Your Identity: Don’t associate your work too closely with who you are. By that, I mean, your work doesn’t reflect who you are. Not at all. Otherwise, nobody would ever learn anything. The learning curve would be a dot. It is stupid. So stop it. The aim is prolific instead of perfect, and for that, you have to stop looking at anything you produce as being holy.

3. De-sensitise: Pretend it is launch day today. Go into it as if you are going to launch, so you do things in reverse. Typing up all the loose ends. Its play was acting to prepare you for the day mentally. You can even pretend that it is launch hour now and see what you need to do to get the house in order.

4. Reduce Expectations: Don’t think of a launch as one event. Tell yourself that you will have five stars. Maybe one every week and even plan what goes into that.

5. Reduce the pressure: Don’t tell your closest friends if it helps you when you launch till you are comfortable. Launch to strangers first and many times after that. Don’t say to your friends ever. Who cares.

6. Listen to the experts: If you can not permit yourself, at least listen to the silicon valley icons who know what it takes.

a) Reid Hoffman of LinkedIn says that ‘’If you are not embarrassed a little bit about your first launch, you have launched too late.”

b) Paul Graham of Y Combinator says “Release early” as the first piece of advice to start-ups in his essay about lessons that founders find hard to learn.

Put these quotes in your office/desk, so it seeps in.

The author is the founder of Proxies API, a proxy rotation api service.
Card game "Rue" is now available in Arch Linux's AUR.
Tags: archlinux, opensource, linux
Published: 2021-08-06 17:53:15

---
title: Card game "Rue" is now available in Arch Linux's AUR.
published: true
description: I've started spending time on packaging my new card game "Rue" for different open-source communities, to familiarise with the process.
tags: archlinux, opensource, linux
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42drgndeyqp5btptkpn5.png
---

My new card game "Rue" is my first open-source project made with `avdl`. I've started spending time on packaging it for different open-source communities, to familiarise with the process.

Recently, I've created a couple of packages for the Arch User Repository (AUR), which is a place to find projects packaged by other users.

One package being for the video game "Rue" itself, and the other being for "avdl", the compiler for the programming language "Rue" was made on. This way, only with a few commands Arch Linux users are able to install "Rue" on their system, through the default package manager.

Check them out on the following links.
avdl in AUR: https://aur.archlinux.org/packages/avdl/
Rue in AUR: https://aur.archlinux.org/packages/rue/
Redux Slice 🍕
Tags: react, redux, frontend
Published: 2021-08-06 17:14:41

If you’re familiar with redux then you can get the most of this article.
In this article we will not cover the Redux concept itself we will take a slice 🍕


**The Traditional Way**
Each time you want to work with Redux, you need to create Types, Actions, and Reducer to be able to set create redux cycle but with the Redux toolkit, it’s much simpler.


**Redux Toolkit Way**
It was created to help address some of the redux concerns like “Redux requires too much boilerplate code”, It has functions that build according to redux best practices It includes several utility functions that simplify the most common Redux use cases.
So it provides functions such as createSlice that we will be talking about in this article.


**Installation :**
npm install @reduxjs/toolkit


You can check more about the Redux toolkit from this link:
https://redux.js.org/redux-toolkit/overview


##Now it’s time to CreateSlice()🍕

####1- How to Create it!
It’s a function that accepts an object of :
* Slice name
* Initial state value
* Reducers object that contains Reducer functions and its key names will be used to generate actions — these functions intended to handle a specific action type, equivalent to a single case statement in a switch — and each function has a state as the current value in the store and action that will carry the payload for the updated value.

It will automatically generate a slice reducer with corresponding action creators and action types in the background.

Here’s an example for the Slice file:

{% gist https://gist.github.com/Marinashafiq/ac6d8989ec6771828c589a1e87df2181 %}


####2- Add it to reducers
In combine reducers add the slice name as a key :

{% gist https://gist.github.com/Marinashafiq/69ab86a3639ccb8aeee615fe7aa0c2aa %}

or you can follow the other way using redux toolkit way but using configureStore() function that takes reducers as one of its parameters.

You can check more about configureStore() from the following link :
https://redux-toolkit.js.org/api/configureStore

####3- Dispatch the Action
You can now dispatch the action in your component with exported names that you have added at the end of the slice file such as increment or decrement in our example above.


-------------------------------------------------------------


###Summary
You can keep using the traditional way of using the Redux cycle without the need for the redux toolkit, but if you decided to use the redux toolkit it will save you from the repeated redux configuration.

And also you will find this recommendation in the Redux docs : 
_However, we strongly recommend using Redux Toolkit for all Redux apps._

If you’re already using redux, all you need to do is installing the redux toolkit and create a slice with a name, initial state, and reducer object with functions that will be dispatched as actions later.

_Thanks a lot for your time to read this article._
_Happy learning!_
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-08-06 16:36:16

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there!


**Looking back on your week, what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Trying out a fun new activity... or whatever else might spark joy ❤️ 

---

Hope you have a fantastic weekend!

![Astronaut striking a victory pose](https://media.giphy.com/media/KEG5UtvXUD7WPIhhuy/giphy.gif)