teleren/devto huggingface dataset:
Using Tailwind with Sanity and Next
Tags: tailwindcss, nextjs, react, tutorial
Published: 2022-07-12 01:56:07

I've never had issues with Tailwind and Next, but today I'm learning Sanity and met a new error to add to my collection.

Typically when adding Tailwind to Next, all you need to do is...

1. `npm i -D tailwindcss autoprefixer postcss`
2. `npx tailwindcss init -p`
3. Add your tailwind imports to `styles/globals.css`: 
`@tailwind base;
@tailwind components;
@tailwind utilities;
`

4. Edit your `tailwind.config.js` file
```
/* tailwind.config.js */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```


Only to see this on my homepage when running `sanity start`

![Sanity Tailwind Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jb4gdhkhy6ulkf79wssg.png)

After a little searching I came across this reply in the Tailwind Github.

```
/* tailwind.config.js */
const path = require("path");

module.exports = {
  content: [
    path.join(__dirname, "./pages/**/*.{js,ts,jsx,tsx}"),
    path.join(__dirname, "./components/**/*.{js,ts,jsx,tsx}"),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

```
/* postcss.config.js */
const path = require("path");

module.exports = {
  plugins: {
    tailwindcss: {
      config: path.join(__dirname, "tailwind.config.js"),
    },
    autoprefixer: {},
  },
};
```

https://github.com/tailwindlabs/tailwindcss/issues/6393#issuecomment-1080723375

Shoutouts to wanjas
Maxreal - Xây những giá trị, dựng những ước mơ
Tags: nhà, đất, bds
Published: 2022-07-12 01:53:58

Maxreal - Thông tin thị trường bất động sản, cập nhật tin tức về thực trạng bất động sản hiện nay tại khu Đông. Mua bán nhà đất ở có giấy tờ sổ hồng đỏ, nhiều diện tích, ...
Địa chỉ: 66 Nguyễn Minh Hoàng P.12, Q.Tân Bình, Tp.Hồ Chí Minh
Sđt : 0987050318
Xem thêm tại:
website: [https://maxreal.vn/](https://maxreal.vn/)
Facebook: [https://www.facebook.com/maxreal.com.vn/](https://www.facebook.com/maxreal.com.vn/)
Twitter: https://twitter.com/MaxRealGroup[](https://www.facebook.com/maxreal.com.vn/)
reddit: [https://www.reddit.com/user/maxreal69vp](https://www.reddit.com/user/maxreal69vp)
pinterest:[ https://www.pinterest.com/maxreal69vp/]( https://www.pinterest.com/maxreal69vp/)
diigo: [https://www.diigo.com/profile/maxrealvp](https://www.diigo.com/profile/maxrealvp)
tumblr: [https://www.tumblr.com/blog/view/maxrealvp](https://www.tumblr.com/blog/view/maxrealvp)
pulrk: [https://www.plurk.com/maxrealvp](https://www.plurk.com/maxrealvp)
instapaper: [https://www.instapaper.com/p/maxrealvp](https://www.instapaper.com/p/maxrealvp)
instagram: [https://www.instagram.com/maxrealvp/](https://www.instagram.com/maxrealvp/)
youtube: [https://www.youtube.com/channel/UCc760AEFv9-jWA0xjprcffw](https://www.youtube.com/channel/UCc760AEFv9-jWA0xjprcffw)
hatena: [https://profile.hatena.ne.jp/maxvp/profile](https://profile.hatena.ne.jp/maxvp/profile)
Estava "empacado" com alguns projetos de softwares
Tags: programming
Published: 2022-07-12 01:33:20

"Empacou" no desenvolvimento do teu software Dev? Olha só que legal que encontrei https://helpdev.me

Recompense seus colegas e tenha ajuda mais rapida que no google.

Se voce sabe ajudar alguem, ganhe uma recompensa por isso.

#programador #Software
What is a Synchronous & Asynchronous Programming? 🚀
Tags: programming, discuss, javascript
Published: 2022-07-11 23:42:18

## What is Synchronous Programming ? 

  Synchronous operations tasks performed one at a time 
  and as that task is completed, the following task is unlocked. 
  In other words, you would like to hold up for the task to be executed to move to the following one.

## What is Asynchronous Programming ?

  Asynchronous operations may execute the next following task before the previous one is completed ,
  ( its like multitasking ) . so it execute all tasks synchronously till it hitt something thats asynchronous and 
  it will complete that and the rest of the tasks simultaneously . 

![sync and async](https://i.redd.it/lpf0u9nbj7w41.jpg)
--------------------

### learn more 🤓:

- [🎥 Asynchronous Vs Synchronous Programming](https://youtu.be/Kpn2ajSa92c)
- [📜 The Difference Between Asynchronous And Multi-Threading](https://blog.devgenius.io/multi-threading-vs-asynchronous-programming-what-is-the-difference-3ebfe1179a5)

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

Thank you for reading, and let's connect!
Tabnine! a GitHub Copilot's Serious competitor!
Tags: githubcopilot, tabnine, pairprogramming, vscode
Published: 2022-07-11 23:34:19

**GitHub Copilot**'s AI pair programming app has been free for a year, but now it is no longer free! However, I think it's worth it.
But if you insist on using a free alternative, there is some good news. I've found a decent alternative: **Tabnine**! Of course it has a Pro plan with advanced and competitive features.
Give it a try and let me know what you think of it ...
👇 "Tabnine AI" in Visual Studio Marketplace :
https://lnkd.in/emCRmXbN

![Tabnine AI pair Programmer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6jj7fxc4vjukcu524ln.jpg)
AI .. What is it all about , is it good or is it whack
Tags: programming, machinelearning, ai, discuss
Published: 2022-07-11 23:30:25

Many people are worried that the commonness of AI will negatively impact our planet, it will kill our jobs (which is mostly right) or AI will reach a point where it doesn’t care for or about the existence of humanity anymore, something along the lines of The Terminator movie.

![AI](https://i.imgflip.com/22bjx7.jpg)

Here are the top uses of AI and how it has made our lives much more easier:

### AI in artistic creativity
Musicians, artists, also normal people can use machine learning and neural networks to create art and [music](https://openai.com/blog/musenet/) depending on what people consume to more often. This makes sure that the artists are following modern trends and, thus, earning more money.

### AI in social media
Our activity patterns on social media are used to recommend the pages, promoted ads, videos, or posts we might be interested in. Social media platforms use our data to recommend ads for the products we might be interested in(or maybe not :( ).

Another common example of machine learning and AI is Facebook detecting facial features to tag you and your friends in pictures.
![image](https://i.pinimg.com/originals/d4/cd/37/d4cd379ae02df0e5d3e66f196173b917.jpg)


### AI in chatbots
Virtual assistants have become very common nowadays like [alexa](https://www.alexa.com/) [Google Assistant](https://assistant.google.com/) . They use speech recognition and natural language processing to perform common day tasks on command. These include ordering food, controlling lights, checking for your schedule ...

![lol](https://y.yarn.co/b881eaac-09bd-41a5-98fa-d85a898e08c7_text.gif)

# Potential Risks of AI

there are downsides of anything and AI too.
AI should be used with caution to avoid any potential risks like :

### dependency on technology
it can be a bad habit to rely on a technology to make a decision for us, it may be causing lazyness and losing our problem solving skills.

### AI is a Job Killer
yeah its true, a smart machine that performs well can be replacing a human being, maybe we can create more jobs that we can do better who knows.

### The Terminator
What if AIs get so smart that they realize people are a waste of space?

--------------------------------------------------------------------------------
## Thank you for reading my blog. Feel free to connect [Twitter](https://twitter.com/DevNamya) ...
## [Github](https://github.com/AymanLar)
--------------------------------------------------------------------------------
learn more about:
- [The Terminator](https://www.imdb.com/title/tt0088247/)
- [Should We Be Afraid of AI?](https://www.forbes.com/sites/cognitiveworld/2019/10/31/should-we-be-afraid-of-ai/?sh=7df29a824331)
- [AI in the workplace](https://www.forbes.com/sites/cognitiveworld/2019/10/31/ai-in-the-workplace/?sh=7df29a824331)
- [Artbreeder](https://www.artbreeder.com/browse)
- [Ali G - Science](https://www.youtube.com/watch?v=xx5t5ps-bwc)
Convert 2D and 3D Assets for Free (Tutorial)
Tags: tutorial, discuss, 3d, converter
Published: 2022-07-11 23:24:24

[echo3D](http://www.echo3d.co) has created a [converter for 3D and 2D assets](https://console.echo3d.co/#/converter)! It is free to use for files up to 25MB (larger files can be converted [here](https://console.echo3d.co/#/pages/convert-compress)).

Converting your asset types has never been easier.

Just drag, click and download!

***

<center> Click this link [**https://go.echo3d.co/wVoZ**](https://go.echo3d.co/wVoZ) or scan this QR code to see the same 3D bulldozer asset used from the examples.

![](https://miro.medium.com/max/1002/1*4JJVUx2000pBUIpk38RD2A.png) </center>

***

Video
=====
{% youtube Ji_vaM_4Ebo %} <br>

Register (Optional)
===================

You can download one of many of our THOUSANDS of 3D models for free from our console. Don’t have an echo3D account? Register for FREE at [echo3D](https://console.echo3d.co/#/auth/register).

Setup
=====

Go to the [converter here](https://console.echo3d.co/#/converter).

Steps
=====

*   Drag or upload your 3D model to the converter

![](https://miro.medium.com/max/1110/1*H7-uz1f9D9xOk1Syl9beTA.png)

*   Select the output file type you want. They will automatically download for you.

![](https://miro.medium.com/max/1400/1*qbNd2XJtl8gaEpvo41BcZw.png)

*   If you want to see your asset in AR, you can do so with this [tutorial](https://medium.com/echo3d/create-an-augmented-reality-portfolio-no-app-needed-and-free-3c88c39353a8).

Learn More
==========

Refer to our [documentation](https://docs.echo3d.co/unity/) to learn more about how to use Unity and echo3D.

Support
=======

Feel free to reach out at [support@echo3D.co](mailto:support@echo3D.co) or join our [support channel on Slack](https://go.echo3d.co/join). For additional troubleshooting, debug [here](https://docs.echo3d.co/unity/troubleshooting). <br>

More Tutorials
==============

For more tutorials using [echo3D](http://www.echo3d.co), check these out:

*   [How to Integrate echo3D Into a Unity Project — Free Tutorial](https://www.echo3d.co/post/how-to-integrate-echo3d-into-a-unity-project-free-tutorial)
*   [Build a 3D Balloon Pop game in Unity](https://medium.com/echo3d/build-a-balloon-pop-game-unity-free-eed9fe7d8be9)
*   [Get a Quarantine Dog in AR](https://medium.com/echo3d/get-a-quarantine-dog-in-ar-8383ea55376b)
*   [How to Create 3D Content and See It In AR](https://medium.com/echo3d/how-to-create-3d-content-and-see-it-in-ar-free-no-coding-required-369e5b4a4b3e)

***

>_**echo3D** ([www.echo3D.co](http://www.echo3d.co/); Techstars 19’) is a cloud platform for 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and content._

![](https://miro.medium.com/max/1400/1*cNrRDT0JEpkcy-zG6KBNgw.png)
JavaScript Visualizer
Tags: javascript, runtime, visualizer, programming
Published: 2022-07-11 23:22:01

If you are curious about how JavaScript works, I recommend this online JavaScript tool, which visualizes every step of runtime!
You can simply load the predefined presets of the site, or copy/paste your own code and see the steps of execution .
It is totally free. Click below to try it out:
https://www.jsv9000.app/

![JavaScript Visualizer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mhsngvkg8nf1rkwnt3e.jpg)
Day 590 : How I Feel
Tags: hiphop, code, coding, lifelongdev
Published: 2022-07-11 22:45:34

_liner notes_:
- Saturday : I went into town early to meet up with a friend of mine. Talked about some future plans. Then I went to the station and had the radio show. Good time as usual. Pretty happy I get 2 hours a week to really talk about how I feel about things happening in the world and connect with like-minded folks from all over while playing music. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of a photo of the protests in Sri Lanka taking over the state house with a crowd of people on the steps and in front holding flags with the words July 9th 2022, $11 mil per min](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xis78ddvf1zh3ei5fxv.jpg)

- Sunday : Did my study group sessions at https://untilit.works Had a good time. Got a chance to try a new tool. It went pretty smoothly and I think I may try it again in the future. I thought I was going to watch the Season Finale of "The Boys", but I fell right to sleep and woke up at midnight. Weird.

- Professional : Spent the morning finishing up some tasks from Friday. Then I had a meeting with my manager in the afternoon. Then I finished out the day working on some tickets and replying to a community question.

- Personal : Realized that I haven't drank milk in a while! haha So I bought some bottles on the way to the station on Saturday. I noticed that sometimes my teeth have been hurting. Could possibly be the heat also. We'll see. Should probably go see a dentist.

![Closeup photo of a branch with what looks like raspberries and an out of focus forest in the background in Vatra Dornei, Romania](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4u19oaulcskcsj5dggt.jpg)

I've been playing around with a set of UI Web Components to maybe use it in an upcoming project. Going pretty well so far. Looking forward to working with it more. Definitely want to watch the final episode of "The Boys" tonight.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube ekSx9bW9Zq0 %}
5+ Amazing CSS Box-shadow Generators to improve your Design
Tags: css, webdev, discuss
Published: 2022-07-11 22:38:13

Ever wondered why your design misses some depth? Adding a modern-looking shadow can improve, mainly for buttons in css.

Creating box shadows in CSS consumes a lot of time. For this many different box-shadow generator tools have come up, which allow you to play around with it and copy the code when done.

Here are some of my best CSS box-shadow generators you will need to create a modern-looking shadow. Try different things with the tools and copy the code once you are finished.

[5+ Amazing CSS Box-shadow Generators](https://codewithayan.com/5-free-css-box-shadow-generators-to-improve-your-design/)

[1. **Box Shadow CSS Generator**](https://cssgenerator.org/box-shadow-css-generator.html)

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

[2. **Box Shadow.dev**](https://box-shadow.dev/)

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

[3. **Shadows Brumm**](https://shadows.brumm.af/)

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

[4. **Shadow Palette Generator**](https://www.joshwcomeau.com/shadow-palette/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jfef19gvnyqj0pwjyse.JPG)

[5. **Neumorphism.io**](https://neumorphism.io/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1aisp6rghyx5ijyz55hw.JPG)

##Bonus Tool

[Box-shadow.art](https://box-shadow.art/)

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

If you want to get more information about this article
[Click ](https://codewithayan.com/5-free-css-box-shadow-generators-to-improve-your-design/)here! 

Thanks for reading this out. Please feel free to leave your comments on how we can improve. So, next time we could bring more improved content for you. 

My Website: [codewithayan](https://codewithayan.com/), you can contact me here!

Cheers,
How to solve Fizz Buzz with an easy explanation
Tags: javascript, programming, tutorial, beginners
Published: 2022-07-11 22:36:41

In this video we solve a common interview question Fizz Buzz. After this video you will understand the problem and how to solve to it. We will solve fizz buzz using 2 different solutions.

Interesting fact Fizz Buzz is also a drinking game.

Problem Statement:
Print numbers 1 to n (or store in an array)
If the number is divisible by 3 print “Fizz” 
If the number is divisible by 5 print “Buzz” 
If the number is divisible by 3 and 5 print “FizzBuzz”
If none of the above conditions are true print the number

{% embed https://youtu.be/2LPx1Ya1HHkv %}
Creating HTML DOM elements with Javascript
Published: 2022-07-11 22:20:03

If you're reading this then you must know a little bit about what HTML and Javascript is. So how exactly do you create a HTML DOM element with Javascript? It's not an easy concept to grasp as a beginner in Javascript but hopefully after reading this, you can gain a better understanding. Let's start with the basics. 

**What is a HTML element?**

A HTML element includes everything in between the first tag to the end of the tag. For example, 

`<p>A paragraph</p>`

Not all HTML files include tags like a paragraph tag `<p></p>` or an image tag `<img>`. Knowing how to create a HTML tag with javascript is essential if you want to add anything to the page without touching the HTML file. 

**How do you create a HTML DOM element with Javascript?**

We will use this HTML code in reference to our code examples.

```
<body>
    <div id='create-cat'></div>
