teleren/devto huggingface dataset:
Using Ionic Framework VS Code Extension To Add Capacitor To Vite ReactJS Project
Tags: ionic, vite, javascript, react
Published: 2022-03-28 14:20:44

Simple video walkthrough as I try to utilize the [Ionic VS Code Extension](https://ionicframework.com/blog/a-visual-studio-code-extension-for-ionic/) to add native functionality to a [Vite](https://vitejs.dev/) ReactJS Application. I wanted to show how you can create native applications from web applications using Ionic Framework Capacitor.

>A Visual Studio Code Extension for Ionic - Ionic Blog - 
https://ionicframework.com/blog/a-visual-studio-code-extension-for-ionic/

I think this is important to show that Ionic has a [ReactJS Component Library](https://ionicframework.com/docs/react) that I am using in the React Application and a tool [Capacitor](https://capacitorjs.com/docs/getting-started/with-ionic), that I am using to create the native application. This video shows that the two are separate and that you don't have to start with an Ionic Project to get to a native application. In fact you don't need to use any of the Ionic Framework UI Components to deploy a web application to a native device, you only need [Capacitor](https://capacitorjs.com/docs/getting-started/with-ionic) 

### Some Observations
I did find some interesting challenges and observations which I have listed below and will add to the project's github issues.

- How to debug on a native device? You can debug on the web, but connecting to a native device through the extension would be a game changer IMHO
- Could not configure the build directory through the UI. There are some options to configure, but not the build directory. Adding this would make it easier to onboard non-ionic projects
- Why do I always have to specify the device when running the app? This is just another point to make the process seamless. I should be able to set a default device to use based on the platform instead of being forced to select it every time
- Why does sync fail, it is missing some property? This is an issue, was displaying an error message and breaking the development flow
- Can we integrate build and run on device into one command? I think I am looking for this because live-reload was not integrated into the tool

{% youtube Fn9loNg-z9I %}

---
Looking for support with your cross-platform mobile solution using Ionic Framework? Contact Me at my company Clearly Innovative Inc for a free 30-minute Consultation
www.clearlyinnovative.com
Vue.js + Google Places: Autocomplete Multiple Input Fields
Tags: vuejs, tutorial, programming
Published: 2022-03-28 14:12:04

---
canonical_url: https://softauthor.com/vue-js-places-api-how-to-add-multiple-autocomplete-input-fields/
---

{% youtube P09ef-q_n9s %}

Sometimes, you would want to add place autocomplete functionality to more than one input field.

The typical example would be finding a travel distance between two locations. In that case, the user will have two input fields with the autocomplete feature enabled on them.

Let’s see how to instantiate the autocomplete object for a single input field.

###Place Autocomplete For a Single Input Field

{% youtube M-ikgaToVfE %}

In your vue template, define the input field with the ref attribute.

```HTML
<input type="text" placeholder="Origin" ref="origin" />
```

Inside the **mounted()** function, instantiate the Autocomplete object by passing the Input field DOM element using the **ref** attribute which is more efficient than using the traditional **id**.

```JavaScript
mounted() {
    const autocomplete = new google.maps.places.Autocomplete(this.$refs["origin"]);
},
```

![alt text](https://softauthor.com/wp-content/uploads/2019/09/places-autocomplete-api-restrict-bounds.png)

Pretty straight forward!

If it does not work for you, make sure to add the Places Javascript library to the index.html file.

```JavaScript
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[YOUR_API_KEY]"></script>
```

>_Also, make sure to enable both the Maps JavaScript API & Places API libraries in the Google Cloud Console website if you haven’t done so already._

###Place Autocomplete for Multiple Input Fields

Let’s add another input field for destination.

```HTML
<input type="text" placeholder="Origin" ref="origin" />
<input type="text" placeholder="Destination" ref="destination" />
```

As you know, when we add a **ref** attribute with a value to an HTML element in the vue template, it will be added to the **this.$refs** Javascript object.

Let’s loop through **this.$refs** object and access input DOM elements dynamically.

```JavaScript
mounted() {
    for (let ref in this.$refs) {
       console.log(this.$refs[ref]);
    }
}
```

Now, instantiate the Autocomplete object for each input field inside the loop.

```JavaScript
mounted() {
    for (let ref in this.$refs) {
         const autocomplete = new google.maps.places.Autocomplete(this.$refs[ref]);
    }
}
```

###Attach a Click Event To Autocomplete Objects

To get a user-selected address, we need to attach a place_changed event to the Autocomplete object.

```JavaScript
mounted() {
    for (let ref in this.$refs) {
         const autocomplete = new google.maps.places.Autocomplete(this.$refs[ref]);

      autocomplete.addListener("place_changed", () => {
        const place = autocomplete.getPlace();
        console.log(place);
       }
    }
}
```

![alt text](https://softauthor.com/wp-content/uploads/2020/07/place-multiple-autocomplete-input-fields.jpg)

There you have it!
Vim - The ultimate text editor?
Tags: editor, programming, tutorial
Published: 2022-03-28 14:07:37

## Vim

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple macOS.

### Installation

Because we want an addon thats called `You complete me`, we cant use the standard `vim` that comes with the macbook pro.

To install the latest version, use homebrew:

``` 
brew install vim 
```

Set the following infront of your path so when you use `vim <file>` it will open the version you just installed via homebrew.

In `.zshrc` copy it should look something like this:

```
export PATH="/usr/local/bin:$PATH
```

Now you have `vim` with python 8 so you can use all the features of your normal text editor in `vim`.

### The Ultimate vimrc

The Ultimate vimrc is a collection of vimrc configurations to make easy the usage of vim.

To download the The Ultimate vimrc, you need to install the git client. If you need install it, use home brew:

```
brew install git
```

Now, download the vimrc files:

```
git clone https://github.com/amix/vimrc.git ~/.vim_runtime
```

To install the complete version, run:

```
sh ~/.vim_runtime/install_awesome_vimrc.sh
```

To install the basic version, run:

```
sh ~/.vim_runtime/install_basic_vimrc.sh
```
Top 10 VSCode Extensions for More Productive Python Development
Tags: python, productivity, tooling, vscode
Published: 2022-03-28 14:01:01


### Python (Microsoft)

The obvious one: Make VSCode speak Python with Microsoft's Python extension

[Python Extension](https://marketplace.visualstudio.com/items?itemName=ms-python.python)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rhbzq90oi00olz73512.gif)


### Python Indent

Make VSCode better at indentation of Python code

[Python Indent Extension](https://marketplace.visualstudio.com/items?itemName=KevinRose.vsc-python-indent)

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


### Better Comments

Colorcode your comments

[Better Comments Extension](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

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


### Python Test Explorer

Run your Python test from the UI

[Python Test Explorer Extension](https://marketplace.visualstudio.com/items?itemName=LittleFoxTeam.vscode-python-test-adapter)

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


### Python Preview

Visualize and Understand your Python code during debugging

[Python Preview Extension](https://marketplace.visualstudio.com/items?itemName=dongli.python-preview)




### Python Type Hint

Auto-complete type hints in your Python code with this extension.

[Python Type Hint Extension](https://marketplace.visualstudio.com/items?itemName=njqdev.vscode-python-typehint)

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


### AREPL for python

AREPL automatically evaluates Python code in real-time as you type

[AREPL Extension](https://marketplace.visualstudio.com/items?itemName=almenon.arepl)




### autoDocstring

Quickly generate docstrings for Python functions

[autoDocstring Extension](https://marketplace.visualstudio.com/items?itemName=njpwerner.autodocstring)

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


### Djaneiro

An extension for #Django developers:

Useful collection of snippets for django templates, models, views, fields & forms

[Djaneiro Extension](https://marketplace.visualstudio.com/items?itemName=thebarkman.vscode-djaneiro&ssr=false#overview)
Free Remix SaaS kit for 24 hrs
Tags: remix, javascript, saas, boilerplate
Published: 2022-03-28 13:53:49

---
title: Free Remix SaaS kit for 24 hrs
published: true
description: Remix SaaS kit with everything you need to start your SaaS applications.
tags: remix,javascript,saas,boilerplate
cover_image: https://yahooder.sirv.com/saasfrontends/remix/ss/free-remix-saas-kit.png
---

If you're interested on learning Remix, grab the free SaaS kit, free for only 24 hrs!

💿 Framework: Remix
💪 Front-end: React + Tailwind CSS + TypeScript
💵 Payments: Stripe
📩 Emails: Postmark
🗃️ ORM/DB: Prisma + (Supabase/sqlite)

45+ pages.

[Click here to get it for free](https://alexandromg.gumroad.com/l/SaasFrontends-Remix/launch?_gl=1*czqrts*_ga*MTA3NDA3OTM4Ny4xNjQyMzU1ODQ3*_ga_6LJN6D94N6*MTY0ODQ3NDA2Mi42Ni4xLjE2NDg0NzUyNDQuMA..).
Bob Mintzer Fansite
Published: 2022-03-28 13:51:36

Welcome to the fansite of a man who leads several musical lives.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mh6liqzd8snkhogpb90j.jpg)

[Saxophonist Bob Mintzer](https://bobmintzer.com) is a member of the Grammy award-winning Yellowjackets who also leads a Grammy-winning Big Band, travels with his own Quartet, and plays with numerous bands globally.

Bob became the chief conductor of the WDR Big Band in Cologne, Germany.

A respected educator, Bob is the recipient of the Buzz McCoy endowed chair of jazz studies at the University of Southern California in Los Angeles. Based in Los Angeles, Bob continues to conduct clinics and workshops worldwide. He has also written nearly twenty books which are an important part of the curriculum of Jazz education worldwide.
CSS FLEXBOX
Tags: webdev, programming, beginners, css
Published: 2022-03-28 13:50:48

##What is CSS Flexbox?

- It's a better approach to create layouts in HTML and to align HTML elements properly.
- Flexbox is use to distribute the space properly.
- Through the spacing distributions it is easy to create responsive website.
- In Flexbox , we can align elements in 2 ways (i-e Horizontal and vertical).
- What I like about Flexbox is that it let's you make UI in a standard way. For example instead of margins, You can space between the flex childs and that will work smoothly across different screens.
- The vertical and horizontal align is quite easy. The wrapping od elements !
How to password protect any website?
Tags: security, javascript, productivity, tutorial
Published: 2022-03-28 13:37:06

Your browser is the new treasury of your personal data. Especially sites like google photos, email, etc. And there is no wonder that we share our devices with people close to us. Even if we have to share the device with someone, it’s not necessary to share the personal data it holds. When it comes to social media sites, you simply can just log out of the site and make sure no one can sneak around your social media while using your device. But what about services you don’t want to log out of but rather have another safety layer? In such a case, we can password protect websites in our browser. So no unwanted people can have access to the websites we don’t want them to. Luckily, we have a solution for this particular problem. Let’s jump into the content yey!
![](https://www.blogdesire.com/wp-content/uploads/2022/03/pexels-photo-3868576.jpeg?w=1880&ssl=1)
## Web Lock
We lock is password protection for websites, just like the app lock we use on mobile devices. Except, this is a browser extension. You can get the extension from the chrome web store, which supports all chromium-based browsers like [Microsoft Edge](https://www.microsoft.com/en-us/edge), [Brave](https://brave.com/), [Vivaldi](https://vivaldi.com/), etc. So if you’re using one of them, you can simply install the extension from [here](https://chrome.google.com/webstore/detail/web-lock-app-lock-for-web/dnnadodijkgincdakbjjhhcmlbfpahjj). The extension will soon be available for other browsers like Firefox as well.
## Setup Password
After you’ve installed the extension successfully, click on the extension icon from your browser and it will open a password setup page. Like the screenshot below.
![Web lock password setup screen
](https://www.blogdesire.com/wp-content/uploads/2022/03/Screenshot-9.png?w=1202&ssl=1)
On the first box, type your email address, this email will be used to reset your password if you ever forget it. But hopefully, you won’t 😀

The next two boxes are for passwords, you have to type the same password on both boxes. Once you’ve set up the password, you’ll be asked to log in using your password.
## Protect Websites
Once you’ve logged in to the extension dashboard, you’ll see a screen like this.
![Web Lock Dashboard](https://www.blogdesire.com/wp-content/uploads/2022/03/Screenshot-10.png?resize=2048%2C1139&ssl=1)
All you need to do now is enter your desired website’s URL in the box and press enter. For example, I can put [https://www.blogdesire.com](https://www.blogdesire.com) in the box to protect my site from unwanted visitors, as I have admin access to the site 😀

So, next time someone tries to visit blogdesire.com from my browser, they will be asked to enter a password before they can access the site. Just like this.

![Password Protect Websites](https://www.blogdesire.com/wp-content/uploads/2022/03/Screenshot-11.png?w=1392&ssl=1)

That’s it. I hope you found the article helpful. If you’re having any issues with the extension or with the article, you can just let me know in the comment section. Thanks
Content writing for the web
Tags: content, beginners, webdev, contentwriting
Published: 2022-03-28 13:27:43

{% youtube Nb6ybBlGJtQ %}

Hi! How to find a middle ground between designing for the users and designing for Google? Pawel, our Head of Design, reveals some useful tips! Listen about content writing and take advantage of the copy on your website.

Enjoy! You can also read the article at [Frontend House](https://frontendhouse.com/experts-zone/content-writing-for-the-web-experts-zone-18).
out & ref | C#
Tags: csharp, uzbek, beginners, dasturlash
Published: 2022-03-28 13:15:23

### `ref`
- qiymatlarni *reference* orqali jo'natadi yoki qaytaradi
- `ref` orqali jo'natilgan o'zgaruvchilar avvaldan *initialize* qilingan bo'lishi shart

### `out`
- `ref` bilan deyarli bir xil.
- `out` orqali jo'natilgan parameterlar *initialize* qilinishi shart emas, lekin method qaytishidan avval *initialize* bo'lshi shart

### `out` & `ref` ishlatish mumkin emas
- `async` keyword orqali yaratilgan asinxron methodlarda ishlatilmaydi
- `yield return` va `yield break` keywordlar mavjud methodlarda ishlatilmaydi
- `out` **extension method**larning birinchi argument ustida ishlatilmaydi
- `ref` **extension method**larning birinchi argumenti `struct` bo'lmasa yoki `struct constraint` mavjud bo'lmasa, ularni ustida ishlatib bo'lmaydi.
Tips Before Moving Laravel App to Production
Tags: laravel, webdev, beginners, php
Published: 2022-03-28 13:12:17

I found this great resource https://www.youtube.com/watch?v=N0NtdE5Y2ZE that shows some great tips from Tips and Reminders Before Moving a Laravel App to Production and of course I wanted to share these tips with you.

- Use `` npm run prod `` to make your js file smaller

- Use https://imageoptim.com/api to make your photos smaller and better quality

- make sure there is https://realfavicongenerator.net/

- Check the meta tag for the graph  https://htmlhead.dev/

- use https://developers.google.com/web/tools/lighthouse

- Make sure your site is working properly on all browsers and mobile devices https://www.browserstack.com/

- Website analytics https://usefathom.com/

- Manage Your DNS Records https://forge.laravel.com/ 

- https://envoyer.io/

- Make sure you have multiple database backups https://ottomatik.io/

- Make sure you have some kind of uptime monitoring for your site https://uptimerobot.com/ - https://ohdear.app/

I tried to present some basic points, but to go deeper, visit the source.
I hope you enjoyed with me and I adore you who search for everything new.
How to Check an Apple ID is Registered to a Developer Account
Tags: appledevelopment, xcode
Published: 2022-03-28 13:04:43

>This post is valid for an organization that is a member of the Apple Developer Program. 

Registration to an Apple Developer account and having the **Developer** role is required when using **automatic signing** in XCode.

## Checking Accounts
To check, launch **Xcode**. From the menu items, click **Xcode > Preferences** and choose the **Accounts** tab.

Your Apple ID is registered to a developer account if the *Team* shows the correct Apple Developer account and the *Role* is **Developer**.

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

## Assigning Developer Role
To assign a user to the Developer role, sign-in to **App Store Connect**. Only an Apple ID with **Account Holder** or **Admin** role can edit a user's role.

In App Store Connect, navigate to **Users and Access** and choose the user's Apple ID. Under **Roles**, tick _Developer_ and under **Additional Resources**, enable _Access to Certificates, Identifiers & Profiles_.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2pi9a37urpllcf5215p.png)
AppSumo launch 🥳
Published: 2022-03-28 13:03:18

I'm happy to inform you that our product Firmbee is launching on AppSumo today: www.appsumo.com/products/firmbee/ 🥳
We’re an all-in-one fully-loaded platform to manage your company projects, budgets, invoicing, and recruitments.

It’s the one and only chance to:
🐝 buy all Firmbee tiers for a special price before we implement the higher, regular pricing,
🐝 get a lifetime deal - you buy and pay once (instead of a monthly subscription) and never worry about the monthly fees again.

Check it out!
What will be the fundamentals for the decentralized web?
Tags: webdev, blockchain, discuss, programming
Published: 2022-03-28 12:59:46

If it will exist?

As far as I can see, it could have:

1. A current unbreakable user address generator
2. A peer web server and an interconnected web.
3. A secure browser
4. A secure DNS system
5. A storage occupation.
6. A look and find system.
7. A mailing and chatting system.

As have discussed, the decentralized web is more suitable for private connection, some must known messages, infrastructure, etc.

What do you think of the decentralized web?
Hacktoberfest 2021 swag unboxing
Tags: entertainment, technology, hactoberfest, unboxing
Published: 2022-06-06 08:22:33

---
title: Hacktoberfest 2021 swag unboxing
published: true
date: 2022-03-28 12:58:56 UTC
tags: Entertainment,Technology,Hactoberfest,unboxing
canonical_url: 
---

 ![Hacktoberfest 2021 swag unboxing](https://www.panayiotisgeorgiou.net/wp-content/uploads/2022/03/Hactoberfest-2021-swag-unboxing-1.png)

My Hacktoberfest 2021 swags ![🎒](https://static.xx.fbcdn.net/images/emoji.php/v9/t43/2/16/1f392.png) ![😜](https://static.xx.fbcdn.net/images/emoji.php/v9/tbf/2/16/1f61c.png) have finally arrived. Check out this post and watch Hacktoberfest 2021 swag unboxing

* * *

For the third consecutive year I have I have completed the Hacktoberfest challenge check post [here](https://www.panayiotisgeorgiou.net/hacktoberfest-2021/).  
Check out the unboxing video below:

<iframe loading="lazy" width="1170" height="659" src="https://www.youtube.com/embed/L7XzTr1Fdhc?version=3&amp;rel=1&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;fs=1&amp;hl=en-US&amp;autohide=2&amp;wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"></iframe>

![💪](https://static.xx.fbcdn.net/images/emoji.php/v9/tb/2/16/1f4aa.png) Thank you,  
 Intel, Digital Ocean, GitHub Education, Appwrite, DeepSource

[![](https://lh3.googleusercontent.com/aYbdIM1abwyVSUZLDKoE0CDZGRhlkpsaPOg9tNnBktUQYsXflwknnOn2Ge1Yr7rImGk=w300)](https://www.instagram.com/panayiotisgeorgiou)

[Follow me on Instagram](https://www.instagram.com/panayiotisgeorgiou)

![😉](https://s.w.org/images/core/emoji/13.0.0/svg/1f609.svg)   **That’s it for now. **

If you liked this article, then please subscribe to my [YouTube Channel](https://www.youtube.com/c/PanayiotisGeorgiou?sub_confirmation=1) for video tutorials.

The post [Hacktoberfest 2021 swag unboxing](https://www.panayiotisgeorgiou.net/hacktoberfest-2021-swag-unboxing/) appeared first on [Panayiotis Georgiou](https://www.panayiotisgeorgiou.net).
The Extensive Guide to Create Beautiful Social Media Headers Using Tailwindcss
Tags: css, tailwindcss, tutorial, blockchain
Published: 2022-03-28 12:56:17

Hey everyone, let me show you how I created my Twitter headers using Tailwind CSS.

🔥 It took me 18 hours to write this detailed guide.

I would appreciate a like or RT if you find it insightful😁

[Read the full blog on my website](https://ahmednagi.com/create-social-media-headers/)

📩 My DM is open for any suggestions or questions. 
[Twitter: nagiworks](https://twitter.com/nagiworks)