Mejor práctica HTML, CSS, Javascript: extensión de Chrome

Para las personas que acaban de terminar Codecademy.

Cuando estudias programación, la forma más eficiente de autoaprendizaje es desarrollar un producto. Este enfoque es mucho más rápido que tomar cualquier curso de programación para mejorar sus habilidades de programación.

Normalmente, las personas comienzan a aprender programación con HTML, CSS y Javascript básico en programación web, sin embargo, antes de llegar a la parte del servidor, es difícil hacer una aplicación significativa.

Entonces, siempre traté de convencer a los estudiantes así,

Será divertido si comienzas a aprender del lado del servidor y lanzas alguna aplicación. Por favor, no te rindas.

pero muchos estudiantes dejan de aprender programación mientras están en la etapa HTML y CSS.

(Tal vez, comenzar con HTML no es una buena idea para alentar a las personas a estudiar programación).

Un día, abrí mi navegador Chrome para comenzar a trabajar. Entonces me di cuenta de que realmente había estado usando la mejor aplicación que puedes construir usando solo HTML, CSS y Javascript.

Impulso

Para ser breves, si instala esta extensión en Chrome, cada vez que abra una nueva pestaña, aparecerá un mensaje de saludo sobre una imagen genial. El número de descargas ya es de varios millones. Si no ha usado esto, le recomiendo que lo instale. Tal vez solo experimente esta aplicación durante 2 a 3 segundos por pestaña nueva, pero puede relajarse por ese pequeño momento.

¡Intentemos clonar esta aplicación!

Fase 1: Cosas para preparar

  • HTML
  • CSS
  • Javascript
  • Bonita foto: de unsplash
  • manifest.json (para cargar desde Chrome)

La forma en que desarrollé la aplicación rápidamente fue centrándome en el presente, no en el futuro. Por supuesto, es importante tener un plan concreto cuando no es tu proyecto en solitario. ¡Pero! La vida útil de la automotivación es muy corta, por lo que cuando tenga ganas de desarrollar algo, será mejor que la termine muy rápido. Si comienza a pensar en otras opciones que mejorarán su producto, nunca terminará su proyecto.

Hagámoslo simple.

Estamos creando un sitio web con una imagen general, un gran mensaje de saludo y tal vez la hora actual.

Encuentra una foto

Si va al sitio web Unsplash, puede encontrar toneladas de imágenes geniales sin licencia.

Como estoy en Noruega, decidí usar esta imagen.
Gracias, Vidar Nordli-Mathisen. (Siempre es importante reconocer su talento).

Foto de Vidar Nordli-Mathisen en Unsplash

Hacer un proyecto

Simple Simple Simple

Un archivo HTML, un CSS, un Javascript y un archivo de manifiesto.

Eso es todo lo que necesitamos.

De acuerdo, esta es la primera versión.

Esta es una página web simple. Ahora, para cargar desde Chrome, debe agregar el siguiente archivo manifest.json.

"Chrome_url_overrides" es la propiedad más importante en esta aplicación.

Ir a la página de extensiónHaga clic en el botón Haga clic en el botón Seleccionar dentro de la carpeta de su proyectoNuestra humilde extensión ...Cada vez que abra la nueva pestaña, mostrará su página web simple.

Ahí tienes, acabamos de terminar nuestro primer proyecto.

Puede usarlo solo con esta funcionalidad. Tal vez pueda editar el texto en algo con lo que quiera motivarse, como "lo imposible es nada", "solo hazlo", "somos el mundo", algo-algo. O tal vez puedas poner tu foto de familia en su lugar.

Pero hagámoslo mejor que esto.

Fase 2: Cosas que se agregarán

  • Tiempo actual
  • Función de cambio de nombre
  • Función de cambio de imagen

Para incluir esas tres nuevas características, cambié el archivo HTML como se muestra a continuación.

CSS también debe cambiarse.

Entonces la nueva página será como a continuación.

Oh, pensé que era Momentum :)

Actualizando manifest.json

Ahora, agregaremos dos funciones.

En primer lugar, agregaremos un formulario de entrada a esta aplicación para que las personas puedan poner su nombre en él. Agregaremos este formulario bajo el mensaje "Hola, Jungwon Seo".

Esto es feo, solucionémoslo

Nuevo estilo para la etiqueta de entrada.

De acuerdo, mucho mejor.

De ahora en adelante, debemos pensar en cómo almacenar esta información.

Usaremos "cookie", pero no puede usar "cookie" si solo abre el archivo HTML desde el navegador Chrome. Intente probar después de cargar como una extensión de Chrome.

Había información incorrecta sobre el permiso de almacenamiento en la publicación anterior. No necesita el permiso de "almacenamiento" para usar "Cookie".