</body>
```

1) Create an element by using `document.createElement("x")`. 
   X represents any element you're trying to create.
   For example, if you want to create the element `<img>` 
   and declare it as a variable, you will type:

```
 let imgTag = document.createElement("img")
```

2) Select where you want to [append](https://developer.mozilla.org/en-US/docs/Web/API/Element/append) the `<img>` tag. In this case, append it to the `<div>` tag. Declare it as a variable so you can reference back to it later. To do that, you will type: 

```
let catCreation = document.querySelector("#create-cat")
```

3) Now, to actually append the `<img>` tag under the div tag, you will type:

```
catCreation.append(imgTag)
```
This will make the code on the HTML DOM look like this now:

```
<body>
    <div id='create-cat'></div>
    <img>
</body>
```

4) To make an image show, you will need to include the source path to the image. So, you will type the variable name you used to create the `<img>` tag. Enter `.src ` after and set it equal to the image file or link. See the example below:

```
imgTag.src="img.cat_jpg"
```

Now you should see the cat image and and the HTML DOM will now look like this: 

```
<body>
    <div id='create-cat'></div>
    <img src="img.cat.jpg">
</body>
```
Success! You have officially created a new HTML DOM element and appended it. Best of luck coding!



Cover image source: https://www.canto.com/blog/insert-image-html/
How to get Yolo badge on GitHub?
Tags: opensource, github, git, badge
Published: 2022-07-11 22:01:27

---
title: How to get Yolo badge on GitHub?
published: true
description: Quick way to get Yolo Badge on GitHub
tags: opensource, github, git, badge
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g6v9rfvkddll3zyuiys3.png
# Use a ratio of 100:42 for best results.
---

I think that I will never merge a PR without Code Review to get this badge but I've got it. In this post I will explain how to quickly get the badge.

All you need to create new project or use your existing project and make it Open Source. For this you need to add License file, you can do that via GitHub website. Add new file and name it LICENSE, LICENSE.md or LICENSE.txt and pick the license. But you need to make one important thing don't commit directly to master/main but create a PR. That PR you can merge without checking. This in turn will give you the badge.

If course you can use any edit to your own repo and use branch and PR strategy, instead of direct commit to master/main. But I think that adding a license will look cool when you inspect the badge and see what kind of PR it was.

I hope you like it, share in the comment if you successfully got the badge and follow me on Twitter [@jcubic](https://twitter.com/jcubic).
Suggestions on how to deep link and route using Flutter?
Tags: flutter, ios, dart
Published: 2022-07-11 21:47:35

Hello, I built an app using a third-party deep-linking service called GetSocial.

Locally, on Xcode, I have been able to get the listener in main() to display the parameters that I pass through the deep link.

However, I need to then route to a specific page and pass values to that page (ideally as a persisted local variable).

But I am stuck.   

```
ReferralData globalReferralData;
    List<BuildContext> buildContextList = [];
    BuildContext context;

    
    void main() async {
      WidgetsFlutterBinding.ensureInitialized();
      await Firebase.initializeApp();
    
      FFAppState(); // Initialize FFAppState
      
      GetSocial.addOnInitializedListener(() => {
            // GetSocial SDK is ready to use
          });
    
      runApp(MyApp());
      registerListeners();
    }
    
    void registerListeners() {
      Invites.setOnReferralDataReceivedListener((received) {
        globalReferralData = received;
        print(globalReferralData);
        print(globalReferralData.linkParams);
        print(globalReferralData.linkParams['referralID']);
        
        // pass value and open route -- this line failed to do anything

        Navigator.pushNamed(context, '/landingPage');

        // showAlert(buildContextList.last, 'Referral Data Received', '$received');
      });
    }
