teleren/devto huggingface dataset:
Setup Stimulus on Vite
Published: 2022-09-20 13:51:34

[Overview](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)

[Stimulus](https://stimulus.hotwired.dev/) is a «modest» Lightwight Library, created by the rails team that connects html and JavaScript. JS and html are in separated files.

**Links**

[Stimulus-docs/Installation/hello-stimulus](https://stimulus.hotwired.dev/handbook/hello-stimulus)

**Prerequisites**

[Vite](https://dev.to/chmich/setup-vite-on-rails-7-2om4-temp-slug-6860562?preview=cdfb38d3f8e1987a3eaf858d2adc20a743f4bffe3fbab10c744d1c1a9a35a51c52e3a64aa225e136f7aa5df94032d6af821e22609020bbfb7488ca56)

**Setup**

```
$ npm i @hotwired/stimulus stimulus-vite-helpers
```
see: [GitHub/stimulus-vite-helpers](https://github.com/ElMassimo/stimulus-vite-helpers)

`frontend/controllers/index.js`

```
import { Application } from '@hotwired/stimulus'
import { registerControllers } from 'stimulus-vite-helpers'

const application = Application.start()
const controllers = import.meta.globEager('./**/*_controller.js')
registerControllers(application, controllers)
```

`frontend/entrypoints/application.js`

```
import '../controllers'
```
**Test Code**

see: [Stimulus Docs/is this thing on?](https://stimulus.hotwired.dev/handbook/hello-stimulus#is-this-thing-on%3F)

`frontend/controllers/hello_controller.js`

```
import { Controller } from "@hotwired/stimulus" 

export default class extends Controller {

    connect() { // => «connect» method is similar to initialize method in a ruby-class
        console.log("Hello, Stimulus!")
    }

    static targets = [ "name" ]

    greet() { // => doesnt matter for now, but later for the view
        const element = this.nameTarget
        const name = element.value
        console.log(`Hello, ${name}!`)
    }
}
```

any view `.haml`

```
%div{"data-controller" => "hello"}
  %input{"data-hello-target" => "name", :type => "text"}/
  %button{"data-action" => "click->hello#greet"} Greet
```
view in `.html.erb`
```
<div data-controller="hello">
  <input data-hello-target="name" type="text">/</input>
  <button data-action="click->hello#greet">Greet</button>
</div>
```

**=>** Reload page and you should see «Hello Stimulus!» in Browser/developer Console.

**=>** type «User» in the input, click «Greet» button and you should see «Hello User!» in the Browser/Developer Console

[Overview](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)
Kotlin 基礎 Part 4 -- List と Set の違いと相互変換
Tags: kotlin, list, set
Published: 2022-09-20 16:10:42


## why

set というものが有るのを知った

## Collection

https://kotlinlang.org/docs/collections-overview.html#collection

List 系の頂点に立つもの。
List や Set はこれを継承して作られるらしい。

抽象クラスのような直接は使えないものとして解釈する。

---

## List

https://www.udemy.com/course/kotlinmasterclass/learn/lecture/16627334#overview

普通の配列。 0 から n-1 の順番にはいっている。

```kotlin
    val numbers = listOf(1,2,2)
    println(numbers)
    println(numbers[0])
```

> [1, 2, 2]
> 1

listof() の中に書くと作れる。
中身に重複したものがあっても一つにならない。
n-1 つ目として index でアクセスできる。

```kotlin
	println(listOf(1,2,3,) == listOf(3,2,1,))
```

> false

順番が違うと違う配列として扱われる。

---

## set

https://www.udemy.com/course/kotlinmasterclass/learn/lecture/16627334#overview

重複不可。順番がない。
シャッフルしたあとのトランプのカードデッキのようなものらしい。

```kotlin
    val numbers = setOf(1,2,2)
    println(numbers)
```

> [1, 2]

setof で作成できる。
自動的に重複が削除される
index でアクセスするとエラーになる。

```kotlin
	println(setOf(1,2,3,) == setOf(3,2,1,))
```

> true

順番が違っても中身が同じなら同じものとして扱われる。

---

## List から Set への変換

https://pouhon.net/kotlin-set/1422/

```kotlin
	println(listOf(1,2,2,).toSet())
```

> [1, 2]

.toSet でリストをセットに変換できる。

```kotlin
	val setToList = setOf(1,2,2,).toList()
	println(setToList[0])
```

> 1

.toList で逆にセットもリストに変換できる。
Sheets, Half Sheets & more with Presentation Detents in SwiftUI
Published: 2022-09-20 16:09:49

Apple added Detents to their Presentation Containers in WWDC2022, in order to provide more flexibility among various parts of your app's view hierarchy.

The new PresentationDetent struct comes with 2 included properties:

-   `medium` - the sheet takes up approximately half of the device's screen
-   `large` - the sheet covers the entire screen

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

###large

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

These detents can be implemented using the .presentationDetents modifier on a sheet. You can choose to include multiple options using a Set of type PresentationDetent.

```swift
.sheet(isPresented: $sheetPresented) {
    SheetView()
        .presentationDetents([.medium, .large])
}
```

There are a few documented methods also, that allow for greater flexibility when using sheet.

This means that it would be very straightforward to create the /bottom drawer/ effect that is becoming more popular in apps using the following two methods:

-   fraction - allows you to specify a fractional height (of the screen)

-   height- specify a height that your sheet will occupy (relative to the bottom of the screen)

Both methods use the type CGFloat, and can be assigned to variables and changed programmatically, altering the placement of your sheet each time it appears in the app session.

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

A custom PresentationDetent can be created which must conform to the protocol CustomPresentationDetent . In this example, I have created a detent specifically to act in a "drawer" presentation style.

####DrawerDetent Struct and Extension to PresentationDetent

```swift
private struct DrawerDetent: CustomPresentationDetent {
    static func height(in context: Context) -> CGFloat? {
        max(80, context.maxDetentValue * 0.15)
    }
}
```

```swift
extension PresentationDetent {
    static let drawer = Self.custom(DrawerDetent.self)
}
```

Calling this on the view, with the appropriate modifier:

```swift
.sheet(isPresented: $sheetPresented)
    SheetView()
        .presentationDetents([.drawer])
}
```

#### Drawer Style Sheet Result:


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

If you'd prefer to have a range of different sizes, and allow the user a lot more control over the placement of the sheet, you can include many options in the .presentationDetents Set.

```swift
let heights = stride(from: 0.2, through: 1.0, by: 0.2).map {
    PresentationDetent.fraction($0)
}
```

```swift
.sheet(isPresented: $sheetPresented) {
    SheetView()
        .presentationDetents(Set(heights))
}
```

Lastly, you can combine these previous examples, for even more bespoke sheet options using the union function of Set:

```swift
SheetView()
    .presentationDetents(Set(heights).union([.drawer, .medium]))
```
Increment/decrement operators
Published: 2022-09-20 16:04:44



> Oshirish/kamaytirish operatorlari obyekt qiymatini oshiradi yoki kamaytiradi.
> Pre-increment and pre-decrement  operatorlari ob'ekt qiymatini oshiradi yoki kamaytiradi va natijaga havolani qaytaradi.
> O'sish va pasayishdan keyingi ob'ekt nusxasini yaratadi, ob'ekt qiymatini oshiradi yoki kamaytiradi va ko'paytirish yoki kamaytirishdan oldingi nusxani qaytaradi.
```cpp
   int num = 57;      
    cout << "\n\n Display the operation of pre and post increment and decrement :\n";
	cout << "---------------------------------------------\n";    
   cout <<" The number is : " << num << endl; 
   num++;               // increase by 1 (post-increment)
   cout <<" After post increment by 1 the number is : " << num << endl; 
   ++num;               // increase by 1 (pre-increment)
   cout <<" After pre increment by 1 the number is : " << num << endl; 
   num = num + 1;  // num is now increased by 1.
   cout <<" After increasing by 1 the number is : " << num << endl; // 79
   num--;               // decrease by 1 (post-decrement)
   cout <<" After post decrement by 1 the number is : " << num << endl; 
   --num;               // decrease by 1 (pre-decrement)
   cout <<" After pre decrement by 1 the number is : " << num << endl; 
   num = num - 1; // num is now decreased by 1.
   cout <<" After decreasing by 1 the number is : " << num << endl;
   cout << endl;
```
Adding medusa storefronts
Tags: javascript, beginners, nextjs, gatsby
Published: 2022-09-20 16:03:42

Now that we have our [medusa server](https://daily-dev-tips.com/posts/setting-up-the-medusa-server/) and our [medusa admin](https://daily-dev-tips.com/posts/adding-the-medusa-admin-dashboard/). Let's look at the most critical part, the actual storefront.

The storefront is the system customers will use to order the products.

Luckily for us, medusa comes with two ready-made starters, and you can use these for inspiration and make your system.

The two systems out of the box are:

- Next.js storefront
- Gatsby storefront

## Installing the Next.js medusa storefront

Let's start with the Next.js storefront, as this will most likely be the one I'll be using.

Open your terminal and navigate to the directory where you place your projects.
Run the following command:

```bash
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa medusa-store
```

The `medusa-store` parameter will be the project folder in which we create the project.

Now you can go inside this folder and run `npm run dev`. This should spool up your Next.js storefront!

![Next.js storefront for medusa](https://cdn.hashnode.com/res/hashnode/image/upload/v1662789474986/mf53GMO6h.png)

## Installing the Gatsby storefront

Perhaps you are more a fan of Gatsby?
Well, no problem. Let's also give that a try so that we can evaluate both of them.

First, ensure that you have the Gatsby CLI installed.

```bash
npm install gatsby-cli -g
```

Then we can run the following command in our main project directory to install the project.

```bash
gatsby new medusa-gatsby https://github.com/medusajs/gatsby-starter-medusa
```

Again the `medusa-gatsby` is the folder name we will install the project into.

Once it's done installing, you should copy the environment default to a local one.

```bash
mv .env.template .env.development
```

And now run the server:

```bash
gatsby develop
```

Now visit `http://localhost:8000/`, and you should see this pretty cool storefront.

![Gatsby medusa storefront](https://cdn.hashnode.com/res/hashnode/image/upload/v1662790088999/rJROsr-fu.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Investing ideas and investment planning are provided by Investorocean
Tags: market, digitalmarketing, investment, marketing
Published: 2022-09-20 16:02:40

Invest in stocks, mutual funds, gold, and cryptocurrencies with the latest news and research. This is the place to go if you're looking for everything you need for your investment planning.

Here [Investorocean](
https://investorocean.com/) Is the place where you can get best solution regarding to investment , stock exchange , marketing solution , mutual fund investment.
LAX Hotels
Published: 2022-09-20 15:51:33

Hello, my name is James Johnson. I am a Travel Agent in a travel agency. I've worked in the travel industry for five years, providing services like hotel bookings, resort reservations, hotel bookings, etc., according to customer needs. My top deals for [Lax Hotels](https://www.tripinn.com/hotels-near-los-angeles-international-airport-lax) include eye-catching discounts on early bookings. For more details, call toll-free numbers.
Create Modal Box Using CSS And JS
Tags: javascript, webdev, beginners, tutorial
Published: 2022-09-20 15:49:10


![Create Modal Box Using CSS And JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxm7w6sx12gebb3ti2l8.jpg)
How to create Modal Box with CSS and JavaScript. The purpose is to complete a transparent and simple modal popup box that does not use third-party libraries and is cross-browser compatible. We have to use vanilla JavaScript. Since we have been creating it from the start, we have complete control over how it looks and works.

## Create Modal Box Using CSS and JS

Modal popups are widely used on the web. Some of their popular uses include driving newsletter signups, displaying notifications/alerts, and handling registration forms.

This model will be broad which means you’ll be free to use it for any purpose and anywhere.

## HTML

Let’s start with HTML code.

```html
<div class="container">
    <div class="popup-box">
        <a class="close-button popup-close" title="close">×</a>
        <h2>This is My PopUp</h2>
      <h3>How to create a model box with HTML CSS and JavaScript.</h3>
    </div>
</div>
<a class="button popup-button">Open Model!</a>
```

CSS Code: 

```CSS
<style>
body {
  font-family: "Open Sans";
  line-height: 200%;
}
.container {    position: fixed;    left: 0;    top: 0;
    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 1.5);
    opacity: 0;    visibility: hidden;    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
h2, h3{
  text-align:center;  font-size: 5.5em;  padding:20px;}
h3{
  text-align:center;  font-size: 4em;  line-height:1.5em;  color:#888;}

.button {
  padding: 2.2% 5.5%;  display: inline-block;  -webkit-transition: all linear 0.15s;
  transition: all linear 0.15s;  border-radius: 3px;  background: #7b78ff;
  font-size: 22px;  font-weight: bold;  text-decoration: none;
  text-transform: uppercase;  color: #fff;}

.button:hover {  opacity: 1.75;  cursor:pointer;  color:#000;}

.popup-box {  width: 80%;  height:500px;  padding: 70px;
  transform: translate(-50%, -50%) scale(0.5);
  position: absolute;  top: 50%;  left: 50%;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.8);
  border-radius: 5px;  background: #fff;
  text-align: center;}

.close-button {  width: 35px;  height: 35px;  display: inline-block;
  position: absolute;  top: 10px;  font-size:60px;  right: 10px;
  -webkit-transition: all ease 0.5s;  transition: all ease 0.5s;
  border-radius: 50%;  background: #7b78ff;  font-weight: bold;
  color: #fff;  text-align:center;  cursor:pointer; 
}
.close-button:hover {  -webkit-transform: rotate(180deg);
  transform: rotate(400deg);
}
.show-container {    opacity: 1;    visibility: visible;    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 1.25s 0s, transform 1.25s;
}
</style>
```

Read More and see Demo:[Create Modal Box Using CSS And JS](https://softcodeon.com/tutorials/create-modal-box-using-css-and-js.htm)
Integrating Services in Website Platforms
Tags: websitebuilde, websitedev, zoom, calendly
Published: 2022-09-20 15:26:03

# Website Platforms

Website platforms include website builders, Link In Bio, and client portals, among others. 

Interaction with users, including calendar appointments, video calls, and on-site chat, is now considered standard practice on websites providing any service. 

# Integrate or Build

 When building website platforms, you can consider several approaches to include such services. 
 
 You can:
 
 1. Build the integration yourself
 2. Using some widget for service authorization, like Google Calendar integration
 3. Use an integration service, such as [Nylas](https://www.nylas.com), for calendar integration
 4. Use an infrastructure service, such as [Agora](https://www.agora.io/en/), for video/audio calls

Your choice from a cost perspective is derived from:

1. Cost of building the integration or service yourself
2. Cost of the integration service or cost of service.

From a platform architecture and user experience, the tradeoffs are clear. Building your system and integrations is much more work. Yet, you have more control over the experience. 

However, there is an additional usability and cost aspect to be considered.

# Do Users Arrive Bare Naked?

If your users already have subscriptions to [Zoom](https://zoom.us) and [Calendly](https://calendly.com) and are used to them, then moving to another service, either through a building by yourself or integration, is cumbersome. 

First, you need to bill them somehow for something they are already paying for it or an equivalent somewhere else. This would make your pricing not convenient and may hamper user activation. 

Second, you force your users to move from a service they are used to something new. You are again hampering user activation.

# Where is the Cross Line?

It is tough to make available projections, but professional users, such as physicians, accountants, and lawyers, would appreciate a website platform that provides all services within, without the need to bring their service subscriptions.

IT technology professionals tend to prefer bringing their services. 

Creators tend to fall somewhere in the middle, with a propensity to prefer a fully rounded platform with the need to bring anything with them. 

# Website Platform for Professionals

We are building a website platform for professionals that provides:

1. Appointment booking
2. Real-time chat
3. Video/Audio calls

All are fully provided by the platform. 

We believe we should provide a complete solution in one subscription.
Designing Impossible Situations
Tags: javascript, elm, designing
Published: 2022-09-20 15:19:47

---
title: Designing Impossible Situations
published: true
description: Two example conversations I've had with designers while coding front-ends in two different technologies.
tags: javascript,elm,designing
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

[JavaScript](https://www.javascript.com/): "What do we show when we don't know the value in the URL?"
Designer: "That won't happen."
JavaScript: "K."

Later a null pointer happens in an 'impossible situation'. Gnashing of teeth & lol'ing at how this could happen.

[Elm](https://elm-lang.org/): "What do we show when we don't know the value?"
Designer: "That won't happen."
Elm: "K, I'll put 'designer choose not to design this screen'".
Designer: "Hah, if you say so."

Later error screen shows in an impossible situation. Visually & immediately clear what failed.

The compiler is forcing me to have uncomfortable error scenario conversations with my Designer because null pointers/Maybes are now _his_ problem too. As a front-end dev, this is a wonderful tool, man.

... and by wonderful, it's clearly one sided here on me, the developer. The poor Designer has to think through more scenarios, recognize the strange error conditions, and make a judgement call on what we should/should not design for to make progress.
Vytvorenie kostry aplikácie v Ionic framework (ver.5)
Tags: ionic
Published: 2022-09-20 15:15:07

V nasledujúcom postupe je ukázané ako si vytvoriť kostru (resp.úplne najzákladnejšiu) aplikáciu vo framework-u Ionic (vo verzii 5).

Pre vývoj aplikácie v Ionic framework-u je potrebné mať nainštalovaný runtime modul (asynchronný JavaScript event driven) "Node.js", a package-ovací manažér "npm".
Zistiť, či toto už mám zinštalované na svojom stroji, možno príkazom:

```
node -v
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65g1rq0shwkiiv83lgt3.PNG)
a podobne pre "npm":

```
npm -v
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87swek73jgw3r4dgv7vt.PNG)

Samozrejme, musí byť zinštalovaný aj samotný Ionic. Overiť, či ho mám, cez príkaz:

```
ionic -v
```

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

V Ionic je možné vytvoriť tri typy kostry aplikácie:

1. úplne najjednoduchšia, prázdna - blank
2. s bočným menu - sidemenu
3. s (spodnými) tab-mi - tabs

Pre tento prípad vytvorím najjednoduchšiu verziu, prázdnu aplikáciu. Príkazom:

```
ionic start Test000 blank --type=angular
```

vytvorím takúto kostru Ionic aplikácie s podporou Angular framework-u.

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7u8r1h27j1whzhe7lgdx.PNG)

V prípade ak by som chcel vytvoriť kostru Ionic aplikácie s bočným menu, použiť príkaz:

```
ionic start Test000 sidemenu --type=angular
```

resp.v prípade aplikácie so (spodnými) tab-mi:

```
ionic start Test000 tabs --type=angular
```

Týmto je Ionic aplikácia (základná kostra) vytvorená. Je potrebné sa teraz prepnúť do vytvoreného adresára aplikácie (kde príkaz vytvorenia Ionic aplikácie vytvoril potrebnú štruktúru adresárov a súborov):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60ldapxufvpcjukcotuv.PNG)

V adresári Ionic aplikácie spustiť príkaz na štart developovacieho servra:

```
ionic serve
```

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

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

V prehliadači si teraz spustiť URL:

```
http://localhost:8100/
```
a zobrazí sa táto Ionic aplikácia:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcafrimndbhnfju250kr.PNG)
Being lost but not gone
Published: 2022-09-20 15:13:59

About 3 weeks into my Dev program. Feeling generally positive and feeling kind of lost most of the time too. When I think I have a concept- have gone through a lecture or a video- I get to the applied portion of the content and feel a fairly confused. 

I know this is like learning a new language- not going to be easy and I need to immerse myself- but I want some break throughs. I want more of those "aha" moments, and know they are what will push me again and again to find my way around the obstacle or to problem solve my way out of a coding corner. 

I will not quit. Just needed a moment to reflect and reassess. Tomorrow will bring new insights and ideas, more clarity and everything  will make sense...