teleren/devto huggingface dataset:
How I  changed my career from hospital administration to Web development?
Tags: career, beginners, webdev, motivation
Published: 2021-07-12 02:54:32

> **If we are growing, we are always going to be outside our comfort zone - John C. Maxwell**

I am sharing my journey of transitioning my career from a hospital administration role to web development. I  hope & I know that many readers will be able to relate to my post especially, those who left their previous careers to move to tech. Web development is an in-demand skill. 
I left my career because I moved to a new country. People can have many other reasons that push them to change their careers. It can be a lack of innovation and creativity in the current profession, fewer challenges, low income etc.

###Here are a few challenges I faced and tips to handle each :

####1. Law of inertia
Life is no different from the law of physics. When a person has invested so much time and energy into studying one profession, it will be very challenging initially to prepare your mind for another career. This move requires an internal drive to take that decision. Sit and introspect on why in the first place you want to shift career. Once you have made up your mind, start building small projects and gain confidence along the way.


 **Tip:**  Have an emotional support system around you. Also, make sure you continue your current job. So, that you don't face any financial hurdles while you transition.

####2. Steep learning curve
Web development technology is immensely vast and fast-evolving. New frameworks, new documentation and rules can make any newbie feel intimidated. 

**Tip:** One has to remember that it takes immense time and practice for any profession. No one attains mastery in one day. Take one day at a time. Simultaneously keep increasing your pace and your level of challenges. It's like a video game where you face increasing challenges at every new level. Surely rewards will be worth the effort.

####3. Burnout
Burnout is common in any profession more so, when changing a career. You are more likely to avoid rest, stay curious to chase your deadlines or skip meals. Yes, I have done all of that. No doubt that your internal drive will keep you pushing ahead. But it often goes unchecked & you end up weary.

**Tip:** Take breaks and drink water. Water keeps your mind moving. Keep meals light but never skip. Rest and sleep are essential. 


#####Take that leap and believe in yourself.
A importância do Copywriting no marketing digital
Tags: digitalmarketing
Published: 2021-07-12 02:05:01


O Copywriting envolve todo o processo de escrita persuasiva e promocional no marketing, com o intuito de motivar pessoas a realizarem algo, seja clicar em um botão, acessar um link, se inscrever em um formulário ou ir para o checkout. 

Talvez você não perceba, mas em todo lugar você está cercado por copywriting. Se você está conectado em redes sociais, provavalmente já se deparou com anúncios. Se assiste a TV, já viu algum comercial. Se vai a uma farmácia, há ofertas com descontos de produtos. O mesmo vale para lojas. Sua caixa de e-mail também pode conter mensagens envolvendo copy, especialmente se você se cadastrou em alguma loja ou serviço e entrou para o funil de vendas.

Porém, isso não deve ser visto como algo prejudicial. Afinal, se quiser você pode cancelar a inscrição do e-mail, pode trocar de canal na TV ou ocultar anúncios nas redes sociais.

A ideia do Copywriting no marketing digital é o de convencer o lead a realizar uma ação, de modo que haja reciprocidade e para que a troca seja benéfica para ambos os lados.

Fontes:

https://www.awai.com/what-is-copywriting/

https://adeusponto.com/o-que-e-copywriting/
CodePen Challenge: Dots & Dashes
Tags: html, css, javascript, codepen
Published: 2021-07-12 01:33:18

This week's <a href="https://codepen.io/challenges/2021/july/1">CodePen Challenge</a> is based on an open interpretation of the theme "Dots and Dashes".

As a solution to this, I decided to build on the theme of morse code, and create something interactive and educational.

Using a library, morse-decoder, I wrote a simple JS script that listens for key inputs, and then this is encoded into morse code and output on the screen. As a bonus, the audio version of that morse code character is also played.

Check it out here (click inside the preview below first, so the script can detect your key press!)
<p class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="600" data-default-tab="result" data-slug-hash="zYwrQyz" data-user="drawcard">See the Pen <a href="https://codepen.io/drawcard/pen/zYwrQyz">
CPC 2021-07-1 Dots &amp; Dashes</a> by Drawcard (<a href="https://codepen.io/drawcard">@drawcard</a>)
on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
CodePen Challenge: Menu Layout
Tags: html, css, codepen
Published: 2021-07-12 01:27:31