```
Hilp
Tags: angular, firebase, errors, exeption
Published: 2022-07-11 21:06:48

Hi there! In fact ich have the following competition:
Every time i want to add fire/ firebase in an app, this exception occurs:

(? What features would you like to setup? ng deploy -- hosting, Authentication, Firestore
:starkes_malzeichen_x: Package install failed.)
**An unhandled exception occurred: Cannot read properties of undefined (reading ‘message’)
See “/private/var/folders/4m/v9ym39fx1c3bnlfhj2trjh9h0000gn/T/ng-lTwupf/angular-errors.log” for further details.**


Vielen thx
Jonas Fischer
Choose the charity we will support next
Published: 2022-07-11 20:54:48

---
title: Choose the charity we will support next
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

We at Developer Nation have been supporting developers and initiatives who help developers, plus other charities close to our heart since 2019. We do this through our donation program during our [Global Developer Surveys](https://www.developereconomics.net/?utm_medium=post&utm_source=dev_to&utm_campaign=charities).

##Who we've previously supported 
Every six months support charities such as Black Girls Code, Code.org, CoderDojo, Electronic Frontier Foundation, Free Code Camp, Free Software Foundation, Girls Who Code, Greenpeace, Mozilla Foundation, the Raspberry Pi Foundation,Techfugees, The Nature Conservancy, Ukraine Crisis Relief Fund and Women in Big Data (South Africa).

For the last two survey waves we’ve offered a new way of donating. We gave developers who participated the choice of which initiatives (from a list) they wished to support. Each developer taking the survey raised the donation amount by $0.10, donating $1,700-$2,000 in total to these initiatives.

Free Code Camp - $1,336.00
Ukraine Crisis Relief Fund - $1,107.87
Mozilla Foundation - $516.00
The Nature Conservancy - $677.00
Girls who code - $384.00
Free Software Foundation - $364.00
Greenpeace - $241
Electronic Frontier Foundation - $201.88
CoderDojo - $116.00

We're running our survey now, and are supporting the following initiatives:

Ada Developers Academy
Free Code Camp
Free Software Foundation
The Ocean Cleanup
Women Who Code
World Wildlife Fund

Which of these initiatives are close to your heart? Who else should we consider?

You can also [take our survey](https://survey.developernation.net/name/dn23?utm_medium=post&utm_source=dev_to&utm_campaign=charities), discover new tools and support your charity choice.