Además, como todavía prefiero usar jQuery, vamos a agregarlo.

Traté de agregar jQuery CDN, pero ...

No se preocupe, solo necesitamos agregar una propiedad más en manifest.json.

Bien, ahora estamos listos para codificar en el archivo script.js.

Lo que quiero hacer primero es:

  1. Haga que los usuarios escriban su nombre.
  2. Almacenar en Cookie (usemos solo el código más popular)
  3. Desvanece el formulario de entrada y se desvanece en el mensaje de saludo.

Ahora, esta es la primera vez que tenemos que pensar como un desarrollador real.

Caso 1: Cuando lo abres por primera vez.
Caso 2: cuando lo abre después de escribir su nombre.

Necesitamos decidir qué debería ser visible y qué no debería ser.

Caso 1:
Hora: hora actual
Mensaje de saludo: ¿Cómo te llamas?
Formulario de entrada: visible

Caso 2:
Hora: hora actual
Mensaje de saludo: ¡Hola, !
Formulario de entrada: invisible

Y, la forma de diferenciar estos dos casos es verificar si la cookie tiene la clave "nombre de usuario".

Con la función de actualización de tiempo, el nuevo script.js será el siguiente.

Antes de escribir el nombreDespués de escribir el nombre

Bien, parece estar funcionando.

Por supuesto, hay algunas cosas que aún debemos mejorar, como los efectos de transición.

Pero te lo daré.

Ahora que mas?

Necesitamos agregar la funcionalidad que permite a los usuarios cambiar su imagen.

Unsplash API

Puede registrar fácilmente su aplicación y obtener un token de esta página.

Para usar Unsplash API, debe registrar su aplicación en su página de desarrollador.

Al hacer clic en

Para el producto de demostración, se le permitirá usar hasta 50 solicitudes por hora. Y eso es suficiente para nosotros.

Simplemente complete el siguiente formulario como desee.

Escribe cualquier nombre

Si crea la aplicación, verá la parte "Claves" del sitio web redirigido.

He eliminado esta aplicación, así que no tiene sentido intentarlo.

Solo necesita copiar la "Clave de acceso" y asignarla a su variable de JavaScript "ACCESS_KEY".

Utilizaremos la API de búsqueda.

Aquí está el escenario. Todas las personas tienen intereses diferentes. Entonces, primero quiero preguntarles su interés y luego buscaré esa imagen usando la API Unsplash. Después de eso, seguiré actualizando la imagen cada 12 horas (misma palabra clave, imagen diferente).

Entonces la función AJAX será como a continuación.

Y esta función se llamará después de que escriba su interés.

Entonces, como puede esperar, necesitamos ser desarrolladores nuevamente.

Caso 1–1: primera vez
Caso 1–2: después del nombre
Caso 2: después de escribir su interés
Caso 3: 12 horas después.

Bien, decidamos uno por uno.

En el caso 1–1, solo necesitamos ocultar toda la parte relacionada con la imagen. Omitir esto

En el caso 1–2, solo muestra el formulario de entrada para el interés.

En el caso 2, llame a AJAX y guarde la información de la imagen.

En el caso 3, establezcamos el tiempo de vencimiento en 12 horas y, si la cookie está vacía, llame nuevamente a AJAX.

Palabra clave: Londres

Sí, está funcionando.

Fase 3: toques finales

No es obligatorio dar crédito al fotógrafo, pero ¿por qué no?

Podemos escribir un par de líneas más de código y acreditar el nombre y la página del fotógrafo en la parte superior izquierda.

Para que podamos usar la información del fotógrafo cuando revise la cookie por primera vez.

Una cosa más, ¿qué pasa si alguien quiere cambiar su interés?

Agreguemos esa funcionalidad que permite a las personas volver a escribir su interés.

Antes de hacer clic en el botón

Ahí tienes. Si hace clic en el botón "Elegir un nuevo interés", se abrirá el formulario de entrada donde escribió su interés anteriormente.

Después de hacer clic en el botón

Fase 4: Haz tu propio producto.

Solo quiero que experimentes el proceso de principio a fin. Aún así, debe desarrollar esto usted mismo para absorber realmente la habilidad que ha aprendido.

Debe haber algunas funciones que cree que sería bueno incluir, como la forma de elegir la imagen aleatoria. O puede pensar que algunos de mis códigos son ineficientes. Puede mejorar su versión del mismo producto con un código mejor.

¡Buena suerte y no te rindas!

La versión completa se puede encontrar aquí: https://github.com/thejungwon/MyChromeExtension

Esta historia se publica en Noteworthy, donde más de 10,000 lectores vienen todos los días para aprender sobre las personas y las ideas que dan forma a los productos que amamos.

Siga nuestra publicación para ver más historias de productos y diseños presentadas por el equipo de Journal.