teleren/devto huggingface dataset:
Integration testing Vue3 with Pinia
Tags: vue, pinia, testing
Published: 2022-04-07 14:38:55

I was working on a [Vue 3](https://vuejs.org/) project where I had to write an integration test with [vue test utils](https://test-utils.vuejs.org) for a component that relied on [Pinia](https://pinia.vuejs.org/), while at the same time needing to set some initial state on a Pinia store before mounting that component. This caused a problem:
- The component could not mount before a Pinia store was configured,
- The Pinia store could not be configured before the component would be mounted. [Read why in this paragraph of the official docs of vue test utils](https://test-utils.vuejs.org/migration/#no-more-createlocalvue).

One solution would be to refactor the code so that the component would not rely on a store when mounting. But that would be too much work and would also be too restrictive for our codebase. We should not have to restrict access to stores in component lifecycle hooks!

So in this post another solution is presented, which is rendering the component inside of a wrapper component specifically designed for integration tests:

`IntegrationTestWrapper.vue`
```vue
<script setup lang="ts">
import { useMyStore } from '@/stores/myStore'

// === setup any Pinia stores here ===
useMyStore().$patch({ foo: 'bar' })
// ======

defineProps(['component'])
</script>

<template lang="pug">
component(:is="component")
</template>
```

Then inside of our test we can write:

`MyComponent.spec.ts`
```ts
import { flushPromises, mount } from '@vue/test-utils'
import { createPinia } from 'pinia'

describe('MyComponent', () => {
  it('should mount', async () => {
    const wrapper = await mount(IntegrationTestWrapper, {
      props: {
        component: 'MyComponent', 
        anotherProp: 'abc', // will be passed to child component
      },
      global: {
        plugins: [createPinia()], // initializes Pinia
        stubs: { MyComponent }
      },
    })
    await flushPromises() // make sure all promises in lifecycle hooks are resolved
    expect(wrapper.exists()).toBe(true)
    // further assertions
  })
})
```
Now everything is done in the correct order:
- Pinia is created and initialized before `IntegrationTestWrapper` is mounted.
- `IntegrationTestWrapper` initializes store state before mounting `MyComponent`.
- Props given to `IntegrationTestWrapper` will be passed down to `MyComponent`.

Notes:
- `IntegrationTestWrapper` is not rendering a [slot](https://vuejs.org/guide/components/slots.html) because that would not receive the props.
- You cannot just call `createPinia()` before configuring store state, you will receive an error that Pinia is not initialized with `app.use()`. It is only initialized in tests through mounting options.
Give me your CREATE DATABASE SQL and I'll give you an app ...
Tags: discuss, sql
Published: 2022-04-07 14:38:16

Hi good folks, we're in the process of quality assuring our little [CRUD Low-Code generator](https://aista.com) thing, and I'd love to get hold of lots of different CREATE DATABASE SQL scripts for the following databases.

1. SQL Server
2. MySQL
3. PostgreSQL
4. SQLite

If you've got some scripts for the above databases you'd like to share with me, you can either paste them in here (short scripts), or send me an email at th _at_ aista _dot_ com such that I can test.

The idea is to support as many different idioms as possible for as many databases types as we can, preferably _"transparently"_, such that _"the Crudifier"_ works out of the box on everything.

If you've got exotic database scripts, I'd love to see them. Let me know if you want me to share your script(s) with others, keep them internally for our QA process, or delete them once I'm done.

Nothing too large though please. Preferably only the `CREATE DATABASE` portions (with `CREATE TABLE` statements of course) ...

As in no _"raw database backups"_ ... ;)
Adding additional actions to Trix
Tags: trix, rails, webdev, javascript
Published: 2022-04-07 14:37:03

It's not documented how to add additional "actions" to Trix.

Current actions can be found here:

https://github.com/basecamp/trix/blob/7940a9a3b7129f8190ef37e086809260d7ccfe32/src/trix/controllers/editor_controller.coffee#L301-L318

But how do we make additional actions?

It appears an action is an object:

```js
{
  test: Boolean,
  perform: void
}
```

So `test` is like "hey should we perform the action?"

and `perform` is what gets called if `test === true`. Seems reasonable. 

Now to the hard part, I couldn't find any docs to add an additional Trix action. 

But, in sleuthing through the console I found this:

```js
document.querySelector("trix-editor").editorController.actions

/* 
Object { 
  attachFiles: Object { test: test(), perform: perform() }
  decreaseNestingLevel: Object { test: test(), perform: perform() }
  increaseNestingLevel: Object { test: test(), perform: perform() }
  link: Object { test: test() }
  redo: Object { test: test(), perform: perform() }
  undo: Object { test: test(), perform: perform() }
}
*/
```

So it appears we can add additional actions by tapping into the `editorController.actions` on a currently active instance of "trix-editor".

So a simple example to add an action may look like this:

```js
document.addEventListener('trix-initialize', updateActions);

function updateActions() {
  const editors = document.querySelectorAll("trix-editor")
  const myAction = { test: true, perform: console.log("Hi!") }
  editors.forEach((editor) => Object.assign(editor.editorController.actions, { myAction })
}
```

And now when we add an item to the toolbar, we should be able to do something like this to trigger our action:

```html
<button data-trix-action="myAction"></button>
```

This is a small precursor to me exploring table support, but figured I'd share as it took a while to track down!
Cyber style react library
Tags: javascript, react, typescript
Published: 2022-04-07 14:23:10

**Recently I found that many websites like to use gradient colors,**

But gradient css is really cumbersome to write

So cyberUI appeared, it can help you save the time of writing css, you can have a great gradient effect

It can help you not to waste your life on css (lol)

If you have some good ideas and suggestions

Welcome to submit pr or issue !

https://github.com/leoshenhh/cyber-ui-react
Rust-developer
Tags: rust, solana, startup
Published: 2022-04-07 14:17:56

Eno team (start-up) is building an open-source content publishing protocol on Solana with a simple goal of providing a provably neutral platform for world’s content.

The protocol enables creators to publish any content and introduce any forms of monetization, audience incentivization via programmability by turning content in the form of NFTs into digital bearer assets, akin to $BTC, $ETH or $SOL. 

We are seeking a blockchain engineer to be a core part of the team.

Preferred qualifications:
- Experience working with Rust;
- A Deep understanding of blockchain technology, specifically Solana;
- Experience with smart contract development, distributed system design;
- Experience with working on P2P protocols (LibP2P is preferred);
- Knowledge of cryptography;
- An open-source contributor / having experience with the open-source ecosystem is a huge plus;
- English level B2+.

Responsibilities include:
- Designing and building the protocol that powers the platform;
- Creating, testing and deploying Solana smart contract(s).

👍🏻 CV - https://t.me/tetrisgirl (Alina).
Day 3: Fighting jQuery
Tags: 100daysofcode, beginners, webdev, javascript
Published: 2022-04-07 14:00:13

*The Feynman technique says that teaching a subject makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post*

## Intro to jQuery

Alright, so what is jQuery?
Well in the past, browsers set up different standards of JS for websites. This is cumbersome for developers. Like, no, I'm not gonna dive into my spaghetti code just because Bing can't load my site 🤣.

jQuery is intended to make accessing elements in HTML easy, with less boilerplate code. The syntax is guiltily simple:
```js
$("#element")
```
A dollar sign (or **bling**, if you may.), with a selector for elements in HTML. The selector use the same syntax as CSS selectors.

Compare that to this monstrosity:
```js
document.getElementById("demo")
```
Anyway, you get the point.

## Load when ready! 🔫

A special boilerplate code for programmers:
```js
$(document).ready(function() {
// stuff you want to do immediately
});
```
If the JS script finishes loading before the HTML itself, immediately running the code will wreak havoc and bugs will surely spawn. This codeblock ensures that the `document` loads first, and when it's ready, we can run the necessary code without clashing with the loading of HTML files 🤯.

## Functions for elements

* `addClass()`

Obviously it adds new classes to the element.
```js
$("button").addClass("btn btn-primary");
```

* `removeClass()`

...I don't think you need explanation on this one.

* `css(prop, val)`

Add/modifies new CSS properties onto targeted elements.
```js
$("h1").css("color", "white");
```

* `prop(prop, val)`

Add/modifies HTML properties of targeted elements.
```js
$("button").prop("disabled", true);
```

## Afterwords

Not much is done today, either. The whole village lost internet connections to several ISPs for half of the day. Had to crunch my time for getting through courses and writing this blog. Hope tomorrow would be better. See ya 👋!

Follow me on [Github](https://github.com/Kemystra)!
Also on [Twitter](https://twitter.com/kemystra)!
Who has written the worst code? Can anyone top this?
Tags: watercooler
Published: 2022-04-07 13:59:52

From [this thread](https://dev.to/dinerdas/whats-the-worst-code-youve-ever-written-3ph9)...

{% embed https://dev.to/hesoyamm/comment/1nbln %}

I recommend folks go into the original thread and see if they can outdo that. 🤣
El SEO como herramienta fundamental en DISEÑO WEB
Published: 2022-04-07 12:49:28

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k70b6orf8zlc0cq128rz.png)
Para cualquier negocio que quiera tener presencia online, el SEO (Search Engine Optimization) es fundamental para obtener resultados satisfactorios.

Pero, debéis saber que el SEO no es un trabajo que deba realizarse una vez que ya esté en marcha la web. El trabajo de SEO debe comenzar en el mismo instante en el que comienza a idearse el diseño de una web o tienda online.

Cómo se estructura una web, las categorías que configuran su menú o sus subcategorías son una pieza clave para que una web tenga un buen o mal SEO, para que las acciones posteriores sean más eficaces y para que pueda aparecer en los resultados de búsqueda por delante de su competencia. 
Si queréis conocer los factores que tenéis que tener en cuenta para mejorar el SEO en un diseño web, lo tenéis en el siguiente enlace: **[Factores SEO en el diseño de una web](https://www.digitaldot.es/seo-como-herramienta-en-el-diseno-web/)**. 

Recordad que en **[digitalDot ](https://www.digitaldot.es/)**tenéis todos los servicios necesarios para crecer en el ámbito online:
•	**[Actualizar Prestashop](https://www.digitaldot.es/soporte-informatico/)**
•	**[Diseño de tiendas online](https://www.digitaldot.es/diseno-tiendas-online/)**
•	**[Posicionamiento SEO](https://www.digitaldot.es/posicionamiento-seo/)**
•	**[Diseño de aplicaciones móviles](https://www.digitaldot.es/apps-moviles/)**
•	**[Diseño web](https://www.digitaldot.es/diseno-web/)**
•	**[Mantenimiento de tiendas online](https://www.digitaldot.es/mantenimiento-web/)**
Paracetamol.js💊| #95: Explica este código JavaScript
Tags: javascript, spanish, webdev, beginners
Published: 2022-04-07 13:56:49

## **<center>Explica este código JavaScript</center>**

### ¿Cúal de los siguientes ejemplos regresa `undefined` por consola?

```js
//#1
let a;
console.log(a);

//#2
function f(x) {
  return x;
}
console.log(f());

//#3
const obj= {
  nombre:"Cris",
}
console.log(obj.edad);

//#4
function y(){
  let z =3;
  if(true){
    z=4;
  }
}
console.log(y())
```

A. Solo el ejemplo #1
B. Ejemplo #2 y Ejemplo #3
C. Ejemplo #3 y Ejemplo #4
D. Todos los ejemplos

{% details ➡ Respuesta ⬅%} 

D. Todos los ejemplos

En javascript existen 4 maneras de obtener un `undefined` como resultado:

* Cuando declaramos una variable con `let` o `var` sin inicializarla, como en el ejemplo #1.
* Cuando en la llamada de una función omitimos parámetros obligatorios, como en el ejemplo #2.
* Cuando intenamos acceder a una propiedad de un objeto que no existe, como en el ejemplo #3.
* Cuando llamamos a una función que no tiene la sentencia `return` en su cuerpo, como en el ejemplo #4.

{% enddetails %}
Useful GitHub repos
Tags: github, javascript, programming, opensource
Published: 2022-04-07 13:40:46

Here’s a list of great GitHub repositories, with lots of useful resources for anyone in the software development world.

- **[30 seconds of code](https://github.com/30-seconds)** - A set of repos with a collection of code snippets for all your development needs in JavaScript, CSS, React, Python, among others.

- **[Awesome Cheatsheets](https://github.com/LeCoupa/awesome-cheatsheets)** - Cheatsheets for popular programming languages, frameworks, and development tools. They include everything you should know in one single file.

- **[Awesome Software and Architectural Design Patterns](https://github.com/DovAmir/awesome-design-patterns)** - A curated list of software and architecture-related design patterns for different programming languages and architectures.

- **[Public APIs](https://github.com/public-apis/public-apis)** - A collective list of free APIs for you to use in your software and web development.

And there's more! [See the complete list of useful repos here](https://community.codacy.com/t/useful-github-repos/871), in our Community of developers.

Join our Community, feel free to steal this list and tell us your favorite repos that you use the most.
Websites you can find free photos for your next blog
Published: 2022-04-07 13:40:11

1. [Unsplash.](unsplash.com)
2. [Pexels.](pexels.com)
3. [Moose.](icons8.com/photos)
4. [BarnImages.](barnimages.com)
5. [Pixabay.](pixabay.com)
6. [VisualHunt.](visualhunt.com)

See you soon.
How to Make a Quiz in WordPress With Formidable Forms
Published: 2022-04-07 13:38:21


**1. Download and install Formidable Forms and the Quiz Maker add-on**

To create a quiz in WordPress, you need a drag and drop form builder. Sure, there are some dedicated quiz plugins out there. But a quiz is really just a fancy web form.

**2. Create a quiz form**

Here's how you can create a quiz form using Formidable:
The first thing we need to do is create a form on your WordPress site.
To do this, go to Formidable → Forms and click + Add New at the top of the page.
Drag and drop in the fields you need. These fields will act as your quiz questions. To make a multiple choice quiz, include dropdown or radio fields in the quiz form.
Add questions to your heart's content. Then, let's move on to the next step.

**3. Add quiz scoring**

Next, add a Quiz form action on the Settings Actions & Notifications tab. This is where all the quiz scoring is handled.
Before we go further, ask yourself this: do I want the quiz taker to see the score after they complete the quiz?
If yes, just select from the options to show the score, user's answers, or correct answers. Then your users will be able to see the quiz result!

**4. Publish your quiz form**

After creating your quiz, you'll need a place to publish it. On a WordPress website, this is usually done on a post or a page.

**Reference Blog**
[How to Make a Quiz in WordPress With Formidable Forms](https://www.gomahamaya.com/make-quiz-wordpress-formidable-forms/)
The pandemic was a gift for me... 🤨🤨??
Published: 2022-04-07 13:31:45

Two years ago the pandemic has been started and the whole world went to a lockdown. As a student I had to study online so my parents bought me a smartphone.
More about attending online classes I watched awesome videos of creators like Sandeep Maheshwari, Code with Harry, Brototype, Aman Dattarval etc. I learned about how to build a business and how to make websites from Brototype.
So after two years of learning about business I finally started a my own company called [Web Fly](https://www.instagram.com/web__fly) in February 2022. 
You can also achieve this much. 
Do follow my [Instagram Account](https://instagram.com/sanath_kambar)
#Reactor – Workshops liderados por Microsoft Student Amabssadors: React.js, Jupyter Notebooks, Azure ML y más …
Tags: englishpost, event, microsoftreactor, spanishpost
Published: 2022-04-07 19:46:28

---
title: #Reactor – Workshops liderados por Microsoft Student Amabssadors: React.js, Jupyter Notebooks, Azure ML y más …
published: true
date: 2022-04-07 13:25:35 UTC
tags: EnglishPost,Event,MicrosoftReactor,SpanishPost
canonical_url: 
---

Buenas !

Durante el mes de Mayo, el grupo de Microsoft Student Ambassadors de Latino América liderarán una serie de Workshops sobre tecnologías muy interesantes, que ayudarán a aprender nuevas habilidades tecnológicas y descubrir nuevos caminos profesionales.
	
Esta serie de talleres en vivo (y disponibles a pedido después) cubrirá habilidades fundamentales en codificación, ciencia de datos, desarrollo web, desarrollo de dispositivos y mucho más.  

## [Introducción a Jupyter Notebooks con Python](https://www.meetup.com/Microsoft-Reactor-Toronto/events/285081757/)

5 de Mayo  
Speaker: Celestino Nicolas Chavez, SA

![banner para introduccion a Jupyter Notebooks](https://brunocapuano.files.wordpress.com/2022/04/2022-05-05-may-5-introduccion-a-jupyter-notebooks-con-python.jpg?w=1024)

## [Cree un modelo de regresión con el Azure Machine Learning Designer](https://www.meetup.com/Microsoft-Reactor-Toronto/events/285080879/)

10 de Mayo  
Speakers: Carla Mamani, Student Ambassador y Luis Beltran, Microsoft MVP.

![banner para Cree un modelo de regresión con el Azure Machine Learning Designer](https://brunocapuano.files.wordpress.com/2022/04/2022-05-10-may-10-cree-un-modelo-de-regresion-con-azure-ml.jpg?w=1024)

## [Comenzando con React.js](https://www.meetup.com/Microsoft-Reactor-Toronto/events/285102818/)

16 de Mayo  
Speaker: Felipe Flores & Daniel Armas – Beta Microsoft Learn Student Ambassadors

![banner para Comenzando con React.js](https://brunocapuano.files.wordpress.com/2022/04/2022-05-16-mayo16-comenzando-con-react.jpg?w=1024)

Y hace 2 días, también tuvimos la suerte de contar con otro grupo donde vimos los fundamentos de HTML, CSS, GitHub y GitHub.dev.

## [Cree un sitio web para mostrar su currículum](https://www.youtube.com/watch?v=dV7xtcMxJak&ab_channel=MicrosoftReactor)

4 de Abril.

Speakers: Manuel Ortiz: Manuel Ortiz y Gustavo Mejia

![banner para Cree un sitio web para mostrar su currículum](https://brunocapuano.files.wordpress.com/2022/04/2022-04-04-apr-4-manuel-gustavo-bruno-cree-un-sitio-web.jpg?w=1024)

La agenda todavía no está completa. Iré actualizando este post con más novedades y eventos !

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *
Fix WordPress Error The Theme Is Missing The Style.css Stylesheet
Published: 2022-04-07 13:21:54


Now, let's dig into the most common fixes for the WordPress missing theme stylesheet error.

**1. Confirm that you're uploading the correct zip file.**

One common cause of this error is that you're accidentally uploading the wrong zip file to your site. Some theme developers give you a downloadable zip file that includes multiple different files inside — not just for your theme.

In order to access the zip file for your specific theme, you need to find and upload the individual theme file within the comprehensive zip file. This is most common with ThemeForest because of the way that ThemeForest handles its downloads, but it can happen in other situations, too.

For this example, let's say you purchased a new theme from ThemeForest. Once you finished your purchase, you might've gone to your dashboard, clicked the Download button, and selected All files & documentation.

That will download a zip file to your computer and, because you downloaded that zip file directly from ThemeForest, you might assume that you can just upload it to your WordPress site.

There's a problem, though. This zip file is not the actual installable theme file. Instead, it contains documentation, license information, and everything else.

If you try to upload it to WordPress, you might encounter the missing stylesheet message because the file structure doesn't match what WordPress expects.

To access the actual theme file, you need to extract this file and find the actual theme file inside:

Or, at ThemeForest, you can choose to download just the WordPress installable file.

If you're not sure whether or not you have the proper zip file, here's what you should look for:

When you first open the zip file, you should see a folder with the theme's name.
When you open that folder, you should see files with names like index.php and functions.php. You should also see a file called style.css.

**Reference Blog**
[Fix WordPress Error The Theme Is Missing The Style.css Stylesheet](https://www.gomahamaya.com/fix-wordpress-error-theme-missing-style-css-stylesheet/)
How do you track your finances?
Tags: discuss, devjournal
Published: 2022-04-07 13:08:59

Recently attended a workshop, and I'm curious to know how you track your finances. Personally, I've built a custom spreadsheet, and I'm happy with that, but I'd love to see how other people are doing it.

1. Do you use a spreadsheet? Did you build it yourself? Did you buy one that was already done for you?
2. Do you use an accounting software (Quickbooks, Xero, Zoho, etc.)?
3. How do you like your current solution? Is it too complicated? Is it too overkill in terms of features for your needs?
4. What would make it better for you?

In the workshop, they recommended also using tracking tools like Mint to follow all your expenses, not just business, but also, personal.
I'd be curious to know how many other people track it all to the penny like this.
Thoughts on Dave Farley's "You NEED to Stop Using Pull Requests"
Tags: cicd, pullrequest, pairprogramming
Published: 2022-04-07 13:06:46

---
title: Thoughts on Dave Farley's "You NEED to Stop Using Pull Requests"
published: true
description: 
tags: cicd,pullrequest,pairprogramming
//cover_image: https://direct_url_to_image.jpg
---

{% youtube ASOSEiJCyEM %}

I've attempted this, like it, and it seems to work if:
- you use Git.
- fast, then good CICD build
- ability to pair program with colleagues

I wouldn't want to try using SVN, CVS, etc. where built-in merging and diffing is super primitive. You'd need something like BeyondCompare or another manual diffing tool just to keep your sanity and help merge conflicts as they arise.

The build has to be under 10 minutes, automatically deploy to some lower environment, automated quality gates with at least unit tests that validate "the code works", including after deployed. Notice I said fast first, THEN good. If you have 24 quality gates and it takes 30 minutes to deploy code to dev, you'll just deploy manually skipping the build process and not care if it breaks. Once fast, good is "it validates if our code actually works or not". If it doesn't, no worries, see what code snuck through, and add tests for it so that kind of type of bug can't make it through in the future; all about that iteration.

Pair Programming allows you to do code review _as you write the code_, resulting in better code, and a lot less worry your build won't catch problems. While I like to think me + TDD == well designed code, sadly (happily, heh) I work with smarter people than me, so together we come up with even better designs.

Designing the work to allow multiple pairs to merge easier at the same time is hard. Improving your build while keeping it fast is hard. Improving your pair programming work & team rotation schedule is hard. I'd rather suffer and learn how to get better at those 3 than continue using PR's.