teleren/devto huggingface dataset:
The last-child vs last-of-type selector in CSS
Tags: css
Published: 2021-06-03 10:53:06

---
title: The last-child vs last-of-type selector in CSS
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Let's say we have the following HTML:
```markup
<div>
    <h1>First h1</h1>
    <h1>Second h1</h1>
    <p>First paragraph</p>
    <p>Second paragraph</p>
</div>
```

If we want to target the last child of the div we will use:
```css
div :last-child {
  color: red;
}
/*note the white space between div and :last-child*/
```

While if we want to target the last child of the div only if that child is a `p` element then we will have:
```css
div p:last-child {
  color: red;
}
```

On the other side, `last-of-type` will target the last occurrence of that type of element. So, let's say we want to target the last occurrence of an `h1` element in a div:
```css
div h1:last-of-type {
  color: blue;
}
```

The `last-of-type` does not need to be the last child. 

There are also many complementary alternatives for these selectors like : `:first-of-type`, `:nth-last-of-type`, `first-child` etc.

As usual Chris, from CSS Tricks, has a [great article about this](https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/). 

Below is a small example: 
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="js-craft" data-slug-hash="MWpoNqX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="last-of-type vs last-child ">
  <span>See the Pen <a href="https://codepen.io/js-craft/pen/MWpoNqX">
  last-of-type vs last-child </a> by JS Craft (<a href="https://codepen.io/js-craft">@js-craft</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

first published on [http://www.js-craft.io/blog/the-last-child-vs-last-of-type-selector-in-css/](http://www.js-craft.io/blog/the-last-child-vs-last-of-type-selector-in-css/)
DevOps Strategy and Automation Solution for Financial Company
Tags: devops
Published: 2021-06-03 11:04:56

**DoubleCheck** - a financial service company was trying to find a way to link their current systems with credit unions and banking core systems. They ultimately aimed to automate several processes. Our [DevOps engineers] (https://www.softwebsolutions.com/devops-consulting-services.html) consulted the company and learned about the system issues, along with their development and deployment processes.

[Get Your Free Copy Now] (https://go.softwebsolutions.com/resources/devops-strategy-and-automation-solution-for-fintech.html)

After a thorough evaluation, we identified their architectural flaws and proposed a DevOps strategy. We fixed the bugs in their code and helped them scale their services by automating their CI/CD pipelines. Our client now has flexibility with its streamlined processes and leverages the well-functioning databases and applications.

**Key Features:**

Agility and flexibility
Integration efficiency
Cost reduction
Regulations compliance
Extended legacy
Faster time-to-market
Increase profitability
Refactoring the Pomodoro Timer: Components
Tags: react, refactorit, javascript, webdev
Published: 2021-06-03 10:52:04

Previously I wrote a Pomodoro timer app. The code is contained in [a single React component.](https://github.com/NatRavenhill/PomodoroTimer/blob/original/src/Session.jsx) This is generally bad practice - we want components to each be responsible for a single bit of functionality and be reusable, so we will we split out functionality into smaller components.

First I made a folder called "components", which will house the sub components and their styles.

There are 3 elements we can immediately split out:
1. The main timer and button ("Tomato" element)
2. The Break length controls
3. The Session length controls

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj1sv14gz0onp5dmvko2.png)

## Break Length
This section has a `breakLength` value contained in the state and two button handler methods to increase/decrease this value.

First, we create a new component called `BreakLength` and paste the JSX into the render method. As we are now in a child component, and React has unidirectional data flow, we cannot update the `breakLength` value in the parent component from the `BreakLength` component. 

Therefore, we pass a reference to the method into the `BreakLength` component as a property and call this in a new `onClick` handler. This will call the parent method and update its state.

The `breakLength` value is passed to the new component as a child property. When the state is changed in the parent, this will change the property value and re-render the `BreakLength` component.

{% gist https://gist.github.com/NatRavenhill/f954f21a2078906e880040668422423a %}

## Session Length
This is refactored in the same way:

{% gist https://gist.github.com/NatRavenhill/75fe0144a468fe2dd9e7e8998a0dcb85 %}

## Tomato
The Tomato has 2 functions - `handleStartStop` and `handleReset`. Again, we pass references to these as properties and call them in the `onClick` handlers in the child Tomato component. The minutes and second properties are passed as props to the Tomato component.

{% gist  https://gist.github.com/NatRavenhill/2abf8d7dfebe8ade1b94ffbbc783064c %}

Now our main component is much smaller and we have a better separation of concerns. We can also extract some of the styles in `Session.css` that only apply to the Tomato into a new CSS file and include it just in this component.
Toda la información sobre Terrasa que puedas llegar a necesitar, puedes encontrarla en pocos clics
Tags: barcelona, terrasa
Published: 2021-06-03 10:42:44

La provincia de Barcelona tiene muchísimo que ofrecernos, ¿no crees? Cuenta con una cultura y una tradición de ensueño y esa es la razón principal por la que muchos turistas deciden visitarla. En Barcelona se respira un ambiente que no encuentras en otros lugares y eso la hace tan original. Sin embargo, yo siempre recomiendo no ceñirse a lo básico. ¿Sabías que en la provincia de Barcelona hay mucho más que el mismo centro de la ciudad? Si buscas información sobre Terrassa, por ejemplo, sabrás de lo que hablo. 

Puede que en esta ciudad no te encuentres las características obras gaudianas de la capital, pero sí que verás la la Masia Freixa, inspirada en el arte de Gaudí. ¡Y muchas más cosas! La gastronomía, por ejemplo, es genial.

En la web de https://www.barcelonaexiste.es/barcelona/terrassa/, encontrarás toda la información sobre Terrasa que necesitas para disfrutar de este bonito lugar. Encontrarás un amplio directorio de datos de contacto de todo tipo de profesionales.

La información sobre Terrasa que ofrecemos es útil tanto para locales como para turistas. Así que te animo a echarle un vistazo.
Data Factory Error - "Found More Columns Than Expected"
Tags: azure, cloudskills, data
Published: 2021-06-03 10:02:41

One popular ETL tool in Azure is Data Factory, which is like a cloud version of SSIS for those who are familiar with SSIS. While we could get this error in a variety of situations, the key to pay attention to is the number in the error - such as the row number and have an idea of the expected columns that should be in the result. We see more details about this in the video, [Error found when processing 'csv' source 'file' with row number: found more columns than expected](https://www.youtube.com/watch?v=e2PAPuyujK4).

Some questions that are answered in the video:

- In the example, what was the mistake that caused this error?
- How would we solve this error in the example? Considering our environment and where we may see this, how might we solve this error?
- What is at least one way that we could prevent this error from happening?

The latter question is one to consider if you've seen this error several times. Data factory is not a tool that makes it easy to dynamically update content and you want to be careful about building convoluted pipelines to handle rare issues (unless these rare issues cause serious disruptions). The reason that this could be a drawback is that you'll have to support these pipelines and it's not always clear what the issue is.

My general preference in ETL is to avoid tools like SSIS or data factory because they don't consider what could go wrong and how to easily solve the issue. I would be careful about using either of these tools, as they feel easy to develop, but come with significant costs in troubleshooting.
How to hide the yellow box on React Native
Tags: reactnative, expo
Published: 2021-06-03 09:46:29

Sometime , the yellow box warning is very annoying . The lock part of the UI so somehow we can interact to our app. Ok . Here I will show you a quick way to hide it .

Remember , some yellow box is helpful to show potential error , so you should never hide it all , only hide those happen regularly and you already know about it ( like some happen only on dev mode ... etc )

![On terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5n1ot7re6ddwkdhroj6.png)

![Yellow box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q22r1jxbtr3r2y8wjy8l.png)





## Ok here is how to hide it 

On the App.js ( or actually any js , ts file . but better on the root file )
```javascript
import { LogBox } from "react-native";
LogBox.ignoreLogs(["Firebase Analytics is not available in the Expo client"]);
```

Here as you can see . I hide the yellow box for `Firebase Analytics ` only . But you can use this for hide all (not recommended)

```javascript
 LogBox.ignoreAllLogs();
```
Infinity Swiper Effect Using Swiper.js
Tags: css, javascript, swiper, webdev
Published: 2021-06-03 09:45:57

Swiper is a modern touch slider for mobile and desktop side you can use mouse scroll(right to left). So here we made a swiper slider using Swiper.js and the help of CSS and HTML with javascript.

In this swiper element, we used images and also removed the dot pagination part. This is a fully responsive swiper slider for mobile and tablets.

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

[Source Code](https://w3hubs.com/infinity-swiper-effect-using-swiper-js/)
Guidance of how React works
Tags: react, javascript, vscode, reactnative
Published: 2021-06-03 09:25:03

Hi Guys, I am new to this programming language and i have the basic of HTML & CSS. Currently i am learning about javascript and reactjs because i have an assessment of creating a movie app using reactjs and API. My concern is right now that im scared that i won’t be able to do the assessment. Can someone guide for me to understand better about it? #react #javascript #movieapp #programming #webdeveloper
Why `hsl` is better
Published: 2021-06-03 09:16:39

I prefer `hsl` over `rgb`. It's really impossible to get colors manually using `rgb`. `hsl(h, s, l)`/`hsla(h, s, l, a)` is really easy to understand.

- `h` - **Hue:** The hue. It's the only thing you actually need to know. Think of it like a color wheel. Around 0<sup>o</sup> and 360<sup>o</sup> are reds. 120<sup>o</sup> is where greens are and 240<sup>o</sup> are blues. Use anything in between 0-360. Values above and below will be modulus 360.
- `s` - **Saturation:** 0% is completely desaturated (grayscale). 100% is fully saturated (full color).
- `l` - **Lightness:** 0% is completely dark (black). 100% is completely light (white). 50% is average lightness.
- `a` - **Alpha:** Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transparent.

You can hand-manipulate any of those four values and have a decent idea of what's going to take place. Change the hue to take a journey around the color wheel. Change the saturation to get deeper or more muted hues. Change the lightness to essentially mix in black or white.

You may know what `rgb(0, 0, 0)` and `rgb(255, 0, 0)` is, but creating a sea blue and going a bit darker or getting a deep yellow isn't exactly math.

`hsl` is also easy to manipulate with JavaScript. You could create a color scheme from a hue by adjusting the saturation and lightness.

## Example

According to what I said, if you set hue to 240, you get blue. So I just took 240 as the hue, and `50%` as the saturation and the lightness, and I got this pleasing blue:

![Blue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z23prtln5p3rm3clmzem.png)
 
Which looks way better than the `#0000ff` blue. 

![Base Blue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9zek8r1bnwjld51x2i5.png)

Here's a red (`hsl(0, 50%, 50%)`) and a green (`hsl(120, 50%, 50%)`)

![Red](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cke5gxtpkh5meigv6j3o.png)
![Green](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqihrgbuulf9rvnbn04q.png)
How to create a REST API in 1 minute
Published: 2021-06-03 09:07:18

![2021-06-03_10-34-00](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sap9bzrxo1vk7lfb9re0.png)

 
1. go to www.nimbella.com
2. click on Login
3. use your GitHub account to sign in
4. click on Console
5. go to Workbench
6. select the playground
7. edit your serverless code (or just use an example)
8. copy the URL
9. curl it!

 ![2021-06-03_10-25-48](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubttxkptsl9z90il2zng.png)
What is Encapsulation?
Tags: encapsulation, java, getter, setters
Published: 2021-06-03 09:02:51

Encapsulation is one of the fundamental units of object-oriented programming. It simply means that putting all the data at one place, Binding And Wrapping of data and methods together is called Encapsulation.

Through encapsulation we can achieve data hiding, if you are familiar with any object oriented programming language then you must be familiar with getters and setters method. When we try hide the data then we use "private" access modifier to stop the any kind of modification of attributes. Now the question arises if we have stopped any modification then how will we change or get the value of elements, so for that only getters and setters methods are used.
Getter method is used to return the value of that element and setter method is used to put the value in that element.

Now lets understand it with an example:
private int price;
Here the price will not be accessible outside of the class, but we can set the data through set method,
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7pib06n0djyopo6vv5f.png)
and now we can get the data through get method,
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sh0u49814r5w64uw1574.png)
}
Open Question: Prophecy vs Mockery
Tags: php, webdev, unittest
Published: 2021-06-03 09:00:24

---
title: Open Question: Prophecy vs Mockery
published: true
description: 
tags: #php #webdev #unittest
//cover_image: https://direct_url_to_image.jpg
---

Which ones do you use and why? What does one have over the other, if anything?
Jaringan 5G
Published: 2021-06-03 08:57:43

 Hallo sahabat Kuyakun, kali ini admin akan membagikan berita teknologi mengenai jaringan yang terbaru yaitu 5G. Teknologi 5G diluncurkan pertama kali oleh provider Telkomsel pada tanggal 27 Mei 2021.

Mau tau berita selanjutnya lihat langsung di artikel di https://kuyakepo.blogspot.com/
RASA - Slots in detail
Tags: rasa, chatbot, nlp, ai
Published: 2021-06-03 08:54:09

Entities are automatically saved to slots that have the same name.

Let's create a new **age** entity:
```yml
# domain.yml
# ... previous content ...
entities:
  # ... previous entities ...
  - age
```

and a new **age** slot:
```yml
# domain.yml
# ... previous content ...
slots:
  # ... previous slots ...
  age:
    type: text
    influence_conversation: false
```

Let's create a new intent as well:
```yml
# data/nlu.yml
# ... previous content ...
  - intent: inform_age
    examples: |
      - My age is [20 years](age)
      - I am [15](age)
      - I am [47 years](age)
      - I am [8 years](age) old
```

and add it to `domain.yml`:
```yml
# domain.yml
# ... previous content ...
intents:
  # ... previous intents ...
  - inform_age
```

We need the chatbot's response as well:
```yml
# domain.yml
# ... previous content ...
  utter_age_back:
    - text: Your age is {age}.
```

The story now looks like this:
```yml
# stories.yml
# ... previous content ...
  - story: tell age
    steps:
      - intent: inform_age
      - action: utter_age_back
```

Let's see this in action:

![Utter back age slot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rj3sw580deh1esihh2yd.png)

The **age** entity was automatically saved to the **age** slot, because the name is the same.
Also, you can see that slots can be overwritten. First, the value of the slot was **17 years** and then **64**.

If a form contains a slot that is filled before the form is activated, that slot is not asked anymore as part of the form loop.

To demonstrate this, let's create the following story:
```yml
# stories.yml
# ... previous content ...
  - story: tell email
    steps:
      - intent: inform_email
      - action: utter_email_back
```

Normally, the chatbot would ask *"What is your email address?"* to fill the **email** slot. But since the slot is filled beforehand, it asks only **frequency** and **notifications**.

![Email slot filled before form loop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ivlsxudva9c38vy54w9.png)

You can learn more about slots in the [documentation](https://rasa.com/docs/rasa/domain#slots) or in my previous [article](https://dev.to/petr7555/rasa-creating-forms-bg8#slots).

In the next chapter, we will look at rich responses, such as buttons and images.

Repository for this tutorial:
{% github petr7555/rasa-dev-tutorial no-readme %}

You can checkout the state of the repository at the end of this tutorial by running:
```bash
git clone --branch 15-slots-in-detail git@github.com:petr7555/rasa-dev-tutorial.git
```
TS: Documenting Functions
Tags: typescript
Published: 2021-06-03 08:45:04

A useful feature in TypeScript that I seemed to have glossed over in my learnings has been 'documentation comments'.

In short, they enable you document functions in a clean and simply way and is understood by modern code editors such as VS Code.

Take the below function to demonstrate:

```typescript
/**
 * Adds 2 numbers together
 *
 * @param value1 - The first number
 * @param value2 - The second number
 * @returns Returns the sum of 2 numbers
 *
 */
const sumIt = (value1: number, value2: number): number => {
  return value1 + value2;
}
```

If you open this in VS Code as a .ts file, then hover over your function name, you get the following interation:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5y0qkp91jz134ltqzbit.png)
 
Similarly, if you simply hover over one of the function arguments, you get the documentation comment specific to that argument:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tffzxf9zpl9ugxxfb5z.png)

To close, I find this a pretty awesome feature for situations where you may have a particularly complex function, where some human readable and interactive comments can really help to self-document and reduce complexity.
Consentimientos sobre cookies
Tags: hiring, cookies, gdpr, frontend
Published: 2021-06-03 08:38:22

> **¿Sabes qué es un CMP?**
> 
> Seguro que en tu día a día navegando por internet has interactuado con más de uno :wink:

Con Ivan Martinez @ivanmlaborda os contamos de dónde sale la necesidad de tener uno, qué es y cómo trabajamos en Adevinta Spain para implantar nuestro CMP para el tratamiento de consentimientos sobre cookies.

{% youtube N4s962p7bpU %}

:wave: [Alex Castells](https://www.youtube.com/watch?v=N4s962p7bpU)

:wave: [Ivan Martinez](https://www.youtube.com/watch?v=N4s962p7bpU&t=18s)

:cookie: [¿En qué consiste el proyecto de consentimientos sobre cookies?](https://www.youtube.com/watch?v=N4s962p7bpU&t=30s)

:rocket: [¿Cómo ha impactado al equipo de producto de Ivan?](https://www.youtube.com/watch?v=N4s962p7bpU&t=2m7s)

:bulb: [¿Qué es el CMP?](https://www.youtube.com/watch?v=N4s962p7bpU&t=2m53s)

:wrench: [¿Cúales fueron los principales retos técnicos?](https://www.youtube.com/watch?v=N4s962p7bpU&t=4m5s)

:chart_with_upwards_trend: [¿Queda algo por hacer?]
(https://www.youtube.com/watch?v=N4s962p7bpU&t=5m14s)

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9akue98pbtqin1jgjnaw.png)](https://careers.adevinta.es/ofertas/?search=frontend&stc=aff-blog%20dev.to-consentimientos%20sobre%20cookies)
Ya no nos quedan líderes
Tags: xaviermitjavila, covid19
Published: 2021-06-03 08:35:24

---
title: Ya no nos quedan líderes
published: True
description: Desde el inicio de la pandemia sigo los resultados de una encuesta que se hace un par de veces al mes. La temática es el Covidi-19 y muestra como nosotros, humildes ciudadanos, hemos ido reaccionando poco a poco a esta larga pesadilla. Es una especie de termómetro de lo que pensamos, de cómo nos comportamos, y anticipa cómo actuaremos en los próximos meses.
tags: xaviermitjavila, covid19
//cover_image: ![Ya no nos quedan líderes, por Xavier Mitjavila Moix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z359s84qhis4qsvyt9ql.png)
---
Desde el inicio de la pandemia sigo los resultados de una encuesta que se hace un par de veces al mes. La temática es el Covidi-19 y muestra como nosotros, humildes ciudadanos, hemos ido reaccionando poco a poco a esta larga pesadilla. Es una especie de termómetro de lo que pensamos, de cómo nos comportamos, y anticipa cómo actuaremos en los próximos meses.

Los datos que observo durante las últimas semanas me sorprenden y preocupan. Aunque tenemos vacunas eficaces validadas, y aunque ya empiezan a llegar y a ser administradas (ya discutiremos otro día cómo lo estamos haciendo), no parece que la percepción mayoritaria sea muy positiva sobre el impacto que todo esto tendrá.

Sólo un 20% de los encuestados piensan que a partir de ahora la situación en España mejorará. Sólo un 21% afirman que los niveles globales de salud progresarán. Sólo un 11% piensan que la economía mejorará. Datos idénticos a las que teníamos hace seis meses.

En el mismo estudio, cuando en Julio se preguntaba cuánto tiempo faltaba para volver a la normalidad precovid-19, el 65% decían que faltaba más de un año. Pues bien, ahora, aunque tenemos vacuna, un 69% todavía piensa que nos falta un largo año para volver al mundo que conocíamos antes.

La situación me recuerda aquel entrenador, Van Gaal, y su célebre frase, "¡Siempre negativo, nunca positivo! ". Creo que necesitamos cambiar el chip. Necesitamos alguien que nos recuerde que medio mundo ha estado trabajando para obtener en tiempo récord el antídoto del virus y que ya lo tenemos aquí. Y que no tenemos una sola vacuna. Tenemos diversas. Y ese mismo alguien debería convencernos de lo que escribíamos aquel lejano mes de marzo: "Vamos a salir". Esto nos cambiaría la percepción, y con la percepción nos cambiaría la vida mañana mismo. Pero para hacer todo esto sería necesario que ese alguien fuera un líder creíble. Un líder de los de verdad. Y tal vez ya no nos quedan.
Laravel Create Custom Log File Tutorial Example

Tags: laravel, programming, php, tutorial
Published: 2021-06-03 08:30:12

Hi Dev,

In this Article, i will share you how to Add custom own log file in laravel. in this article i will discuss about how to create custom log file in laravel.

In this laravel provide a own log file located inside the directory folder storage/logs/laravel.log in which file show a log data.but sometimes a engender your own log file, so in this post i will help you how to create a own log file in laravel.

more..

https://codingtracker.blogspot.com/2021/06/laravel-create-custom-log-file-tutorial.html
Go Programming - database/sql
Tags: go
Published: 2021-06-03 08:23:54

###Agenda
* database/sql
* jmoiron/sqlx
* MSSQL
* MYSQL

####ติดตามผลงานได้ที่
* **Page:** [https://fb.com/CodeBangkok​](https://fb.com/CodeBangkok​)
* **Group:** [https://fb.com/groups/msdevth​](https://fb.com/groups/msdevth​)
* **Blog:** [https://dev.to/codebangkok](https://dev.to/codebangkok)
* **YouTube:** [https://youtube.com/CodeBangkok](https://youtube.com/CodeBangkok)