teleren/devto huggingface dataset:
Simple iFrame Viewer
Tags: codepen
Published: 2022-05-08 16:54:59

<h1> You are now seeing a message from Codepen.</h1>
<p>Simple CSS only solution for an iFrame viewer. </p>

<p>One issue with this solution is it requires a fixed height header which makes it not suitable for all situations.</p>

<p>Another issue is that IE7 has a double scrollbar.</p>

{% codepen https://codepen.io/wendee/pen/AePOYE %}
How to add TailwindCSS to a Vue 3 App
Tags: vue, vue3, tailwindcss, taiwindcss
Published: 2022-05-08 16:25:28

---
title: How to add TailwindCSS to a Vue 3 App
published: true
description: 
tags: vue, vue3, tailwind, taiwindcss
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrbgaexoi14ewn691zfw.png
canonical_url: https://www.jenniferbland.com/how-to-add-tailwindcss-to-a-vue-3-app/
---

There are two ways of creating a vue3 project. Using Vue-CLI or Vite. I will cover both.

## Using Vite

If you do not already have Vite installed globally, you will need to install it. You can install it with this command:

```
npm install -g vite
```

Now that you have Vite installed you will need to create your Vue3 application. You can create it with this command:

<!--more-->

```
npm init @vitejs/app vue3-vite-tailwind-app
```

Once the installation is complete you will be given directions to change into the directory containing your newly created Vue3 application. Once you are in that directory you can install all necessary dependencies by running the command:

```
npm install
```

Now we need to add TailwindCSS to our Vue3 application. Tailwind requires two peer-dependencies:  autoprefixer and postcss. 

You can install both Tailwind and the peer-dependencies with this command:

```
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

To use TailwindCSS you must create a configuration file. We will use `npx` which is bundled with Node.js to create our configuration file with this command:

```
npx tailwindcss init -p
```
You will see that this added two new files to your Vue3 project. The two files are `tailwind.config.js` and `postcss.config.js`.

To be able to utilize TailwindCSS in our project we will need to add several lines to our CSS file that is loaded in our application. Open your CSS file and add the following 3 lines:

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Now you can start utilizing Tailwind to style your Vue 3 application.

## Using the Vue CLI

If you do not already have Vue CLI installed globally, you will need to install it. You can install it with this command:

```
npm install -g @vue/cli
```

Now that you have the Vue CLI installed you will need to create your Vue3 application. You can create it with this command:

```
vue create vue3-cli-tailwind-app
```

You will be prompted to select any options you may want to install for your application.

Now that you have application has been created, we need to add TailwindCSS. You can easily add it with this command: 

```
vue add tailwind
```

You will be prompted to select what type of Tailwind config file you want generated. You options are:


- **none** - Won't create a config file. Useful if you already have a config (make sure to configure PurgeCSS).
- **minimal (default)** - Will create a minimal tailwind.config.js file where you can define your customizations.
- **full** - Will generate a tailwind.config.js file containing the entire default configuration.

Now you can start utilizing Tailwind to style your Vue 3 application.
StormURL: An Open-Source URL Shortener👋
Tags: appwritehack
Published: 2022-05-08 16:24:58

### Overview of My Submission

StormURL - An Open Source URL Shortener made using following technologies:

- ReactJS for Frontend
- TailwindCSS for Styles
- Appwrite for Backend

- Frontend Deployed on Vercel
- Appwrite Deployed on Digital Ocean

StormURL supports following functionalities:

- Authentication (Login/Signup)
- URL Shortener
- Checking Old shortened URLs

StormURL uses following functionalities of Appwrite:

- Appwrite Authentication
- Appwrite Database

### Submission Category: Wacky Wildcards

### Link to Code

https://github.com/theinfosecguy/appwrite-url-shortener

# Screenshots/demo videos are encouraged!

Link to Demo Video: https://www.loom.com/share/36db4bd2fd22443d8e10a1256621f44b?sharedAppSource=personal_library

![Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w4hsccmv6tk1eka8m2x.png)

![Main Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ib8d1eu9a1utqn5xljx3.png)
Flutter Stacked X Appwrite authentication
Tags: appwritehack, flutter, mobile
Published: 2022-05-08 16:06:15

### Overview of My Submission

Hello 👋
First time experimenting with AppWrite, and I'm really happy to find some great concurrent to my usual BackOffice.

I didn't had a lot of time, and even less ideas, so I created a little application Android/iOS with [Flutter](https://flutter.dev/) a Google UI framework created in 2017. It uses the Google back-end language [Dart](https://dart.dev/) created in 2011.

The application is based on a MVVM architecture using [Stacked](https://pub.dev/packages/stacked) by FilledStacks as a state management. The usage of [Stacked](https://pub.dev/packages/stacked) is for maintainability and readability. [Stacked](https://pub.dev/packages/stacked) uses implicitly the [Provider](https://pub.dev/packages/provider) package.

As previously said, MoodyDiary is relying on the Stacked package. The main idea is to use an MVVM pattern to remove any business logic from the UI layouts by putting this logic in a separated view model. This adds more clarity and maintainability.

We can decompose the project into 4 layers: the Models, The Views, and finally the ViewModels.


![current architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/695z3o802v6o7lbzi7ou.png)


In the project, the views are for display only.
They can trigger interactions through Buttons/GestureDetector/Events that will call ViewModel methods.

The ViewModel data-bind all the data from the services and models and create getters for the view and notify the view of any changes (using a ReactiveServiceMixin or a NotifyListeners)


### Submission Category: 

Mobile Moguls

### Link to Code

{% embed https://github.com/BLKKKBVSIK/moody_diary %}


### Additional Resources / Info


![LoginScreen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svpi8zupmu5g4k9fbphu.png)
![RegisterScreen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bwyudu03x6rzfd2lz6t.png)
![Logged/Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8fm9sf7hsxobdgwjktf.png)
Solidity Visibility Modifiers
Tags: solidity, web3, blockchain, tutorial
Published: 2022-05-08 16:05:58

---
title: Solidity Visibility Modifiers
published: true
description: Visibility modifiers define the visibility for both state variables and functions. Visibility modifiers determine whether or not you are able to access a variable or execute a function.
tags: solidity, web3, blockchain, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g81pdsa314559x3nx3wj.png
canonical_url: https://www.jenniferbland.com/solidity-visibility-modifiers/
---

Visibility modifiers define the visibility for both state variables and functions. Visibility modifiers determine whether or not you are able to access a variable or execute a function.

## Visibility Modifers

There are four visibility modifiers available in the Solidity programming language. They are:

- public
- private
- internal
- external

### Public

Public functions and variables can be accessed by all parties within and outside the contract. When the visibility is not specified, the default visibility of a function is `public`.

If a variable is has `public` visibility, the Solidity compiler automatically creates a getter function for accessing the value of the variable.

If you want a variable or function to be accessed from within the contract or from outside the contract, use `public` visibility.

### Private

Private functions and variables are only accessible within the contract in which they were declared. Private functions are also the only functions that cannot be inherited by other functions.

You would think that if you mark a variable or function as private then it would not be visible on the blockchain. This is false. The variable and function are visible to observers of the blockchain. You are not able to access them from other contracts.

Private is the most restrictive of the four visibility modifiers.

### Internal

Internal functions and variables are only accessible within the contract in which they were declared. Internal functions and variable can be accessed from derived contracts. They cannot be accessed from outside the contract.

Internal is the default visibility for state variables.

### External

Only functions can have the external visibility modifier.  External functions can only be called from outside the contract in which they were declared. They can't be called internally.
What is a Cryptographic Token?
Tags: blockchain, crypto, cryptocurrency, programming
Published: 2022-05-08 16:00:56

**Any idea about what is the token?**

Well,

Before coming into Cryptographic Token, let's try to understand it in a very simpler way.

Have you ever bought a lottery ticket? A lottery ticket is kind of a token, it's for the prizes that maybe you can own. A token is a kind of something that can be exchanged for some assets or value in the future. Like this, tokens are also valid inside the cryptographic world.

**Let's explore how.**

## Introduction

A cryptographic token represents a programmable asset that is created and managed by a smart contract. The smart contract decides the number of units to be created and handles the transactions involving the token and each token holder's balance.

**Types of Tokens**

In cryptography, there are mostly 3 types of tokens available. Those are

1. Utility Tokens
2. Security Tokens
3. ERC Tokens

Let's discuss them one by one.

## 1. Utility Tokens

Utility tokens are user tokens that provide access to the products or services offered by the company. They can help in driving the internal economy within a blockchain project. They can be used to provide an advantage to the holders of the utility tokens. The holder can be privileged to do voting on the important decisions on the blockchain project.

Let's say I am doing a project with the help of blockchain. And the final product will come after 2/4 years. But I need some funds to manage the project, right? For that, I can create a token on the behalf of the project with very minimal cost. people can buy the tokens and they will also get benefited from this project as well as can use the other services provided by the company.

Ex:- Golem Network Token(GNT) provides the holder's access to the Golem ecosystem.

## 2. Security Tokens

Security tokens are tokens that represent legal ownership of physical or digital assets. They are generally tied to the company's profit and loss valuation. These tokens are heavily regulated, and failing to comply with the regulations shall have serious consequences which can even lead to the shutdown of the complete blockchain project. Some examples of security tokens are the Siacoin token, Blockstack STX token, etc.

## 3. ERC Tokens

ERC tokens are a kind of very useful token in the cryptographic ecosystem. Token management can be significantly standardized as it follows very similar functionality and attributes of domains where these are used.

The Ethereum community has taken a lead on this and EIPs standardized definitions for developers to code and deploy. ERC tokens define rules that will enable the tokens to be handled and exchanged between various DApps(Decentralized Applications) and wallets.

**List of ERC tokens**

- ERC20 Tokens
- ERC721 Tokens

I hope all of you got some basic idea about the tokens, their types, and their uses. I will create a new article specially for ERC tokens to describe in-depth.

**Stay tuned for a new article.**

Thanks for reading out this. Lots of love. :)
Add custom fonts react-native for iOS and don't die trying
Tags: reactnative, ios, mobile, javascript
Published: 2022-05-08 15:45:48


Today I'm going to share with you an issue that bothered me for several days. So I thought it was a good idea to write how I solved it. Because I couldn't find the exact solution to fix this, not even on stackoverflow.

My problem was the following:

> I installed new fonts for the project I'm working on. When the app opened, everything worked correctly, but when it went to the background, and then back to the foreground, the new fonts stopped rendering and the styling was not applied.

I followed all the steps that appear in many places. I share below two links with these steps, because this is what is everywhere:

- https://dev.to/aneeqakhan/add-custom-fonts-in-react-native-0-63-for-ios-and-android-3a9e

- https://medium.com/react-native-training/adding-custom-fonts-to-react-native-b266b41bff7f

However, even though everything was in order, the bug kept reproducing itself. I followed all the steps, installed the fonts correctly but the bug was still there.

So after so many hypotheses, searches and that almost makes me crazy, the only thing that finally helped me is the following:

1. Rename the fonts: remove all spaces, removing all hyphens or any special characters contained in the font name.

2. Be careful, not only to change the name of the font file, but in its properties, the following:

- Fontname
- Family Name
- Name For Humans

![Example of a font properties file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4p39gph1fmp3nl17wn57.png)
 
3. The new font name has to be the same in all three fields mentioned above, including the file name.

And the bug is fixed! 😁
I hope it helps!

Anto
Socket IO Error
Published: 2022-05-08 15:36:07

Hello Community
I am implementing socket IO in my project and I keep getting these two errors:

First:-
polling POST http://localhost:3001/socket.io/?EIO=4&transport=polling&t=NFXWAR3&sid=9OPaAXMDJAjr1IbbAAAg 400 (Bad Request)

Second:-
WebSocket connection to 'ws://localhost:3001/socket.io/?EIO=4&transport=websocket&sid=NlUSImfHeRNiKYf2AAAy' failed: Error during WebSocket handshake: Unexpected response code: 400

Anyone know how these can be solved?

Ps: I tried to add transport : websocket in the io.connect but it's useless

Any suggestion will be appreciated!
Thank you
Should you know everything to land a job as a developer ?
Tags: discuss, programming, webdev
Published: 2022-05-08 15:22:28

I see a lot of people who are still learning programming think that in order to land a good job as a developer you need to know every technologie and every programming language involved with that type of programming you do.
And the reality is that no it's not necessary to know everything in order to get a job because nobody knows everything there is to know and the best of us starts as a junior developer then start improving over time, but the most importing thing you should have as a developer is the constant will to learn new stuff all the time and that what makes you better everyday so in my opinion that's something you need to have.
Tell me what do you think about this
Code EP.1 : Duino coin monitor
Published: 2022-05-08 14:54:00

<table>
<tr>
<td>TH</td>
<td>
เริ่มต้นโครงการเมื่อวานยังคงงุ่นง่านงุนงงอยู่กับการออกแบบโครงสร้างว่าจะเอายังไงดี ตอนนี้ลองเอาแบบทำเป็น module ดูซึ่งก็ยังไม่รู้ว่ามันจะดีมั๊ยนะ เป็นสัดส่วนแยกเอกเทศกันดีเหมือนจะง่ายในระยะยาว (รึเปล่า) แต่สำหรับตอนนี้สับสนหน้าดูเลย
</td>
</tr>
<tr>
<td>EN</td>
<td>
The project started yesterday I'm still confused about how to design the structure. Now let's do it as a module. But I still don't know if it's good or not. It's a split ratio that seems easy in the long run (or not), but for now, it's confusing.
</td>
</tr>
</table>

![Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tn27d0gj84tgw3gv6jp.png)

<a href="https://ko-fi.com/E1E4CK70J"><img src="https://ko-fi.com/img/githubbutton_sm.svg" /></a>
<a href="https://www.buymeacoffee.com/TypeNaN"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=TypeNaN&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" /></a>
How to Publish your awesome package to NPM
Published: 2022-05-08 15:09:13


## How to Publish your awesome package to NPM

![](https://cdn-images-1.medium.com/max/2000/1*pKmhEbdVCFTvu04XTFexIg.png)

**For JavaScript developers, [npmjs.com](https://npmjs.com) is a treasure!**

You can find more than 1 Million packages there. ( Yeah, I agree all of them are not useful 😉 )

We can install/download Packages like react, express, lodash etc into our projects very easily from the npmjs package repository with just one command.
 Such as -

![](https://cdn-images-1.medium.com/max/3804/1*v5W0ZQntVto6PpZnlSG6OQ.png)

Many a time, we want to reuse our code to different artifacts. And it’s a very good practice in Software Engineering.

What we do a lot, we create an independent repo/project for the code we want to reuse and copy that project folder into a new application that does not scale well. 😞

To solve this issue, we can upload/publish our own code/package to npmjs.

And then we can download/install it to a new app and just import it where we need to use it.

This is also a great way to modularize your app.

For initializing npm, we can run this command in our project directly-

![](https://cdn-images-1.medium.com/max/3468/1*PkTcX_fnPj14C8MHdnHc8w.png)

Now we can code our awesome Library and test it well before publishing to npmjs.

You should give a proper name and version in your package.json file

![](https://cdn-images-1.medium.com/max/3096/1*fjlaYij1h-Ct3IU2uu3Hig.png)

To publish, you need one npmjs account, you can create it here [https://www.npmjs.com/signup](https://www.npmjs.com/signup) .

Then you can login in your terminal-

![](https://cdn-images-1.medium.com/max/3096/1*w6_j8ZdgTZZjxjuOZbpACw.png)

You can put your credentials and you will be logged in!

Now, let’s do the final Publish…

![](https://cdn-images-1.medium.com/max/3096/1*cqvMkk1TFPBSHEOh1uM6uA.png)

Awesome!
 Now if you have a look on your npmjs package page after loggin in on your browser, you can see your package is listed there.
 Normally you should see it here [https://www.npmjs.com/settings/{UserID}/packages](https://www.npmjs.com/settings/{UserID}/packages)

Publish your reusable code and have fun!

Cheers!
Why Version Control System (VCS)
Published: 2022-05-08 15:06:43


## Why Version Control System (VCS)

![](https://cdn-images-1.medium.com/max/2000/1*jdnYiwHc_rhi3ZdlYMX4MA.png)

## **Why version control?**

![](https://cdn-images-1.medium.com/max/2000/0*wOnwZfJt-1KBJsBU.jpeg)

## Scenario 1:

* Your program is working

* You change “just one thing”

* Your program breaks

* You change it back

* Your program is still broken — why?

## **Has this ever happened to you?**

## Why version control? (part 2)

* Your program worked well enough yesterday

* You made a lot of improvements last night…

* You need to turn in your program now

* Has this ever happened to you?

## Version control for teams

## **Scenario:**

* You change one part of a program — it works

* Your co-worker changes another part — it works

* You put them together — it doesn’t work

* Some change in one part must have broken something in the other part

* What were all the changes?

## Teams (part 2)

## Scenario:

* You make a number of improvements to a class

* Your co-worker makes a number of differentimprovements to the sameclass

## How can you merge these changes?

## Version control systems (VCS)

### A version control system (often called a source code control system) does these things:

* Keeps multiple (older and newer) versions of everything (not just source code)

* Requests comments regarding every change

* Allows “check in” and “check out” of files so you know which files someone else is working on

* Displays differences between versions

## Benefits of version control

### 1. For working by yourself:

* Gives you a “time machine” for going back to earlier versions

* Gives you great support for different versions (standalone, web app, etc.) of the same basic project

### 2. For working with others:

* Greatly simplifies concurrent work, merging changes
Facebook Developer Circle : Colombo — Build Day 2019
Published: 2022-05-08 15:01:37


## Facebook Developer Circle : Colombo — Build Day 2019

## What is a Facebook Developer Circle

Developer Circles from Facebook is a program designed to create locally organized communities for developers. These communities are meant to educate and provide a forum for discussion and knowledge sharing around topics that are top-of-mind for developers in a particular market.

![Facebook Developer Circle: Colombo](https://cdn-images-1.medium.com/max/2732/1*vwyzqOMZMF3ykVzTjvwQuA.jpeg)

Developer Circle Colombo was launched on the 30th of Octopber2017 and is part of the wider family of the [Facebook Developer Circles](https://developers.facebook.com/developercircles) Program. Now the facebook group has more than 1600 members.

Facebook Developer Circle Build Day 2019 was held at the Hatch on 17th of August 2019. This event was organized by Facebook Developer Circle Colombo.

![[https://www.facebook.com/photo.php?fbid=10156651156542898&set=a.100242727897&type=3&theater](https://www.facebook.com/photo.php?fbid=10156651156542898&set=a.100242727897&type=3&theater)](https://cdn-images-1.medium.com/max/2000/1*p0SPPmpxy2-fyi3CjUS8SA.jpeg)

Event started at 10AM after half an hour registration where the invitees were given swags.

![](https://cdn-images-1.medium.com/max/2000/1*vwIdxWKUR353I2HAQOXGoA.jpeg)

![](https://cdn-images-1.medium.com/max/2000/1*f0aO0qTQifNQN6ixX4NG4g.jpeg)

The first session was about Creating SparkAR for Everyone which was delivered by Dakshila Jayathilaka, a UI/UX Engineer at WSO2.

![](https://cdn-images-1.medium.com/max/2000/1*IkEAik2fGUK3RK9AIyAWfQ.jpeg)

Download SparkAR- [https://sparkar.facebook.com/ar-studio/](https://sparkar.facebook.com/ar-studio/)

Tutorial Link -
[**bawantharathnayakasliit/SparkAR-FacebookDevC-Colombo**](https://github.com/bawantharathnayakasliit/SparkAR-FacebookDevC-Colombo)

After that, the next session was delivered by Sithija Piyuman Thewahettige, Software Engineer at Sysco Labs. His session was Getting Started with React360.

![](https://cdn-images-1.medium.com/max/2000/1*UoxI9aouMuYM2qrLcabhBw.jpeg)

Last session was about Introduction HTML5 Gaming. This session was delivered by Indika Wijesooriya ,Chief Digital Officer at Arimac.

**Session Important Links —**

Link to the game juicyness presentation

[http://grapefrukt.com/f/games/juicy-breakout/](http://grapefrukt.com/f/games/juicy-breakout/?fbclid=IwAR2H3foFIcU6kmEe5kByq4BGmTuw_c-gX0S_3ujHUf4TLGLYLnboj3EVHkE)

Project link:
[**indikman/html5-games-introduction**](https://github.com/indikman/html5-games-introduction?fbclid=IwAR1w4D1D4CGTMiSmqM8b1MPg3ZaVhcd4myMoHMg7TpBklwe0hNvBJZ-0tBc)

The event was concluded around 5.30pm . Stay tuned with [Facebook Developer Circle: Colombo](https://www.facebook.com/groups/DevCColombo/) to get into another memorable experience in the near future.

Photo Album :- [https://www.facebook.com/pg/shutterkng/photos/?tab=album&album_id=932371710429008&__tn__=-UCH-R](https://www.facebook.com/pg/shutterkng/photos/?tab=album&album_id=932371710429008&__tn__=-UCH-R)
100 days of code challenge
Tags: 100daysofcode, javascript, webdev, programming
Published: 2022-05-08 14:59:18

1-2/100 days of code challenge
i learned how to add,subtract and divide in js
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izlnihky4r8bfkywgawv.jpg)