teleren/devto huggingface dataset:
What are the first 10 apps you install on a new computer?
Tags: help, productivity, watercooler, webdev
Published: 2021-12-18 21:33:53

I recently bought a new MacBook and don't know where to start. I learned how to code on a used MacBook Air and installed everything from any list of apps I found online. 

But after random keys stopped working, it felt like a good opportunity to put my that old thing away and get more comfortable working in a Windows environment.

Instead, I just found myself writing less code because logging onto my Surface felt like work.

![Thats The Worst Thing Happen This Is The Worst GIF](https://c.tenor.com/8ikWPrZSPHcAAAAC/thats-the-worst-thing-happen-the-worst.gif)

But now that I've bought a new MacBook, I don't really know how to kick things off again.

I installed the basics:
1. VS Code
2. Git
3. Bear and RemNote
4. Top Notch

But after that, I'm drawing a blank. 

My old laptop was decked out so much it was running out of space. But this new one is precious. It deserves only the finest apps. This is why I'm seeking some inspiration from the Dev community. 

### What are your top 10 apps for a fresh MacBook? 

If you had to chooser only 10 apps, what are fave apps for coding, productivity, or anything else that brings you joy? Nothing questionable or that's impossible to remove down the line.

![wish list gif](https://media0.giphy.com/media/1TSHxNUZh1FdzUpFWK/giphy.gif?cid=ecf05e47dikullq5nwyt3mxmiulj3iiapackcwitmumid9t3&rid=giphy.gif&ct=g)

Updating the list as I rediscover some old faves:
1. VS Code
2. Git
3. Bear / RemNote / Tab Notes
4. Top Notch
5. Node
6. Postman
7. Homebrew
8. Chrome
9. Discord / Slack


Photo by Ron Lach from Pexels
MailerLite Review - E-Mail-Marketing und Automatisierung
Tags: onlinemarketing, newsletter
Published: 2021-12-21 19:18:43

---
title: MailerLite Review - E-Mail-Marketing und Automatisierung
published: true
date: 2021-12-21 17:50:49 UTC
tags: OnlineMarketing,newsletter
canonical_url: https://bloggerpilot.com/mailerlite/
---

![MailerLite Review](https://bloggerpilot.com/wp-content/uploads/2021/11/mailerlite-review.png)

Wenn du als kleines Unternehmen eine E-Mail-Marketingkampagne starten willst, musst du gut über die verfügbaren Optionen informiert sein. Die Zahl der E-Mail-Dienstleister ist groß, und obwohl viele von ihnen gut sind, gibt es auch viele, die nicht so ideal sind. Es gibt MailerLite, ein Unternehmen, das eine Reihe von E-Mail-Diensten und -Produkten anbietet, darunter ein kostenloses E-Mail-Marketing-Tool namens Mailerlite.

Der Original-Artikel erschien auf [MailerLite Review - E-Mail-Marketing und Automatisierung](https://bloggerpilot.com/mailerlite/).

MailerLite ist ein Produktionswerkzeug für den Versand von Newslettern, Berichten und anderen Geschäftsdokumenten per E-Mail. Damit kannst du die von dir erstellten Dokumente mit verschiedenen Vorlagen, E-Mail-Adressen und Betreffs verschicken. In diesem Beitrag stellen wir dir einige der verschiedenen Preisoptionen vor. MailerLite ist ein kostenloses, leichtgewichtiges, selbstgehostetes E-Mail-Programm, das in Java geschrieben wurde. Sie ist so konzipiert, dass du keinen Mailserver installieren oder benutzen musst. Sie kann im Web oder auf dem Desktop genutzt werden. Sie hat eine einfache Benutzeroberfläche ohne zusätzliche Funktionen.

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

MailerLite ist eine neue Art des E-Mail-Versands, an der wir in den letzten 7 Monaten gearbeitet haben. Das Ziel ist es, das Versenden von E-Mails so einfach zu machen wie das Versenden eines Bildes. Zurzeit verwendet MailerLite das gleiche E-Mail-Konto, das du bereits benutzt. In Zukunft planen wir, den Versand von Google Mail, Outlook.com, iCloud und mehr zu unterstützen. Der folgende Text erklärt den Prozess und die Einstellungen, die nötig sind, um MailerLite zum Laufen zu bringen.
React core concepts
Tags: javascript, react, reactcoreconcepts
Published: 2021-12-22 07:03:39

**JSX**

JSX is a JavaScript syntax extension that provides a way to structure component rendering using syntax familiar to many developers. It is similar in appearance to HTML.

**Prop Types **

Prop Types is Reacts internal mechanism for adding type checking to components. React components use a special property named prop Types to set up type checking. When props are passed to a React component, they are checked against the type definitions configured in the prop Types property.

**state props **

In a React component, props are variables passed to it by its parent component. State on the other hand is still a variable but directly initialized and managed by the component. The state can be initialized by props. and any other method in this class can reference the props using this

**Component Lifecycle**

React components have a lifecycle. It has three phases. Mounting (componentDidMount -> Updating (componentDidUpdate)-> Unmounting (componentWillUnmount)

**How React Hook works, send state via props, props vs state**

useState, useEffect is called Hook in React.
If the state is used in any component is called Stateful Component and doesn’t contain the state is called Stateless / Presentational component.
Difference between state and props - Interview Important - Main difference is: props are Read-only, but the state can be changed.

**Custom hooks**

Custom Hooks lets you extract component logic into reusable functions.

**Context API**

Normally when we pass data from one component to another component it is called props dealing. But when we have to send data down to 4 to 5 components, we can use context API. If we use the context API, we don't have to deal with props, we can import and use data wherever we need it.

**Virtual DOM and diffing- algorithm**

When we made a React app, React creates a virtual DOM internally by combining all the components and sending it to the browser. The browser renders it and displays it. If the user does something in UI and needs to update the Browser DOM, React compares only the changed part with its old virtual DOM and updates it significantly faster-using diff algorithm and sends the browser only the changed part for the update. The browser immediately updates it in the browser DOM and displays it.
To-do list for 2022
Tags: webdev, react, motivation, programming
Published: 2021-12-24 16:18:55

I haven't written in a while, so today I decided to write down the things that have been in my mind. Sort of a list of goals for 2022, but I am calling it a to-do list to give me some extra motivation.

I will have 2 lists, a professional and a personal.

## Professional To-do 2022
- REALLY learn ReactJS, I started several times but always lose motivation. But 2022 will be the year that I learn React 🤣
- Get my Spanish to Advanced level, I want to do DevRel work focused on LATAM, and Portuguese will just take me so far. (*Please recommend me Spanish speaker devs to follow!*)
- More public speaking! 2021 was a great year for me on this, but next year I want to do even more, specially in English!
- Content Calendar: This year I burned out wanting to create content in too many formats and too often. For next year I will do less, but better.


## Personal
- Okay, I need to start some form of exercising. I am 30 but my body hurts like it is 90 🥲  I am thinking Pilates.
- I am moving back to Brazil after almost 9 years in the USA. 
- This one is a Personal goal but very professional: Finish writing and Publish my book.


That is all I can think of right now.
I hope I can look back here in 6 months and feel confidente!
Meep - a simple Web Audio API demo
Tags: codepen
Published: 2021-12-25 04:04:19

<p>This is a minimalistic Web Audio API experiment. You can play via mouse, via touch and via keyboard (asdfghjkl and the black keys, wetyu). For now, german and english keyboard layouts are supported.</p>

<p>Browser support: <a href="http://caniuse.com/#feat=audio-api" target="_blank">http://caniuse.com/#feat=audio-api</a></p>

{% codepen https://codepen.io/harunpehlivan/pen/dyVZvwO %}
Create a simple time ago component in Vue using Moment.js
Tags: momentjs, vue, javascript, timeago
Published: 2021-12-26 23:28:21

Ever needed a time ago component where you can parse a datetime string and get your date in the format like **10 days ago** , **a year ago** etc.? Well you could create that easily in [vue.js](https://vuejs.org/) using [moment.js](https://momentjs.com/).

Let's dive straight into it.

1. Install moment.js using npm `npm install moment --save` or with yarn `yarn add moment`
2. Create a new component. You can name it TimeAgo.vue
3. In your component

```javascript
//TimeAgo.js
<template>
<span>{{convertedDateTime}}</span>
</template>
<script>
import moment from 'moment'
export default {
  name: "TimeAgo",
  props:{
    dateTime:{
      required:true
    }
  },
  computed:{
    convertedDateTime(){
     return moment(this.dateTime).fromNow();
    }
  }
}
</script>
```

to use it in your project

```javascript
<template>
...
<time-ago :dateTime='new Date()'/>
...
</template>
<script>
import TimeAgo from "@/components/TimeAgo";

export default {
...
  components: {
    TimeAgo
  }
...
}
</script>
```

and thats it. This should work in vue 2 and vue 3 without any issues. if you need to extend it you can see the [moment.js docs](https://momentjs.com/docs/#/displaying/from/)
SSC Result 2021 Published Date 30 December 
Tags: result, news, ssc, webdev
Published: 2021-12-25 06:37:13

SSC result 2021 will be published on 30 December. The Board of Education has said that although the SSC exams started late due to Corona virus, the results will be released soon. So the Board of Education will finally publish the results of all the boards at once. So the results of SSC examination will be published this month.


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

### Official Result Published Link

- [SSC Result 2021 Published All Education Results](https://examresultsbd.com/ssc-result-bd/

- [SSC Result Marksheet 2021 Download All Board](https://examresultsbd.com/ssc-result-2021/)
Create Loading Animation with CSS only
Tags: webdev, beginners, css, tutorial
Published: 2021-12-25 07:35:42

Hello! Everyone, Today we are going to create Beat Bar type loading animation with css only.

Check What we going to create
{%youtube Ys4HNb9UdCY %}





##HTML
We have to create four `<div>` element.

```html
<body>
  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>
  <div class="box" id="box3"></div>
  <div class="box" id="box4"></div>
</body>
```

#CSS

```css
*{
  margin:0;
  padding:0; 
}
```

Now center our `<div>`
```css
body{
  background:#444;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
```
Now style our `box`

```css
.box{
  width:20px;
  height:20px;
  background: white;
  margin:5px;
}
```
Now we're going to use `nth-child()` pseudo selector.

```css
.box:nth-child(1){
  background:red;
  animation: balls 1s linear infinite;
}
.box:nth-child(2){
  background:cyan;
  animation: balls 1s  0.1s linear infinite;
}
.box:nth-child(3){
  background:blue;
  animation: balls 1s 0.2s linear infinite;
}
.box:nth-child(4){
  background:yellow;
  animation: balls 1s 0.4s linear infinite;
}
```
Now it's time to animate using `keyframes`

```css
@keyframes balls{
  0%{
    transform:sclaeY(1);
  }
  50%{
    transform:scaleY(3);
  }
  100%{
    transform:sclaeY(1);
  }
}
```

I hope you love it.
[Support me](https://buymeacoffee.com/devrohit), If you can
Laravel Jetstream vs Laravel ui  vs Breeze
Tags: laravel, php, programming, computerscience
Published: 2021-12-25 09:47:07

In this blog we are going to see the main difference between Laravel Jetstream vs Laravel ui  vs Breeze. So Guys please like the post and visit my website>>>

[Click Here to Read this Blog](https://codexashish.blogspot.com/2021/12/laravel-jetstream-vs-laravel-ui-vs.html)

Thankyou
twitter heart - step #9 (1 element, no sprite, no JS)
Tags: codepen
Published: 2021-12-25 11:16:54

<p>Created for my <a href="https://css-tricks.com/recreating-the-twitter-heart-animation/">Recreating the Twitter Heart Animation</a> article on CSS-Tricks.</p>

{% codepen https://codepen.io/thebabydino/pen/gMgYqW %}
Flexbox - Override 'justify-content' on Child Items
Tags: css, webdev
Published: 2021-12-25 13:45:45

There are times when we want to place a specific child item out of flexbox context, so we have granular control on its placement relative to its parent. `justify-self` doesn't seem to work, contrast to its sibling `align-self`.

The [flexbox layout specification](https://www.w3.org/TR/css-flexbox-1/#abspos-items) talks about absolutely-positioned children:

> As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

Taking this into account, we can let flex items of choice opt-out flexbox layout, and be positioned using `position:absolute` property.

{% codepen https://codepen.io/deepakdevanand/pen/dyVZvqp %}
Advent.js🎅🏼| #22: ¿Cuantos adornos necesita el árbol?
Tags: javascript, adventofcode, webdev, spanish
Published: 2021-12-25 17:08:11

## [¿Cuantos adornos necesita el árbol?](https://adventjs.dev/challenges/22)

¡Ay! Que llega la Navidad y no hemos decorado todavía el árbol. 🎄😱

Necesitamos una función que pasándole un árbol binario nos diga el número de decoraciones que necesitamos. Para ello tenemos un objeto que sería la representación del árbol y que nos indica en cada nivel el número de ramas a decorar.

Lo mejor es que veamos un ejemplo:

```js
// tenemos el árbol en forma de objeto
const tree = {
  value: 1, // el nodo raíz siempre es uno, porque es la estrella ⭐
  left: {
    value: 2, // el nodo izquierdo necesita dos decoraciones
    left: null, // no tiene más ramas
    right: null // no tiene más ramas
  },
  right: {
    value: 3, // el nodo de la derecha necesita tres decoraciones
    left: null, // no tiene más ramas
    right: null // no tiene más ramas
  }
}

/* Gráficamente sería así:
    1
  /   \
 2     3

1 + 2 + 3 = 6
*/

countDecorations(tree) // 6

const bigTree = {
  value: 1,
  left: {
    value: 5,
    left: {
      value: 7,
      left: {
        value: 3,
        left: null,
        right: null
      },
      right: null
    },
    right: null
  },
  right: {
    value: 6,
    left: {
      value: 5,
      left: null,
      right: null
    },
    right: {
      value: 1,
      left: null,
      right: null
    }
  }
}

/*
        1
      /   \
     5     6
    /     / \
   7     5   1
  /
 3
*/

countDecorations(bigTree) // 28

```

Por cierto, Bellf Gates me ha contado que este tipo de ejercicio es muy típico en las entrevistas de trabajo para programadores. ¿Lo sabías?

Completa el reto!

---
Te dejo una posible solución:


{% jsitor https://jsitor.com/embed/xl1T7o5rW %}

---
Puedes seguir a @midudev y estar pendiente de los retos de Advent.js 

{% twitter 1466086678507008003 %}
Advent.js🎅🏼| #24: Comparando árboles de navidad
Tags: javascript, webdev, adventofcode, spanish
Published: 2021-12-25 17:22:10

## [Comparando árboles de navidad](https://adventjs.dev/challenges/24)

El abuelo 👴 dice que ve todos los árboles de navidad iguales... La abuela 👵, en cambio, piensa que no. Que todos los árboles de navidad son distintos...

Vamos a hacer una función que nos diga si dos árboles de navidad son iguales. Para ello, vamos a comparar [los árboles que ya creamos en el reto 22.](https://dev.to/duxtech/adventjs-22-cuantos-adornos-necesita-el-arbol-3518)

Tenemos que ver si ambos árboles tienen la misma estructura y los mismos valores en todas las ramas. Aquí tienes unos ejemplos:

```js
const tree = {
  value: 1,
  left: { value: 2, left: null, right: null },
  right: { value: 3, left: null, right: null }
}

checkIsSameTree(tree, tree) // true

const tree2 = {
  value: 1,
  left: { value: 3, left: { value: 2, left: null, right: null }, right: null },
  right: { value: 5, left: null, right: { value: 4, left: null, right: null } }
}

checkIsSameTree(tree, tree2) // false
checkIsSameTree(tree2, tree2) // true

```
El cuñado 🦹‍♂️, que se las sabe todas, me ha dicho que tenga cuidado porque **el truco del JSON.stringify puede no funcionar...** ya que los árboles pueden ser el mismo pero el orden de representación de las ramas izquierda y derecha puede ser inversa... 

Completa el reto!

---
Te dejo una posible solución:


{% jsitor https://jsitor.com/embed/ySuYhR3dm %}

---
Puedes seguir a @midudev y estar pendiente de los retos de Advent.js 

{% twitter 1466086678507008003 %}
Simple CSS Text Animations
Tags: css, webdev, codenewbie, beginners
Published: 2021-12-25 18:20:00

Hi, I made some simple CSS text effects that can be used in your projects, these are beginner level animations. The code is not optimized and accessibility is not taken into account. I just want to show that animations like these can be made using CSS. You can use these simple animations with your creativity to make awesome text animations, hope you will like this. Happy Coding !!

{% codepen https://codepen.io/kiran-r-raj/pen/dyVVPPM %}
{% codepen https://codepen.io/kiran-r-raj/pen/MWEvRPW %}
{% codepen https://codepen.io/kiran-r-raj/pen/XWeezGo %}
{% codepen https://codepen.io/kiran-r-raj/pen/bGoWgaj %}

My [collection](https://codepen.io/collection/RzReVd) of text effects in [codepen](https://codepen.io/collection/RzReVd).
BEM CSS Architecture
Tags: bem, css, architecture, html
Published: 2021-12-25 19:09:07

Hey Guys,Today i am going to talk about css `BEM` architecture.BEM stands for `Block,Element,Modifiers`.Three separated words.BEM is nothing but class naming convention.


```html
<div class="card">
      Modifiers
      <div class="card__header"></div>
      <div class="card__body"></div>
      <button class="card__button--red"></button>
</div>
```
In above code you can see we have a `card` div.Here `card` is `B => block` and `card__body,card__header` all of those are 'E => element'.Yes,you just write block name add `__` and write element name.Here `card__button--red` is our `M => modifier`.you add `--` with element and write modifiers name.

BEM has good use cases.It helps a lot while writing css code specially while writing  css pre-processor `sass/scss` code.Take a look.

```css
.card {
    &__header {}

    &__body {}

    &__button--red {}
}
``` 
Wow nice combination .Right?

If you are not using this try it today.This will make you life easier.

Thanks ❤
Laravel 8 Razorpay Payment Gateway Integration Example
Tags: laravel
Published: 2021-12-26 07:10:34

Hello Dev,

This tutorial is focused on razorpay payment gateway integration in laravel 8. i would like to share with you laravel 8 razorpay pay example. i explained simply step by step laravel 8 razorpay integration. Here you will learn razorpay integration in laravel 8. So, let's follow few step to create example of razorpay api integration in laravel 8.

razorpay payment gateway is for india. they provide lot's of option like credit card, debit card, UPI, phone pay, google pay, paytm payment option to do payment of user. so if you want to implement razorpay integration in your laravel app then you can do it by following bellow few steps. you can see bellow preview too:

[Laravel 8 Razorpay Payment Gateway Integration Example
](https://www.codecheef.org/article/laravel-8-razorpay-payment-gateway-integration-example)
Advent of Code 2021 - Day 25
Published: 2021-12-27 07:49:36

---
title: Advent of Code 2021 - Day 25
published: true
description: In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
tags:
cover_image: https://i.ytimg.com/vi/KyIQBhcLjgQ/maxresdefault.jpg
---

{% youtube KyIQBhcLjgQ %}

In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
Predictable UX
Published: 2022-01-18 19:48:34

---
title: Predictable UX
published: true
date: 2022-01-18 16:20:00 UTC
tags: 
canonical_url: https://kevincox.ca/2022/01/18/predictable-ux/
---

<main><p>Good UX is predictable. I can operate it with my eyes closed because I know what is going to happen. A predictable UX means that I don’t need to react to what my tool is doing.</p>
<p>Imagine you were walking on a tile floor. The tiles look identical but may be grippy rubber or slick ice. If the floor is all rubber you can run across. If the floor is all ice you can slide almost as quickly. However if the tiles are mixed you can’t move quickly. You need to make every step carefully to decide if it will slip or stick. This is what using unpredictable UX feels like.</p>
<h2 id="example"><a href="https://kevincox.ca/2022/01/18/predictable-ux/#example">Example</a></h2>
<p>The <a href="https://support.google.com/android/answer/9079644">Android gesture navigation</a> is a good example of unpredictable navigation. It sounds like a good experience; you simply swipe up to access a list of recent windows, and it takes less space on the screen than a button. However, the left and right swipes are unpredictable, which makes it annoying to use.</p>
<aside><p><strong>Note</strong>: I’m talking about swiping on the bottom edge. Not swiping in from either side which is the “back” gesture that goes back either within or across windows.</p></aside><p>At first, swiping right switches to the previous window. This is similar to double tapping the app switcher (square) button on the old three-button navigation. The flaw is that swiping right again can either go back another window or go to the new previous window (the one you were just looking at). I still don’t fully understand how long it takes for this heuristic to reset. Take an example user journey of copy+paste of a couple bits of text between two apps:</p>
<ol>
<li>Copy text in source app.</li>
<li>Swipe right to go to previous window (sink app).</li>
<li>Paste.</li>
<li>How do I get back to the source app???</li>
</ol>
<p>Step 4 is unpredictable. If I was slow I need to swipe right, because the “previous” app is the source app. But if I am fast enough I need to swipe left because I am in the same navigation session!</p>
<p>The three-button navigation got this right. Repeatedly double-tapping the app switcher button just cycled between the most recent two apps forever. It was perfectly predictable. I could switch between windows with my eyes closed, subconsciously and did not need to react to the device. It does mean that getting to the third or fourth most-recent window is slightly less convenient, but it is predictable. Given that I rarely remember what the third most recent window is anyways this is a better trade-off.</p>
<p>If I were in charge of Android I would change gesture navigation as follows:</p>
<ol>
<li>Swipe right always goes to the previous window.</li>
<li>Swipe left goes “back” so that they can give edge swipes back to apps. I really don’t need swiping from the entire either edge of my screen as a back gesture.</li>
</ol></main>