teleren/devto huggingface dataset:
Early Adopter's guide to Umbraco v14 - Property Editors - UI
Tags: umbraco
Published: 2024-02-08 23:04:36

Once we have defined the schema and UI manifests for our property editor we can create an element for the user.

## UI Element
The UI element is what the editor sees when they are using your property editor.

```ts
@customElement('styled-textbox')
export class StyledTextboxUiElement extends LitElement 
     implements UmbPropertyEditorUiElement {

      @property()
      value: undefined | String = '' ;

      @state() 
      _styleValue? : string;

      @property({ attribute: false })
      public set config(config: UmbPropertyEditorConfigCollection | undefined) {
          this._styleValue = config?.getValueByAlias('styleValue') ?? '';
      }

      onChange(e: Event) {
        const newValue = (e.target as HTMLInputElement).value;
        if (newValue === this.value) return;
        this.value = newValue;
        console.log(this.value);
        this.dispatchEvent(new CustomEvent('property-value-change'));
      }

      render() {
        return html`
            <uui-input
              .value=${this.value ?? ''}
              .style=${this._styleValue}
              type="text"
              @input=${this.onChange}></uui-input>
        `;
      }

      static styles = css`
        uui-input {
          width: 100%;
        }`;
}
```

The editor has a couple of 'special' behaviors, that make it work as a propertyEditor ui.

### The value. 
All property editors have a `value` property - this is the property that Umbraco will fill with the data from the item (content, media etc).

```ts
@property()
value: undefined | String = '' ;
```

The value is also what you set when the editor changes the value.

### Config 

The config property is called to load up your settings from the propertyEditor's configuration (things that are set in the settings section).

here you load the values by their alias, and can set local values so you can access them in your code. 

```ts
@property({ attribute: false })
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
    this._styleValue = config?.getValueByAlias('styleValue') ?? '';
}
```

