teleren/devto huggingface dataset:
🚀 Spike billing has LAUNCHED!
Tags: laravel, package, saas, billing
Published: 2022-07-05 16:28:32

Just wanted to announce that **[Spike billing](https://spike.opcodes.io/)** - a Laravel package to bootstrap your project with automatic subscription billing - **has now launched**! 🎉🎉🎉

---

Spike makes it easy to charge **subscriptions** and **one-off purchases** in your [Laravel](https://laravel.com/) app.

It comes with **credit management solution** out of the box, so that your users/teams can purchase credits to spend on using your app - it's perfect for paid APIs.

Users get a beautiful **billing portal** where they can see the available purchases/subscriptions, manage their payment methods, see their invoices, and also view their activity and credit usage - tons of great stuff. 

You will save hundreds of hours of development time and be able to launch your project much faster.

---

There are a few **[early bird licenses](https://spike.opcodes.io/#pricing)** available, so hurry before they're gone.

Hope you like the project, and do let me know if you have any questions or feedback. 

Thanks! 🙌
Skater .NET Obfuscator secures your .NET 6 apps
Tags: obfuscator, dotnet, programming, devops
Published: 2022-07-05 16:26:15


To test how Skater obfuscator helps to protect .NET 6 Windows Forms application, first we need to create new .NET 6 Windows Forms desktop project in Visual Studio.
To test how Skater Obfuscator protects WinForms .NET 6 assemblies open Visual Studio 2022 (or later) and create new Windows Forms .NET project. To run and create such projects your Visual Studio must be version 17.0.1 or later.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpyao7bv5h03gycui8p8.png)
Just to remind you: the main .NET 6.0 idea is to compile a Windows Forms app and then run it under any system. Not Windows only.
  The .NET 6 actual application is a dll library. Its .NET source code as any other .NET framework code is compiled into CIL/MSIL. .NET 6 dll assembly contains code which the Common Language Runtime (CLR) executes. It can be disassembled (read ‘hacked’:) by anybody else. We still need to protect that kind of .NET assemblies by obfuscating them.
[Skater](http://skaterpro.net) supports .NET 6 projects where the publish output is a DLL file (Framework-dependent deployment). When the publish output is an EXE file that calls .NET 6.0 DLL (Self-contained deployment) the final DLL has to be obfuscated as well. There are two types of .NET 6.0 apps can be built:
  **Framework-dependent deployment.** As the name implies, framework-dependent deployment (FDD) relies on the presence of a shared system-wide version of .NET 6 on the target system. Because .NET 6 is already present, your app is also portable between installations of .NET 6. Your app contains only its own code and any third-party dependencies that are outside of the .NET 6.0 libraries. FDDs contain .dll files that can be launched by using the dotnet utility from the command line. For example, dotnet app.dll runs an application named app.
  **Self-contained deployment.** Unlike FDD, a self-contained deployment (SCD) doesn't rely on the presence of shared components on the target system. All components, including both the .NET 6 libraries and the .NET 6 runtime, are included with the application and are isolated from other .NET 6 applications. SCDs include an executable (such as app.exe on Windows platforms for an application named app), which is a renamed version of the platform-specific .NET 6 host, and a .dll file (such as app.dll), which is the actual application.
  The .NET 6 WinForms app development is following the Self-Contained Deployment (SCD) concept.
[Please read more](https://www.linkedin.com/pulse/skater-net-obfuscator-protects-your-6-projects-skater-net-obfuscator)
[Ruby][Sorbet] T.absurd prevents forgetting to do branch processing
Tags: ruby, sorbet, rails
Published: 2022-08-21 05:38:14

---
title: [Ruby][Sorbet] T.absurd prevents forgetting to do branch processing
published: true
date: 2022-07-05 16:17:12 UTC
tags: ["Ruby", "Sorbet", "Rails"]
canonical_url: https://note.hiko1129.com/posts/1657037832/
---

<a href="https://note-hiko1129-com.translate.goog/posts/1657037832/?_x_tr_sl=ja&_x_tr_tl=en&_x_tr_hl=ja&_x_tr_pto=wapp" target="_blank" rel=”noopener noreferrer”>Translate ja to en</a>

T.absurdが書いてあると下記のように処理の記述漏れがある場合には型エラーになります。

```
class Hoge < T::Enum
  extend T::Sig

  enums do
    A = new
    B = new
    C = new
  end

  def to_s
    case self
    when A then 'a'
    when B then 'b'
    else
      T.absurd(self) # Cが処理されてないのでエラーとなる
    end
  end
end
```

網羅的な分岐（主にenumの処理）を行うときはT.abusrd使いましょう。

### ref
* https://sorbet.org/docs/exhaustiveness
Bootstrap 5 Button Loading Example Using Javascript
Tags: javascript, webdev, html, css
Published: 2022-07-05 16:13:28

Button loading is mainly used in after button click when the user clicks. So that kind of Loading button is used in commerce sites or payment websites. So here we made a button loading example using bootstrap5 and JavaScript.

In this Button Loading Example, we used bootstrap 5 loader components. To make it clickable, we used JavaScript functions and disabled attributes. You can use this example in any project, like where you want to show some loading animation buttons effects.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/bootstrap-5-button-loading-example-using-javascript/)
React Form Conditional Validation with Formik and Yup (Custom Hooks)
Tags: react, formik, yup, materialui
Published: 2022-07-05 16:11:45

**In this article, you will fastly start using Formik and Yup(Conditional) with custom hooks in your React project.**

##Summary
Formik is using for building forms in React. Formik is providing lots of feature (less code, easy maintable, custom hooks, easy integrate and more)that making life easier while creating forms.  You can easily build schema for validation with Yup.

##Installing Formik
`npm i formik`
##Installing Yup
`npm i yup`

##Introduction of Formik

1. Getting values in and out of form state
2. Validation and error messages
3. Handling form submission 

```jsx
// Simple form with formik
import React from "react";
import { useFormik } from "formik";
const SignupForm = () => {
  const formik = useFormik({
    initialValues: {
      email: "",
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      <button type="submit">Submit</button>
    </form>
  );
};
```

##Problem statement
The problem is that formik form has two inputs. One is select and other is text input select has two option 'yes' or 'no'. If user select the 'Yes' then user must write about the dish on the other hand if user select the 'no' there is no validation.


##Solution      
I had a formik form where I needed to enter the passphrase if it was required and make it optional if it wasn't required. While validating the field using 'Yup' I needed a way to conditionally change the validation logic for the field. For this, I need to use the **when()** function from Yup which allows us to change the validation logic applied to a field based on some conditions. After this I pass the values with and make condition that if user select the Yes (User want to eat chicken)from the option then user must write about chicken dishes which one user want otherwise no condition. Write about the dish depend on the user selection. 


##Formik useFormik custom hook
```js
const formik = useFormik({
  initialValues: {
  dropdown: "",
  ChickenDish: "",
  },
```

##Yup Schema
```js
validationSchema: Yup.object({
  dropdown: Yup.string(),
  ChickenDish: Yup.string().when("dropdown", {
   is: (dropdown) => dropdown === "Yes",
  then: Yup.string().required("* Required"),
   }),
```

## Example
{% embed https://yqn631.csb.app %}
Un viaje a las Single Page Application a través de React y JavaScript
Tags: javascript, webdev, beginners, react
Published: 2022-07-05 16:05:25

El pasado mes de junio, tuve la oportunidad de compartir nuevamente en persona con la comunidad de [medellinjs](https://medellinjs.org/) a la cual aprecio demasiado.

Esta vez, estuve hablando sobre los conceptos de javascript que son necesarios entender y conocer antes de enfrentarse a trabajar con una Single Page Application (SPA).

Les dejo el [link del video](https://youtu.be/6opIHgRqWPo) de esta charla.

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xv5iapl8r99w0ndkgm3.png)](https://youtu.be/6opIHgRqWPo)

![Profile](https://res.cloudinary.com/khriztianmoreno/image/upload/c_scale,w_148/v1591324337/KM-brand/stickers/sticker-3_2x.png)


### @khriztianmoreno 
Hasta la próxima.
Luos technology
Tags: opensource, microservices, architecture, luos
Published: 2022-07-05 15:50:53

We are committed to offering a new way to design your hardware products using microservices concepts.
⏩ https://www.luos.io/docs/luos-technology/

Let’s talk about Luos technology on our documentation and how choosing Luos to design a product will help you to develop, debug, validate, monitor, and manage it.
How to use vue inertia in laravel project ?
Tags: laravel, inertia, vueinertia
Published: 2022-07-05 15:46:00

[Inertia ](https://inertiajs.com/)is a small library that allows you to Build single-page apps, without building an API.

First, use this command to create a laravel project:

``` composer create-project --prefer-dist laravel/laravel inertia-app```

OR you can define the laravel version you need, here for example i will use laravel 8 by running this command

``` composer create-project --prefer-dist laravel/laravel:8.6.11 inertia-app```

Sitting up the inertia is divided into two stages:

- server-side
- client-side

**1- Server Side**

After creating laravel project you need to install inertia using this command:

``` composer require inertiajs/inertia-laravel```

and now, create a layout file in recourses\view\app.blade.php and add this into this file:

```
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href=”{{ mix(‘/css/app.css’) }}” rel=”stylesheet” />
<script src=”{{ mix(‘/js/app.js’) }}” defer></script>
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
```


After that you need to create inertia middleware using this command:

``` php artisan inertia:middleware```

and don't forget to register the middleware in the App\Http\Kernel by adding this :

```
‘web’ => [
// …
\App\Http\Middleware\HandleInertiaRequests::class,
],
```

_______________________________________________________________
2- **Client-Side**

First, install the dependencies by this command:

``` npm install @inertiajs/inertia @inertiajs/inertia-vue3```

Second install vue.js:

``` npm install vue@next```

[optional — recommended] if you use vue 3 and you need to use single-file component (SFC) which allows you to use `<template>`, `<scripts>`, and `<styles>` on one page, you need to run this command:

``` npm install -D @vue/compiler-sfc```


Now in the resources\js\app.js file add this code:

```
import { createApp, h } from ‘vue’
import { createInertiaApp } from ‘@inertiajs/inertia-vue3’
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})

```

Also don’t forget to create a Pages folder inside resources\js\, this Page folder will be used to create .vue files inside it.

After that you need to update to code in (webpack.mix.js) by adding ( .vue(3) & .version() ), so it will be like that:

```
mix.js(‘resources/js/app.js’, ‘public/js’)
.vue(3)
.postCss(‘resources/css/app.css’, ‘public/css’, [
//
])
.version();
```


now install any remaining dependencies by running:

``` npm install```
then, to pull in any required dependencies you have run this command:

``` npx mix```

you may be asked to run npx mix again

Now, an Error may occur when you run npx mix that asks you to Use  — location=global instead

in this case, run this command:

``` npm i vue-loader```

Now run npx mix again:

``` npx mix```

That were the steps of setting up vue inertia in laravel project, I hope it was helpful 🥰.
4 examples of fetching with React and useEffect
Tags: react
Published: 2022-07-05 15:45:00

Here are 4 simple examples of React using the useEffect hook and the Fetch API- getting plain text; getting JSON; posting JSON; and handling errors. All four examples are running live code, so you can play around with it and hopefully get a feel for it. At least it worked for me.

https://sean.brunnock.com/React/Examples/ReactFetchDemos/
Why Deno won't get much success?
Tags: webdev, typescript, javascript, discuss
Published: 2022-07-05 15:34:13

Deno is a try to replace node.js, but I think it won't get much success. Here is some reasons:

1. Javascript is the first class language instead of typescript.
2. Node.js ecosystem is much mature than deno's
3. Node.js's problem is not in it's performance but the version management semver and false version range. Now throught package-lock.json, this problem can be fixed in one way or another.
4. Deno's apis are very ugly and none logic. No excellent programmer will write good packages over an ugly structured platform. While node.js has much better apis.
5. Deno has little improvment over node.js.
p5.js Sine Wave
Tags: codepen, javascript, webdev, p5
Published: 2022-07-05 15:29:23

A simple sine wave with p5.js. This pen was inspired by [an example](https://p5js.org/examples/math-sine-wave.html) created by Daniel Shiffman for the official p5.js website. My version has a few other features added such as support for dark mode.

{% codepen https://codepen.io/mrwolferinc/pen/QWmjYzY %}
My Open Source Contribution using JavaScript to Open Sauced ft. Rizel Scarlett
Tags: opensource, javascript, webdev, beginners
Published: 2022-07-05 15:25:02

Hey Everyone!

I'm back with another blog post. This time its about my experience contributing to my first contribution with Open Sauced @saucedopen  (https://opensauced.pizza/). Open sauced is a platform where it provides structured onboarding for new contributors to open source.



My good friend Rizel Scarlett who is a Developer Advocate @ Github challenged me to take on an open source problem. The problem was to fix the Avatar relative date on the PostList and PostGrid.

I had a lot of fun working on this issue because I got to use a new tool called Days.JS. Days.JS is minimalist Javascript library that parses, validates, manipulates, and displays dates and times for modern browsers.

If you want to see more on how we tackle this isse please see Part 1 and Part 2 of the video below!

Also if you looking to collaborate with Rizel please reach out to her via Linkedin (https://www.linkedin.com/in/rizel-bobb-semple/) or Twitter @blackgirlbytes 


Anthony Makes His First Contribution to Open Source - Good First Issues #opensource #javascript

Part 1: https://www.youtube.com/watch?v=ksfyAxjNEz0

Part 2: https://www.youtube.com/watch?v=PYSgrWIzwA8
I have been awarded for 9 years in a row as Microsoft MVP
Tags: microsoft, mvp, award
Published: 2022-07-05 15:24:09

Since many years, the 1st of July (this year the date was postponed a few hours before the due date) is a special day for me.
It's the day each year we wait for renewal as Microsoft MVP for another year.
It's call "The F5 day" because we are waiting for the confirmation email of the award 🙂

<img src="https://i.gifer.com/9FMl.gif" />
 
For me it's the 9th year in a row, but each time is like the first time.
I am proud and honored to have been a part of this family for so long and hope to be a part of it for much longer!

## Talking by numbers
This year I tried to summarize my activities with some objective numbers.

- ✍️ 47 blog posts (80+ since 2020)
- 🗣️ 33 events as a speaker
- 🧑‍💻 4 events in person
- 👑 3 keynote
- 🎥 6 events as a producer/organizer
- 🎞️ 100+ hours on Twitch (even I didn't stream since January 2022)
- 🎙️ 6 interviews as guest

## Best moment of the year
This is the timelapse of my keynote at Codemotion Italy with more than 1000 thousand people connected

![keynote at Codemotion Italy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35g9p773k7vu8378pmsh.gif) 

After this session I received a lot of questions about my setup and the tools I use for online sessions.
This is the reason why after a few days, I wrote a blog post about my setup during a conference.

![Tools I use for online sessions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wvlns5jfurl203hxt8z.png)

{% embed https://dev.to/kasuken/tools-i-use-for-my-online-sessions-at-events-2ob2 %}

If you want to know more about my setup in general instead, click on the picture below to find out about my current setup.

<a href="https://setup.emanuelebartolesi.com"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g14lb4054jyht40u35w9.png" /></a>
 
## Conclusion
I think 9 years are a good achievement, but now I'd like to get to the 10-year mark.
And of course, I just started to work on it!
How to Effectively Integrate a Typography System in React Native
Published: 2022-07-05 15:17:34

## The Problem

If there is one thing that most react native apps have in common, it is how they display text. Some simple apps show very little, but most apps display a lot. That is why it's vital to put the right system in place, to ensure adding and refactoring texts in your app is as simple as possible.

Now, you might be thinking - why am I reading an article on how to manage such a simple component? It's just text, right? Yes, but more often than not, you need to apply styles and properties to said text to make it look the way you want. When you have to do it for all the texts in your app, it adds up. This, of course, begs the question - how can I reduce the amount of code repetition?

Over the years, I have seen my fair share of attempts at solving this problem, and I can finally say that I have landed on one solution that left me quite pleased.

## The Solution

The solution is quite simple, but it's based on following best UI practices. What do I mean? Having predefined styles for headings, paragraphs, and other texts that you might need. What is important is that all the texts of your app fall into one of those definitions and that the amount doesn't get out of hand. It's good to keep the number of definitions short, so it's easier to remember what to put when coding and that your app is consistent in its respective styling, which in turn, gives you usability and accessibility points.

Without any further ado, here is the aforementioned code of the component and supplementary files:

{% gist https://gist.github.com/aguscha333/7de34fd9219213f1e5ff48db208d7d6e %}

Once you have all of that in place, you can simply import the component and use it as follows:

{% gist https://gist.github.com/aguscha333/11911e87d42a510a35461a6d927e0a83 %}

It's as simple as that, and usually, you will only have to apply extra styles to a particular text component instance if you need to add spacing, color, or wrapping.

Taking the naming convention and hierarchy of text components from the web makes it very easy to understand and remember. As you may have noticed, with the use of prop-types, it is very easy to notice if you misspelled a type when setting it on an instance of said component.

Although adding custom fonts to your React Native project is out of scope for this article, you might find (link here) this article useful where we cover that subject ([How to customize fonts in React Native](https://www.rootstrap.com/blog/how-to-customize-fonts-in-react-native/))

## Conclusion

As you can see, the solution is very clean and simple, but it fixes a problem in a component that is so basic that it is also often overlooked. Putting a bit of time and thought into these kinds of components that make up the core DNA of our apps can go a long way.

I hope you find this article helpful and that you end up implementing this solution in your projects.
Linking FormAssembly URL to Salesforce Field
Tags: salesforce, formassembly, custom, beginners
Published: 2022-07-05 15:14:03

Not sure if this is where to put something for Salesforce and FormAssembly, but I needed to get this out there...

I was tasked with putting the FormAssembly URL in a custom merge field on Salesforce. So why Would someone need to do this? To quickly test the FormAssembly form on a specific Account and check if answers from the form are being populated correctly into Salesforce. Make sense? Probably not, so see step-by-step guidance below.


#### Step 1:
Create a custom Form Object on Salesforce with required merge fields that match those are FormAssembly.
![Form Object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skkmdhwz39o2qnbufi35.png)
 


#### Step 2:
Create merge fields on FormAssembly that reflect the fields in Salesforce. Also, create a 'hidden field' on FormAssembly that will hold the unique ID for this form.
![FormAssmebly Hidden ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y98pmg0kni75srqif9uf.png)
 

#### Step 3:
Create a merge field on the Salesforce Object where you want the form to live. In my case, it is the Account object.
### ![Custom Merge Field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3acshn8or0bwm5wb0tq.png)

#### Step 4:
Create a Custom Lookup field to the Account on the Form Object in Salesforce. This will help tie the form to the correct Account using the form.
![Account lookup field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4upe0077sk6wvmsvsfp.png)


#### Step 5:
Tie the Custom Lookup field on the Form Object to the merge field we created earlier in the Account Object. To do this, we will need to create a custom URL field on the Account Object. The URL field will be referencing the last 7 digits in your FormAssembly public URL found in the Publishing section on FormAssembly (i.e., https://www.tfaforms.com/*******). The additional code in the image below allows us to create a name for displaying the URL instead of the specific URL.
![Final URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hg5sg3wblhzmnvrg83aj.png)

and Voila!
Compiling Tailwind CSS components in monorepo
Tags: tailwindcss, monorepo, configuration
Published: 2022-07-05 15:37:11

---
title: Compiling Tailwind CSS components in monorepo
published: true
date: 2022-07-05 15:09:45 UTC
tags: #tailwind #monorepo #configuration
canonical_url: https://krzysztofzuraw.com/2022/compiling-tailwind-css-components-in-monorepo/
---

If you have monorepo with Tailwind CSS components in one package and application in the other you may find that Tailwind won't work for components. To fix that you need to add new entry to `content` inside `tailwind.config.js`:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "../../packages/ui/**/*.{js,ts,jsx,tsx}", // here is path to Tailwind CSS components package
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```
Oh no! All languages are being erased - you can only save one - what is it?
Tags: webdev, programming, discuss
Published: 2022-07-05 15:06:39

And before you say “binary” and try to catch me out 👀

I am talking top level languages, so binary and assembly still exist and yes this is trivial I know they do different things.... 

i'd pick JS for obvious reasons, cause I love it and hate it.