Merge pull request #11251 from Bouncey/Feature/BlockNamesAddedToTitles
Feature/Block names added to challenge and document titles
This commit is contained in:
Berkeley Martinez
GitHub
@ -44,7 +44,9 @@ const mapStateToProps = createSelector(
|
||||
state => state.app.lang,
|
||||
(
|
||||
{
|
||||
challenge: { title, isTranslated } = {}, viewType
|
||||
challenge: { isTranslated } = {},
|
||||
viewType,
|
||||
title
|
||||
},
|
||||
challenge,
|
||||
superBlocks = [],
|
||||
@ -92,8 +94,7 @@ export class Challenges extends PureComponent {
|
||||
};
|
||||
|
||||
componentWillMount() {
|
||||
const { title, updateTitle, lang, isTranslated, makeToast } = this.props;
|
||||
updateTitle(title);
|
||||
const { lang, isTranslated, makeToast } = this.props;
|
||||
if (lang !== 'en' && !isTranslated) {
|
||||
makeToast({
|
||||
message: 'We haven\'t translated this challenge yet.',
|
||||
@ -107,6 +108,9 @@ export class Challenges extends PureComponent {
|
||||
if (!this.props.areChallengesLoaded) {
|
||||
this.props.fetchChallenges();
|
||||
}
|
||||
if (this.props.title) {
|
||||
this.props.updateTitle(this.props.title);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
@ -114,11 +118,12 @@ export class Challenges extends PureComponent {
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const { title } = nextProps;
|
||||
const { block, dashedName } = nextProps.params;
|
||||
const { lang, isTranslated } = nextProps;
|
||||
const { resetUi, updateTitle, replaceChallenge, makeToast } = this.props;
|
||||
if (this.props.params.dashedName !== dashedName) {
|
||||
updateTitle(nextProps.title);
|
||||
updateTitle(title);
|
||||
resetUi();
|
||||
replaceChallenge({ dashedName, block });
|
||||
if (lang !== 'en' && !isTranslated) {
|
||||
|
||||
@ -35,7 +35,13 @@ const mapStateToProps = createSelector(
|
||||
state => state.challengesApp.hintIndex,
|
||||
state => state.challengesApp.isCodeLocked,
|
||||
(
|
||||
{ challenge: { title, description, hints = [] } = {} },
|
||||
{
|
||||
challenge: {
|
||||
description,
|
||||
hints = []
|
||||
} = {},
|
||||
title
|
||||
},
|
||||
windowHeight,
|
||||
navHeight,
|
||||
tests,
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { createSelector } from 'reselect';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import Youtube from 'react-youtube';
|
||||
import PureComponent from 'react-pure-render/component';
|
||||
import { Col } from 'react-bootstrap';
|
||||
|
||||
import SidePanel from './Side-Panel.jsx';
|
||||
import ToolPanel from './Tool-Panel.jsx';
|
||||
import BugModal from '../Bug-Modal.jsx';
|
||||
@ -17,10 +17,10 @@ const mapStateToProps = createSelector(
|
||||
{
|
||||
challenge: {
|
||||
id,
|
||||
title,
|
||||
description,
|
||||
challengeSeed: [ videoId = '' ] = []
|
||||
} = {}
|
||||
} = {},
|
||||
title
|
||||
}
|
||||
) => ({
|
||||
id,
|
||||
@ -48,7 +48,6 @@ export class Project extends PureComponent {
|
||||
isCompleted,
|
||||
description
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Col md={ 4 }>
|
||||
|
||||
@ -13,7 +13,7 @@ const bindableActions = { resetUi, updateTitle };
|
||||
const mapStateToProps = createSelector(
|
||||
challengeSelector,
|
||||
state => state.challengesApp.shouldShowQuestions,
|
||||
({ challenge: { title } }, shouldShowQuestions) => ({
|
||||
({ title }, shouldShowQuestions) => ({
|
||||
title,
|
||||
shouldShowQuestions
|
||||
})
|
||||
@ -34,8 +34,8 @@ export class Video extends React.Component {
|
||||
};
|
||||
|
||||
componentWillMount() {
|
||||
const { updateTitle } = this.props;
|
||||
updateTitle(this.props.title);
|
||||
const { updateTitle, title } = this.props;
|
||||
updateTitle(title);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
@ -60,7 +60,6 @@ export class Video extends React.Component {
|
||||
title,
|
||||
shouldShowQuestions
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Col xs={ 12 }>
|
||||
<header className='text-center'>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
import * as challengeTypes from '../../../utils/challengeTypes';
|
||||
import { getNode } from '../utils';
|
||||
import blockNameify from '../../../utils/blockNameify';
|
||||
|
||||
const viewTypes = {
|
||||
[ challengeTypes.html]: 'classic',
|
||||
@ -42,8 +44,13 @@ export const challengeSelector = createSelector(
|
||||
}
|
||||
const challenge = challengeMap[challengeName];
|
||||
const challengeType = challenge && challenge.challengeType;
|
||||
const blockName = blockNameify(challenge.block);
|
||||
const title = blockName && challenge.title ?
|
||||
`${blockName}: ${challenge.title}` :
|
||||
challenge.title;
|
||||
return {
|
||||
challenge,
|
||||
title,
|
||||
viewType: viewTypes[challengeType] || 'classic',
|
||||
submitType: submitTypes[challengeType] || 'tests',
|
||||
showPreview: challengeType === challengeTypes.html,
|
||||
|
||||
35
common/app/utils/blockNameify.js
Normal file
35
common/app/utils/blockNameify.js
Normal file
@ -0,0 +1,35 @@
|
||||
const preFormattedBlockNames = {
|
||||
'html5-and-css': 'HTML5 and CSS',
|
||||
jquery: 'jQuery',
|
||||
'json-apis-and-ajax': 'JSON APIs and Ajax',
|
||||
mongodb: 'MongoDB',
|
||||
'api-projects': 'API Projects',
|
||||
'the-dom': 'The DOM',
|
||||
devops: 'DevOps'
|
||||
};
|
||||
const noFormatting = [
|
||||
'and',
|
||||
'for',
|
||||
'of',
|
||||
'the',
|
||||
'up',
|
||||
'with'
|
||||
];
|
||||
|
||||
export default function blockNameify(phrase) {
|
||||
const preFormatted = preFormattedBlockNames[phrase] || '';
|
||||
if (preFormatted) {
|
||||
return preFormatted;
|
||||
}
|
||||
return phrase.split('-')
|
||||
.map((word) => {
|
||||
if (noFormatting.includes(word)) {
|
||||
return word;
|
||||
}
|
||||
if (word === 'javascript') {
|
||||
return 'JavaScript';
|
||||
}
|
||||
return word.charAt(0).toUpperCase() + word.slice(1);
|
||||
})
|
||||
.join(' ');
|
||||
}
|
||||
@ -5,7 +5,7 @@
|
||||
"challenges": [
|
||||
{
|
||||
"id": "56b15f15632298c12f31517b",
|
||||
"title": "Big O Notation: What It Is and Why You Should Care",
|
||||
"title": "What It Is and Why You Should Care",
|
||||
"description": [
|
||||
"Time complexity is a way of discussing how long specific algorithms take. This is useful in streamlining software so it works as fast as possible.",
|
||||
"When you're writing code, you should be aware of how long it's going to take to execute. Nobody wants to create a product that users find frustrating due to slow use.",
|
||||
@ -34,7 +34,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Notación O mayúscula: ¿Qué es y porque te debe interesar?",
|
||||
"title": "¿Qué es y porque te debe interesar?",
|
||||
"description": [
|
||||
"La complejidad temporal es una forma de discutir cunto tiempo toma un algoritmo específico. Esto es útil al ajustar software para que opere tan rápido como sea posible.",
|
||||
"Cuando escribes código, debes tener en cuenta cuanto se va a demorar su ejecución. Nadie quiere crear un producto que fruste a los usuarios por su lentitud.",
|
||||
@ -50,7 +50,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f31517a",
|
||||
"title": "Big O Notation: A Few Examples",
|
||||
"title": "A Few Examples",
|
||||
"description": [
|
||||
"Time complexity is commonly estimated by counting the number of elementary operations (elementary operation = an operation that takes a fixed amount of time to perform) performed in the algorithm.",
|
||||
"Time complexity is classified by the nature of the function O(n). O represents the function, and (n) represents the number of elements to be acted on.",
|
||||
@ -90,7 +90,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Notación O mayúscula: Unos pocos ejemplos",
|
||||
"title": "Unos pocos ejemplos",
|
||||
"description": [
|
||||
"La complejidad en tiempo comunmente se estima contando la cantidad de operaciones elementales que un algoritmo efectua (una operación elemental es una cuya ejecución requiere una cantidad de tiempo fijo).",
|
||||
"La complejidad temporal se clasifica por la naturaleza de la función O(n) donde O representa una función matemática para el tiempo que tarda el algoritmo y n representa la cantidad de elementos sobre los que actua el algoritmo.",
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
"challenges": [
|
||||
{
|
||||
"id": "56b15f15632298c12f315184",
|
||||
"title": "Chrome Dev Tools: Elements",
|
||||
"title": "Elements",
|
||||
"description": [
|
||||
"This is basic info and a mini-lesson on the Elements tab of Chrome Dev Tools. Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/inspect-styles/' target='_blank'>developers.google.com/web/tools/chrome-devtools/inspect-styles/</a>",
|
||||
"We will be using the webpage mckellen.com/ per suggestion of Free Code Camp user kmiasko.",
|
||||
@ -34,7 +34,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Herramientas de desarrollo de Chrome: Elementos",
|
||||
"title": "Elementos",
|
||||
"description": [
|
||||
"Esta es información básica y una mini-lección sobre la pestaña Elements en las herramientas de desarrollo de Chrome. Echa un vistazo a la documentación más detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/inspect-styles/' target='_blank'>developers.google.com/web/tools/chrome-devtools/inspect-styles/</a>",
|
||||
"Vamos a utilizar la página web mckellen.com/ por sugerencia del usuario de FreeCodeCamp kmiasko.",
|
||||
@ -50,7 +50,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f315183",
|
||||
"title": "Chrome Dev Tools: Network",
|
||||
"title": "Network",
|
||||
"description": [
|
||||
"The network tab helps answer questions like 'Which element or part of the page took the longest?' or 'What initiated a request?'.",
|
||||
"The network panel records detailed information about how long each element of your page or app takes to load.",
|
||||
@ -77,7 +77,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Herramientas de desarrollo de Chrome: red",
|
||||
"title": "red",
|
||||
"description": [
|
||||
"La pestaña network (red) ayuda a responder preguntas como '¿Qué elemento o parte de la página fue el más demorado?' o '¿Qué inició una petición?'",
|
||||
"El panel de red registra información detallada sobre cuánto tarda en cargar cada elemento de su página o aplicación.",
|
||||
@ -92,7 +92,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f315182",
|
||||
"title": "Chrome Dev Tools: Sources",
|
||||
"title": "Sources",
|
||||
"description": [
|
||||
"The 'Sources' tab is most useful for debugging JavaScript. The bigger your project is, the harder it can be to find exactly where a problem occurs.",
|
||||
"You can select different parts of the code to be 'breakpoints', checkpoints that will stop the code at that exact moment.",
|
||||
@ -121,7 +121,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Herramientas de desarrollo de Chrome: Fuentes",
|
||||
"title": "Fuentes",
|
||||
"description": [
|
||||
"La pestaña 'fuentes' es más útil para la depuración de JavaScript. Cuanto más grande sea tu proyecto, tanto más difícil resulta encontrar exactamente dónde se produce un problema. ",
|
||||
"Puedes seleccionar diferentes partes del código para ser 'puntos de interrupción', puestos de control que detendrán la ejecución del código en ese preciso momento. ",
|
||||
@ -137,7 +137,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f315181",
|
||||
"title": "Chrome Dev Tools: Timeline",
|
||||
"title": "Timeline",
|
||||
"description": [
|
||||
"The Timeline panel lets you record and analyze all the activity in your application as it runs. It's the best place to start investigating perceived performance issues in your application.",
|
||||
"Just like you use network to find out how long things take to communicate with the internet and you use sources to find out where something is broken, you can use the timeline to figure out what's going on and how long it takes in even more detail.",
|
||||
@ -166,7 +166,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Herramientas de desarrollo de Chrome: Línea de tiempo",
|
||||
"title": "Línea de tiempo",
|
||||
"description": [
|
||||
"El panel Línea de tiempo te permite grabar y analizar toda la actividad en tu aplicación mientras se ejecuta. Es el mejor lugar para comenzar a investigar los problemas de rendimiento que percibas en tu aplicación. ",
|
||||
"Al igual que usas el panel de red para averiguar cuánto tiempo toman las partes de la página para comunicarse con el Internet y utilizas fuentes para averiguar dónde algo se daña, puedes utilizar la línea de tiempo para averiguar con más detalle lo que está pasando y el tiempo que tarda.",
|
||||
@ -182,7 +182,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f315180",
|
||||
"title": "Chrome Dev Tools: Profiles",
|
||||
"title": "Profiles",
|
||||
"description": [
|
||||
"The Profiles panel lets you profile the execution time and memory usage of a web app or page. This primarily applies to the JavaScript running on your page or app.",
|
||||
"There are three types of profiles you can collect: CPU profile, HEAP snapshot, and HEAP profile. HEAP profiles have more to do with memory usage, while a CPU profile has more to do with JavaScript performance.",
|
||||
@ -208,7 +208,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Herramientas de desarrollo de Chrome: Perfiles",
|
||||
"title": "Perfiles",
|
||||
"description": [
|
||||
"El panel Perfiles te permite perfilar el tiempo de ejecución y el uso de memoria de una aplicación web o de una página. Esto se aplica principalmente a la ejecución de JavaScript en su página o aplicación. ",
|
||||
"Hay tres tipos de perfiles que se pueden recolectar: el perfil de la CPU, instantáneas de la memoria con estructura montón (Heap), y el perfil de la memoria con estructura montón. Los perfiles de memoria en estructura montón tienen más que ver con el uso de memoria, mientras que un perfil de la CPU tiene más que ver con el rendimiento de JavaScript. ",
|
||||
@ -221,7 +221,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f31517f",
|
||||
"title": "Chrome Dev Tools: Resources",
|
||||
"title": "Resources",
|
||||
"description": [
|
||||
"The Resources panel lets you inspect resources that are loaded in the inspected page including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and style sheets.",
|
||||
"You can view and edit all of this information within the browser.",
|
||||
@ -241,7 +241,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Herramientas de desarrollo de Chrome: Recursos",
|
||||
"title": "Recursos",
|
||||
"description": [
|
||||
"El panel de Recursos te permite inspeccionar los recursos que se cargan en la página, incluyendo IndexedDB o bases de datos SQL Web, almacenamiento local y de sesión, las galletas (cookies), memoria caché de aplicaciones, imágenes, fuentes y hojas de estilo.",
|
||||
"Puedes ver y editar toda esta información dentro del navegador.",
|
||||
@ -253,7 +253,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f31517e",
|
||||
"title": "Chrome Dev Tools: Audits",
|
||||
"title": "Audits",
|
||||
"description": [
|
||||
"The Audit tool walks you through how to improve your page step by step.",
|
||||
"In this video, we use this tool on the quote generator that I made as a front end development project.",
|
||||
@ -280,7 +280,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Herramientas de desarrollo de Chrome: Las auditorías",
|
||||
"title": "Las auditorías",
|
||||
"description": [
|
||||
"La herramienta de auditoría te guía para mejorar tu página paso a paso.",
|
||||
"En este vídeo, se utiliza esta herramienta con un generador de citas aleatorias desarrollado como uno de los proyectos de desarrollo de interfaces.",
|
||||
@ -294,7 +294,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f31517d",
|
||||
"title": "Chrome Dev Tools: Console",
|
||||
"title": "Console",
|
||||
"description": [
|
||||
"The Console panel provides two primary functions: logging diagnostic information in the development process and providing a shell prompt which can be used to interact with the document and Dev Tools.",
|
||||
"When using the console, you can view raw or structured data by using standard JS statements and console-specific commands.",
|
||||
@ -322,7 +322,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Herramientas de desarrollo de Chrome: Consola",
|
||||
"title": "Consola",
|
||||
"description": [
|
||||
"El panel de la consola ofrece dos funciones principales: registro de datos de diagnóstico en el proceso de desarrollo y proporcionar un intérprete de órdenes que puedes utilizar para interactuar con el documento y las Herramientas de desarrollo",
|
||||
"Al utilizar la consola, puedes ver los datos en bruto o estructurados mediante instrucciones estándar JS y órdenes específicas para la consola.",
|
||||
@ -337,7 +337,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f31517c",
|
||||
"title": "Chrome Dev Tools: Summary",
|
||||
"title": "Summary",
|
||||
"description": [
|
||||
"1.) Chrome Dev Tools are awesome, and the more you can dive in and try to use them, the faster your skill level will grow.",
|
||||
"2.) Use the documentation, even if you've never read documentation before: <a href='http://developers.google.com/web/tools/chrome-devtools/' target='_blank'>developers.google.com/web/tools/chrome-devtools/</a>",
|
||||
@ -356,7 +356,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Herramientas de desarrollo de Chrome: Resumen",
|
||||
"title": "Resumen",
|
||||
"description": [
|
||||
", Las herramientas de desarrollo de Chrome son impresionantes, y cuanto más te puedas sumergir y tratar de utilizarlas, más rápido aumentará tu nivel. ",
|
||||
", Utiliza la documentación, incluso si nunca has leído documentación antes: <a href='http://developers.google.com/web/tools/chrome-devtools/' target='_blank'>developers.google.com/web/tools/chrome-devtools/</a> ",
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
"challenges": [
|
||||
{
|
||||
"id": "bd7128d8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: The 4 Basic Parts of a Computer",
|
||||
"title": "The 4 Basic Parts of a Computer",
|
||||
"description": [
|
||||
"At the very least, a machine needs these four basic parts to be considered a computer.",
|
||||
"Today we're going to talk about the basics of computer hardware.",
|
||||
@ -44,7 +44,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentes básicos del computador: Las 4 partes básicas de un computador",
|
||||
"title": "Las 4 partes básicas de un computador",
|
||||
"description": [
|
||||
"Una máquina necesita por lo menos cuatro partes básicas para ser considerada un computador.",
|
||||
"Hoy vamos a hablar acerca de conceptos básicos de hardware.",
|
||||
@ -65,7 +65,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd7127d8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: More Computer Hardware",
|
||||
"title": "More Computer Hardware",
|
||||
"description": [
|
||||
"In this video we cover the basic functions of a motherboard, expansion slots, and power supply.",
|
||||
"Let's quickly review - the 4 basic parts of a computer are the input, like the mouse or the keyboard, the output, which is seen on the monitor or heard on the speakers, the CPU, the central processing unit, and the memory.",
|
||||
@ -103,7 +103,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: Más Hardware",
|
||||
"title": "Más Hardware",
|
||||
"description": [
|
||||
"En este video cubrimos las funciones básicas de una placa base, tarjetas de expansión, y la fuente de poder.",
|
||||
"Vamos a revisar rápidamente - las 4 partes básicas de un computador son dispositivos de entrada, como el ratón o el teclado, dispositivos de salida, monitor o altavoces, la CPU, la unidad central de procesamiento, y la memoria.",
|
||||
@ -123,7 +123,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd7129d8a441eddfbeb5bddf",
|
||||
"title": "Computer Basics: Chips and Moore's Law",
|
||||
"title": "Chips and Moore's Law",
|
||||
"description": [
|
||||
"We discuss what constitutes a chip and why technology gets cheaper every year.",
|
||||
"In this video we are going to be talking about chips and something called Moore's Law.",
|
||||
@ -159,7 +159,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: Chips y la Ley de Moore",
|
||||
"title": "Chips y la Ley de Moore",
|
||||
"description": [
|
||||
"Discutiremos lo que constituye un chip y por qué la tecnología se vuelve más barata cada año.",
|
||||
"En este video vamos a estar hablando sobre chips y algo que se llama la Ley de Moore.",
|
||||
@ -177,7 +177,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd7126d8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: Intro to Binary Code",
|
||||
"title": "Intro to Binary Code",
|
||||
"description": [
|
||||
"What binary looks like, and what it can mean.",
|
||||
"0's and 1's can turn be interpreted into far more complex data.",
|
||||
@ -209,7 +209,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: Introducción a código binario",
|
||||
"title": "Introducción a código binario",
|
||||
"description": [
|
||||
"Cómo se ve lo binario, y lo que puede significar.",
|
||||
"Los 0s y 1s pueden interpretarse como datos mucho más complejos.",
|
||||
@ -224,7 +224,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd7125d8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: Decoding a Binary Number",
|
||||
"title": "Decoding a Binary Number",
|
||||
"description": [
|
||||
"In this video, we decode a number written in binary notation.",
|
||||
"Let's talk about the binary numeral system, also known as a bunch of 1's and 0's over and over again.",
|
||||
@ -258,7 +258,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: decodificar un número binario",
|
||||
"title": "decodificar un número binario",
|
||||
"description": [
|
||||
"En este vídeo, decodificaremos un número escrito en notación binaria.",
|
||||
"Hablemos sobre el sistema de numeración binario, también conocido como un montón de 1s y 0s una y otra vez.",
|
||||
@ -275,7 +275,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd7122d8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: Binary Bytes",
|
||||
"title": "Binary Bytes",
|
||||
"description": [
|
||||
"Binary does more than express numbers - through bytes, it can symbolize all alphanumeric symbols, which can then be interpreted into more complex code.",
|
||||
"Let's talk about the most basic level that a computer can understand other languages like JavaScript.",
|
||||
@ -307,7 +307,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: Bytes en binario",
|
||||
"title": "Bytes en binario",
|
||||
"description": [
|
||||
"En binario se puede hacer más que representar números - mediante bytes, puede simbolizar todos los símbolos alfanuméricos, los cuales pueden ser interpretados en códigos más complejos",
|
||||
"Vamos a hablar sobre el nivel más básico que un computador puede comprender otros lenguajes como JavaScript.",
|
||||
@ -322,7 +322,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd7124d8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: How To Measure Data Size",
|
||||
"title": "How To Measure Data Size",
|
||||
"description": [
|
||||
"How the size/amount of data is measured, starting from a bit and going all the way up to a petabyte.",
|
||||
"Today we're going to be talking about Data Size.",
|
||||
@ -359,7 +359,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: Cómo medir el tamaño de los datos",
|
||||
"title": "Cómo medir el tamaño de los datos",
|
||||
"description": [
|
||||
"¿Cómo se mide el tamaño/cantidad de datos, a partir de un bit y continuando hasta un petabyte.",
|
||||
"Hoy vamos a estar hablando de tamaño de los datos.",
|
||||
@ -379,7 +379,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd7123d8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: Measuring Data Speed",
|
||||
"title": "Measuring Data Speed",
|
||||
"description": [
|
||||
"Data speed and data size are measured differently.",
|
||||
"In this video, we cover how data speed is measured.",
|
||||
@ -411,7 +411,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: medición de la velocidad de datos",
|
||||
"title": "medición de la velocidad de datos",
|
||||
"description": [
|
||||
"La velocidad de datos y el tamaño de los datos se miden de manera diferente.",
|
||||
"En este video, cubrimos cómo se mide la velocidad de los datos.",
|
||||
@ -430,7 +430,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd7121d8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: Types of Computers",
|
||||
"title": "Types of Computers",
|
||||
"description": [
|
||||
"This video covers the basics of supercomputers, servers, workstations, PCs, and microcontrollers.",
|
||||
"Let's discuss the different types of computers.",
|
||||
@ -467,7 +467,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: Tipos de Computadores",
|
||||
"title": "Tipos de Computadores",
|
||||
"description": [
|
||||
"Este video cubre los conceptos básicos de los supercomputadores, servidores, estaciones de trabajo, PC y microcontroladores.",
|
||||
"Vamos a discutir los diferentes tipos de computadores.",
|
||||
@ -487,7 +487,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd7120d8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: More on the Motherboard",
|
||||
"title": "More on the Motherboard",
|
||||
"description": [
|
||||
"A little more detail on what constitutes a motherboard and what functionalities are standard in PCs.",
|
||||
"Today we're going to be talking more about the motherboard.",
|
||||
@ -526,7 +526,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: Más sobre la placa base",
|
||||
"title": "Más sobre la placa base",
|
||||
"description": [
|
||||
"Un poco más de detalle sobre lo que constituye una placa base y sus funciones estándar en un computador.",
|
||||
"Hoy vamos a hablar más sobre la placa base.",
|
||||
@ -548,7 +548,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd712fd8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: Data Networks",
|
||||
"title": "Data Networks",
|
||||
"description": [
|
||||
"This video covers the basics of local area networks, wide area networks, and virtual private networks.",
|
||||
"In this video we talk about Data Networks.",
|
||||
@ -587,7 +587,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: Redes de datos",
|
||||
"title": "Redes de datos",
|
||||
"description": [
|
||||
"Este video cubre los conceptos básicos de redes de área local, redes de área amplia y redes privadas virtuales.",
|
||||
"En este vídeo se habla de redes de datos.",
|
||||
@ -608,7 +608,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd712ed8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: IP Addresses",
|
||||
"title": "IP Addresses",
|
||||
"description": [
|
||||
"Every device has an IP address.",
|
||||
"IP addresses are assigned based on location, and are vital for the internet to work.",
|
||||
@ -640,7 +640,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: Direcciones IP",
|
||||
"title": "Direcciones IP",
|
||||
"description": [
|
||||
"Cada dispositivo tiene una dirección IP.",
|
||||
"Las direcciones IP se asignan en función de la ubicación, y son vitales para que Internet funcione.",
|
||||
@ -660,7 +660,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd712dd8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: How the Internet Works",
|
||||
"title": "How the Internet Works",
|
||||
"description": [
|
||||
"This is a brief and basic overview of how the internet works.",
|
||||
"For a more in-depth explanation, check out <a href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm' target='_blank'>web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm</a>.",
|
||||
@ -694,7 +694,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: ¿Cómo funciona Internet",
|
||||
"title": "¿Cómo funciona Internet",
|
||||
"description": [
|
||||
"Esta es una descripción breve y descripción de cómo funciona Internet.",
|
||||
"Para una explicación más en profundidad, dale un vistazo a <a href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm' target='_blank'>web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm</a>.",
|
||||
@ -715,7 +715,7 @@
|
||||
},
|
||||
{
|
||||
"id": "bd712cd8c441eddfbeb5bddf",
|
||||
"title": "Computer Basics: Software",
|
||||
"title": "Software",
|
||||
"description": [
|
||||
"We discriminate between hardware and software, and also discuss the differences between an operating system and application software.",
|
||||
"In this video, we'll discuss the basics of software.",
|
||||
@ -739,7 +739,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: Software",
|
||||
"title": "Software",
|
||||
"description": [
|
||||
"Diferenciamos entre hardware y software, y también discutimos las diferencias entre el sistema operativo y el software de aplicación.",
|
||||
"En este video, vamos a discutir los fundamentos del software.",
|
||||
@ -755,7 +755,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f31510f",
|
||||
"title": "Computer Basics: Content Delivery Networks",
|
||||
"title": "Content Delivery Networks",
|
||||
"description": [
|
||||
"A Content Delivery Network is a system of distributed servers (network) that deliver webpages and other Web content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery server.",
|
||||
"The goal of a CDN is to establish higher quality network connections.",
|
||||
@ -787,7 +787,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Fundamentos básicos del computador: Redes de distribución de contenido",
|
||||
"title": "Redes de distribución de contenido",
|
||||
"description": [
|
||||
"Una red de distribución de contenido (del inglés <em>Content Delivery Network</em>) es un sistema (red) de servidores distribuidos que sirven páginas web y otros contenidos web a los usuarios en función de su ubicación geográfica, el origen de la página web y un servidor de entrega de contenido.",
|
||||
"El objetivo de una RDC (CDN) es establecer conexiones de red de mayor calidad.",
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
"challenges": [
|
||||
{
|
||||
"id": "56b15f15632298c12f31518f",
|
||||
"title": "The DOM: What's the Document Object Model?",
|
||||
"title": "What's the Document Object Model?",
|
||||
"description": [
|
||||
"The DOM is the browser's internal, programmatic representation of a webpage. Languages like JavaScript allow you to modify the DOM, and thus the website without editing the HTML of the page.",
|
||||
"Technically, the DOM is an API (application programming interface). There are many types of APIs, but this particular API interacts with XML and HTML documents. It's in charge of how those documents are accessed and manipulated.",
|
||||
@ -32,7 +32,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "El DOM: ¿Qué es el Modelo de objetos del documento?",
|
||||
"title": "¿Qué es el Modelo de objetos del documento?",
|
||||
"description": [
|
||||
"El DOM es la representación interna y programática de una página web del navegador. Lenguajes como javascript te permiten modificar el DOM, y por lo tanto el sitio web, sin editar el código HTML de la página.",
|
||||
"Técnicamente, el DOM es un API (interfaz de programación de aplicaciones). Hay varios tipos de APIs, pero este API en particular interactúa con documentos XML y HTML. Está a cargo de cómo se accesan y se manipulan esos documentos.",
|
||||
@ -46,7 +46,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f31518e",
|
||||
"title": "The DOM: Style in the Header, Script in the Footer",
|
||||
"title": "Style in the Header, Script in the Footer",
|
||||
"description": [
|
||||
"Maybe you've been told that links to style sheets (CSS) should be included in the header and that links to script (JS) should be included in the footer. Ever asked yourself why?",
|
||||
"If you've ever seen a webpage that loads the text first, then after a bit loads the formatting and style, you've seen a page that didn't have the links to style and script in the correct places.",
|
||||
@ -72,7 +72,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "El DOM: Estilo en el encabezado, código al pie de página",
|
||||
"title": "Estilo en el encabezado, código al pie de página",
|
||||
"description": [
|
||||
"Creo que ya te habrán dicho que los enlaces a código de estilo (CSS) deben ser incluidos en el encabezado (<code>header</code>) y que los enlaces al código (JS) deben estar incluidos al pie de página (<code>footer</code>). ¿Alguna vez te preguntaste por qué?",
|
||||
"Si alguna vez has visto una página web que carga el texto primero, y después de un momento carga el formato y el estilo, entonces era una página que no tenía los enlaces hacia el estilo y el código en los lugares correctos.",
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
"challenges": [
|
||||
{
|
||||
"id": "56b15f15632298c12f31518c",
|
||||
"title": "JavaScript Lingo: MDN and Documentation",
|
||||
"title": "MDN and Documentation",
|
||||
"description": [
|
||||
"This is a basic intro to MDN and the concept of documentation.",
|
||||
"MDN, Mozilla Developer Network, is a fantastic open source collaboration that documents not only JavaScript, but many other languages and topics. If you haven't heard of them, you should check them out now. I get lots of information from <a href='http://developer.mozilla.org/en-US/docs/Web/JavaScript' target='_blank'>developer.mozilla.org/en-US/docs/Web/JavaScript</a>",
|
||||
@ -32,7 +32,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "JavaScript Lingo: MDN y Documentación",
|
||||
"title": "MDN y Documentación",
|
||||
"description": [
|
||||
"Esta es una introducción básica a MDN y el concepto de la documentación.",
|
||||
"MDN, Mozilla Developer Network, es una fantástica colaboración de fuentes abiertas que documenta no sólo JavaScript, sino muchos otros lenguajes y temas. Si no has oído hablar de ellos, deberías darles un vistazo ahora. Personalmente obtengo mucha información de <a href='http://developer.mozilla.org/es/docs/Web/JavaScript' target='_blank'>developer.mozilla.org/es/docs/Web/JavaScript</a>",
|
||||
@ -46,7 +46,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f31518d",
|
||||
"title": "JavaScript Lingo: Value Types",
|
||||
"title": "Value Types",
|
||||
"description": [
|
||||
"Learn about the three most basic types of values: booleans, strings, and numbers.",
|
||||
"A boolean is a true or false value. These words are special and reserved. You can't name a variable 'true', because that word is already universal as a boolean (as is 'false').",
|
||||
@ -71,7 +71,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "JavaScript Lingo: Tipos de valores",
|
||||
"title": "Tipos de valores",
|
||||
"description": [
|
||||
"Aprende sobre los tres tipos más básicos de valores: Booleanos, cadenas y números",
|
||||
"Un booleano es un valor <code>true</code> (verdadero) o <code>false</code> (falso). Estas palabras son especiales y reservadas. No puedes nombrar a una variable como \"true\", porque esa palabra es ya universal como un valor lógico (así como lo es \"false\"). ",
|
||||
@ -83,7 +83,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f31518b",
|
||||
"title": "JavaScript Lingo: Variables & camelCase",
|
||||
"title": "Variables & camelCase",
|
||||
"description": [
|
||||
"We are going to cover what constitutes a variable, and the reasoning behind camelCase.",
|
||||
"A variable also referred to as 'var', is the name or placeholder for a boolean, string, number, or another piece of static information.",
|
||||
@ -111,7 +111,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "JavaScript Lingo: Variables y capitalizaciónCamello",
|
||||
"title": "Variables y capitalizaciónCamello",
|
||||
"description": [
|
||||
"Vamos a cubrir lo que constituye una variable, y el razonamiento detrás de la capitalizaciónCamello (<em>camelCase</em>).",
|
||||
"Una variable, también conocida como una 'var', es el nombre o el espacio para un booleano, una cadena, un número, u otra pieza de información estática.",
|
||||
@ -125,7 +125,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f31518a",
|
||||
"title": "JavaScript Lingo: Arrays & Objects",
|
||||
"title": "Arrays & Objects",
|
||||
"description": [
|
||||
"If you want to store more than one piece of information to a variable, you can do so by creating an array or an object.",
|
||||
"**Disclaimer: Objects in JS are not exactly the same as objects in other languages. We will discuss objects here as they pertain to JS.",
|
||||
@ -152,7 +152,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "JavaScript Lingo: Vectores y objetos",
|
||||
"title": "Vectores y objetos",
|
||||
"description": [
|
||||
"Si desea almacenar más de una pieza de información en una variable, puedes hacerlo mediante la creación de un vector o de un objeto.",
|
||||
"** Exención de responsabilidad: Los objetos de JS no son exactamente lo mismo que los objetos en otros lenguajes. Vamos a discutir aquí objetos con respecto a JS. ",
|
||||
@ -166,7 +166,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f315189",
|
||||
"title": "JavaScript Lingo: Finding and Indexing Data in Arrays",
|
||||
"title": "Finding and Indexing Data in Arrays",
|
||||
"description": [
|
||||
"There are many reasons you might need to access a certain piece of data from within a larger set, and you do that by referencing its index.",
|
||||
"We won't get into syntax now, but you should know that the first thing in an array is actually index 0.",
|
||||
@ -191,7 +191,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "JavaScript Lingo: Encontrando e indexando valores en vectores",
|
||||
"title": "Encontrando e indexando valores en vectores",
|
||||
"description": [
|
||||
"Hay muchas razones por las que puedes necesitar acceder a una determinada pieza de información al interior de un conjunto más amplio, lo cual haces referenciando su índice.",
|
||||
"No vamos a entrar en la sintaxis, pero debes saber que el primer elemento en un vector tiene en realidad el índice 0.",
|
||||
@ -202,7 +202,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f315188",
|
||||
"title": "JavaScript Lingo: Manipulating Data",
|
||||
"title": "Manipulating Data",
|
||||
"description": [
|
||||
"Methods and functions are ways you can manipulate variables or other sets of information.",
|
||||
"Methods are built into JavaScript, and you will become more familiar with these as you write functions for the bonfires.",
|
||||
@ -230,7 +230,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "JavaScript Lingo: Manipulación de los datos",
|
||||
"title": "Manipulación de los datos",
|
||||
"description": [
|
||||
"Métodos y funciones son formas con las que puedes modificar variables u otros conjuntos de información.",
|
||||
"Los métodos están integrados en JavaScript, y te familiarizarás con estos cuando realices los desafíos sobre algoritmos.",
|
||||
@ -245,7 +245,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f315187",
|
||||
"title": "JavaScript Lingo: Math",
|
||||
"title": "Math",
|
||||
"description": [
|
||||
"There is a static object named 'Math' in JS with many built in properties and methods.",
|
||||
"You'll want to investigate this further whenever you're manipulating numbers. Check MDN documentation before writing your own functions, because they may already be defined there.",
|
||||
@ -273,7 +273,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "JavaScript Lingo: Matemáticas",
|
||||
"title": "Matemáticas",
|
||||
"description": [
|
||||
"Hay un objeto estático de nombre 'Math' en JS con muchos propiedades y métodos incluidos.",
|
||||
"Vas a querer investigar más de este cuando manipules números. Consulta la documentación de MDN antes de escribir tus propias funciones, pues ya podrían estar definidas allí. ",
|
||||
@ -288,7 +288,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f315186",
|
||||
"title": "JavaScript Lingo: Loops",
|
||||
"title": "Loops",
|
||||
"description": [
|
||||
"If there's a set of data, (we'll use an array for this example, but it doesn't have to be,) and you want to perform the same manipulation to every piece in that set of data, you can use something called a loop.",
|
||||
"Loops have some complex syntax to get used to at first, but once you have it, they're extremely useful. I used loops in many of my algorithm solutions.",
|
||||
@ -313,7 +313,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "JavaScript Lingo: Ciclos",
|
||||
"title": "Ciclos",
|
||||
"description": [
|
||||
"Si hay un conjunto de valores (vamos a utilizar un vector en este ejemplo, pero no tiene que ser así) y deseas realizar la misma operación a cada valor del conjunto, puedes usar algo llamado ciclo. ",
|
||||
"Los ciclos tienen una sintaxis compleja a la que inicialmente es difícil acostumbrarse, pero una vez que la entiendas, son de gran utilidad. Yo usé ciclos en muchas de mis soluciones. ",
|
||||
@ -324,7 +324,7 @@
|
||||
},
|
||||
{
|
||||
"id": "56b15f15632298c12f315185",
|
||||
"title": "JavaScript Lingo: Regular Expressions",
|
||||
"title": "Regular Expressions",
|
||||
"description": [
|
||||
"RegExp is not formatted like anything else in JS, and can have a steep learning curve.",
|
||||
"RegExp can also be an incredibly useful and efficient tool.",
|
||||
@ -352,7 +352,7 @@
|
||||
"challengeType": 6,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "JavaScript Lingo: expresiones regulares (RegExp)",
|
||||
"title": "expresiones regulares (RegExp)",
|
||||
"description": [
|
||||
"Las RegExp no siguen el formato del resto de JS, y pueden requerir una curva de aprendizaje.",
|
||||
"Las epresiones regulares (abreviado <em>RegExp</em>) también pueden ser una herramienta muy útil y eficiente.",
|
||||
|
||||
11
server/boot/react.js
vendored
11
server/boot/react.js
vendored
@ -1,11 +1,12 @@
|
||||
import React from 'react';
|
||||
import { RouterContext } from 'react-router';
|
||||
import debug from 'debug';
|
||||
|
||||
import { renderToString } from 'redux-epic';
|
||||
import provideStore from '../../common/app/provide-store';
|
||||
|
||||
import provideStore from '../../common/app/provide-store';
|
||||
import createApp from '../../common/app';
|
||||
import blockNameify from '../../common/app/utils/blockNameify';
|
||||
|
||||
|
||||
const log = debug('fcc:react-server');
|
||||
|
||||
@ -84,7 +85,11 @@ export default function reactSubRouter(app) {
|
||||
.flatMap(function({ markup, store, epic }) {
|
||||
log('react markup rendered, data fetched');
|
||||
const state = store.getState();
|
||||
const { title } = state.app;
|
||||
const { challenge } = state.entities;
|
||||
const challengeKey = Object.keys(challenge)[0];
|
||||
const blockName = blockNameify(challenge[challengeKey].block);
|
||||
const challengeTitle = challenge[challengeKey].title;
|
||||
const title = `${blockName}: ${challengeTitle}`;
|
||||
epic.dispose();
|
||||
res.expose(state, 'data');
|
||||
res.expose(req.flash(), 'flash');
|
||||
|
||||
Reference in New Issue
Block a user