teleren/devto huggingface dataset:
UX for Lean Startups - Book Review
Tags: ux, uiweekly, webdev, entrepreneurs
Published: 2023-03-29 19:01:12

**Are you struggling to improve your startup's user experience?** Have you read Laura Klein's UX for Lean Startups book yet?

"UX for Lean Startups" is a book that offers invaluable insights and knowledge to those interested in user experience (UX) design for startups. The book is a comprehensive guide that covers a range of topics, including how to conduct user research, design and test products, and build effective UX teams.

This book is a practical guidebook for entrepreneurs and product managers seeking a user-centered approach to UX design. The book introduces Lean UX, a methodology that combines Lean Startup and UX design principles to establish a continuous feedback loop for validating assumptions and enabling fast learning. 

Klein provides a step-by-step process for implementing Lean UX, including user research, personas, user flows, and usability tests, and also addresses agile development, product roadmaps, and essential metrics. The book emphasizes collaboration, communication, and a culture of experimentation and learning to create successful products that meet user needs.
 
Throughout the book, Laura offers practical advice and actionable insights on UX design, delivered in a clear and concise manner. Her comprehensive approach and skillful writing make it a valuable resource for both novice entrepreneurs and seasoned UX designers seeking to expand their knowledge and expertise. 

As a reader, you will find that the book is a pleasure to read and offers a wealth of information that is relevant to both experienced and novice UX designers. This book is not a one-time read, but rather a resource that can be revisited multiple times to gain new perspectives and ideas. With each visit, the reader's understanding of the subject matter is deepened, making it an essential addition to any UX designer's library.

Highly recommended for anyone looking to improve their skills in this field.

---

Thanks for reading this article, I hope you enjoyed it as much as I did writing it. Until next time, dear readers!

❤️ Your enjoyment of this article encourages me to write further.
💬 Kindly share your valuable opinion by leaving a comment.
🔖 Bookmark this article for future reference.
🔗 If this article has truly helped you, please share it.
Catatan Belajar SQL
Published: 2023-03-29 19:01:07

So this is what I note from learning SQL

