Skip to content

Commit cd30d06

Browse files
loverajoelloverajoel
committed
Merge pull request loverajoel#288 from ppollo07/gh-pages
[WIP] Translate to Spanish_es_ES
2 parents 68c1a8f + 4874649 commit cd30d06

File tree

57 files changed

+3174
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+3174
-0
lines changed

‎CONTRIBUTING_es_ES.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Como enviar tu tip
2+
3+
Para agregar tu tip a la lista, debes forkear el repositorio y agregar tu tip en un nuevo archivos en el direcctorio correcto (de acuero el lenguage). El nombre del archivo deberia ser '2016-xx-xx-nombre-de-tu-tip'.
4+
5+
Utilice [este formato](https://github.com/loverajoel/jstips/blob/gh-pages/POST_TEMPLATE.md) para escribir su tip.
6+
7+
### Requisitos
8+
9+
- Su tip debe ser legible en menos de dos minutos.
10+
- Puede añadir enlaces a otros sitios o videos que dan una visión más clara es bienvenido.
11+
- Se marcará el código JS con ```js
12+
- No Mencione "JavaScript" en el título (como nuestros consejos son respecto de todos modos)
13+
- Use comillas invertidas (`) para marcar código en el campos **title** y/o **tip-tldr**. _Precaucion_: Ambos valores no deben comenzar con acentos abiertos!
14+
15+
16+
Una vez que su tip está listo, [issue a pull request](https://help.github.com/articles/using-pull-requests/) con esta [PR template](https://github.com/loverajoel/jstips/blob/gh-pages/PULL_REQUEST_TEMPLATE.md) y su tip será revisado (véase más adelante).
17+
18+
# Notas
19+
20+
Deje la fecha y el número de tip con **xx**. Cuando el PR es `ready to merge`, le diremos los números correctos. Por favor, también [squash] (https://davidwalsh.name/squash-commits-git) sus confirmaciones.
21+
22+
# Flujo del Tip
23+
24+
**Tip proposal** ⇒ **Tip under review** ⇒ **Tip ready to merge**
25+
26+
- Cuando se envía un tip, tiene que pasar el proceso de revisión y mientras eso sucede, su estado es `under review`.
27+
- Después de que el tip sea revisado por 5 personas y han dado (:shipit:), el tip esta `ready to merge`.

‎_config.yml

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,15 @@ defaults:
3333
layout: default
3434
lang: zh_CN
3535
is_post: true
36+
-
37+
scope:
38+
path: _posts/es_ES
39+
type: posts
40+
values:
41+
layout: default
42+
lang: es_ES
43+
is_post: true
44+
3645
-
3746
scope:
3847
path: _posts/zh_TW
@@ -42,6 +51,7 @@ defaults:
4251
lang: zh_TW
4352
is_post: true
4453

54+
4555
# Enter your Disqus shortname (not your username) to enable commenting on posts
4656
# You can find your shortname on the Settings page of your Disqus account
4757
disqus: tipsjs
@@ -102,6 +112,9 @@ languages:
102112
-
103113
name: zh_CN
104114
link: /zh_CN
115+
-
116+
name: es_ES
117+
link: /es_ES
105118
-
106119
name: zh_TW
107120
link: /zh_TW
@@ -141,6 +154,23 @@ transl:
141154
footer_placeholder_subscribe: your@email.com
142155
arrow_prev: 上一条
143156
arrow_next: 下一条
157+
es_ES:
158+
menu:
159+
home:
160+
txt: Inicio
161+
link: /es_ES
162+
about:
163+
txt: Jstips
164+
link: /es_ES/about
165+
subscribe:
166+
txt: Suscribirse
167+
submit_your_tip:
168+
txt: Envianos tu tip
169+
link: https://github.com/loverajoel/jstips/blob/gh-pages/CONTRIBUTING_es_ES.md
170+
footer_subscribe_message: Envianos tu fantastico tips diario!
171+
footer_placeholder_subscribe: your@email.com
172+
arrow_prev: Tip Previo
173+
arrow_next: Tip Siguiente
144174
zh_TW:
145175
menu:
146176
home:

‎_posts/es_ES/2015-12-29-insert-item-inside-an-array.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
layout: post
3+
4+
title: Insertar elemento dentro de un Array
5+
tip-number: 00
6+
tip-username: loverajoel
7+
tip-username-profile: https://github.com/loverajoel
8+
tip-tldr: La inserción de un elemento en un array existente, es una tarea común diaria. Se pueden añadir elementos al final de un array mediante push, al principio usando unshift, al medio que usa splice.
9+
10+
categories:
11+
- es_ES
12+
---
13+
14+
La inserción de un elemento en un array existente, es una tarea común diaria. Se pueden añadir elementos al final de un array mediante push, al principio usando unshift, al medio que usa splice.
15+
16+
Esos son los métodos conocidos, pero no quiere decir que no hay una manera más performante. Aquí vamos:
17+
18+
Agragar un elemento al final de un array es fácil con push(), pero hay una manera más performante.
19+
20+
```javascript
21+
var arr = [1,2,3,4,5];
22+
23+
arr.push(6);
24+
arr[arr.length] = 6; // 43% faster in Chrome 47.0.2526.106 on Mac OS X 10.11.1
25+
```
26+
Ambos métodos modifican el array original. No lo cree? [jsperf](http://jsperf.com/push-item-inside-an-array)
27+
28+
Ahora bien, si estamos tratando de añadir un elemento al principio de un array:
29+
30+
```javascript
31+
var arr = [1,2,3,4,5];
32+
33+
arr.unshift(0);
34+
[0].concat(arr); // 98% faster in Chrome 47.0.2526.106 on Mac OS X 10.11.1
35+
```
36+
Aquí un poco más de detalle: unshift editó el array original; concat devuelve un nuevo array.[jsperf](http://jsperf.com/unshift-item-inside-an-array)
37+
38+
Para añadir elementos en el medio de un array es fácil con splice, y que es la forma mas potente para hacerlo.
39+
40+
```javascript
41+
var items = ['one', 'two', 'three', 'four'];
42+
items.splice(items.length / 2, 0, 'hello');
43+
```
44+
45+
Traté de correr estas pruebas en distintos navegadores y sistemas operativos y los resultados fueron similares. Espero que estos consejos les sea de utilidad para usted y animar a llevar a cabo sus propias pruebas!

‎_posts/es_ES/2016-01-01-angularjs-digest-vs-apply.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
layout: post
3+
4+
title: AngularJs - `$digest` vs `$apply`
5+
tip-number: 01
6+
tip-username: loverajoel
7+
tip-username-profile: https://github.com/loverajoel
8+
tip-tldr: Los pasos para crear modulos en Javascript son cada vez más numerosos y complicados, pero ¿qué hay de los boilerplate en los nuevos frameworks?
9+
10+
categories:
11+
- es_ES
12+
---
13+
14+
Una de las características más apreciadas de AngularJS es el de dos vías de enlace de datos. Con el fin de hacer de este trabajo AngularJS evalúa los cambios entre el modelo y la vista a través de ciclos (`$digest`). Es necesario comprender este concepto con el fin de entender cómo funciona el framework bajo el capó.
15+
16+
Angular evalúa cada observador cuando se dispara un evento. Este es el conocido ciclo de `$digest`.
17+
A veces hay que obligarlo a realizar un nuevo ciclo de forma manual y debe elegir la opción correcta porque esta fase es uno de los más influyentes en términos de rendimiento.
18+
19+
### `$apply`
20+
Este método del core le permite iniciar el ciclo de digestión de forma explícita. Eso significa que todos los observadores son comprobados; toda la aplicación se inicia el `$digest loop`. Internamente, después de ejecutar un parámetro de la función opcional, se llama `$rootScope.$digest();`.
21+
22+
### `$digest`
23+
En este caso, el método `$digest` inicia el ciclo `$digest` para el scope actual y sus descendientes. Usted debe notar que los padres scopes, no serán revisadas, y no se verá afectada.
24+
25+
### Recomendaciones
26+
- Use `$apply` o `$digest` sólo cuando eventos del DOM han disparado fuera del AngularJS.
27+
- Pasar una expresión de función a `$apply`, esto tiene un mecanismo de control de errores y permite la integración de los cambios en el ciclo de digestión.
28+
29+
```javascript
30+
$scope.$apply(() => {
31+
$scope.tip = 'Javascript Tip';
32+
});
33+
```
34+
35+
- Si sólo necesita actualizar el scope actual o sus hijos, usar `$digest`, y evitar un nuevo ciclo de digest para toda la aplicación. La ventaja de rendimiento es evidente por sí mismo.
36+
- `$apply()` es un proceso difícil para la máquina y puede conducir a problemas de rendimiento cuando hay una gran cantidad de unión.
37+
- Si está utilizando >AngularJS 1.2.X, usar `$evalAsync`, que es un método básico que evaluará la expresión durante el ciclo actual o el siguiente. Esto puede mejorar el rendimiento de su aplicación.

‎_posts/es_ES/2016-01-02-keys-in-children-components-are-important.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
layout: post
3+
4+
title: Keys en componentes secundarios son importantes
5+
tip-number: 02
6+
tip-username: loverajoel
7+
tip-username-profile: https://github.com/loverajoel
8+
tip-tldr: La key es un atributo que se debe pasar a todos los componentes creados dinámicamente a partir de un array. Es un identificador único y constante que React usa para identificar cada componente en el DOM y saber si se trata de un componente diferente o el mismo. Utilizando keys asegura que el componente secundario se conserve y no se cree nuevamente y evita que cosas extrañas sucedan.
9+
10+
categories:
11+
- es_ES
12+
---
13+
14+
La [key](https://facebook.github.io/react/docs/multiple-components.html#dynamic-children) es un atributo que se debe pasar a todos los componentes creados dinámicamente a partir de un array. Es un identificador único y constante que React usa para identificar cada componente en el DOM y saber si se trata de un componente diferente o el mismo. Utilizando keys asegura que el componente secundario se conserve y no se cree nuevamente y evita que cosas extrañas sucedan.
15+
16+
> La key no es realmente sobre el rendimiento, es más acerca de la identidad (que a su vez conduce a un mejor rendimiento). Aleatoriamente asignados y los valores cambiantes no forman una identidad [Paul O’Shannessy](https://github.com/facebook/react/issues/1342#issuecomment-39230939)
17+
18+
- Utilice un valor único existente del objeto.
19+
- Definir las keys de los componentes padre, no en los componentes secundarios
20+
21+
```javascript
22+
//bad
23+
...
24+
render() {
25+
<div key={{item.key}}>{{item.name}}</div>
26+
}
27+
...
28+
29+
//good
30+
<MyComponent key={{item.key}}/>
31+
```
32+
- [Usar el indice de un array es una mala practica.](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318#.76co046o9)
33+
- `random()` no funcionara.
34+
35+
```javascript
36+
//bad
37+
<MyComponent key={{Math.random()}}/>
38+
```
39+
40+
- Usted puede crear su propia única id. Asegúrese de que el método es rápido y adjuntarlo a su objeto.
41+
- Cuando el número de children es grande o contiene componentes caros, utilice keys para mejorar el rendimiento.
42+
- [Debe proporcionar el atributo clave para todos los children de ReactCSSTransitionGroup.](http://docs.reactjs-china.com/react/docs/animation.html)

‎_posts/es_ES/2016-01-03-improve-nested-conditionals.md

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
layout: post
3+
4+
title: Mejorar anidaciones Condicionales
5+
tip-number: 03
6+
tip-username: AlbertoFuente
7+
tip-username-profile: https://github.com/AlbertoFuente
8+
tip-tldr: ¿Cómo podemos mejorar y hacer una declaración anidada `if` más eficiente en javascript?
9+
10+
categories:
11+
- es_ES
12+
---
13+
14+
¿Cómo podemos mejorar y hacer una declaración anidada `if` más eficiente en javascript?
15+
16+
```javascript
17+
if (color) {
18+
if (color === 'black') {
19+
printBlackBackground();
20+
} else if (color === 'red') {
21+
printRedBackground();
22+
} else if (color === 'blue') {
23+
printBlueBackground();
24+
} else if (color === 'green') {
25+
printGreenBackground();
26+
} else {
27+
printYellowBackground();
28+
}
29+
}
30+
```
31+
32+
Una forma de mejorar el `if` anidado sería usar `switch`. Aunque es menos verbosa y está más ordenado, no se recomienda su uso porque es muy difícil de depurar errores. Aquí [por eso] (https://toddmotto.com/deprecating-the-switch-statement-for-object-literals/).
33+
34+
```javascript
35+
switch(color) {
36+
case 'black':
37+
printBlackBackground();
38+
break;
39+
case 'red':
40+
printRedBackground();
41+
break;
42+
case 'blue':
43+
printBlueBackground();
44+
break;
45+
case 'green':
46+
printGreenBackground();
47+
break;
48+
default:
49+
printYellowBackground();
50+
}
51+
```
52+
53+
Pero lo que si tenemos un condicional con varios controles en cada declaración? en este caso, si queremos que sean menos detalladas y más ordenada, podemos utilizar el condicional `switch`.
54+
Si pasamos `true` como parámetro a la declaración `switch`, que nos permite colocar un condicional en cada caso.
55+
56+
```javascript
57+
switch(true) {
58+
case (typeof color === 'string' && color === 'black'):
59+
printBlackBackground();
60+
break;
61+
case (typeof color === 'string' && color === 'red'):
62+
printRedBackground();
63+
break;
64+
case (typeof color === 'string' && color === 'blue'):
65+
printBlueBackground();
66+
break;
67+
case (typeof color === 'string' && color === 'green'):
68+
printGreenBackground();
69+
break;
70+
case (typeof color === 'string' && color === 'yellow'):
71+
printYellowBackground();
72+
break;
73+
}
74+
```
75+
76+
Pero siempre hay que evitar tener varios controles en todas las condiciones y evitar el uso de `switch` tanto como sea posible. También hay que tener en cuenta que la forma más eficiente de hacer esto es a través de un `object`.
77+
78+
```javascript
79+
var colorObj = {
80+
'black': printBlackBackground,
81+
'red': printRedBackground,
82+
'blue': printBlueBackground,
83+
'green': printGreenBackground,
84+
'yellow': printYellowBackground
85+
};
86+
87+
if (color in colorObj) {
88+
colorObj[color]();
89+
}
90+
```
91+
92+
Aqui puede obtener mas informacion [this](http://www.nicoespeon.com/en/2015/01/oop-revisited-switch-in-js/).

‎_posts/es_ES/2016-01-04-sorting-strings-with-accented-characters.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
layout: post
3+
4+
title: Ordenando cadenas con caracteres acentuados
5+
tip-number: 04
6+
tip-username: loverajoel
7+
tip-username-profile: https://github.com/loverajoel
8+
tip-tldr: Javascript tiene un método nativo **sort** que permite ordenar matrices. Haciendo un simple `array.sort()` va a tratar a cada entrada del array como una cadena y va a tratar de ordenarla alfabéticamente. Pero cuando intenta ordenar un array de caracteres no ASCII obtendrá un resultado extraño.
9+
10+
categories:
11+
- es_ES
12+
---
13+
14+
Javascript tiene un método nativo **[sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)** que permite ordenar arrays. Haciendo una simple `array.sort()` va a tratar a cada entrada de la matriz como una cadena y va a tratar de ordenarla alfabéticamente. También puede proporcionar la funcion [own custom sorting](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Parameters).
15+
16+
```javascript
17+
['Shanghai', 'New York', 'Mumbai', 'Buenos Aires'].sort();
18+
// ["Buenos Aires", "Mumbai", "New York", "Shanghai"]
19+
```
20+
21+
Pero cuando intenta para un array de caracteres no ASCII como esto `['E', 'a', 'U', 'c']`, se obtendrá un resultado extraño `[' c ',' e ',' A ',' U ']'. Eso sucede porque sort sólo funciona con el idioma Inglés.
22+
23+
Mire el siguiente ejemplo:
24+
25+
```javascript
26+
// Spanish
27+
['único','árbol', 'cosas', 'fútbol'].sort();
28+
// ["cosas", "fútbol", "árbol", "único"] // bad order
29+
30+
// German
31+
['Woche', 'wöchentlich', 'wäre', 'Wann'].sort();
32+
// ["Wann", "Woche", "wäre", "wöchentlich"] // bad order
33+
```
34+
35+
Afortunadamente, hay dos maneras de superar este comportamiento [localeCompare](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) and [Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator).
36+
37+
> Ambos métodos tienen sus propios parámetros personalizados con el fin de configurarlo para que funcione adecuadamente.
38+
39+
### Usando `localeCompare()`
40+
41+
```javascript
42+
['único','árbol', 'cosas', 'fútbol'].sort(function (a, b) {
43+
return a.localeCompare(b);
44+
});
45+
// ["árbol", "cosas", "fútbol", "único"]
46+
47+
['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(function (a, b) {
48+
return a.localeCompare(b);
49+
});
50+
// ["Wann", "wäre", "Woche", "wöchentlich"]
51+
```
52+
53+
### Usando `Intl.Collator()`
54+
55+
```javascript
56+
['único','árbol', 'cosas', 'fútbol'].sort(Intl.Collator().compare);
57+
// ["árbol", "cosas", "fútbol", "único"]
58+
59+
['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(Intl.Collator().compare);
60+
// ["Wann", "wäre", "Woche", "wöchentlich"]
61+
```
62+
63+
- Para cada método se puede personalizar la ubicación.
64+
- De acuerdo a [Firefox](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#Performance) Intl.Collator es más rápida cuando se compara un gran número de cadenas.
65+
66+
Así que cuando se trabaja con arrays de cadenas en un idioma distinto del Inglés, recuerde utilizar este método para evitar la clasificación inesperado.

0 commit comments

Comments
 (0)