### dispatching the "'property-value-change" event.
Finally you're editor should dispatch the `'property-value-change` event 
when ever you change your `value` property. 

this tells the parent elements in Umbraco that you have change the value, and it updates the model for the item. So when the user clicks save (or publish) the model contains your changes and is saved back into umbraco.
Pragmatic Programming Traits for Web Development
Tags: bestpractices
Published: 2024-02-08 22:47:50

## What is Pragmatic Programming?

Pragmatic Programmers are known for getting the job done efficiently and effectively. These are some of the characteristics of a pragmatic programmer mentioned in the book The Pragmatic Programmer, your journey to mastery by Andy Hunt and Dave Thomas and how to apply them to web development.

### Early Adopter/Fast Adapter

Being an early adopter is more than just staying ahead. It's about having curiosity for technologies and techniques. In web development, this translates to trying new frameworks and tools frequently.

#### Applying in Web Development

**Trait**: Quick adoption of new technologies

**Example**: Embrace the latest React features and TypeScript updates.

### Inquisitive Mindset

Pragmatic Programmers are not afraid to ask questions and seek deeper understanding. Curiosity fuels growth, and in web development, it's crucial to stay curious.

#### Applying in Web Development

**Trait**: Asking questions

**Example**: Explore libraries, ask yourself how things work, look at the implementations. Find out how other people solved their issues.

### Critical Thinker

Pragmatic Programmers don't just accept things without scrutiny. Critical thinking is the base of making informed decisions in web development.

#### Applying in Web Development

**Trait**: Questioning assumptions

**Example**: Evaluate libraries thoroughly before integrating them into your project.

### Realistic Approach

Understanding the underlying nature of problems is essential. Pragmatic Programmers take a realistic approach, ensuring solutions align with the actual challenges.

#### Applying in Web Development

**Trait**: Realistic problem-solving

**Example**: Assess the actual needs of your web project and choose technologies accordingly.

### Jack of All Trades

Pragmatic Programmers aim to be versatile, gaining familiarity with a broad spectrum of technologies. In web development, versatility is a key asset.

#### Applying in Web Development

**Trait**: Versatility

**Example**: Broaden your skill set by exploring various technologies beyond your primary stack. This will open your mind and extend your understanding of how things work and how to solve problems.

## Conclusion

Incorporating Pragmatic Programming traits in web development leads to efficiency, adaptability, and informed decision-making. Embrace these traits to become a more effective and well-rounded web developer.
Conociendo a BunJS
Tags: javascript, backend, tutorial, bunjs
Published: 2024-02-08 22:39:44

¿Qué es bun y cómo usarlo para ejecutar javascript del lado del backend?

Bun es un entorno de ejecución de javascript para backend, basado en el motor JavaScriptCore de Apple. Es un nuevo competidor de nuestro querido NodeJS.

En este video, te voy a explicar qué es bun, cómo instalarlo, cómo escribir código javascript para el servidor. Usar bun con ReactJS es posible? Acá lo hacemos.


{% embed https://youtu.be/2NddtqsNAuw %}
Order Ascending/Descending Rule with Dates and NIL
Published: 2024-02-08 22:38:37

While working on reordering a database of people by date of birth, I found it confusing why the oldest people were showing up as the first entry when doing ascending order and youngest people showing up as the first entry when doing descending order. If we're doing ascending, shouldn't it be least to greatest, thus the youngest to oldest?

If I had sorted by age, this would've likely been the case, but because I was sorting by date of birth, I was mistaken. Date/time values are stored as numbers, thus the more recent dates would be a larger number than the older dates. It would make sense that the older dates would show up first when put in ascending order since it's a small value.

Another order related info that I wanted to note was how to handle NULL values. As I naturally would assume, many databases consider NULL to have the lowest value, and thus the first value if ordering by ascending value. However, it seems like for PostgreSQL specifically, NULL values are sorted as if larger than non-null values (see https://stackoverflow.com/questions/5826210/rails-order-with-nulls-last). The nice thing is that it seems PostgreSQL has NULLS FIRST and NULLS LAST options to help with sorting!
Be lazy and use Tools (ECS and PHPstan).
Published: 2024-02-08 22:36:15

# Be lazy

Be lazy and use Tools, I heard this earlier and totally agree.

They save you time.

## Easy coding standard

[https://github.com/easy-coding-standard/easy-coding-standard](https://github.com/easy-coding-standard/easy-coding-standard "easy coding standard")

This tool helps you to keep your code consistent.

The best thing is to get one of the predefined sets and use it in your project, If you want to exclude or add some rules then it is easy to do in your ecs.php file.

The code below uses PRS-12 and excludes Yoda Style (which I personally don't like :) ) and adds some useful Rules e.g. remove unused imports from files.

```
<?php

declare(strict_types=1);

use PhpCsFixer\Fixer\ControlStructure\YodaStyleFixer;
use PhpCsFixer\Fixer\Import\NoUnusedImportsFixer;
use PhpCsFixer\Fixer\Import\OrderedImportsFixer;
use PhpCsFixer\Fixer\Import\SingleLineAfterImportsFixer;
use Symplify\EasyCodingStandard\Config\ECSConfig;

return ECSConfig::configure()
    ->withPaths([
        __DIR__ . '/config',
        __DIR__ . '/public',
        __DIR__ . '/src',
    ])
    ->withRules([
        NoUnusedImportsFixer::class,
        OrderedImportsFixer::class,
        SingleLineAfterImportsFixer::class,
    ])
    ->withSkip([
        YodaStyleFixer::class,
    ])
    ->withPhpCsFixerSets(
        psr12: true,
    );
```

You can add as a script to the composer and add to the pipeline to ensure that all members of the team will keep code with standards, that are set in the project.

## PHPStan

[https://phpstan.org/user-guide/getting-started ] (https://phpstan.org/user-guide/getting-started "PHPStan")

This tool helps you to avoid some bugs or make the code more clean.

The command is run by 
```
vendor/bin/phpstan analyse [options] [<paths>...]
```

You can improve your code step by step because we start from the default 0 level and we can validate the project to max level (9)

I recommend using phpstan.neon.dist in your repository (default configuration).

 If you want you can override it by phpstan.neon and add their own rules (e.g. change level).
```
includes:
    - phpstan.neon.dist
parameters:
    level: 4
