1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
O artigo foi traducido co apoio de EDISON Software, que E .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- Bonificación: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
Nota: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Bonificación: Если вам интересно, я недавно написал на криптовалюту с React Native.
Nota: Aquí .
Подборка проектов из предыдущих публикаций.
capa
A capa é unha comunidade na que todos poden debuxar un píxel nun "plano" compartido. A idea orixinal naceu en Reddit. A comunidade r/Layer é unha metáfora da creatividade compartida, que todos poden ser creadores e contribuír a unha causa común.
O que aprenderás ao crear o teu propio proxecto de capa:
- Como funciona o lenzo de JavaScript Saber como manexar un lenzo é unha habilidade fundamental en moitas aplicacións.
- Como coordinar os permisos dos usuarios. Cada usuario pode debuxar un píxel cada 15 minutos sen ter que iniciar sesión.
- Crea sesións de cookies.
Squoosh
Squoosh é unha aplicación de compresión de imaxes con moitas opcións avanzadas.
GIF 20 MB
Ao crear a túa propia versión de Squoosh aprenderás:
- Como traballar con tamaños de imaxe
- Aprende os conceptos básicos da API Drag'n'Drop
- Comprender como funcionan a API e os escoitadores de eventos
- Como cargar e exportar ficheiros
Nota: O compresor de imaxe é local. Non é necesario enviar datos adicionais ao servidor. Podes ter o compresor na casa, ou podes usalo nun servidor, a túa elección.
Calculadora
Veña? En serio? Calculadora? Si, exactamente, unha calculadora. Comprender os conceptos básicos das operacións matemáticas e como funcionan xuntos é unha habilidade fundamental para simplificar as túas aplicacións. Tarde ou cedo terás que lidar cos números e canto antes mellor.
Ao crear a túa propia calculadora aprenderás:
- Traballar con números e operacións matemáticas
- Practica coa API de escoitadores de eventos
- Como organizar elementos, comprender estilos
Rastreador (motor de busca)
Todos utilizaron un motor de busca, entón por que non crea o teu propio? Os rastreadores son necesarios para buscar información. Todo o mundo utilízaos todos os días e a demanda desta tecnoloxía e especialistas só crecerá co paso do tempo.
Buscador de Google
O que aprenderás creando o teu propio buscador:
- Como funcionan os crawlers
- Como indexar sitios e como clasificalos por clasificación e reputación
- Como almacenar sitios indexados nunha base de datos e como traballar coa base de datos
Reproductor de música (Spotify, Apple Music)
Todo o mundo escoita música, é só unha parte integral das nosas vidas. Imos crear un reprodutor de música para comprender mellor como funciona a mecánica básica dunha plataforma de transmisión de música moderna.
Spotify
O que aprenderás creando a túa propia plataforma de transmisión de música:
- Como traballar coa API. use API de Spotify ou Apple Music
- Como reproducir, pausar ou retroceder á pista seguinte/anterior
- Como cambiar o volume
- Como xestionar o enrutamento dos usuarios e o historial do navegador
Aplicación de busca de películas con React (con ganchos)
O primeiro que podes comezar é construír unha aplicación de busca de películas con React. A continuación móstrase unha imaxe de como será a aplicación final:
Que aprenderás
Ao crear esta aplicación, mellorarás as túas habilidades de React usando a relativamente nova API de Hooks. O proxecto de mostra usa compoñentes de React, moitos ganchos, unha API externa e, por suposto, algún estilo CSS.
Pila tecnolóxica e características
- Reacciona con ganchos
- crear-reaccionar-aplicación
- JSX
- CSS
Sen utilizar ningunha clase, estes proxectos ofrécenche o punto de entrada perfecto para React funcional e definitivamente axudarache en 2020. podes atopar . Sigue as instrucións ou faino teu.
Aplicación de chat con Vue
Outro gran proxecto para ti é crear unha aplicación de chat usando a miña biblioteca de JavaScript favorita: VueJS. A aplicación terá un aspecto así:
Que aprenderás
Neste titorial, aprenderás a crear unha aplicación Vue desde cero: crear compoñentes, xestionar estados, crear rutas, conectarte a servizos de terceiros e mesmo xestionar a autenticación.
Pila tecnolóxica e características
- Vue
- vuex
- router vue
- Vista CLI
- Impulsor
- CSS
Este é un proxecto realmente xenial para comezar con Vue ou mellorar as túas habilidades existentes para iniciar o desenvolvemento en 2020. podes atopar .
Fermosa aplicación meteorolóxica con Angular 8
Este exemplo axudarache a crear unha fermosa aplicación meteorolóxica usando Angular 8:
Que aprenderás
Este proxecto ensinarache habilidades valiosas para crear aplicacións desde cero, desde o deseño ata o desenvolvemento, ata unha aplicación lista para implementar.
Pila tecnolóxica e características
- Angular 8
- Base de lume
- Representación do lado do servidor
- CSS con Grid e Flexbox
- Mobil amigable e adaptabilidade
- Modo escuro
- Fermosa interface
O que me gusta moito deste proxecto completo é que non se estuda as cousas de forma illada. Pola contra, aprendes todo o proceso de desenvolvemento desde o deseño ata a implantación final.
Aplicación de tarefas pendentes con Svelte
Svelte é como o novo neno no enfoque dos compoñentes, polo menos semellante a React, Vue e Angular. E este é un dos produtos novos máis populares para 2020.
As aplicacións de tarefas pendentes non son necesariamente o tema máis candente, pero realmente axudaranche a mellorar as túas habilidades Svelte. Será así:
Que aprenderás
Este tutorial mostrarache como crear unha aplicación usando Svelte 3, de principio a fin. Usará compoñentes, estilos e controladores de eventos
Pila tecnolóxica e características
- Esvelto 3
- Compoñentes
- Estilo con CSS
- Sintaxe ES6
Non hai moitos bos proxectos de iniciación Svelte, así que atopei .
Aplicación de comercio electrónico con Next.js
Next.js é o marco máis popular para crear aplicacións React que admitan a renderización do lado do servidor fóra da caixa.
Este proxecto amosarache como crear unha aplicación de comercio electrónico que teña este aspecto:
Que aprenderás
Neste proxecto, aprenderás a desenvolver con Next.js: crear páxinas e compoñentes novos, recuperar datos e aplicar estilo e implementar unha aplicación Next.
Pila tecnolóxica e características
- Seguinte.js
- Compoñentes e páxinas
- Mostraxe de datos
- Estilización
- Implantación do proxecto
- SSR e SPA
Sempre é xenial ter un exemplo real como unha aplicación de comercio electrónico para aprender algo novo. Podes .
Blog multilingüe completo con Nuxt.js
Nuxt.js é para Vue, do mesmo xeito que Next.js é para React: un excelente marco para combinar renderizado no servidor e aplicacións dunha soa páxina
A última aplicación que podes crear terá o seguinte aspecto:
Que aprenderás
Neste proxecto de exemplo, aprenderás a crear un sitio web completo usando Nuxt.js, desde a configuración inicial ata a implementación final.
Aproveita moitas das características interesantes que ofrece Nuxt, como páxinas e compoñentes, e estilos con SCSS.
Pila tecnolóxica e características
- Nuxt.js
- Compoñentes e páxinas
- módulo storyblock
- Mixins
- Vuex para a xestión estatal
- SCSS para estilizar
- Intermediarios de Nuxt
, que inclúe moitas das excelentes funcións de Nuxt.js. Persoalmente, encántame traballar con Nuxt, polo que deberías probalo xa que tamén che converterá nun excelente programador de Vue.
Blog con Gatsby
Gatsby é un gran xerador de sitios estáticos usando React e GraphQL. Este é o resultado do proxecto:
Que aprenderás
Neste tutorial, aprenderás a usar Gatsby para crear un blog que utilizarás para escribir os teus propios artigos usando React e GraphQL.
Pila tecnolóxica e características
- gatsby
- Reaccionar
- GraphQL
- Complementos e temas
- MDX/Markdown
- Bootstrap CSS
- templates
Se algunha vez quixeches comezar un blog, como facelo usando React e GraphQL.
Non digo que WordPress sexa unha mala opción, pero con Gatsby podes crear sitios web de alto rendemento usando React, que é unha combinación incrible.
Blog con Gridsome
Gridsome para Vue... Vale, xa o tiñamos con Next/Nuxt.
Pero o mesmo ocorre con Gridsome e Gatsby. Ambos usan GraphQL como a súa capa de datos, pero Gridsome usa VueJS. Tamén é un xenial xerador de sitios estáticos para axudarche a crear excelentes blogs:
Que aprenderás
Este proxecto ensinarache como crear un blog sinxelo para comezar con Gridsome, GraphQL e Markdown. Tamén explica como implementar unha aplicación a través de Netlify.
Pila tecnolóxica e características
- cuadriculado
- Vue
- GraphQL
- Redución de prezo
- netlify
Este non é o titorial máis completo, pero abrangue os conceptos básicos de Gridsome e .
Reproductor de audio similar a SoundCloud usando Quasar
Quasar é outro marco de Vue que se pode usar para crear aplicacións móbiles. Neste proxecto, crearás unha aplicación de reprodutor de audio, por exemplo:
Que aprenderás
Aínda que outros proxectos céntranse principalmente en aplicacións web, este amosarache como crear unha aplicación móbil usando Vue e o framework Quasar.
Xa deberías ter un Cordova funcionando con Android Studio/Xcode configurado. Se non, o manual ten unha ligazón ao sitio web de Quasar onde che mostran como configurar todo.
Pila tecnolóxica e características
- quásar
- Vue
- Córdoba
- wavesurfer
- Compoñentes da IU
, demostrando as capacidades de Quasar para crear aplicacións móbiles.
Форма кредитной карты
Unha forma de tarxeta de crédito xenial con microinteraccións suaves e agradables. Inclúe o formato do número, a verificación e a detección automática do tipo de tarxeta. Está construído en Vue.js e tamén é totalmente sensible. (Podes ver .)
O que vai aprender:
- Procesar e validar formularios
- Xestionar eventos (por exemplo, cando os campos cambian)
- Entender como mostrar e colocar elementos na páxina, especialmente a información da tarxeta de crédito que aparece na parte superior do formulario
gráfico de barras
Un histograma é un gráfico ou gráfico que representa datos categóricos con barras rectangulares con alturas ou lonxitudes proporcionais aos valores que representan.
Pódense aplicar vertical ou horizontalmente. Un gráfico de barras verticais ás veces chámase gráfico de liñas.
O que vai aprender:
- Mostrar os datos dun xeito estruturado e comprensible
- Ademais: aprende a usar o elemento
canvase como debuxar elementos con el
podes atopar datos de poboación mundial. Están ordenados por anos.
Анимация сердечка Twitter
Xa en 2016, Twitter presentou esta incrible animación para os seus chíos. A partir de 2019, aínda se ve como parte, entón por que non crea un ti mesmo?
O que vai aprender:
- Traballar co atributo CSS
keyframes - Manipular e animar elementos HTML
- Combina JavaScript, HTML e CSS
Репозитории GitHub с функцией поиска
Non hai nada elegante aquí: os repositorios de GitHub son só unha lista glorificada.
O obxectivo é mostrar os repositorios e permitir que o usuario os filtre. Use para conseguir repositorios para cada usuario.
Páxina de perfil de GitHub -
O que vai aprender:
- Recibe datos da API
- Mostrar datos da API
- Filtra e mostra os datos relevantes para cada busca
- Opcional: se estás preparado para un desafío, úsao , construído usando GraphQL. .
Чаты в стиле Reddit
Os chats son unha forma de comunicación popular debido á súa sinxeleza e facilidade de uso. Pero o que realmente alimenta as salas de chat modernas? WebSockets!
O que vai aprender:
- Use WebSockets, comunicación en tempo real e actualizacións de datos
- Traballar con niveis de acceso de usuarios (por exemplo, o propietario dunha canle de chat ten o papel
admin, e outros na sala -user) - Procesar e validar formularios - lembre, a xanela de chat para enviar unha mensaxe é
input - Crea e únete a diferentes chats
- Traballar con mensaxes persoais. Os usuarios poden conversar con outros usuarios de forma privada. Esencialmente, establecerá unha conexión WebSocket entre dous usuarios.
Навигация в стиле Stripe
O que fai que esta navegación sexa única é que o contenedor popover transfórmase para adaptarse ao contido. Hai unha elegancia nesta transición en comparación co comportamento tradicional de abrir e pechar un novo popover.
O que vai aprender:
- Combina animacións CSS con transicións
- Reduce o contido e aplica clase activa ao elemento flotante
Pacman
Crea a túa propia versión de Pacman. Esta é unha boa forma de facerse unha idea de como se desenvolven os xogos e comprender os conceptos básicos. Use un framework JavaScript, React ou Vue.
Aprenderás:
- Como se moven os elementos
- Como determinar que teclas premer
- Como determinar o momento da colisión
- Podes ir máis lonxe e engadir controis de movemento pantasma
Atoparás un exemplo deste proxecto GitHub
xestión de usuarios
Proxecto GitHub
Crear unha aplicación tipo CRUD para a administración de usuarios ensinarache os conceptos básicos do desenvolvemento. Isto é especialmente útil para os novos desenvolvedores.
Aprenderás:
- Que é o enrutamento
- Como manexar os formularios de entrada de datos e comprobar o que introduciu o usuario
- Como traballar coa base de datos: crear, ler, actualizar e eliminar accións
Проверка погоды в вашем местоположении
Proxecto GitHub
Se queres crear aplicacións, comeza cunha aplicación meteorolóxica. Este proxecto pódese completar usando Swift.
Ademais de adquirir experiencia na creación dunha aplicación, aprenderá:
- Como traballar coa API
- Como usar a xeolocalización
- Fai a túa aplicación máis dinámica engadindo entrada de texto. Nela, os usuarios poderán introducir a súa localización para consultar o tempo nun lugar concreto.
Necesitarás unha API. Para obter datos meteorolóxicos, utiliza a API de OpenWeather. Máis información sobre a API de OpenWeather.
Окно чата
A miña xanela de chat en acción, ábrese en dúas pestanas do navegador
Crear unha xanela de chat é a forma perfecta de comezar cos sockets. A elección da pila tecnolóxica é enorme. Node.js, por exemplo, é perfecto.
Aprenderás como funcionan os sockets e como implementalos. Esta é a principal vantaxe deste proxecto.
Se es un programador de Laravel que quere traballar con sockets, le o meu
GitLab CI
Se es novo na integración continua (CI), xoga con GitLab CI. Configura algúns ambientes e proba a realizar un par de probas. Non é un proxecto moi difícil, pero seguro que aprenderedes moito del. Moitos equipos de desenvolvemento están a usar agora CI. Saber usalo é útil.
Aprenderás:
- Que é GitLab CI
- Como configurar
.gitlab-ci.ymlque lle indica ao usuario de GitLab o que debe facer - Como implementar noutros ambientes
Анализатор сайтов
Fai un raspador que analice a semántica dos sitios web e cree a súa valoración. Por exemplo, pode comprobar as etiquetas alt que faltan nas imaxes. Ou comprobe se a páxina ten metaetiquetas de SEO. Pódese crear un raspador sen interface de usuario.
Aprenderás:
- Como funciona o rascador?
- Como crear selectores DOM
- Como escribir un algoritmo
- Se non queres parar aí, crea unha interface de usuario. Tamén pode crear un informe en cada sitio web que consulte.
Определение настроений в социальных сетях
A detección de sentimentos nas redes sociais é unha boa forma de introducirse na aprendizaxe automática.
Podes comezar analizando só unha rede social. Todo o mundo adoita comezar con Twitter.
Se xa tes experiencia coa aprendizaxe automática, proba a recompilar datos de diferentes redes sociais e combinalos.
Aprenderás:
- Que é a aprendizaxe automática
Клон Trello
O que vai aprender:
- Organización das vías de tramitación de solicitudes (Routing).
- Arrastrar e soltar.
- Como crear novos obxectos (taboleiros, listas, tarxetas).
- Procesamento e comprobación dos datos de entrada.
- Desde o lado do cliente: como usar o almacenamento local, como gardar datos no almacenamento local, como ler os datos do almacenamento local.
- Desde o lado do servidor: como usar bases de datos, como gardar datos na base de datos, como ler os datos da base de datos.
, feito en React+Redux.
Панель админа
Unha aplicación CRUD sinxela, ideal para aprender o básico. Imos aprender:
- Crea usuarios, xestiona usuarios.
- Interactúa coa base de datos: crea, le, edita e elimina usuarios.
- Validar a entrada e traballar con formularios.
Трекер криптовалют (нативное мобильное приложение)
Calquera cousa: Swift, Objective-C, React Native, Java, Kotlin.
Imos estudar:
- Como funcionan as aplicacións nativas.
- Como recuperar datos da API.
- Como funcionan os deseños de páxina nativos.
- Como traballar con simuladores móbiles.
. Se atopas algo mellor, escribe nos comentarios.
Se estás interesado, aquí está .
Настроить собственный конфиг webpack с нуля
Tecnicamente, esta non é unha aplicación, pero é unha tarefa moi útil para entender como funciona webpack desde dentro. Agora non será unha "caixa negra", senón unha ferramenta comprensible.
Requisitos:
- Compilar es7 a es5 (básicos).
- Compile jsx a js - ou - .vue a .js (terá que aprender cargadores)
- Configura o servidor de desenvolvemento de webpack e a recarga do módulo quente. (vue-cli e create-react-app usan ambos)
- Usa Heroku, now.sh ou Github, aprende a implementar proxectos webpack.
- Configura o teu preprocesador favorito para compilar css - scss, less, stylus.
- Aprende a usar imaxes e svgs con webpack.
Клон Hackernews
Cada Jedi debe facer o seu propio Hackernews.
O que aprenderás no camiño:
- Como interactuar coa API de hackernews.
- Como crear unha aplicación dunha soa páxina.
- Como implementar funcións como ver comentarios, comentarios individuais, perfís.
- Organización das vías de tramitación de solicitudes (Routing).
Тудушечка
En serio? Tudushka? Hai milleiros deles. Pero créame, hai unha razón para esta popularidade.
A aplicación Tudu é unha boa forma de asegurarse de que comprende os conceptos básicos. Proba a escribir unha aplicación en Javascript vainilla e outra no teu marco favorito.
Aprender:
- Crea novas tarefas.
- Comproba que os campos estean cubertos.
- Tarefas de filtrado (completadas, activas, todas). Use
filterиreduce. - Comprender os conceptos básicos de Javascript.
Сортируемый drag and drop список
Moi útil para entender .
Imos aprender:
- Arrastra e solta a API
- Crea interfaces de usuario ricas
Клон мессенджера (нативное приложение)
Entenderás como funcionan tanto as aplicacións web como as nativas, o que o diferenciará da masa gris.
Que estudaremos:
- Sockets web (mensaxes instantáneas)
- Como funcionan as aplicacións nativas.
- Como funcionan os modelos en aplicacións nativas.
- Organizar rutas de tramitación de solicitudes en aplicacións nativas.
Editor de texto
O propósito dun editor de texto é reducir o esforzo dos usuarios que intentan converter o seu formato nunha marca HTML válida. Un bo editor de texto permite aos usuarios dar formato ao texto de diferentes xeitos.
Nalgún momento, todos usaron un editor de texto. Entón, por que non ?
Клон Reddit
é unha agregación de noticias sociais, clasificación de contido web e sitio de discusión.
Reddit ocupa a maior parte do meu tempo, pero sigo pasando o rato. Crear un clon de Reddit é unha forma eficaz de aprender a programación (mentres navegas por Reddit ao mesmo tempo).
Reddit ofrécelle un moi rico. Non deixes ningunha función nin fagas cousas ao azar. No mundo real con clientes e clientes, non podes traballar ao azar ou perderás rapidamente o teu traballo.
Os clientes intelixentes daranse conta inmediatamente de que o traballo se está a facer mal e atoparán a outra persoa.
Публикация пакета NPM с открытым исходным кодом
Se escribe código Javascript, é probable que use un xestor de paquetes. Un xestor de paquetes permítelle reutilizar o código existente que outras persoas escribiron e publicaron.
Comprender o ciclo completo de desenvolvemento dun paquete proporcionará unha experiencia moi boa. Hai moitas cousas que debes saber ao publicar código. Debes pensar na seguridade, na versión semántica, na escalabilidade, nas convencións de nomenclatura e no mantemento.
O paquete pode ser calquera cousa. Se non tes unha idea, crea o teu propio Lodash e publícao.
Lodash:
Ter algo que fixeches en liña ponche un 10 % por riba dos demais. sobre fontes abertas e paquetes.
Учебный план freeCodeCamp
freeCodecamp recolleu moito .
freeCodeCamp é unha organización sen ánimo de lucro. Consiste nunha plataforma de aprendizaxe interactiva baseada na web, un foro comunitario en liña, salas de chat, publicacións de Medium e organizacións locais que pretenden facer que o desenvolvemento web de aprendizaxe sexa accesible para todos.
Estarás máis que cualificado para o teu primeiro traballo se consegues completar todo o curso.
Создайте HTTP-сервер с нуля
O protocolo HTTP é un dos principais protocolos a través dos cales o contido viaxa por Internet. Os servidores HTTP úsanse para servir contido estático como HTML, CSS e JS.
Ser capaz de implementar o protocolo HTTP desde cero ampliará o teu coñecemento sobre como interactúan as cousas.
Por exemplo, se usa NodeJs, entón sabe que Express ofrece un servidor HTTP.
Para referencia, mira se podes:
- Configura un servidor sen utilizar ningunha biblioteca
- O servidor debe ofrecer contido HTML, CSS e JS.
- Implementando un enrutador desde cero
- Supervisar os cambios e actualizar o servidor
Se non sabes por que, usa e intente crear un servidor HTTP dende cero.
Десктопное приложение для заметок
Todos tomamos notas, non si?
Imos crear unha aplicación de notas. A aplicación precisa gardar notas e sincronizalas coa base de datos. Crea unha aplicación nativa usando Electron, Swift ou o que che guste e o que funcione para o teu sistema.
Non dubides en combinar isto co primeiro reto (editor de texto).
Como extra, proba a sincronizar a versión de escritorio coa versión web.
Подкасты (клон Overcast)
Quen non escoita podcasts?
Crea unha aplicación web coas seguintes funcionalidades:
- Crear unha conta
- Busca podcasts
- Valora e subscríbete a podcasts
- Detén e xoga, cambia a velocidade, as funcións de avance e retroceso durante 30 segundos.
Proba a usar a API de iTunes como punto de partida. Se coñeces outros recursos, pódeos nos comentarios.
Captura de pantalla
Ola! Estou filmando a miña pantalla agora mesmo!
Crea unha aplicación web ou de escritorio que che permita capturar a túa pantalla e gardar o clip como .gif
Aquí como conseguir isto.
Fontes
Fonte: www.habr.com