teleren/devto huggingface dataset:
8 Creative Text Animations for Your Website's Hero Area 😍🎉
Tags: webdev, design, typography, fonts
Published: 2022-04-19 13:34:53

---
title: 8 Creative Text Animations for Your Website's Hero Area 😍🎉
published: true
description: 
tags: webdev, design, typography, fonts
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2m0d263w5rzpndwx3v3d.png
canonical_url: https://madza.hashnode.dev/8-creative-text-animations-for-your-websites-hero-area
---
Modern web development is about grabbing the visitors' attention. There are several ways of making your website more eye-catching and engaging. One of the most appealing methods is adding animated hero text to your landing page. 

In this article I have compiled some of the most creative effects I've seen, to inspire you for your own projects in the future.

For each animation, I will provide a direct link, an interactive preview so you can get an initial impression on the fly as well as the author links, so you can explore more of their work, too.

## 1. [Hover slider (dark/light)](https://codepen.io/ig_design/pen/MRbJWW)
By: [Ivan Grozdic](https://codepen.io/ig_design)

{% codepen https://codepen.io/ig_design/pen/MRbJWW %}

## 2. [Fluid text hover](https://codepen.io/robin-dela/pen/KKPYoBq)
By: [Robin Delaporte](https://codepen.io/robin-dela)

{% codepen https://codepen.io/robin-dela/pen/KKPYoBq %}

## 3. [CSS Perspective Text Hover](https://codepen.io/bosworthco/pen/YWBLpR)
By: [James Bosworth](https://codepen.io/bosworthco)

{% codepen https://codepen.io/bosworthco/pen/YWBLpR %}

## 4. [Apple TV - Word Rotation](https://codepen.io/stevenlei/pen/RwpRgzy)
By: [Steven Lei](https://codepen.io/stevenlei)

{% codepen https://codepen.io/stevenlei/pen/RwpRgzy %}

## 5. [Spotlight Cursor Text](https://codepen.io/carolineartz/pen/rNaGQYo)
By: [Caroline Artz](https://codepen.io/carolineartz)

{% codepen https://codepen.io/carolineartz/pen/rNaGQYo %}

## 6. [SVG Text Mask w/ Video Fill](https://codepen.io/dudleystorey/pen/QvvEYQ)
By: [Dudley Storey](https://codepen.io/dudleystorey)

{% codepen https://codepen.io/dudleystorey/pen/QvvEYQ %}

## 7. [SVG Text Animation w/ Stroke Offset](https://codepen.io/Ayachem/pen/KaLbZK)
By: [Mack Ayache](https://codepen.io/Ayachem)

{% codepen https://codepen.io/Ayachem/pen/KaLbZK %}

## 8. [Shattering Text Animation](https://codepen.io/ARS/pen/pjypwd)
By: [Arsen Zbidniakov](https://codepen.io/ARS)

{% codepen https://codepen.io/ARS/pen/pjypwd %}

<hr>

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!
Visit my [Blog](https://madza.dev/blog) for more articles like this.
⭐ 20 PERGUNTAS QUE VOCÊ PRECISA saber responder nas entrevistas técnicas
Tags: hackeandoatechinterview
Published: 2022-04-19 13:21:12

Algumas perguntas são muito comuns nas entrevistas técnicas, e pensar sobre elas previamente provavelmente facilitar o processo e te deixará mais tranquilo(a) para as outras perguntas que não estavam previstas.

1.Você pode me contar sua trajetória profissional? 
Essa é a pergunta que provavelmente estará em todas as entrevistas. Aqui vale pensar sobre as experiências que trariam mais valor para a empresa que você quer entrar.

2. O que te interessou nessa vaga?
Talvez não te perguntem diretamente isso, mas ter isso em mente ajuda na entrevista.

4. Qual o projeto que você mais gostou de trabalhar?

5. Qual o maior projeto que você já atuou? Como era a estrutura do time?

6. Você poderia citar algum projeto ou situação que deu errado, e como você lidou com essa situação?

7. Você já cometeu alguma falha técnica? Tem alguma que lembre mais? 
Aqui é válido demonstrar que errou, e o que aprendeu com isso. É muito difícil que as pessoas não tenham errado técnicamente, o que importa é como lidaram com isso.

8. Qual você acha que é uma característica que o time não pode deixar de ter?

9. O que você costuma fazer para se manter atualizado(a)?

10. Você já usou algum padrão de projeto? Poderia citar padrões arquiteturais que já utilizou, ou design patterns?

11. Você costuma utilizar algum padrão para os commits?

12. Você disse que utiliza o paradigma de programação <INSIRA AQUI SEU PARADIGMA>, poderia me explicar quais são os principais conceitos utilizando exemplos do mundo real?

13. Como era a estrutura do time que você estava atuando na empresa anterior? Você trabalhou em conjunto com design/QA/PM?

14. Como você se sente realizando pair programming ou repassando informações para outras pessoas?

15. Você utiliza práticas de teste? Qual framework você já utilizou?

16. Como você lida com mudanças e feedbacks?
Isso pode não ser perguntado, mas provavelmente será analisado durante o teste de hands-on.

17. Quais conhecimentos você tem que vão fazer mais diferença para o projeto? 

18. Quais conhecimentos você espera evoluir enquanto estiver trabalhando conosco?

19. Quais são os projetos que te deixam mais motivado(a)?

20. Você tem alguma pergunta? Tem sim, tem 20 perguntas pra você utilizar como base aqui: https://dev.to/engenheiracoelho/20-perguntas-para-fazer-nas-entrevistas-tecnicas-j8b
E aí, o que achou das perguntas? Adicionaria alguma coisa? Conta pra mim!

Deixe seu comentário!
Perfect React App
Tags: vite, react, tailwindcss, javascript
Published: 2022-04-19 12:58:29

**Explanation For Each Dependencies**

[React Router](https://reactrouter.com/) ➣ Routing (example.com/something instead of example.com/something.html)

[TailwindCSS](https://tailwindcss.com) ➣ Quicker Styling

[Framer Motion](https://framer.com/motion) ➣ CSS Animation



**Creating A Vite.js + React.js App**
```
// Command-Line

npm create vite@latest demo --template react
or
npm create vite@latest demo -- --template react

cd demo
npm install
```

**Installing Dependencies**
```
// Command Line

npm install react-router-dom@6
npm install framer-motion
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

**Configure Frameworks**
```
// tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
```

**Use React Router**
```
// App.jsx

import { BroswerRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
    return (
        <BroswerRouter>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/page2' element={<Page2 />} />
            </Routes>
        </BroswerRouter>
    )
}

function App() {
    return (
        <>
            <h1>Home</h1>
            <Link to='/'>Home</Link>
            <Link to='/page2'>Page2</Link>
        </>
    )
}

function Page2() {
    return (
        <>
            <h1>Page2</h1>
            <Link to='/'>Home</Link>
            <Link to='/page2'>Page2</Link>
        </>
    )
}

export default App;
```
terminal commands
Published: 2022-04-19 12:48:00

1. Change Directory

Command: cd (..)

What it does: This command will change the directory that you’re currently working with in the Terminal in order to execute other commands on a different directory, view the contents of a different directory or open a file in a different directory. 

2. Listing Directory

Command: ls (-a)

What it does: Use this command after navigating into a directory using the cd command to view the contents (files and directories) inside of the current directory. Use the argument -l (ls -l) to get even more information about each of the files, including the permissions, owner and date created.

3. Create a directory

Command: mkdir

What it does: This command will allow you to create a directory (folder) right from the CLI. When you need a place to store new files, just use this command to add a new directory in the current working directory, or specify a full path to the location where you want the new directory to be placed.

4. Clear the Terminal screen of all previous commands

Command: Clear

What it does: It removes all previously typed commands from the Terminal view and gives you back a clean slate to work from. Instead of typing clear, you can also alternatively press Command+K to perform the same action.

5. pwd
6. cat
Type checking and auto-completion in Plunker
Tags: typescript, plunker, webdev
Published: 2022-04-19 12:44:07

At [AG Grid](https://ag-grid.com/) we use [Plunker](https://plnkr.co/edit/Q1z2ksmvW2Pk83zc?open=main.ts) to provide an interactive playground for all of our code examples. In the latest release we have updated our template to take advantage of Plunker's Typescript support.

## Improved Developer Experience

We believe that the addition of in browser Typescript support will be a massive win for our typed examples: Typescript, Angular and React. You will now get auto completion in Plunker, making it quicker to adjust config, as you do not have to know the property name exactly. 

![Plunker with auto complete
 ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imhtmc4sn8r20rmsuioy.gif)

You also can now view the JsDoc annotations directly in Plunker, to help explain each property while you are using them. 
  
Finally, if you make a mistake and use the wrong property you will be alerted to this with red squiggles. No more will you be left scratching your head wondering why a demo is not working due to a typo!

![Catch Type Errors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmz8kf86rx67lqj3iohn.png)

You can try this out for yourself in this [Plunker](https://plnkr.co/edit/Q1z2ksmvW2Pk83zc?open=main.ts).

## How to enable Typescript support in Plunker?

The key to having type support in Plunker is the presence of a `package.json` file. If this file is present then Plunker knows where to find the types for the packages included. This works well with AG Grid as we publish our types as part of our packages. 

As an example this is the `package.json` file for our `React Hooks TS` demos. We include `react` and `react-dom` so that we have typing for hooks as well as our own AG Grid apis and configuration. 

```json
{
  "name": "ag-grid-packages",
  "description": "NOTE: This package.json file is solely used by Plunker to look up type definitions.",
  "dependencies": {
    "react": "17",
    "react-dom": "17",
    "ag-grid-react": "*",
    "ag-grid-community": "*",
    "ag-grid-enterprise": "*"
  }
}
```

As the description says, this `package.json` file does not control the versions used in the demo. That is still done via our SystemJs config. 

However, watch this space as we may convert our examples to use the [Plunker Runtime](https://github.com/plnkr/runtime) that would enable the `package.json` file to configure the versions used within the app.
Deploy your next site using Vercel
Tags: webcomponents, webdev, programming, opensource
Published: 2022-04-19 12:43:52

##What is Vercel?
Vercel is a "Function as a Service" platform to allow anyone to build, launch, and maintain any site for... free! Although there are paid models all the functionality to get a site up and running is completely free and relatively simple to use.

##Why is there a web components tag on this post?
Currently, to deploy a site testing out web components you need what feels like an entire infrastructure behind it just to see if a simple button is working the right way.
Now with Vercel's deployment, web components has never been easier!

##Getting Started
First, create a [Vercel](https://vercel.com/dashboard) account. I'd recommend creating the account with the Github option, so your Vercel account is linked to your repositories. I would also recommend only sharing projects you want to deploy with your Vercel account so that Vercel does not try to deploy with other repos.

###How to Deploy

####Importing the Project
There are two main ways to deploy your site with Vercel; using the Vercel CLI or through Github.

I'm going to explain the Github route since I personally think it is the best way to link your projects and keep them updated in Vercel.

All of the docs for alternative routes can be found on Vercel's [documentation](https://vercel.com/docs/concepts/deployments/overview#vercel-cli).

Now that you've linked your Github account to Vercel you will see a dashboard much like this without any existing projects.

![vercel dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1rvm1ruoqypd5bv2wc2.JPG)

Here you can click "New Project" and select the Github repository you want to deploy. If you've turned on the selective repo sharing, you will need to
* Select "Add Github Account" in the drop down

![vercel github link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwv5k63m9gv6h38ae4ap.png)

* Choose your Github account
* Scroll down to "Repository Access" and choose the repo you want to share

![repository access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdmgtodhjvjqj7mvnoe2.png)
* Hit the "Save" button
* Hit the "Import" button on that project

####Configuring
The best part of Vercel is most deployment configuration is done for you. The main three areas you need to edit next are "Root Directory", "Build and Output Settings", and "Environment Variables". Other than that... you're done.

To deploy a project with web components, you will need a rollup-config file along with a build command that runs that file.

If you need help with that configuration, check out the files in one of my Github [repos](https://github.com/mwagnerPSU/sorting-question)

###Deployed!
That's it! Hit the big "Deploy" button and watch your project come to life on a free site that is constantly updated with each push to your repo's main branch. There is no other updates needed on your side as Vercel will automatically rebuild your site with each new pull request.
Comparing Micro-Frontends and Microservices. Questionnaire
Tags: webdev, microservices, microfrontends, architecture
Published: 2022-04-19 12:32:10

Hello everyone!

In our thesis project we are investigating practical and experienced differences in working with the two web application architectures **Micro-Frontends** and **Microservices**.

If you or anyone you know have worked (or are working) with any of these two architectures, we would love your help in filling out our survey: https://form.jotform.com/221032684944355

The questions should only take about 3-5 minutes. 

Thank you in advance!
// Mårten and Erik
Download Case Study - Developing A Feature-Rich Mobile App Using Flutter
Tags: flutter, ios, android, mobileapp
Published: 2022-04-19 12:25:20

The client's website allows Consumers of energy to prepay for their usage through their Online/Mobile Portal, with payments instantly deposited in Owners' accounts. Using the client's website, owners of secondary meters can conveniently receive payments from their tenants without collecting coins, cards, or tokens.

The client was looking to build a mobile app that will be a new platform for their users with additional features than existing web apps. They were impressed with our suggestion of using the Flutter framework for [developing a mobile application](https://www.clariontech.com/mobile-app-development). We crafted a feature-rich mobile application for the iOS and Android platforms. **[Download Case Study Feature-Rich Mobile App Using Flutter](https://www.clariontech.com/case-studies/flutter-mobile-app-development-for-energy-consumer-management-company)**
Terminal Komandalar
Published: 2022-04-19 12:24:55

## `pwd`
-joriy papka manzilini chop etadi

```sh
pwd
```

## `clear`
-terminaldagi hamma tekstni tozalab yuboradi

## `ls`
-joriy papka ichidagi hamma narsani chop etadi
- `ls -a` yashirin fayllarni ham chop etadi

##  `mkdir` (make directory)
-yangi papka yaratadi

##  `cd` (current directory)
-hozirgi papkani o'zgartiradi aniqrog'i boshqa manzilga olib o'tadi

## `cat`
-berilgan tekst fayl ichidagi kontentlarni terminalga olib chiqadi
Lightspeed eCommerce Integration
Published: 2022-04-19 12:22:39

Lightspeed eCommerce Integration
Our Lightspeed ecommerce integration enables your online store and Lightspeed Retail POS to communicate with each other and keep inventory in sync. Integrate Lightspeed Retail POS with your online eCommerce and Marketplaces in just a few clicks, within five minutes you can connect and configure your all platforms together. So it is easy to manage Products, Inventory, Customers, and Sales Orders synchronization.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/birnxiuvow9uwrgz3cuh.png)

Sync product details, prices and inventory from Lightspeed to your online store automatically
Connect Lightspeed simple as well as variation products
Link multi -store inventories
Use Lightspeed Retail Multi-Level products' prices in online store
Associate Lightspeed custom fields with your online store
Post your online orders and customers into Lightspeed Retail POS
Keep inventory 100% accurate across every Lightspeed POS store, online sales channel and marketplace
Save valuable time and resources
Proficient and friendly 24*7 support
Start 15 Days Free TrialLightspeed eCommerce Integration
Our Lightspeed ecommerce integration enables your online store and Lightspeed Retail POS to communicate with each other and keep inventory in sync. Integrate Lightspeed Retail POS with your online eCommerce and Marketplaces in just a few clicks, within five minutes you can connect and configure your all platforms together. So it is easy to manage Products, Inventory, Customers, and Sales Orders synchronization.

Sync product details, prices and inventory from Lightspeed to your online store automatically
Connect Lightspeed simple as well as variation products
Link multi -store inventories
Use Lightspeed Retail Multi-Level products' prices in online store
Associate Lightspeed custom fields with your online store
Post your online orders and customers into Lightspeed Retail POS
Keep inventory 100% accurate across every Lightspeed POS store, online sales channel and marketplace
Save valuable time and resources
Proficient and friendly 24*7 support
Start 15 Days Free Trial
Terminal Part 1
Published: 2022-04-19 12:22:35

## `pwd`
- joriy papka manzilini chop etadi

```sh
pwd
```
## `clear`
- terminaldagi hamma tekstni tozalab yuboradi

```sh
clear
```

## `ls`
- shu papka ichidagi hamma narsani list qilib chiqarib beradi

```sh
ls 
```

## `ls (-a)`
- yashirin faylni ochadi

```sh
ls (-a)
```

## `mkdir`
- berilgan manzilda papka yaratadi

```sh
mkdir
```

## `cd - current directory`
- joriy papkani o'zgartiradi, ya'ni sizni boshqa manzilga olib boradi

```sh
cd
```

## `cat`
- berilgan tekst fayl ichidagi kontentini terminalga chop etadi

```sh
cat
```
terminal komandalar
Published: 2022-04-19 12:22:24

## 'pwd'
- joriy papka manzilini chop etadi

```sh
pwd
```
## 'clear'
- terminaldagi hamma tekstni tozalab yuboradi

```sh
clear
```
## `ls`
- shu papka ichidagi hamma narsani listga chiqarib beradi

## `ls -a`
- yashirin fayllarni ham chopetadi 
```sh
ls -a
```
## `mkdir`
```sh
make directory
```
- berilgan nomda papka yaratadi

## `cd` (current directory)
- istalgan papkaga o'tadi

## `cat`
- berilgan tekst fayl ichidagi kontentni terminalga chop etadi

## `cd ~`
 -`home` papkaga qaytadi

##`cd . .`
 - bitta papka ortga qaytiladi

##`rm`(remove) fayl nomi
 - berilgan  faylni o`chiradi

##`rm -r` (recursion)
 - berilgan papkani o`chiradi

##`date`
  - o`sha kungi sanani qayd etadi

##`mkdir $(date +'%d-%m-%Y')`
 - bugungi kun bilan papka yaratadi

##`echo salom >> salom.txt`
 - joriy papkada text fayl ochadi
Terminal komandalar| Part 1
Tags: beginners
Published: 2022-04-19 12:14:08

```sh
terminal
```

## pwd (print working directry)
- joriy papka manzilini ko'rsatadi

## clear
- terminaldagi hamma tekstni tozalaydi

## ls
- joriy papka ichidagi hamma narsani chop etadi
- -a yashirin fayllarni ham chop etadi

## mkdir [file name]
- papka yaratadi

## cd current directry
- boshqa papkani ochib kiradi

## cat [file name]
-text fayllar ichidagi ma'lumotni ko'rsatadi
terminal
Published: 2022-04-19 12:13:02

## `pwd`

- print working directory

## `clear`

- delete all messages in terminal page

## `ls (-a)`

- terminaldagi papkalar ro'yhatini chiqarib beradi

## `mkdir`

- terminalga papka qo'shadi

## `cd` 

- current directoryni o'zgarrtiradi

## `cd ..`

- shortcut, backspace

## `cat`

- terminaldagi txt fayllarni terminal ekaraniga chiqazib beradi.
Terminal komandalar | Part 1
Tags: beginners, wecoded, firstyearincode, cpp
Published: 2022-04-19 12:12:38

## `pwd`(print working directory)
- joriy papka manzilini chop etadi. 
```
/home/runner/Terminal/FOUNDATION
```

## `clear`
- terminaldagi hamma textni tozalab yuboradi.

## `ls`
- list of files in terminal
```
main.cpp Makefile replit.nix
```

## `ls -a`
- list of all files (with hidden files)
```
.  ..  .cache  .ccls-cache  main.cpp  Makefile  .replit  replit.nix
```

## `mkdir` [directory]
```
mkdir FOUNDATION
```

## `cd`(current directory)
- changing pwd
```
cd FOUNDATION
```

## `cd ..`
- bitta orqaga qaytish
```
cd ..
```

## `cat [file name]`
- papkadagi text filelarni ko'rsatadi
```
#include <iostream>

int main() {
  std::cout << "Hello World!\n";
} 
```
Using a different geocode service for different countries
Tags: geocode, javascript, api, node
Published: 2022-04-19 12:01:32

When we want to convert an address into latitude and longitude, we usually have to pick the best provider we can and deal with the varying levels of quality. For instance, sometimes one provider is better than another in a specific area of the world. The [first article in this series](https://dev.to/superface/integrate-geocoding-the-right-way-4e7l) shows how to access multiple geocoding providers with a single implementation using Superface OneSDK. Let’s now take a look at how can different providers be used based on the country to get the best quality.

Let’s say we do some research and determine that Google Maps work better in the US than other providers (this may not be true). And let’s say that we decide to use Google Maps only for US addresses, but Here.com for everywhere else.

We can write a bit of JavaScript to capture this decision.

```js
const providerName = addressCountry === 'US' ? 'google-apis-maps' : 'here';
```

Normally, after we sign up for accounts for these services, we’d have to find their API documentation, learn how their API works, install their SDKs or build our own integration code, then manage all the differences between them over time. Instead, we can use our [OneSDK](https://superface.ai/docs/reference/one-sdk) to make this simpler.

```js
const provider = await sdk.getProvider(providerName);
const result = await profile.getUseCase('Geocode').perform(
  {
	  addressCountry: 'United States',
		addressLocality: 'Manhattan',
		postalCode: 'NY 10036',
		streetAddress: 'Times Square',
  },
  { provider }
);
```

We’re able to interact with both Google Maps and Here.com with less than 10 lines of code, and we can jump between them based on any criteria we choose. In this case, we chose based on the country, but maybe for your case it needs to be something different.

Check out [our geocode page](https://superface.ai/solutions/geocode) to see learn more about using Superface for geocoding.

### Read next
- [Integrate geocoding the right way](https://dev.to/superface/integrate-geocoding-the-right-way-4e7l)
- [Reliable IP Geolocation with Superface](https://dev.to/superface/reliable-ip-geolocation-with-superface-5372)

This post was originally written by @smizell