This week's <a href="https://codepen.io/challenges/2021/june/4?cursor=ZD0xJm89MCZwPTEmdj03NzkxNjcy">CodePen challenge</a> involves creating a digital menu for a café - taking a raw HTML file with no styling, and doing something creative with it. It's a great open brief with loads of possibilities, and we decided to answer it by creating a menu as it might appear in real life - with the added bonus of making fold down nicely for mobile displays.

<strong>Features</strong>

• Flexbox layout of 3 panels within a container
• CSS skew transform to create the 3d fold effect
• Global variables to define colour system, padding system etc.
• Mobile responsiveness with some overrides below 768px

Check out our design below, and be sure to view it in a mobile to see its responsiveness in action! Take a look at the HTML and CSS to see how we answered the problem.

{% codepen https://codepen.io/drawcard/pen/KKmwZwO default-tab=js,result %}
manifest.json use cases > a note for myself
Published: 2021-07-12 00:38:58

## Purpose of Webpack-Manifest-Plugin in Webpack
https://stackoverflow.com/questions/57661590/purpose-of-webpack-manifest-plugin-in-webpack/60581499

### Question:

In official doc says when applying Code Splitting and generating chunk files, if chunk code changes, then the filename of it will change. However index.html which uses the chunk code files can't change the filename in its <script> tag, so in this case the manifest.json which is generated by webpack-manifest-plugin will help mapping [name].js to [name].[hash].js.  

But opposing to what the doc says, it seems that every time I run webpack to build my codes, new codes are generated with new hash value in its file(in case something in code changed), and HTML-Webpack-Plugin will autometically inject <script> tag with new name of code's file. This seems that there is no need to use webpack-manifest-plugin, I don't even see where the manifest.json is used.  

### Answer:  

HtmlWebpackPlugin "knows" that your asset bundle.js maps to bundle.some-hash.js because it uses the Webpack's Manifest. This manifest is not emitted though. It's just data that Webpack uses to keep track of how all the modules map to the output bundles.  

WebpackManifestPlugin uses Webpack's manifest data data to emit a JSON file (that you can call manifest.json or whatever you want).  

Since you are using HtmlWebpackPlugin with the inject: true option (it's the default one), HtmlWebpackPlugin injects your bundle bundle.some-hash.js into your template. So you probably have no need to use WebpackManifestPlugin for your application.  

If you did not use HtmlWebpackPlugin, or if you used it with inject: false, then you would need to find a way to "manually" inject the assets generated by Webpack.  

So, the manifest.json is not for Webpack. It's for you.  

Let's say for example that you have a Python Flask web application and your web pages are built with Jinja templates. You could use Webpack to generate all of your static assets, and use the manifest.json to resolve the asset generated by Webpack. This Flask extension does just that. This means that in your jinja template you can write this:  

`<img src="{{ asset_for('images/hamburger.svg') }}" alt="Hamburger">`  

and get this:  

`<img src="images/hamburger.d2cb0dda3e8313b990e8dcf5e25d2d0f.svg" alt="Hamburger">`  

Another use case would be if you want fine control where the bundles are injected into your templates. For that, have a look at (this example)[https://github.com/jantimon/html-webpack-plugin/tree/main/examples/custom-insertion-position] in the html-webpack-plugin repo.
Why is DevOps important?
Tags: devops, philosophy, cooperation, practices
Published: 2021-07-13 20:16:10

---
title: Why is DevOps important?
published: true
date: 2021-07-12 00:00:00 UTC
tags: devops,philosophy,cooperation,practices
canonical_url: https://jhall.io/archive/2021/07/12/why-is-devops-important/
---

I recently wrote an article to answer the philisophical question “Why is DevOps important?” Feel free to [read the full article](https://jhall.io/posts/why-devops-important-philisophical-look-2021/), but here’s my TLDR:

DevOps is just a fancy name for a specific application of timeless principles such as cooperation. Cooperation has been with us since the dawn of humankind, and will be with us for as long as humanity, at least as we know it, exists. Whatever tools, methods, and even silly terms, we can use to facilitate this is probably helpful.

![](https://jhall.io/posts/images/cooperation.jpg)

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to show or see all the hidden files in Linux?
Tags: resource
Published: 2021-07-12 00:00:00

---
  title: How to show or see all the hidden files in Linux?
  published: true
  tags: Resource
  date: Mon Jul 12 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/show-all-hidden-files-linux
  cover_image: https://melvingeorge.me/_next/static/images/main-5eaf0e22eeacc0b869ab3a226deed210.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/show-all-hidden-files-linux)
  
To show or see all the hidden files in a directory, you can use the `ls` command followed by the `-a` flag in the directory in Linux.

For example, to see all the hidden files in the `myFiles` directory, you can use the `ls -a` command like this,

```bash
# Show all files including
# hidden files in a directory
ls -a
```

This will show all the hidden files in the `myFiles` directory.

### How do I know which files are hidden files?

- In most Linux distributions, the hidden files start with a `.` symbol followed by the name of that file.
- To hide a file called `hello.txt`, we can add a `.` (dot symbol) to the start of the filename, so its name will now appear as `.hello.txt`.

See the above code live in [repl.it](https://replit.com/@melvin2016/show-all-hidden-files-in-linux#main.sh).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Quickly export Shopify data to a CSV
Tags: shopify
Published: 2023-03-17 16:53:06

---
title: Quickly export Shopify data to a CSV
published: true
date: 2021-07-12 00:00:00 UTC
tags: 
- shopify
canonical_url: https://mikefallows.com/posts/quickly-export-shopify-data-to-a-csv/
---

Shopify provides some simple tools to export your data from the admin. There are also plenty of apps available that enable you to manage complex data exports.

But sometimes I just want to export some data into a CSV file, either from a resource that Shopify doesn't expose in the admin or that includes a field like the resource ID, that's not present in the standard exports. It would be nice to be able to do it without the cost or hassle of installing an app.

I've found a couple of simple scripts that have been published that do something similar, but they were either unmaintained and needed updating or required you to hardcode values to configure the resources you wanted to export.

So I decided this would be a good excuse to try and learn some more [Node.js](https://nodejs.org/) basics and leverage a handy [Node wrapper for the Shopify API](https://www.npmjs.com/package/shopify-api-node).

My end goal was to have a script where I could just set up some API access credentials, plug some variables into a `.env` file and quickly kick out a CSV from the command line. Referencing some of the existing implementations, I surprised myself by putting something together that did that in less than an hour and fewer than 100 lines of code.

It made me realise how easy and accessible using Node is for running small tasks locally where previously I might have used a shell script or full-blown app.

You can check out and use my simple [Shopify CSV Exports](https://github.com/mikenewbuild/shopify-csv-export) script on GitHub.
Rest v/s GraphQL ! 
Tags: webdev, javascript, graphql
Published: 2021-07-11 22:52:45

#First of all let me tell you what is a Rest and GraphQL !

####REST(Representational State Transfer) and GraphQL are two API design styles that serve the same purpose: *transferring data over internet protocols including HTTP*. However, REST is an architectural pattern, whereas GraphQL is a query language



__1) Rest has Multiple End points, where as GraphQL has one endpoint !__

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvg0ifh10wotjk5nr0nu.png)

__2) Both generally give the Data back in JSON format__
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crsa7d0zrfipta5aj8oz.png)

__3) Both are Stateless:__ 
Statelessness means that every HTTP request happens in complete isolation. When the client makes an HTTP request, it includes all information necessary for the server to fulfill that request. The server never relies on information from previous requests.

__4) Rest APIs are more flexible, whereas GraphQL only works with POST !__

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aw8azdbu79khw53i9bsw.png)

__5) In GraphQL you can be more detailed about the kind of data you want to fetch, but thing is not applicable in REST APIs as it fetches all the data available__

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47sqfmmrb96r6me23mqp.png)
 

