Apresentando o Engaslider: Um Carrossel de Imagens Leve e Independente com Vanilla JS

 

Desenvolver interfaces limpas e responsivas é sempre um desafio. Muitas vezes, ao precisar de um simples carrossel de imagens (slider), acabamos importando bibliotecas gigantescas e dependências pesadas, como jQuery, que incham nosso projeto desnecessariamente.

Foi pensando nisso que desenvolvi o Engaslider: um plugin de slider de imagens focado em simplicidade, construído 100% com JavaScript puro (Vanilla JS) e CSS puro. Sem frameworks pesados, sem dores de cabeça.

O que o Engaslider oferece?

O Engaslider foi desenhado para ser direto ao ponto. Ele entrega o que a maioria dos projetos precisa de forma extremamente leve:

• Transições Suaves (Fade): Animações criadas diretamente via @keyframes do CSS, garantindo performance pelo navegador.
• Múltiplas Formas de Navegação: Suporte a setas (próximo/anterior), navegação por "dots" (bolinhas circulares) e uma barra lateral/inferior de miniaturas (thumbnails).
• Autoplay Configurável: Basta passar a opção correta e o seu slider começa a rodar sozinho.
• Zero Dependências: Instale e use, simples assim.

 

A Evolução: Refatoração Recente e Boas Práticas

Recentemente, o projeto passou por uma importante análise e refatoração de código (v0.2) para se adequar aos mais rígidos padrões da web moderna (W3C).

O que mudou por debaixo dos panos?

1. Semântica HTML: Antigamente o script dependia de atributos id que se repetiam nas imagens (id="slider-image"). Isso foi totalmente limpo! Agora o motor de renderização busca de forma inteligente pelas classes, deixando o HTML 100% válido.
2. Limpeza no JavaScript: Reatribuições desnecessárias e variáveis soltas foram limpas, melhorando a velocidade de execução do script (slidershow.js).

O Futuro do Projeto: Rumo à Arquitetura Modular

O Engaslider está crescendo e os próximos passos já estão desenhados. A meta é tornar a biblioteca escalável o suficiente para competir com as grandes do mercado em termos de arquitetura. O plano (roadmap) inclui:

• Refatoração para POO (Orientação a Objetos): Vamos encapsular toda a lógica em uma Classe ES6. Isso permitirá que os desenvolvedores tenham quantos sliders quiserem na mesma página, sem que um interfira no outro.
• Customização via Variáveis CSS: Todo o estilo (cores, tamanhos, botões) será passado para Custom Properties (:root), permitindo que as equipes de design customizem o Engaslider mexendo em apenas 3 linhas de CSS!
• Sistema de Gestos (Swipe): Implementação de arraste para dispositivos mobile.

Teste você mesmo!

Se você está criando um site e não quer carregar bibliotecas enormes apenas para exibir algumas fotos, o Engaslider é para você.

O projeto é de código aberto e todos são bem-vindos para contribuir, sugerir melhorias ou utilizá-lo livremente!

👉 Acesse o repositório no Github e veja o código fonte
👉 Veja os Exemplos Rodando Online

Até a próxima, e bons códigos!

Novidades no iScrev Notes: Evolução da arquitetura e apoio via PIX!

Imagem sintética ilustrativa criada por CG e IA.

Maio foi um mês de grandes avanços no iScrev Notes, por dentro e por fora!

Além de refinarmos a interface e o novo fluxo de apoio via PIX para nossos usuários no Brasil, mergulhamos fundo no código para preparar o próximo salto de qualidade do projeto.

Analisamos a arquitetura atual, consolidamos a documentação técnica e traçamos um plano claro para modularizar o núcleo do aplicativo. O objetivo? Tornar o iScrev Notes ainda mais estável, seguro e fácil de evoluir, sem nunca perder a alma de ser uma ferramenta de escrita privada, local-first e sem distrações.

Quer saber mais sobre os desafios técnicos, a importância da refatoração e os próximos passos dessa jornada? Confira os detalhes no nosso novo post do blog! 

 

www.iscrev.com 

iScrev Um Pensamento do Dia

 

WSRicardo Games: uma nova experiência interativa para quem gosta de desafios, criatividade e artes

 

O universo dos jogos digitais acaba de ganhar um novo espaço dedicado à criatividade, lógica e entretenimento acessível: a seção Games do site WSRicardo. A proposta vai além de simplesmente jogar, trata-se de uma experiência interativa que une tecnologia, design e raciocínio em um ambiente leve e intuitivo.

Disponível em https://www.wsricardo.com.br/games/index.html, a página reúne jogos desenvolvidos para funcionar diretamente no navegador, sem necessidade de instalação. Isso significa que qualquer usuário pode acessar, jogar e se divertir em poucos segundos, seja no computador ou em dispositivos móveis.

Entre os destaques está o jogo de caça-palavras, que desafia o jogador a encontrar termos escondidos em um grid dinâmico. Com interface moderna, efeitos visuais suaves e feedback em tempo real, o jogo estimula a atenção, a memória e o raciocínio lógico de forma envolvente. A experiência é complementada por elementos visuais cuidadosamente trabalhados, criando uma sensação de progresso e recompensa a cada etapa concluída.