```

### Baseline and ignoring errors, exclude paths

You can start using it in legacy code because you can 
ignore specific errors, and generate a baseline, which will ignore all errors, that you now have in the project. You can fix it later, but at the beginning concentrate only on new code in the project. You can exclude also some directories or classes.

### Nice feature in the config

I like an option to set a clickable link in the code editor after running phpstan

e.g. for PHPStorm (for local)
```
parameters:
    editorUrl: 'vscode://file/%%file%%:%%line%%'
```

For more look at the documentation, there are still some interesting things.
Elians Astro Startkit
Tags: astro, webdev, javascript, beginners
Published: 2024-02-08 22:29:32


# Releasing my Astro default setup

Every time I set up a new project for myself (using Astro), I find myself installing the same plugins, setting the same settings, and even copy pasting some parts. So I decided to throw it into [a template repo on GitHub](https://github.com/ElianCodes/elians-astro-startkit) and eventually open up the repository to the public, which is what I did today. Not really to get contributed to, but rather to show others how I develop my personal projects.

Link to repo: [elians-astro-startkit](https://github.com/ElianCodes/elians-astro-startkit)

## What does the project contain

You can read the full list of all the technologies I use in the project and why [in the README of the repo](https://github.com/ElianCodes/elians-astro-startkit). But to save you time, here is a TLDR;

- [Astro](https://astro.build)
- [SolidJS](https://www.solidjs.com/)
- [Biome](https://biomejs.dev/)
- [UnoCSS](https://unocss.dev/)
- [TypeScript](https://www.typescriptlang.org/)

## Intentions

I quickly wanted to write down some intentions I have for the repo.

I will update / change it, depending on me changing my "go to" technologies. For instance, at any time in the future, I might change my TypeScript settings or change the design system. Maybe there is an ideal technology that I really want / need but isn't released yet? (Yes, I'm totally talking about Astro Studio).

Feel free to use the template!
SwiftUI与View Model：Apple的词语选择困难
Tags: swift, swiftui, mvvm, ios
Published: 2024-02-08 22:04:33

## 前言

经过一段时间SwiftUI开发的朋友应该都注意到，Apple在其官方文档网站 https://developer.apple.com/documentation/ 上刻意地避免使用“View Model”一词。

初学SwiftUI的开发者肯定会有疑问：为什么Apple不用众所周知的view model这个单词来描述处理数据逻辑的对象，而非得舍近求远地用各种近义词替换，什么Store啦、data model啦、或者指代事物的实体名词，来命名数据对象。这篇文章简单记录一下我的发现和猜测。

## 简史

经历过UIKit到SwiftUI转变的朋友们应该还记得，当SwiftUI随着iOS 13在2019年推出时，最开始其实是很粗糙、很不稳定的。在数据对象这一点上，SwiftUI第一版甚至没有`@StateObject`这个property wrapper。

最开始时大家对新技术也是一头雾水，很多手快的教程作者写的解读文章漏洞百出，我记忆中见过的误用包括……

- 直接在view中用`let`声明数据对象的
- 用`@ObservedObject private var`声明数据对象的
- 用单例或者变种单例的`Model.shared`来保证数据对象唯一性的
- 用`@State`这个在官方示例中只用来存储["plain old data"](https://en.wikipedia.org/wiki/Passive_data_structure)数值类型的property wrapper来声明class对象

过了大半年，大伙逐渐玩熟了SwiftUI以后，才明白过来，并不是我们写的代码有问题，而是SwiftUI 1.0根本就没办法“优雅”地声明一个唯一的observable object。记得无论是developer forum还是swift.org的forum，都有好几个帖子讨论这个问题。最终这个问题随着Apple在iOS 14引入`@StateObject`而得到彻底解决。

## 变迁

在iOS 13到15之间，Apple自己对于数据对象的理解也在不断演化。有个新来的只接触过现代SwiftUI的小同事问我，“为啥苹果文档里，有的地方管它叫XXStore，有的叫XXModel？”我自己的观察如下：

- “Store”: [示例文档](https://developer.apple.com/tutorials/app-dev-training/persisting-data#Create-a-data-store) 这个文档是iOS 14时代推出的。当时刚有的`@StateObject`，Apple自己还在纠结这些概念性的名词应该怎么称呼，所以并没有选择如今更为常见的“Model”来命名变量。
- “Model”: [示例文档](https://developer.apple.com/tutorials/sample-apps/imagegallery) 当进入iOS 15的时代，SwiftUI也开发到第三版，其整体架构和稳定性都上了一个台阶。这时候Apple的命名策略也稳定下来，大致为：若一个数据对象是真实世界中实际存在的物体，如一本书Book，或者参会者Attendee，则用实际名词命名；如果数据对象是抽象的，只为了处理一个view的所有数据逻辑，则将其命名为data model。~~这样就可以无所顾忌地把所有“有的没的”参数全都塞到一个对象里面~~ :zany_face:
- “view model”: [示例文档](https://developer.apple.com/documentation/swiftui/submittriggers/search) 在几乎所有的Apple官方文档中，它们尽可能地避免使用view model这个词。百密一疏，还真让我撞见一个审稿疏忽的文档！可以看到，SwiftUI首页链接的[数据模型概念文档](https://developer.apple.com/documentation/swiftui/managing-model-data-in-your-app)里面“model”一词用了四十余次，“data model”十余次，可一次“view model”都没用。所以，我觉得Apple是故意避免使用view model这个词的。至于为什么，接着往下看……

我估摸着苹果内部开发是不在乎对象是否为`ViewModel()`创建。只是在对外的文档中统一口径，不用这个词罢了。~~你装你:horse:呢~~

## 为何避免View Model？

对于这个问题最有代表性的讨论，是Apple Developer Forum上广为讨论的一个帖子：https://forums.developer.apple.com/forums/thread/699003

简单来说，很多人在写了很多SwiftUI代码后，发现刻意加入一个传统的MVVM模式中的view model是完全没必要的。传统的MVVM里view model主要用来处理数据和视图的双向绑定：数据进来，更新视图；视图状态变化，反馈给数据。直到2021年，我看到还有许多企业做demo时，宣传要合理地建模view model ~~说的就是你MongoDB~~。但实际上，除了直接在客户端操作数据库的情况以外，如今很少有需要在用户逻辑层面大量操作数据的app了。

自从Apple引入`@StateObject`之后，SwiftUI的数据模型虽然性能一般，但变得容易理解。数据类型用state和binding和environment，引用类型用state object和observed object和environment object。很多情况下，通过合理的access level控制和正确的property wrapper使用，双向数据绑定只需要view和model两个层面即可。以往MVC中一团浆糊的controller，和MVVM中的view model，都被简化了。

我猜Apple的本意就在这儿：能简化的问题，没必要“为了设计模式而设计模式”。诚然，我们可以根据传统的MVVM模式，为每一个视图配一个view model和一个model，但那样就增加了许多不必要的胶水代码，需要测试的代码也成倍增加。Apple就想了，干脆我们不把数据模型叫view model，刻意地让读者明白新的MV模式不涉及到手动双向绑定，这样就能扭转大家的过时的思路。

## Observable更进一步

在iOS 17里，Apple采纳了社区提出的[Observation](https://developer.apple.com/documentation/Observation)模式，把原先state object和observable object的模式进一步简化。我想它的本意是让开发者把数据模型更加细化，明确哪些属性会导致视图更新，哪些不会。而不要再犯“一万行controller”的错误。

SwiftUI走过五年时光，由于兼容性的考虑，很多走错的路，只好木已成舟、顺水推舟。如果重新再来、从头设计，或许很多关键概念的选词，会有更好、更直观的选择。
Nucleus – Free Flutter UI Components and Screens
Tags: flutter, template, ui, designsystem
Published: 2024-02-08 22:03:17

Heya everyone,
I'd like to introduce our Free Flutter UI Components and Screens. Enjoy these pre-built components and screens to jumpstart your Flutter project or learn about Flutter.

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

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

[See preview](https://nucleus-lite.web.app/#menuPagesAll)
[Check out the Github](https://github.com/nucleusui/nucleus-lite)
[Download Figma File](https://nucleusui.gumroad.com/l/nucleus-core-ui-component)

If you have any feedback, please send them to nucleus.ui@gmail.com

And also shout to our developer partner, [Studio Alva](https://studioalva.co/)

Cheers!
Best Bitcoin Fraud Recovery Expert \ TrustGeeks Hack expert
Tags: hackers, lostcrypto, money, explor
Published: 2024-02-08 21:36:39

In recent years, cryptocurrency has gained immense popularity as a convenient way for people to earn money using their mobile devices. However, it is crucial to acknowledge that significant losses have occurred in cryptocurrency trading, leaving many victims unable to recover their funds due to a lack of knowledge and information. Thankfully, TrustGeeks Hack Expert is available today to assist. This group of experts has completed numerous recovery cases, demonstrating their expertise and reliability. I could recover my lost assets by following their instructions and working closely with them. I was trying to earn a living just like everyone else does but mine took a wrong turn and I lost nearly $300,000 within the first 2 months with the scam company I got involved with, But the most important part of it all was me not giving up easily. It is essential not to let these scammers escape the consequences of their actions, make sure to fight for your rights.TrustGeeks Hack Expert has proven to be trustworthy, and with their support, you can finally achieve a positive outcome. Yes, It is common for people to fall victim to trading platforms and then end up with the wrong recovery agents. However, with TrustGeeks Hack Expert, you can be confident that you will receive the exact assistance you need. When I initially reached out to them, I was confused and exhausted about the whole situation, but they reassured me that everything would turn out well, and they stayed true to their promises. They promptly responded to my messages and patiently answered all my questions, even the ones I found confusing. Although I felt nervous and had intrusive thoughts during the process, I did not let them hinder my progress. For assistance, you can contact TrustGeeks Hack Expert via their email address.  trustgeekshackexpert(@)fastservice(.)come  & Telegram User:(@)Trustgeekshackexpert
Quasar Q-Table Row Spanning
Tags: vue, quasar, beginners, programming
Published: 2024-02-08 21:33:50

Hello, I tried to create a page that will retrieve data from Django Backend Application. And the frontend is built using Vue.Js 3 and Quasar Latest version. 
Here is a sample of my data:
[
  {
    "rule_id": "1",
    "spa_group_id": "100",
    "range": [
      {
        "id": 1,
        "from_risk_score": "100",
        "to_risk_score": "150",
        "collection_path_dg": "100",
        "spa_group_id": "100"
      }
    ]
  },
  {
    "rule_id": "2",
    "spa_group_id": "200",
    "range": [
      {
        "id": 2,
        "from_risk_score": "200",
        "to_risk_score": "250",
        "collection_path_dg": "100",
        "spa_group_id": "200"
      }
    ]
  },
  {
    "rule_id": "3",
    "spa_group_id": "300",
    "range": [
      {
        "id": 3,
        "from_risk_score": "300",
        "to_risk_score": "350",
        "collection_path_dg": "200",
        "spa_group_id": "300"
      },
      {
        "id": 4,
        "from_risk_score": "400",
        "to_risk_score": "450",
        "collection_path_dg": "300",
        "spa_group_id": "400"
      },
      {
        "id": 5,
        "from_risk_score": "400",
        "to_risk_score": "450",
        "collection_path_dg": "300",
        "spa_group_id": "500"
      }
    ]
  },
]

As you may see that the data is grouped by two fields "rule_id" and "spa_group_id". I'm trying to show the data using Quasar Framework. 

How can I get it done right with the ability to filter data by values from specific columns and allowing to sort the data?
El nuevo Dongfeng Shine llega a Arabia Saudita
Published: 2024-02-08 21:25:17

Frente a los medios de comunicación y los invitados presentes, se realizó el debut de los nuevos modelos que muestran la fuerza técnica y el diseño de [Dongfeng Motor](https://lavozdelima.com). La nueva apariencia de SHINE es más vanguardista, sus llantas deportivas y pinzas de colores realzan su estilo deportivo. El interior adopta un diseño de doble color, la gran pantalla de control central es de 13 pulgadas y el asiento deportivo de cuero integrado, en el que también se incluye [logotipo](https://limaconfidencial.com) de la marca resaltan su atmósfera deportiva.
Sharon Pardo Sarmiento gana los Premios Diamante
Published: 2024-02-08 21:22:28

En la ciudad de [Cartagena de Indias](https://despertarperu.com) se celebró el pasado 1 de diciembre la gala de premiación de los Premios Diamante organizados por Servilonjas, resultando como ganadora Sharon Pardo Sarmiento. El concurso evalúa anualmente la gestión realizada por los miles de participantes en cuanto a su gestión como Administradores de PH en el país tanto a nivel residencial, comercial o mixto. Las votaciones estuvieron a cargo de un selecto grupo de jurados ampliamente reconocidos en la propiedad horizontal de [Colombia](https://diariodelpacifico.com).
Cogno-Cravings desvela una solución innovadora
Published: 2024-02-08 21:20:24

Las fiestas navideñas, aunque alegres, suelen desencadenar problemas de salud relacionados con el estrés. Una importante estadística de la A[lianza Nacional de Enfermedades Mentales](https://limaconfidencial.com) destaca que el 64% de las personas sufren depresión navideña, agravada por el estrés económico, emocional y físico. [CognoCravings](https://lavozdelima.com) aborda estos retos ofreciendo un método innovador para contrarrestar los efectos del estrés navideño sobre la salud.
Sharon Pardo Sarmiento gana los Premios Diamante
Published: 2024-02-08 21:19:19

En la ciudad de [Cartagena de Indias](https://limaconfidencial.com) se celebró el pasado 1 de diciembre la gala de premiación de los Premios Diamante organizados por Servilonjas, resultando como ganadora Sharon Pardo Sarmiento. El concurso evalúa anualmente la gestión realizada por los miles de participantes en cuanto a su gestión como Administradores de PH en el país tanto a nivel residencial, comercial o mixto. Las votaciones estuvieron a cargo de un selecto grupo de jurados ampliamente reconocidos en la propiedad horizontal de [Colombia](https://lavozdelima.com).
El nuevo Dongfeng Shine llega a Arabia Saudita
Published: 2024-02-08 21:14:29

Frente a los medios de comunicación y los invitados presentes, se realizó el debut de los nuevos modelos que muestran la fuerza técnica y el diseño de [Dongfeng Motor](https://despertarperu.com). La nueva apariencia de SHINE es más vanguardista, sus llantas deportivas y pinzas de colores realzan su estilo deportivo. El interior adopta un diseño de doble color, la gran pantalla de control central es de 13 pulgadas y el asiento deportivo de cuero integrado, en el que también se incluye [logotipo](https://diariodelpacifico.com) de la marca resaltan su atmósfera deportiva.
[Project] Automatic Captcha Solver With Hardware Input
Tags: project, rpa, python
Published: 2024-02-08 21:04:40

## Details
- Convert image captcha to text
- Click the keyboard with hardware input
- GUI
- Run on Windows 7 and 10.

## Implement
- 2Captcha Solver API for captcha
- Interception Driver for hardware input
- pyqt5 for GUI
- python 3.7.8 for windows

![operation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnm2mny75wt7cfe71y9m.gif)
My First Post
Published: 2024-02-08 20:36:29

Hi there! 👋 I'm Harshil.

I'm a Web Developer with 1 year of work experience, I am ex intern at Prodigy Infotech, Bharat intern and LetsGrowMore. I have experience working in Frontend, Backend, Databases and Full Stack Development.

During my Web Development career, I have worked with multiple programming languages, libraries, frameworks and technologies such as HTML, CSS, Javascript, C++, Nodejs, jQuery and Reactjs. 

I earned my Coding Certification in from Coding Blocks where I master in C++ and MERN stack.
Other than that my areas of interest lie specifically also in graphic designing, web designing and game designing, I am constantly seeking opportunities to enhance my skills and explore new trends in these fields.

On a personal level, I'm passionate about self-improvement and personal growth.
I believe that we can always learn and grow, both professionally and personally. 
I'm excited to connect with fellow tech enthusiasts who share the same zeal. 
Let's collaborate and make a positive impact together!

I hope you have a lovely day!