teleren/devto huggingface dataset:
First-time developer experiences
Tags: developer, startup, devjournal
Published: 2023-11-08 08:13:35

**If you're building an API company, your onboarding experience is _vital_. It's what makes users fall in love with your product.**

Most developers sign up, set up their workflows, and never return. During this setup moment, you want them to get their job done and realize the value of the product as soon as possible.

In psychology, people call it the **Aha moment.**

> **The Aha moment is a moment of sudden insight or discovery. In software, it's the pivotal moment when a new user first realizes the value of your product and why they need it.** -- source: [growth.design](https://growth.design/psychology#aha-moment)

I had the opportunity to work on the developer experience at Specify. I benchmarked how awesome dev-first companies welcomed their users and ran experiments for conversion rate optimizations.

**Below are my key takeaways.**

## unparalleled first-time developer experiences

When I started benchmarking how awesome dev-first companies welcomed their users, I wanted to understand the reasoning behind every detail, pixels and words, that makes the experiences unparalleled.

Above all, the first-time experience should answer:

**What should I know about your product? Anything I shouldn't miss?**

- Take Linear. [It introduces its keyboard shortcut](https://speakerdeck.com/fmerian/linear-user-onboarding-magic-feeling?slide=8) `Cmd+K` during the process.

- Stripe helps you "start accepting payments instantly." And so, it only takes [three steps to get started](https://speakerdeck.com/fmerian/stripe?slide=11).

- Zapier connects your apps and suggests automated workflows [during the signup flow](https://speakerdeck.com/fmerian/zapier?slide=8).

The first-time experience is a foretaste of your product. It's what makes your users reach the Aha moment and convert them into engaged, lifelong customers. It requires continuous improvements and experiments.

## how Specify welcomed new users

Specify is building an API that helps engineering, product, and design teams set up design CI/CD workflows in minutes. Most users sign up, set up their pipeline, and never return. The pipeline is up and running, and "it just works," users said.

During this setup moment, it's key to help users get their job done and reach their Aha moment as soon as possible.

The team experimented with and shipped many improvements:

- added a step-by-step walkthrough;
- created [configuration templates](https://specifyapp.com/templates) to get started in minutes;
- added sample dataset to preview the value.


## final thoughts

Optimizing the onboarding experience requires continuous improvements and experiments. And it's vital for your business. It converts users into engaged, lifelong advocates. 

It's what makes them fall in love with your product. <3
📌 How to trigger actions on Azure resources with Terraform?
Tags: azure, terraform, cloud, design
Published: 2023-11-08 08:00:00

✅ Terraform allows you to provision resources, update or destroy them. But if you wonder if there is a way to trigger actions on Azure resource like start, stop, update... you can use the provider Azure/azapi.

👉 Here in this sample architecture, I have a spring boot service with a resource group provisioned with Brainboard.co and use azapi to start or stop the service using Terraform with Brainboard.co

📜 This is mainly for enabling the management of Azure resources that are not yet or may never be supported in the AzureRM provider such as private/public preview services and features.

👉 Want to give it a try? You can do it on https://app.brainboard.co

Link to the provider documentation: https://lnkd.in/em7t93wE
Creating a safe external HTML link - what's the deal with nofollow / noopener / norefferer ?
Tags: html
Published: 2023-11-08 07:57:30

---
title: Creating a safe external HTML link - what's the deal with nofollow / noopener / norefferer ?
published: true
description: 
tags: HTML
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-11-07 13:12 +0000
---

In HTML, when you create a link using the `<a>` element, you can add various attributes to control the behavior of that link. The rel attribute specifically defines the relationship between the current document and the linked document. 

- `nofollow`: This instructs search engines not to follow the link for crawling purposes. It's often used to signal that the site providing the link does not endorse the linked content. This is important for SEO (Search Engine Optimization) because it tells search engines not to pass along ranking credit to the linked page.

- `noopener`: This prevents the new page from being able to access the window.opener property and ensures it runs in a separate process. Without this, the new page can potentially redirect your page to a different URL. It's a security feature, particularly important when target="_blank" is used, which opens the link in a new tab or window.

- `noreferrer`: When a user clicks a link, the browser generally sends an HTTP header called Referer (sic) to the new page, which indicates the URL of the previous page. The noreferrer attribute value prevents the browser from sending this referer header, which enhances privacy by not disclosing the source page's URL. It also has implications similar to noopener with regard to security.


Here’s how you might see these attributes in an `<a>` tag:

```html
<a href="https://externalwebsite.com" rel="nofollow noopener noreferrer external" target="_blank">Visit External Website</a>
```

- `href="https://externalwebsite.com"`: Specifies the URL of the linked document.
- `rel="nofollow noopener noreferrer"`: Specifies the relationship between the current document and the linked one with the terms explained above.
- `target="_blank"`: Opens the linked document in a new window or tab.
Install and Configure VSFTPD on Ubuntu 20.04
Published: 2023-11-08 07:57:27

```
listen=NO
listen_ipv6=YES
anonymous_enable=NO
local_enable=YES
write_enable=YES
dirmessage_enable=YES
use_localtime=YES
xferlog_enable=YES
connect_from_port_20=YES
chroot_local_user=YES
allow_writeable_chroot=YES
secure_chroot_dir=/var/run/vsftpd/empty
pam_service_name=vsftpd
rsa_cert_file=/etc/ssl/certs/ssl-cert-snakeoil.pem
rsa_private_key_file=/etc/ssl/private/ssl-cert-snakeoil.key
ssl_enable=NO
pasv_min_port=30000
pasv_max_port=31000
userlist_enable=YES
userlist_file=/etc/vsftpd.user_list
userlist_deny=NO
local_umask=002
chmod_enable=YES
file_open_mode=0755
local_root=/home/$USER/ftp
```
Enhance Global Connectivity with Prism Linguistics' Language Solutions
Tags: translation, service, interpreting, agency
Published: 2023-11-08 07:54:37

Prism Linguistics is a trusted language services agency, dedicated to providing top-tier [translation and interpreting services](https://www.prismlinguistics.co.uk/) for businesses globally. With a team of skilled native speakers and a focus on linguistic accuracy, we bridge communication gaps, enabling seamless interactions across languages and cultures. Partner with us to unlock new opportunities for international collaboration and expansion.
Chilly Shot Billiards - Your Premier Billiards Sports Club in Abu Dhabi, UAE
Tags: billiards, uae, sports, club
Published: 2023-11-08 07:40:58

Billiards, a classic and elegant sport, has found a home in the heart of Abu Dhabi, UAE. Chilly Shot Billiards, your premier **[Billiards Sports Club](https://chillyshot.com/)**, offers an exceptional experience for enthusiasts and players alike.

**Chilly Shot Billiards - The Ultimate Billiards Sports Club**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6omp43n1qmvlit77ud6.jpg)
Chilly Shot Billiards is more than just a billiards club; it's an oasis for those who appreciate the finesse and precision of the game. Located in the vibrant city of Abu Dhabi, this club is the perfect place to enjoy a game of billiards in a welcoming and upscale environment.

**Unmatched Facilities**

Chilly Shot Billiards offers state-of-the-art facilities that cater to billiards enthusiasts of all skill levels. Whether you're a seasoned pro or just starting your billiards journey, the club has something to offer you. The club boasts multiple high-quality billiards tables, ensuring that there's always space for a game.

**A Hub for Billiards Enthusiasts**

As a dedicated Billiards Sports Club, Chilly Shot Billiards is the go-to destination for both casual players and serious competitors. The club regularly hosts tournaments and leagues, providing opportunities to test your skills against the best players in the region. Joining these events not only sharpens your game but also connects you with fellow enthusiasts who share your passion for billiards.

**Cozy and Elegant Ambiance**

Chilly Shot Billiards takes pride in its stylish and cozy ambiance. The club's design and decor create an atmosphere that encourages focus and relaxation, making it the perfect place to unwind after a long day or enjoy a friendly match with friends.

**A Culinary Delight**

The club offers more than just billiards; it's a culinary delight as well. With a diverse menu that caters to all tastes, you can enjoy scrumptious food and refreshing drinks as you play or socialize with other members.

Location, Location, Location
Located in Abu Dhabi, UAE, Chilly Shot Billiards is strategically situated for residents and visitors. It's easily accessible, making it a convenient spot for your billiards adventures.

**Join Chilly Shot Billiards Today**

Whether you're an avid billiards player or just looking for a unique place to hang out with friends, Chilly Shot Billiards is your ultimate destination. The club offers an unforgettable billiards experience, a welcoming atmosphere, and a chance to connect with like-minded individuals who appreciate the beauty of the game.

If you're in Abu Dhabi, UAE, and you want to elevate your billiards experience, head to **[Chilly Shot Billiards](https://chillyshot.com/)**. Your journey into the world of billiards begins here.

Remember, Chilly Shot Billiards is not just a club; it's a community of billiards enthusiasts who are passionate about the sport. Join us today for a game, and let's make every shot count.
9 Tools to Use for Your Next Website
Tags: webdev, learning, motivation, productivity
Published: 2023-11-08 07:31:26

Whether you're embarking on a new web project or seeking to enhance existing ones, having the right set of tools at your disposal can make all the difference. Here are nine of my favorite tools that I currently use to boost productivity and supercharge my websites' performance.

**Design**

1. [Coolors.co](https://coolors.co/) + [Canva color wheel](https://www.canva.com/colors/color-wheel/)
Crafting an eye-catching and harmonious color scheme is a breeze with Coolors. This tool offers beautifully curated color sets rooted in color theory. To further customize your palette, the Canva color wheel is your creative playground. Bid farewell to dull and uninspiring websites!

2. [LOGO.com](https://logo.com/)
Need an outstanding logo but lack design skills or extra time? Simply describe your vision, and LOGO.com will bring it to life with professional flair.

3. [Framer](https://www.framer.com/)
Elevate your website design with Framer by creating buttery-smooth animations that captivate your audience.

    **Development**

4. [Favic-o-matic](https://favicomatic.com/)
Don't overlook the details – give your website a polished touch with a custom favicon generated effortlessly by Favic-o-matic.

5. [Rulers Guides](https://mark-rolich.github.io/RulersGuides.js/)
In the world of web development, precision is paramount. Rulers Guides makes it easy to align elements with pixel-perfect accuracy.

6. [Ceaser](https://matthewlein.com/tools/ceaser)
Enrich your website with stunning CSS animations, all within your grasp through the user-friendly interface of Ceaser.

    **Performance**

7. [DOM Monster](https://mir.aculo.us/dom-monster/)
Boost your website's performance and loading speed by optimizing its Document Object Model (DOM) structure.

8. [CSS Stress Test](https://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling)
Uncover and resolve performance bottlenecks within your CSS code using the insights provided by CSS Stress Test.

9. [Better Uptime](https://betterstack.com/uptime)
Keep your website running seamlessly with Better Uptime, a tool that continuously monitors your site's uptime and promptly alerts you to any issues.

🌟🌟🌟

With these powerful tools at your disposal, you'll be well-equipped to create, refine, and maintain a top-notch website. Whether you're focused on design, development, or performance optimization, these tools offer a range of features and functionalities to meet your specific needs.

In conclusion, these 9 tools are essential for anyone involved in building and maintaining websites. They save you time, enhance the user experience, and keep your site performing at its best. Don't hesitate to explore these tools and incorporate them into your web development toolkit to create websites that shine in terms of design, functionality, and performance. Your website visitors will thank you for it!
Strumenti Essenziali per Ogni Sviluppatore Web
Tags: webdev, javascript, tooling, ita
Published: 2023-11-08 07:30:48

L’ecosistema degli strumenti per lo sviluppo web è in costante evoluzione, e ogni professionista dovrebbe essere attrezzato con le migliori risorse per massimizzare la produttività e la qualità del proprio lavoro. In questo articolo, elencheremo alcuni degli strumenti imprescindibili che ogni sviluppatore web dovrebbe avere a disposizione.

## Visual Studio Code
Visual Studio Code è un IDE eccezionale che offre un’ampia gamma di estensioni. La sua flessibilità e personalizzazione lo rendono una scelta ideale per qualsiasi sviluppatore. È possibile adattarlo alle proprie esigenze, rendendolo un ambiente di sviluppo altamente personalizzato.

## Prettier
Prettier è un’utile estensione di Visual Studio Code che semplifica la formattazione del codice. Puoi anche stabilire regole condivise con il tuo team utilizzando husky per mantenere una formattazione uniforme. Assicurati di attivare l’opzione “Format on save” nelle impostazioni di VS Code per massimizzare l’utilità di questa estensione.

## GitKraken
GitKraken è un client Git che offre una chiara rappresentazione visuale delle tue repository. Questo strumento semplifica il controllo delle versioni e la collaborazione con il tuo team. La versione free non include le repository private, ma è facile trovare alternative.

## Oh My Zsh
Se stai ancora utilizzando un terminale standard, Oh My Zsh potrebbe cambiarlo per sempre. Questo strumento per Zsh consente di personalizzare l’aspetto e le funzionalità del terminale in modo grafico. Aggiungi nuove funzionalità e migliora l’esperienza di sviluppo.

## Insomnia
Insomnia è un eccellente client per testare le API, un’alternativa a Postman. La sua leggerezza, il carattere open-source e i prezzi competitivi lo rendono una scelta saggia per la gestione delle API e il debug.

## Notion
Tool molto potente che semplifica la scrittura di documenti, l’organizzazione del lavoro, la gestione delle note e tanto altro. Esplora le sue molteplici funzionalità per migliorare la tua produttività.
Uno degli usi principale per cui la uso è scrivere la documentazione per i miei progetti.

## Figma
Lo sviluppo web non riguarda solo il codice, ma anche il design. Figma è uno strumento di progettazione grafica ampiamente utilizzato. È gratuito, facile da imparare e offre molte funzionalità integrate per il design web.

## Spotify
Anche se non è uno strumento direttamente legato allo sviluppo, la musica può migliorare notevolmente la tua concentrazione e la tua creatività durante le sessioni di codifica. Quindi, non esitare a mettere un po’ di musica in sottofondo per rendere il lavoro più piacevole.

Questi strumenti sono solo l’inizio per un sviluppatore web. Esplora ulteriori risorse e personalizza il tuo set di strumenti in base alle tue esigenze specifiche. La giusta combinazione di strumenti può fare la differenza nella tua produttività e nella qualità del tuo lavoro.
Implement Browser History in JavaScript.
Published: 2023-11-08 07:28:12


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

Hope this month is going well. Today, let’s see how to implement Browser History.

**Problem Statement**
Implement Browser History mechanism. Example:→ When we search medium on Search Engine (Google or DuckDuckGo) and then visit medium, we can go back and visit any other site or vice versa as browser provide us the feature to go back or forward.

**Implementation**

```
`function browserHistory()
{
    // A array used to store the history of visited URLs.
    this.history=[];

    // A variable to keep track of the current position in the history.
    this.index=-1;

    // Adds a new URL to the history and increments the index.
    this.visit=function(url)
    {
        this.history[++this.index]=url;
    }

    // Returns the URL at the current index
    this.current=function()
    {
        return this.history[this.index];
    }

    // Moves back in the history. 
    this.backward=function()
    {
        // It decrements the index, ensuring it doesn't go below zero.
        this.index=Math.max(0,--this.index);
    }

    // Moves forward in the history. 
    this.forward=function()
    {
        // It increments the index, ensuring it doesn't go beyond the length of the history.
        this.index=Math.min(this.history.length-1,++this.index);
    }
}

const s=new browserHistory();
s.visit('https://duckduckgo.com/');
s.visit('https://medium.com/');
s.visit('https://dev.to/');

console.log(s.current()); // Prints https://dev.to/

s.backward();
console.log(s.current()); // Prints https://medium.com/

s.backward();
console.log(s.current()); //Prints https://duckduckgo.com/

s.forward();
console.log(s.current()); //Prints https://medium.com/`
```
So like this you can implement browser history using the JavaScript. If you liked the thread/story then do give a clap and in case of any query do let me know in the comment/response section.

**Do checkout this [site](https://learnersbucket.com/) if you want to learn more about JavaScript.**

**Follow me on [LinkedIn](https://in.linkedin.com/in/shivam-v-8b34b21a0).**
Duplicate class Ionic capacitor plugin issue
Published: 2023-11-08 07:24:42

I am using "@awesome-cordova-plugins/app-rate": "^6.2.0" and
"@capawesome/capacitor-app-update": "^5.0.1" both to implement app-review and app-update functionality on my app. getting following issue while trying to build. Both plugin work correct individually -

**Duplicate class com.google.android.play.core.appupdate.AppUpdateInfo found in modules jetified-app-update-2.1.0-runtime (com.google.android.play:app-update:2.1.0) and jetified-core-1.10.3-runtime (com.google.android.play:core:1.10.3)
Duplicate class com.google.android.play.core.appupdate.AppUpdateManager found in modules jetified-app-update-2.1.0-runtime (com.google.android.play:app-update:2.1.0) and jetified-core-1.10.3-runtime (com.google.android.play:core:1.10.3)
Duplicate class com.google.android.play.core.appupdate.AppUpdateManagerFactory found in modules jetified-app-update-2.1.0-runtime (com.google.android.play:app-update:2.1.0) and jetified-core-1.10.3-runtime (com.google.android.play:core:1.10.3)
Duplicate class com.google.android.play.core.appupdate.AppUpdateOptions found in modules jetified-app-update-2.1.0-runtime (com.google.android.play:app-update:2.1.0) and jetified-core-1.10.3-runtime (com.google.android.play:core:1.10.3)
Duplicate class com.google.android.play.core.appupdate.AppUpdateOptions$Builder found in modules jetified-app-update-2.1.0-runtime (com.google.android.play:app-update:2.1.0) and jetified-core-1.10.3-runtime (com.google.android.play:core:1.10.3)
Duplicate class com.google.android.play.core.appupdate.testing.FakeAppUpdateManager found in modules jetified-app-update-2.1.0-runtime (com.google.android.play:app-update:2.1.0) and jetified-core-1.10.3-runtime (com.google.android.play:core:1.10.3)
Duplicate class com.google.android.play.core.appupdate.zza found in modules jetified-app-update-2.1.0-runtime (com.google.android.play:app-update:2.1.0) and jetified-core-1.10.3-runtime (com.google.android.play:core:1.10.3)
Duplicate class com.google.android.play.core.appupdate.zzaa found in modules jetified-app-update-2.1.0-runtime (com.google.android.play:app-update:2.1.0) and jetified-core-1.10.3-runtime (com.google.android.play:core:1.10.3)**

please suggest any solution, thanks in advance!
All The Think as a Beginner you have to know about HTML
Tags: html, beginners, learning, developer
Published: 2023-11-08 07:03:58



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xt6gspkrh0lia86gzr0.jpg)

what i will tell you in this post is all what a beginner developer have to know about html.

##  Basics :

- history of web,
- client server architecture,
- static vs dynamic website,
- frontend vs backend,
- what happens when you visit a wWebsite(how we get a html page).

##  In HTML :

- html tags,
- semantic and non-semantic tags,
- inline and block elements,
- html tags vs html element
- self closing and pairs tags,
- html entities,
- html attributes.

## Most Commonly Used Tags:
**semantic:**
`<html> <head> <title> <meta> <link> <style> <script> 
<body> <div> <p> <h1> <a> <img> <ul> <ol> <li> <form> <input> 
<button> <label> <select> <textarea> <table> <tr> <th> <td> 
<strong> <em> <span> <br> <hr> <iframe> <nav> <header> <main> 
<section> <article> <footer>
`
**non-semantic: **
`<div> <span> <b> <i> <u> <font> <center> <strike> 
 <small> <big> <tt> <pre> <code> <var> <kbd> <samp> <mark> <sub> <sup>
`

## Thank you

Stay tuned, I will explain these all topic one-by-one in my upcoming posts.
Compile Xcode Project with Google Maps dependency for simulator on M1 macs
Tags: swift, xcode, rosetta, apple
Published: 2023-11-08 06:55:44

I was trying to build a project with GoogleMaps 6.2.1 added via Cocoapods on an M1 Pro MacBook Pro. GoogleMaps still needs to adopt the new `xcframework` with [support for arm64 for the simulator](). 

In earlier versions of Xcode, we could run Xcode via Rosetta and Google Maps used to compile.
In the recent versions of Xcode, the option to run it via Rosetta is not present.


![Xcode Rosetta support comparision](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jok9dw0soeaha1mfu88z.png)

## So how do we get around this?
 

Apple hasn't stopped supporting Rosetta (yet). They have, in fact made it more manageable. Instead of making the Xcode run using Rosetta, in Xcode 15, we can select destination architecture per project within Xcode. 

Here is how we use a Rosetta simulator for a Xcode Project.
If you want to run the project in the simulator under Rosetta, try this:**
Xcode -> Product (in the menu bar) -> Destination -> Destination Architectures -> check 'Show Rosetta Destination'**.
After that, all devices in the build list should be able to have '(Rosetta)' in the end.


![Open Destination with Rosetta](https://sarunw.com/images/open-using-rosetta-in-xcode-14-3-menu.png)
![Rosetta supported simulator destinations](https://sarunw.com/images/open-using-rosetta-in-xcode-14-3-rosetta-destinations.png)

References:
https://sarunw.com/posts/open-using-rosetta-in-xcode-14-3/
https://developer.apple.com/forums/thread/736886?answerId=769030022#769030022