A iniciativa reflete uma tendência crescente no desenvolvimento web: transformar o navegador em uma plataforma completa de experiências interativas. Ao integrar programação, design e usabilidade, o projeto demonstra como tecnologias modernas podem ser utilizadas para criar aplicações leves, responsivas e visualmente atraentes.

 

 

Outro ponto relevante é a constante evolução da plataforma. Novos jogos, melhorias na interface e recursos adicionais estão previstos, consolidando a seção como um espaço em expansão dentro do site. A proposta é oferecer conteúdos que não apenas entretenham, mas também estimulem o aprendizado e a criatividade.

Com uma abordagem simples, direta e acessível, o WSRicardo Games se posiciona como uma alternativa interessante para quem busca desafios rápidos no dia a dia, sem abrir mão de qualidade visual e boa experiência de uso.

A seção já está disponível e aberta ao público através do site www.wsricardo.com.br, convidando todos a explorarem, jogarem e descobrirem novas formas de interação digital. Novas atualizações e caças-palavras serão postados diariamente.

 

iScrev Notes aposta em simplicidade e foco para reinventar o uso de diários digitais

 

Em um ambiente digital marcado por excesso de funcionalidades e constante disputa por atenção, surgem iniciativas que seguem uma direção oposta. É o caso do iScrev Notes, um aplicativo web de anotações e diário online que aposta em uma experiência mais silenciosa, centrada na escrita e na organização pessoal.

A proposta é direta: oferecer ao usuário um espaço digital que funcione como um caderno, mas sem as camadas de complexidade comuns em muitas ferramentas atuais. Ao acessar www.iscrev.com, o usuário encontra uma interface limpa, com poucos elementos visuais e foco imediato na escrita com uma abordagem que privilegia o uso contínuo e reduz a fricção inicial.

Uma ferramenta que prioriza o essencial

Diferente de plataformas mais robustas de produtividade, que acumulam funções e integrações, o iScrev Notes se posiciona como uma alternativa mais leve. A ideia não é competir em volume de recursos, mas em clareza de propósito.

O funcionamento segue uma lógica simples: abrir, escrever e salvar. Não há exigência de cadastro ou configuração prévia, o que aproxima a experiência do uso de um caderno físico. Esse modelo reduz barreiras de entrada e torna o uso mais intuitivo, especialmente para quem busca registrar ideias de forma rápida.

 

 

Estrutura técnica discreta, mas funcional

Por trás da simplicidade, o aplicativo utiliza tecnologias típicas de aplicações web modernas. As informações são armazenadas diretamente no navegador do usuário, o que permite funcionamento mesmo sem conexão constante com a internet.

Esse modelo, baseado em armazenamento local, elimina a dependência imediata de servidores externos e reforça uma lógica de uso mais pessoal. Em termos práticos, isso significa que o usuário pode escrever e acessar suas anotações de forma direta, sem processos intermediários.

Além disso, o iScrev Notes oferece suporte a recursos como formatação em Markdown e escrita de expressões matemáticas, ampliando seu uso para além de um diário tradicional. Essas funcionalidades permitem que o aplicativo também seja utilizado em contextos de estudo e organização de conteúdo mais técnico.

Entre o digital e o pessoal

O design do iScrev reforça sua proposta. A interface adota uma estética suave, com referências visuais que remetem a papel e escrita manual, evitando elementos que possam competir pela atenção do usuário. A ausência de distrações não é apenas estética, mas parte central da experiência.

Esse posicionamento dialoga com uma tendência crescente de ferramentas digitais que buscam reduzir estímulos e recuperar a concentração do usuário,  contrastando com plataformas que priorizam engajamento contínuo.

 

Visão mobile

 

Um espaço de escrita sem interferência

O iScrev Notes se insere em um nicho específico dentro das ferramentas digitais: o de aplicativos que não tentam conduzir o usuário, mas apenas oferecer suporte ao seu processo de pensamento.

Ao abrir mão de notificações, automações excessivas e fluxos complexos, o aplicativo propõe uma relação mais direta com a escrita. Nesse contexto, a tecnologia atua como meio, não como protagonista.

O resultado é uma ferramenta que, embora simples em sua proposta, atende a diferentes perfis de uso, desde registros pessoais até anotações de estudo, mantendo como princípio central a ideia de um espaço reservado, funcional e sem distrações.

 

Wandeson Ricardo

 

PaintPixel - Desenhando no Navegador

Código

Engaslider - Slider & Carrousel Images

 New Update Features for Carousel Images EngaSlider

Horizontal Thumbnails navigation

https://github.com/wsricardo/engaslider

Registro Br e Certificados SSL e Configuração TLSA

Painel Configuração do Domínio - Registro.br

 

 Recentemente esbarrei na dificuldade de determinar acesso ao meu site via "https" (cadeado ao lado do nome do site) indica a segurança do site. As opções conforme os vídeos no fim desse post que encontrei foi o uso dos sites abaixo.

 

• ZeroSSL - https://zerossl.com/
  
• CloudFlare - cloudflare.com

 

ZeroSSL 

 

 

 

CloudFlare