**# Sample DB PostgreSQL**
This is sample DB that I download from Google
here is the [link](https://terabox.com/s/1wJ7wOHpliLy1k-nbBRRSzA) and here is the ERD Diagram

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

**IN**
The IN operator allows you to specify multiple values in a WHERE clause.
**Example :**

```sql
SELECT * FROM Customers
WHERE Country IN ('Germany', 'France', 'UK');
```

**BETWEEN**
 The BETWEEN operator selects values within a given range. The values can be numbers, text, or dates.
**Example :**

```sql
SELECT * FROM Products
WHERE Price BETWEEN 10 AND 20;
```

**UNION**
The following SQL statement returns the cities (only distinct values) from both the "Customers" and the "Suppliers" table
**Example :**

```sql
SELECT City FROM Customers
UNION
SELECT City FROM Suppliers
ORDER BY City;
```

**HAVING**
The HAVING clause was added to SQL because the WHERE keyword cannot be used with aggregate functions.
**Example :**

```sql
SELECT COUNT(CustomerID), Country
FROM Customers
GROUP BY Country
HAVING COUNT(CustomerID) > 5;
```

**CASE**
The CASE expression goes through conditions and returns a value when the first condition is met (like an if-then-else statement). So, once a condition is true, it will stop reading and return the result. If no conditions are true, it returns the value in the ELSE clause.

**Example :**

```sql
SELECT OrderID, Quantity,
CASE
    WHEN Quantity > 30 THEN 'The quantity is greater than 30'
    WHEN Quantity = 30 THEN 'The quantity is 30'
    ELSE 'The quantity is under 30'
END AS QuantityText
FROM OrderDetails;

```

**NOT NULL**
It is not possible to test for NULL values with comparison operators, such as =, <, or <>.

We will have to use the IS NULL and IS NOT NULL operators instead.

**Example :**

```sql
--is null
SELECT CustomerName, ContactName, Address
FROM Customers
WHERE Address IS NULL;

--is not null
SELECT CustomerName, ContactName, Address
FROM Customers
WHERE Address IS NOT NULL;
```

**EXTRACT (FOR DATE)**

We use EXTRACT function in PostgreSQL to get YEAR or MONTH from date type

**Example :**:

```sql
select
date_part('YEAR', last_update) as year, date_part('MONTH', last_update) as month   
from film f ;
```


Reference:
<https://www.postgresqltutorial.com/postgresql-date-functions/postgresql-date_part/>

Source:
[w3shoools](https://www.w3schools.com/sql/)
first year of coding
Tags: webdev, beginners, python, javascript
Published: 2023-03-29 18:58:04

![IIIT Delhi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvecs02i5i3x7o95kwjv.png)
_My college, IIIT Delhi_

---
Hi, my name is Hanoon. I picked up coding when I entered college, and it's been an amazing journey so far. Python was my first language.

I decided to learn Web Development as I found it to be fun. I started with [The Odin Project](www.theodinproject.com) which taught me everything from basic to entire apps. I learned Java, C, C++ and JavaScript by myself. One of my best project was a clone of popular mobile [Tank Stars](https://github.com/Hanoon02/Tank-Stars-Game) in Java.

After making some projects on my [Github](https://github.com/Hanoon02), I started working in technical clubs in my college as a Web Developer. I also did part time freelancing as Web Developer. Later, I got into Open Source development through Hacktoberfest. I began contributing to open source projects and discovered some new communities.

It's been a year now and I'm excited to continue my journey as a developer.
18 berufliches Vorwärtskommen: Dienen! Ab jetzt!
Tags: deutsch, career, austausch, 1min
Published: 2023-03-29 18:18:00

Moin Moin,

in welcher Rolle machst du fortan etwas für jemanden zu etwas brauchbar, also dienlich? 
Ich führe aus:
- Beamter
- Angestellter
- Selbstständiger
- [Gildenmitglied↗](https://www.dwds.de/wb/Gilde) (1)
- Unternehmer
- Anleger / Investor

In welcher dieser Rollen siehst du dich gerade?
In welcher kannst _du_ deiner Zielgruppe den größten Dienst erweisen? Oder in welcher Verknüpfung?

Beste Grüße,
Mustafa

Anhang:
Fällt dir noch eine weitere Rolle ein?
(1) „Zusammenschluss von Handwerkern und Kaufleuten oder von religiös Gleichgesinnten im Mittelalter zur Wahrung der gemeinsamen Interessen“ – [dwds.de↗](https://www.dwds.de/wb/Gilde)
Utilizando fontes customizadas no React Native
Tags: react, reactnative, programming, beginners
Published: 2023-03-29 17:43:30

As fontes customizadas são uma forma simples e eficaz de personalizar a aparência do texto num aplicativo React Native. Quando utilizadas, você pode garantir que o texto tenha a aparência desejada e ajude a criar uma experiência diferente para o usuário final.

Felizmente, implementar fontes personalizadas em um aplicativo React Native é bastante simples. Neste artigo, vamos ver como fazer isso e usar fontes personalizadas em seu aplicativo React Native.


**Adicionando fontes personalizadas  -**

Tudo o que precisamos fazer é criar um diretório de fontes, adicionar as fontes desejadas que queremos usar, criar um arquivo de configuração, adicionar o caminho e vinculá-los ao projeto. Veremos todo esse processo no decorrer deste artigo:


O Google Fonts é um local excelente para baixar fontes. Você pode visualizar e baixar as fontes de sua preferência no formato `.ttf`

Depois de baixar as fontes desejadas, criamos um diretório de fontes asset reservado para as fontes. O caminho deve ser assim:

`Directory/assets/fonts`

Ele ficaria parecido com isso:


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

Dentro da pasta `fonts` é onde ficará guardada todas as nossas fontes baixadas no Google Fonts, vamos apenas mover as fontes baixadas para lá.

Com as fontes movidas, criamos um arquivo chamado: `react-native.config.js` ele terá as configurações do projeto. O código deve ser assim:

```
module.exports = {
    project: {
        ios:{},
        android:{}
    },
    assets:['assets/fonts'],
}
```

**Vincule os Assets ao projeto -**

Depois que as etapas acima forem concluídas, podemos simplesmente executar um comando para vincular as fontes que acabamos de adicionar.

Para versões Reac-native abaixo: 0.69 
```
npx react-native link
yarn  react-native link
```

Para versões superiores a 0.69 ou iguais, comando é:

```
npx react-native-asset
```

Feito isso,basta adicionar as configurações de fonte na estilização, veja meu exemplo:

```
topoTitulo: { 
    fontFamily: 'Roboto-Black',
    fontSize: 25, 
    marginTop: 18,
    marginBottom: 10, 
    color: '#fff', 
    textAlign: 'center'},
```
 
Espero que os passos acima mencionados tenham ajudado você. Com isso, poderá customizar seu aplicativo com diversas fontes
Vue JS Essentials: A Beginners Series on Pinia, Vitest, and Supabase #2 Pinia, Tests And Mocking
Tags: vue, tutorial, javascript, testing
Published: 2023-03-29 17:33:48

In this video series, we'll show you how to build a multistep wizard with form validation and database persistence using Vue JS and related technologies. We'll start with the basics of Vue JS and add Pinia for state management, Vue-use-form for form validation, and Vitest for testing. 

The second video specifically focuses on demonstrating how to use Pinia for managing page state, user input for each of the steps in a wizard, and application state. Pinia is a state management library for Vue.js.

In addition to that, the video will also showcase how to write tests using the Vitest library for both the UI and the Pinia store. It will cover the process of mocking the Pinia store and demonstrate how to write unit tests for it. By the end of the video, you will have a clear understanding of how to use Pinia for managing state in your Vue.js applications and how to write tests for it using Vitest.

By the end of this video series, you'll have a solid foundation for building a multistep wizard with form validation and database persistence in Vue JS, Pinia, Vue-use-form, and Vitest.

## What Libraries We Are Using In Series
Vuejs - The Progressive JavaScript Framework. An approachable, performant, and versatile framework for building web user interfaces.
https://vuejs.org/

Pinia -The intuitive store for Vue.js. Type Safe, Extensible, and Modular by design. Forget you are even using a store.
https://pinia.vuejs.org/

Vitest - Blazing Fast Unit Test Framework. A Vite-native unit test framework. It's fast!
https://vitest.dev/

vue-use-form - A composition api form validator for vue
https://vue-use-form.netlify.app/

{% youtube W-D6h7Jne18 %}
#Python Operators
Tags: programming, python, android, news
Published: 2023-03-29 17:18:54

`#Python operatorlarni quyidagi guruhlarga ajratadi`
#- Arifmetik operatorlar 
#- belgilash operatorlari 
#- Taqqoslash operatorlari 
#- mantiqiy operatorlar 
#- identifikasiya operatorlari 
#- A'zolik operatorlari 
#- Bitli operatorlar 

`#python arifmetik operatorlari` 
#Arifmetik operatorlar umumiy matematik amallarni bajarish uchun raqamli qiymatlar bilan ishlatiladi:
Pycraft progress update!
Tags: programming, python, gamedev, opensource
Published: 2023-03-29 17:15:56

Hello there everyone! Its time for our weekly progress summary and this week was the first big test of the major changes we made to the way we work on updates, so in this article, we will be reflecting on how that transition went, and what we have been doing in this week of development!

For those unfamiliar, a week ago we made a major change to the way we worked on updates for Pycraft by sharing our progress to a dev branch on GitHub instead of only sharing code upon release. By doing this we can get much faster turnarounds on identified bugs and makes collaboration with other developers much easier. We have also made the entire GitHub repository more accessible by following a more commonly used structure and simplifying the repository considerably.

Now having recapped the work we did last week, this week we put that to the test and after a few days spent working out how to optimise our workflow to make the most of the adjustments, and to our surprise, Pycraft ran pretty much without fault through this transition, needing very little work to get to run, which is good news as it shows the added flexibility we introduced through the development on Pycraft v9.5.0 is working.

So all this meant we could get started on making improvements to Pycraft v9.5.0dev8 very quickly, so despite having allocated this week to get everything working, we were able to start making improvements early, and have already cleaned up many different areas of Pycraft, fixing 2 major bugs and making numerous behind the scenes improvements, like this change to the splash screen that we have also added, which we think makes Pycraft's startup look much cleaner:


![Pycraft's splash screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ruky7et8h1oz0kzz0aa.png)

Now, the main focus of Pycraft v9.5.0dev8 is to get the installer working and up to date, and so I think it would be wrong in talking about all the progress we have made without talking about the installer, which we have spent a large proportion of our week working on. Currently, we are updating the structure and design of the installer, and then from there, we will expand to support more features, like for example other operating systems. Expect the installer to become the focus of our progress over the next few weeks.

One final thing we would like to announce is that we are away next week, and subsequently, there will be no progress update next week - as we won't know what progress has been made - and we are currently unsure if the week after that we will have enough work done to discuss, so we might combine that into another two-week summary. Apologies for that!

Now, as we have been working on the installer this week, we are proud to share our progress here visually:


![Pycraft's initial install screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ud7qyxja75dme0vcr87c.png)
GitHub Copilot for CLI makes Terminal scripting and Git as easy as asking a question
Published: 2023-03-29 16:53:16

---
title: GitHub Copilot for CLI makes Terminal scripting and Git  as easy as asking a question
published: true
description: 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra2p4ivo2dlwbxnjales.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-29 16:47 +0000
---

I just got access to [GitHub Copilot CLI](https://www.npmjs.com/package/@githubnext/github-copilot-cli) and a few seconds after installing it, I am happy as a clam about it. 

{% youtube jdL3lq7KMV4 %}

You can see it in action [in this video](https://youtu.be/jdL3lq7KMV4) or let me talk you through it here. GitHub Copilot CLI brings AI code completion to your terminal. After installing it, you get three new commands:

* `??`: Translate natural language to arbitrary shell commands
* `git?`: Translate natural language to Git commands
* `gh?`: Translate natural language to GitHub CLI commands

I love using the Terminal, as it gives you a lot of power and it is a lot faster than other tools like Finder or Explorer. The issue is though that it is not easy to remember the sometimes cryptic syntax of bash commands and attributes of command line tools. 

This is where Copilot CLI helps. Say you want to convert all the videos in the current folder to mp4 and resize them to 640 pixels width, keeping the aspect ratio. All you need to do is write `?? convert all videos in the folder to mp4 and resize them to 640px` hit enter. You get a suggestion of code that will do that task and a detailed, human readable explanation what the code does.

![screenshot of the terminal with the answer by copilot and a human readable explanation what the code does.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnkd8w1f5cwzv294du2f.png)

You can choose to run the command immediately, revise your input in case something feels off or cancel and go back to the terminal.

Another prompt I tried was `?? find all files bigger than 500mb and copy them to a folder called huge` and the result was immediate.

![Finding big files in a folder and moving them to a dedicated folder as explained by CoPilot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2hprcx48iykgzo52csy.png)

I like that it doesn't only give you the result, but also explains what the code does. This often is missing from answers on StackOverflow and other forums. 

It will be interesting to see where this goes. The Terminal is a mighty tool and you can do a lot of damage if you are not aware of the consequences of your commands. It would be interesting to see Copilot also give you some safety instructions with every command it offers.
Adding Algolia to a NextJS Typescript Prismic project
Published: 2023-03-29 16:48:36

---
title: Adding Algolia to a NextJS Typescript Prismic project
published: true
description: Adding Algolia search functionality to a NextJS Typescript project with a Prismic CMS. This shows adding a search to a list of posts on the site.
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-29 16:45 +0000
---

Adding Algolia search functionality to a NextJS Typescript project with a Prismic CMS. This shows adding a search to a list of posts on the site.

{% embed https://www.youtube.com/watch?v=Aa35WWNOEBk %}
the repo is: https://github.com/ayseboogie/prismic-ts

Algolia Secured API keys in React page: https://www.algolia.com/doc/guides/building-search-ui/going-further/api-keys-security/react/
Creating a NextJS Typescript project using a Prismic CMS
Published: 2023-03-29 16:38:43

---
title: Creating a NextJS Typescript project using a Prismic CMS
published: true
description: 
tags: 
# cover_image: 
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-21 22:16 +0000
---

Prismic's documentation is good, but I could not find a typescript starter tutorial..so I made one.

I set my project up using Tailwind and Prettier, show dynamic routing, and how to set up Page Previews and Slice Screenshots.

{% embed https://www.youtube.com/watch?v=C-hZXjP7sC0 %}
the repo is: https://github.com/ayseboogie/prismic-ts
how to make any rounded shape way more sexy? (css only)
Published: 2023-03-29 16:14:23

The problem with computer rounding is its unnaturalness.

If you build a rectangle in the graphical editor, and then add a fillet to it, a circle will simply be entered into its corner.

Because of this, a form arises that does not occur in the real world. To make the bend look natural, the line should change shape gradually.

Ultimately, the researchers found that users liked shapes with smooth curves more than those with sharp lines.

Sharp objects often signal danger. Slight curvature and bulges are characteristic of living organisms.

``` css
.squircle { aspect-ratio : 1/1; background: inherit; position: relative; border-radius: 20%; }
.squircle::before, .squircle::after { content: ""; position: absolute; z-index: -1; background: inherit; }
.squircle::before { border-radius: 2%/30%; top: 15%; bottom: 15%; right: -1%; left: -1%; }
.squircle::after { border-radius: 30%/2%; left: 15%; right: 15%; top: -1%; bottom: -1%; }
```
Just add `.squircle` class to your element and set `width` and `background` of the element.
_the only limit is that the element must have a 1/1 ratio_
Insertar elementos en un índice específico de un array en JavaScript
Tags: javascript, webdev, programming, spanish
Published: 2023-03-29 16:00:00

En este post vamos a ver como insertar elementos en un índice específico de un array en JavaScript. Para ello vamos a utilizar el método [splice()](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/splice).

Consideremos el siguiente array, que hace referencia a un menú de barra lateral:

```js
const sideBarMenu = ['Inicio', 'Sobre', 'Contacto', 'Blog']
```

En caso de que un usuario inicie sesión, el menú debe mostrar la opción de `Perfil` antes de `Sobre`.

## Agregar elementos en un índice específico

Para realizar la tarea descrita, se puede utilizar el método `splice()`, este nos permite insertar elementos en un índice específico de un array e incluso eliminar elementos.

Para agregar un elemento, utilizamos los primeros dos parámetros del método `splice()`, y en el tercero se especifica el elemento que queremos insertar.

```js
if (isLogged) {
  sideBarMenu.splice(2, 0, 'Perfil')
}
```

Ahora, la variable `sideBarMenu` tiene los siguientes elementos:

```js
['Inicio', 'Sobre', 'Perfil', 'Contacto', 'Blog']
```

El método `splice()` recibe 3 parámetros:

- El índice donde queremos insertar el elemento.
- El número de elementos que queremos eliminar.
- El elemento que queremos insertar.

En nuestro ejemplo, la posición del índice es `2`, y no queremos eliminar ningún elemento, por lo que el segundo parámetro es `0`. El tercer parámetro es el elemento que queremos insertar, en este caso `Perfil`.

> **Nota:** El índice de un array comienza en `0`. En el ejemplo anterior, el índice `2` inserta el elemento `Perfil` en la posición `3`.

## Agregar varios elementos en un índice específico

Una característica interesante del método `splice()` es que podemos insertar varios elementos a partir de un índice específico.

```js
if (isLogged) {
  sideBarMenu.splice(2, 0, 'Perfil', 'Cerrar Sesión')
}
```

De esta manera la variable `sideBarMenu` tiene los siguientes elementos:

```js
[ 'Inicio', 'Sobre', 'Perfil', 'Cerrar Sesión', 'Contacto', 'Blog' ]
```

Listo, ahora ya sabes como insertar elementos en un índice específico de un array en JavaScript utilizando el método `splice()`.
swapfile vs swap-partition: some steps to organize swapiness in linux
Tags: linux, python, apache, hdd
Published: 2023-03-29 15:43:06





to do this - we can go round to create swap in partition - we easily do it with the file-creation 
here we go: 


This process is allmost completly done in terminal. 

that said - you will see that allmost every command lines will be listed here and


**step 1** start the terminal and type in this command to create a swap file:

`sudo fallocate -l 2G /swapfil`

**note:** this tiny command will do alot: it just creates a 2 GB swapfile. So, if you need a even taller size of the so called swap file, just replace the number above  2G in the command you like more with the number you want. 2G represents a very cool swap file size. That said. If you need to have 4 GB or 8 GB swap file, then we need to type in 4G or even 8G in the command


Next step is to set permissions for the swap file. this is pretty very important: we here use the command:

`sudo chmod 600 /swapfile`
# note: i think that this is very important.

Now we go ahead and do even more: we now need to format the file as swap. Type the command:

`sudo mkswap /swapfile
# this is very important.`


After this command- now we can activate the swap with this tiny following command:


`sudo swapon /swapfile`

so far so good: the next step is to make the changes durable - in other words they should last long. 
so the next what we need to do is to make these changes really lets say permanent and make it so that the swap is active all the time.

that said - we now need to go to the fstab and finally have to edit the fstab file with an text editor of our choice. for example we can use nano text editor and access the fstab file with this command:

`sudo nano /etc/fstab`

and besides this - we can now do the following: in the fstab file, add the following line:

`/swapfile swap swap defaults 0 0`

ready - now we need to restart the notebook and then we are done