{
"version": "1.0",
"generated": "2026-08-07T21:04:04.148Z",
"site": {
"title": "Matheus Costa — UX/UI Designer e Desenvolvedor Front-end",
"description": "UX/UI Designer e Desenvolvedor Front-end em São José do Rio Preto/SP. Sites, landing pages e e-commerces com estratégia, estética e clareza.",
"url": "https://matheuscostadesign.github.io"
},
"entries": [
{
"id": "0382542adb603d5b",
"url": "https://matheuscostadesign.github.io/blog/comandos-basicos-de-git",
"title": "Comandos básicos de Git — Blog Matheus Costa",
"content": "[Voltar ao Blog](/blog) Git\n\n## Comandos básicos de Git\n\nMatheus Costa 03 de Maio de 2023\n\nInicializar repositório Git\n\ngit init\nCriar arquivo .gitignore\n\nnpx gitignore node\nVer os arquivos que serão adicionados\n\ngit status\nAdicionar todas mudanças (stage)\n\ngit add .\nComitar e escrever o que foi feito\n\ngit commit -m \"feat: primeiro commit\"\nGarantir que está na branch “main”\n\ngit branch -M main\nLinkar a pasta local com a pasta remota do repositório no Github\n\ngit remote add origin https://github.com/matheuscostadesign/aluratube.git\nMandar os arquivos pra pasta remota (Push to Remote)\n\ngit push -u origin main\n\n[Ver todos os artigos](/blog)",
"description": "Aprenda neste post alguns dos comandos básicos de Git",
"keywords": [
"blog",
"main",
"pasta",
"repositório",
"gitignore",
"arquivos",
"commit",
"branch",
"remota",
"github"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/blog/comandos-basicos-de-git"
}
},
{
"id": "053d328d2832f3b0",
"url": "https://matheuscostadesign.github.io/blog/como-remover-o-fundo-de-uma-imagem-com-css",
"title": "Como remover o fundo de uma imagem com CSS — Blog Matheus Costa",
"content": "[Voltar ao Blog](/blog) Frontend\n\n## Como remover o fundo de uma imagem com CSS\n\n*\nMatheus Costa 15 de Setembro de 2023\n\n## Imagens com fundo transparente no CSS\n\n- Sabia que é possível remover o fundo de uma imagem via código CSS?\n\n- Basta adicionar a propriedade “mix-blend-mode” como “multiply”\n\n- Veja o exemplo abaixo:\n\n## HTML\n\n<img src=\"/assets/logo.png\" class=\"logo\" />\n\n## CSS\n\n.logo {\nmix-blend-mode: multiply;\n}\n\n## React\n\n- Essa solução é viável para quem precisa ter um controle da imagem **tanto em temas claros, quanto em temas escuros** (dark/light mode*).\n\n- Nesse exemplo abaixo a ideia era que **a imagem permanecesse com suas cores originais no modo claro e que no modo escuro fosse aplicado a transparência nas partes brancas da imagem e que todo seu conteúdo fosse alterado para a cor branca.**\n\n- Veja abaixo o exemplo:\n\n<Box\nsx={\nmixBlendMode: themeName === \"dark\" ? \"plus-lighter\" : \"multiply\",\n}\n>\n<img\nsrc={img}\nwidth={props.width}\nheight={props.height}\nstyle={\nfilter:\nthemeName === \"dark\"\n? \"grayscale(1) contrast(1) invert(1) brightness(130%)\"\n: \"none\",\n}\n/>\n</Box>\n\n>\n*Observações:*\n\n- O componente React está envolvido uma [Box do MUI](https://mui.com/material-ui/react-box/), mas poderia ser uma div com style.\n\n- Quanto maior o brilho brightness mais a imagem fica branca;\n\n- Quanto maior o contraste contrast mais pixelada a imagem fica;\n\n- A chamada ao themeName === \"dark\" é um *context* global do React;\n\n## Conclusão\n\n- E isso resolveu o problema!\n\n- A imagem fica com suas cores originais no modo claro, porém no modo escuro é aplicada a transparência e a cor é alterada ajustada para branco em toda foto.\n\n[Ver todos os artigos](/blog)",
"description": "Aprenda como remover o fundo de uma imagem com CSS",
"keywords": [
"imagem",
"dark",
"modo",
"blog",
"fundo",
"multiply",
"exemplo",
"abaixo",
"logo",
"react"
],
"metadata": {
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "/blog/como-remover-o-fundo-de-uma-imagem-com-css"
}
},
{
"id": "05c7704a9828846e",
"url": "https://matheuscostadesign.github.io/blog/2024/06/2024-06-05-scrcpy",
"title": "Como espelhar celular Android no PC com scrcpy da Genymobile",
"content": "Aprenda neste post como espelhar o celular Android no PC Windows com o scrcpy.\n\n# Espelhando a tela (Android)\n\n- Exemplo de uso 👇\n\n![\"Exemplo](\"/assets/images/posts/2024/06/screenshot.jpg\")
\n\n## 1) Download da aplicação\n\nFaça o download da última versão do [**scrcpy**](https://github.com/Genymobile/scrcpy/releases)\n\n- [📱 Download Genymobile / scrcpy](https://github.com/Genymobile/scrcpy/releases)\n\n## 2) Configurações no aparelho\n\nConecte o dispositivo Android no computador **via cabo USB;**\n\nNo aparelho Android, habilite o **modo de desenvolvedor** e **permita a depuração USB**;\n\nPara finalizar, basta executar o arquivo **\"scrcpy.exe\"**\n\n## 3) Personalizando scrcpy\n\nTambém é possível realizar algumas configurações adicionais no scrcpy\n\nPor exemplo:\n\n- Desligar a tela do celular automaticamente ao abrir o programa\n- Configurar a posição inicial de abertura (posição x e y)\n- Entre outras configurações...\n\nPara fazer isso basta criar um arquivo chamado `scrcpy.bat` na raíz da pasta onde está localizado o `scrcpy.exe` com os seguintes comandos:\n\n```bat\nscrcpy -d -S -w --video-codec=h265 --max-size=1920 --max-fps=60 --no-audio --always-on-top --window-x=1400 --window-y=60\n```\n\nE toda vez que for espelhar o celular, basta executar esse arquivo `.bat`\n\n## 4) Documentação completa\n\nSe precisar de mais alguma configuração, basta consultar toda documentação aqui:\n\n- [https://github.com/Genymobile/scrcpy?tab=readme-ov-file#user-documentation](https://github.com/Genymobile/scrcpy?tab=readme-ov-file#user-documentation)",
"description": "Aprenda neste post como espelhar o celular Android no PC Windows com scrcpy",
"keywords": [
"scrcpy",
"genymobile",
"android",
"https",
"github",
"basta",
"celular",
"exemplo",
"download",
"configurações"
],
"metadata": {
"title": "Como espelhar celular Android no PC com scrcpy da Genymobile",
"description": "Aprenda neste post como espelhar o celular Android no PC Windows com scrcpy",
"slug": "como-espelhar-celular-android-no-pc-com-scrcpy-genymobile",
"author": "Matheus Costa",
"categories": "Tecnologia",
"image": "/assets/images/posts/2024/06/como-espelhar-celular-android-no-pc-com-scrcpy-genymobile.jpg",
"comments": "true",
"chunkIndex": 0,
"totalChunks": 1,
"sourcePath": "blog/2024/06/2024-06-05-scrcpy.md"
}
},
{
"id": "05ed34a894a3b7cf",
"url": "https://matheuscostadesign.github.io/blog/2024/04/2024-04-12-axios",
"title": "Exemplo prático Axios Interceptor consumindo várias APIs (Part 3)",
"content": "- Envolva o arquivo de entrada do app o com componente **AxiosInterceptor**:\n\n
\n\n```tsx\nimport * as React from \"react\";\n\nexport default function App() {\n return (\n \n \n \n \n \n \n );\n}\n```\n\n### Criando uma tela de sessão expirada\n\n- Tela sessão expirada:\n\n
\n\n```tsx\n...\nimport { BackHandler, View } from \"react-native\";\nimport { Button, Text } from \"react-native-paper\";\n\nexport default function SessionExpired({ route }) {\n const { t } = useTranslation();\n const currentRoute = useRoute();\n\n const {\n setUser,\n setToken,\n setRefreshToken,\n setTokenDecoded,\n setRefreshTokenDecoded,\n } = useAuth();\n\n // Limpa dados do storage e direciona pra tela de login\n async function clearAllSession() {\n\t\tstorage.clearAll();\n setUser(null);\n setToken(null);\n setRefreshToken(null);\n setTokenDecoded(null);\n setRefreshTokenDecoded(null);\n }\n\n // Ação botão \"voltar\" físico Android\n useFocusEffect(\n useCallback(() => {\n const onBackPress = () => {\n if (route.name === currentRoute.name) {\n clearAllSession();\n return true;\n } else {\n return false;\n }\n };\n BackHandler.addEventListener(\"hardwareBackPress\", onBackPress);\n return () =>\n BackHandler.removeEventListener(\"hardwareBackPress\", onBackPress);\n }, [route]),\n );",
"description": "Exemplo prático Axios Interceptor consumindo várias APIs",
"keywords": [
"const",
"return",
"instance",
"storage",
"import",
"from",
"export",
"error",
"originalreq",
"axiosinterceptor"
],
"metadata": {
"title": "Exemplo prático Axios Interceptor consumindo várias APIs",
"description": "Exemplo prático Axios Interceptor consumindo várias APIs",
"slug": "axios-interceptor-consumindo-varias-apis",
"author": "Matheus Costa",
"categories": "Frontend",
"image": "/assets/images/posts/2024/04/axios-interceptor-consumindo-varias-apis.jpeg",
"comments": "true",
"chunkIndex": 2,
"totalChunks": 4,
"sourcePath": "blog/2024/04/2024-04-12-axios.md"
}
},
{
"id": "06bd31ba35f105f0",
"url": "https://matheuscostadesign.github.io/blog/como-criar-apps-com-react-native",
"title": "Como criar apps com React Native — Blog Matheus Costa (Part 4)",
"content": "-\n**O estado fornece memória aos componentes;**\n\n-\nEle é útil para lidar com **dados que mudam** com o **tempo** ou que vêm da **interação do usuário;**\n\n-\nÉ possível adicionar estado a um componente React usando o hook useState;\n\n-\nuseState é um hook que permite adicionar estado aos componentes da função;\n\nimport React, { useState } from \"react\";\nimport { Button, Text, View } from \"react-native\";\n\nconst Cat = (props) => {\nconst [isHungry, setIsHungry] = useState(true);\n\nreturn (\n<View>\n<Text>\nI am {props.name}, and I am {isHungry ? \"hungry\" : \"full\"}!\n</Text>\n<Button\nonPress={() => {\nsetIsHungry(false);\n}}\ndisabled={!isHungry}\ntitle={isHungry ? \"Pour me some milk, please!\" : \"Thank you!\"}\n/>\n</View>\n);\n};\n\nconst Cafe = () => {\nreturn <Cat name=\"Munkustrap\" />;\n};\n\nexport default Cafe;\n\n### 2.4.5) Fragmentos\n\n-\nAs tags “vazias” <> e </> acima são bits do JSX chamadas de [fragmentos](https://reactjs.org/docs/fragments.html).\n\n-\nFragmentos permitem envolver todo código sem precisar incluir um elemento extra e desnecessário, como uma View, por exemplo.\n\nconst Cafe = () => {\nreturn (\n<>\n<Cat name=\"Munkustrap\" />\n<Cat name=\"Spot\" />\n</>\n);\n};\n\n## 2.5) Código específico Android/iOS\n\n-\nCom React Native é possível **implementar componentes visuais separados** p/ Android e iOS;\n\n-\nHá duas maneiras de separar o código por plataforma:\n\n**Usando o *Platform Module**;*\n\n- **Usando extensões de arquivos específicas;**\n\n### **Platform Module**\n\n-\nEssa opção é recomendada **para pequenas partes de código;**\n\n-\nÉ possível usar a lógica de detecção para implementar o código específico da plataforma;\n\n#### **Platform:**\n\nimport { Platform, StyleSheet } from \"react-native\";\n\nconst styles = StyleSheet.create({\nheight: Platform.OS === \"ios\" ? 200 : 100,\n});\n\n#### **Platform.select - pode ser: 'ios' | 'android' | 'native' | 'default'**\n\nimport { Platform, StyleSheet } from \"react-native\";",
"description": "Neste post estarei compartilhando e documentando minha experiência durante o processo de criação de aplicativos Android e iOS utilizando React Native.",
"keywords": [
"react",
"android",
"para",
"native",
"text",
"react-native",
"https",
"javascript",
"const",
"view"
],
"metadata": {
"chunkIndex": 3,
"totalChunks": 5,
"sourcePath": "/blog/como-criar-apps-com-react-native"
}
},
{
"id": "06ea8b06a2896d05",
"url": "https://matheuscostadesign.github.io/blog/2024/05/2024-05-31-links-externos",
"title": "Como fazer todos os links externos do site abrir em uma nova aba/guia (Part 2)",
"content": "3. **Selecionar todos os links**: `document.querySelectorAll(\"a\")` seleciona todos os elementos `` na página.\n\n4. **Iterar sobre os links**: `forEach` é usado para iterar sobre cada link selecionado.\n\n5. **Verificar se o link é externo**:\n\n - `href && !href.includes(currentDomain) && href.startsWith(\"http\")`: Isso verifica se o link tem um atributo `href`, se o `href` não contém o domínio atual e se o `href` começa com \"http\" (para garantir que é um link completo).\n\n6. **Adicionar `target=\"_blank\"`**: Se o link for externo, `link.setAttribute(\"target\", \"_blank\")` adiciona o atributo `target` com valor `_blank`, fazendo com que o link abra em uma nova guia.\n\n7. **Adicionar `rel=\"noopener noreferrer\"`**: O atributo `“rel=noopener noreferrer”` é usado para abrir links externos em uma nova janela e evitar que a página de destino acesse a página de origem.\n\n### Como usar:\n\n1. Adicione o código JavaScript acima ao seu arquivo JavaScript principal ou diretamente dentro de uma tag `\n \n