__6) In REST because of its tendency to pull all the data it brings a huge amount of data which is unnecessary to the client !__

In total in my opinion both have their own benefits, if you are new to APIs, then go with REST APIs
If you are running a massive project then go for GraphQL.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvzloqy663k01ita2dnm.png)
Server com node: serverjs
Tags: node, javascript, serverjs, server
Published: 2021-07-11 23:46:15

# Servidor Simples com JavaScript e `server.js`

Neste post, mergulharemos no mundo da programação para entender como criar e gerenciar servidores, uma habilidade crucial para qualquer desenvolvedor que busca aprimorar suas capacidades. Compartilharei minha experiência com `server.js`, uma ferramenta intuitiva e eficiente para configurar servidores e criar APIs de maneira simples e rápida. Vou guiá-lo, passo a passo, mostrando como configurar, instalar e criar rotas, além de oferecer dicas valiosas sobre o uso de templates com Pug.

### Motivação

O objetivo é consolidar meu conhecimento e apresentar uma forma simplificada de criar uma API.

### Começando

Primeiro, instale o `server.js`:

```
bash
npm install server
```

Inclua a seguinte dependência em seu arquivo de configuração:

 ```bash
"dependencies": {
    "server": "^1.0.34"
  }
```

Após a instalação, vamos criar nossa primeira rota. Comece importando o `server` e os métodos necessários:
```js
const server = require('server');
const { get, post, error } = server.router;
```

Configure o servidor com:
```js
const CONFIG = {
    security:{csrf:false}, port:8080
}
```

Inicie o servidor com a seguinte estrutura:
```js
server(CONFIG, []) // Aqui, adicionaremos nossos métodos e rotas.
```

### Template Pug

Antes de prosseguir, vamos explorar os templates. Utilizo Pug para manipular templates de forma eficiente. Para mais informações, consulte a [documentação do Pug](https://pugjs.org/api/getting-started.html). Para integrar o Pug ao seu projeto, utilize o método `render`:

```js
const { render } = server.reply;
```

### Rotas

As rotas são definidas utilizando métodos como `get` e `post`. Aqui estão alguns exemplos:

```js
get('/', () => {
    return render('index.pug', {nome: "meu nome"});
}),
get('/sobre', () => {
    return render('sobre.html');
}),
post('/', (ctx) => {
    console.log(ctx.data['nome'], ctx.data['idade']);
    return render('boas_vindas.pug', {nome: ctx.data['nome'], idade: ctx.data['idade']});
})
```

O Pug permite passar objetos e realizar herança de templates, o que é extremamente útil e prático.

### Código Completo

Aqui está o código completo do servidor com `server.js`:

```js
const server = require('server')
const { get, post } = server.router
const { render } = server.reply
const CONFIG = {
    security:{csrf:false},port:8080
}

server(CONFIG, [
    // Adicione suas rotas aqui
])
```

Para mais detalhes, confira a [documentação do `server.js`](https://www.npmjs.com/package/server) e [serverjs.io](https://serverjs.io/documentation/).

### Vídeo Tutorial

Gravei um vídeo explicando tudo o que está neste artigo com mais detalhes. Assista ao vídeo [aqui](https://youtu.be/1NpJEdXQcTg).
A veterinária que virou suco, ops... bot!
Tags: career, womenintech, braziliandevs, chatbot
Published: 2021-07-11 22:54:58

Prazer. Meu nome é Ana, tenho 39 anos (vacinada contra covid-19 o/) e moro em São Paulo-SP com o Godofredo, um vira-lata caramelo safado. Graduei em Medicina Veterinária pela Universidade Federal de Minas Gerais - UFMG e trabalhei como fiscal agropecuária por 10 anos, mas me percebi vegana e num impasse...


A tecnologia se encaixou perfeitamente nessa transição de carreira porque adoro os desafios, as milhares de formas de resolução de problemas, o aprendizado constante, as comunidades e as perspectivas de mercado.


Assim, meu "Hello, World!" chegou em 2018, mas passei por problema de saúde grave na família e só pude retomar esse ano. Uma iniciativa de capacitação profissional em chatbots e inteligência artificial voltada para mulheres desempregadas e em transição de carreira, realizada pela D1 | Smarkio e Letsbot, em janeiro e fevereiro, fez parte dessa retomada: conheci o maravilhoso mundo dos bots, fiz parte de uma comunidade incrível, incrementei meu LinkedIn e passei a sentir esperança, autoconfiança e entusiasmo. Viva o Capacita MDT! E que muitas empresas se inspirem e espalhem esse projeto.


Porém, não passei para a segunda fase e fiquei bem frustrada... Em março, veio o falecimento da minha mãe, o luto e uma necessidade ainda maior de reinserção no mercado de trabalho. 


Nos últimos três meses realizei diversos cursos de desenvolvimento de bots, de UX writing, li muitos artigos e panoramas de mercado de chatbots, estudei sobre recrutamento, respirei LinkedIn e me inscrevi pra umas 200 vagas de trampo (ou mais). Foram dias e mais dias extremamente focada.  

Atualmente, estou no módulo 2 do Cappacita DEV, outro curso de IA conversacionais realizado pela SMARKIO, mas bem mais aprofundado. Estou amando! 


E também estou feliz e grata porque amanhã, começarei no meu novo emprego. Simmmmmm, consegui entrar na área, pessoal!!! Iniciando como curadora de chatbots e, na sequência, rumo ao desenvolvimento.


Espero que meu relato sirva pra animar quem está mudando de área porque altos e baixos fazem parte, né?! Mas temos que recalcular rotas e seguir sempre em frente!
Web Real Time Communication
Tags: programming, javascript, html, python
Published: 2021-07-11 22:39:14

  WebRTC, its an acronym that stands to represent 
web Real-Time-Communication,its an api that enables computers share video,audio and even binary data.
   understanding how webRTC does not really have to be a pain in the ass, I basically started using it myself and kinda already understand what it entails, unlike traditional websockets where-by all computers rely on a server for information   from each clients-computer, WebRTC is much better.

WebRtc also works with a server which is basically for signalling purposes, at first the first computer makes a call which could be a video or audio request ,it does this by first creating a connection new RTCPeerConnection(), this function takes in an object which is nothing more than information about how to set-up ICE(internet connectivity establishment) and different ICE servers to choose from (Google provides us with tons of free ICE to choose from),after this has been passed to the function an offer is to be made  by the local client this offer basically provides Sdp which is nothing more than media configurations about the clients machine this Sdp is then sent to the server, there are many servers out there to choose from, the intended client which is considered as the remote client gets this update from the server and in turn is required to respond by sending its own Sdp back to the local client and by this a connection has been created for both computers...

  But we are not done yet, these computers also need to provide icecandidates,this contains ip/port information of both computers and once this has been established both computers can now communicate without the server having to take part in whats going on......

To learn more about this Technology visit https://webrtc.org for more information
building a cryto pnl dashboard lightweight-chart (part 1)
Tags: nextjs, lightweightchart
Published: 2021-07-11 22:22:13

I used Binance to trade some crypto. While they offer a competitive fees and wide range of products, I found understand it P&L a bit difficult. Usually I use TradingView to visualize my positions, therefore I am thinking if it is possible to build an app to show my crypto P&L 🤑 and that begin my journey

I haven't decided everything yet, but I want to use NextJs for building this project. The project scaffoldings is nice and the deployment pipeline is surprising wonderful! For chart library, I want to try the one offered by TradingView - [lightweight-chart](https://github.com/tradingview/lightweight-charts).

The example of lightweight-chart is not a common React style I learnt. After a bit of studying, we can achieve the same with `useRef`

```javascript
import { createChart } from "lightweight-charts";
import { useEffect, useRef } from "react";

const data = [
  { time: "2019-04-11", value: 80.01 },
  { time: "2019-04-12", value: 96.63 },
  //... skipped ...
  { time: "2019-04-20", value: 74.43 }
];

const Chart = () => {
  const chartRef = useRef(null);
  useEffect(() => {
    const chart = createChart(chartRef.current, { width: 200, height: 200 });
    const lineSeries = chart.addLineSeries();
    lineSeries.setData(data);
  }, []);

  return <div ref={chartRef} />;
};

export default Chart;
```

My understanding is that:
1) first a `div` is created in the React Page, the `chartRef` is bind.
2) the `useEffect` hook kicks in after the page is loaded
3) the `createChart` can render into the `div` that was bind

The full example will be liked this:
{% codesandbox suspicious-https-o1f3h %}

which is still having one error to resolve:
```
SyntaxError: Cannot use import statement outside a module
```

This error basically means that the `lightweight-chart` is a frontend library but we are using it in a SSR (server side rendering) context, which is how NextJs work. Fortunately, it is pretty easy to resolve it. You will just need to dynamics import it 

```javascript
const Chart = dynamics(() => import("../components/charts", {
  ssr: false
});
```

{% codesandbox adoring-darkness-21v5v %}
* There are some Babel plugin config difference with codesandbox, but the code works on my VSCode. The working version of code can be found [here](https://github.com/superoverflow/crypto-dashboard/tree/part_01) and demo can be found [here](https://crypto-dashboard-ocz5clkq5-superoverflow.vercel.app/)