teleren/devto huggingface dataset:
Why a Podiatrist Is Progressing Into Software Engineering
Published: 2020-11-02 02:54:52

Learning has always been a pleasure of mine. My favorite day of the year was the first day of school. I have been a podiatrist for over forty years and have found my relationship with my patients and learning new approaches to treatment to be the most rewarding aspects of clinical practice. However, as the years have passed, I have utilized the treatments and surgical approaches that have worked the best for my patients. Finding out about new ones did not mean that they would be utilized since I could achieve resolution of issues utilizing tried and true methods. There have been exceptions. Approximately two months ago a patient came in with a situation that I had never seen before and had to figure out the treatment that was correct. I am still in touch with that patient and she is extremely grateful for the care that I gave her. This type of learning experience though is currently a rare exception.

Several years ago, one of my son’s friends introduced me to the Python programming language and I became hooked, taking multiple courses and even becoming PCEP certified by The Python Institute. My proudest achievement is the creation of supervised learning Keras and ensemble models to predict if a diabetic patient will develop an ulceration. Ultimately, I would like to use my clinical experience in a programming environment.

I have come to realize that my Python experience did not prepare me to find work since companies expect their employees to have specific applicable programming knowledge. Everyone who I have spoken to about this issue recommended that I learn software engineering since that is the basic skill that can be used as a starting point. 

Someone once explained to me a fascinating concept. Regarding programming there are two piles, the pile of what you know and the pile of what you don’t know. The pile of what you know becomes larger but the pile of what you do not know does not decrease in size. This concept is so exciting because it means that by being involved in programming, I will be able to be continuously learning while at the same time contributing to society.
New Eleventy (11ty) Plugin: Social Images
Tags: showdev, webdev, npm, eleventy
Published: 2020-11-02 02:13:11

As a content creator, your website isn't ready for the modern web without including images to help promote your content on social media.

Previously, I had written a tutorial on using Puppeteer to generate social media images dynamically. And I had included it in my Eleventy starter which I use as a template for my own projects. But that made it a little harder to share with others looking for the same functionality.

So - I've created a package for you to easily create dynamic social images for your Eleventy site!

> **This isn't strictly coupled to Eleventy**. As long as you can output a JSON file with the title and a preferred image name for each page of your site content, you can use this package to create your social images 🙌

This package creates dynamic images sized for social media tags (particularly Twitter and Facebook) based on your available pages. [Use one of the predefined color themes](https://github.com/5t3ph/eleventy-plugin-social-images/tree/main/themes), or define your own style, template, or both to customize the layout.

Configure the CLI script to run after your Eleventy build, and by default images will be created in `_site/previews/` as png images. Use the CLI options to define a custom `outputDir` and/or a custom `imageDir`.

The images are only created in your output directory since the process runs after the Eleventy build is complete.

The window size used for the screenshot is 600px wide by 315px tall (which is then saved at 2x resolution) which you can use to test your template and styles if you choose to create custom ones.

## Usage

First, install the package:

```bash
npm install @11tyrocks/eleventy-plugin-social-images
```

**There are three steps to using this package**:

1. Setup the command line script and add it to your Eleventy build
2. Generate a JSON file containing data for each page you want social images
3. Include a reference to the image in your templates

> For the full details, a sample of the JSON data needed, and tips about creating a custom template and/or custom styles, [read the full docs on NPM](https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-social-images).

This package has been tested locally and with Netlify CI, but needs wider testing on other hosts and setups. If you find a problem, please [add an issue](https://github.com/5t3ph/eleventy-plugin-social-images/issues).
Longevity in software engineering
Tags: career, watercooler, discuss
Published: 2020-11-02 01:35:37

Software trends young [^1]. Many software companies are pretty young, as, arguably, is the appeal of CS to a broader group of students. It seems natural for the age of the typical tech worker to be younger than it is in other professions because of this. It's also true that tech has consistently faced charges of ageism. One doesn't have to look far on the internet for examples of explicit or implicit ageism ([Blind](https://www.teamblind.com/post/FB-median-age-is-28-Why-do-we-rarely-see-tech-worker-over-40-du5t0Cj3), [Quora](https://www.quora.com/Im-35-years-old-Am-I-too-old-to-join-Google-Facebook-Microsoft-or-Apple-as-a-software-engineer) threads as examples). 

I'm comfortably into my 30s. I've been fortunate to have a rewarding career so far, and I have a long list of things I'd still like to do. I hope for another couple decades to chip away at that list. That said, my own personal experience – seeing how hard it can be for friends my age and older to get their next job, hearing subtle ageism in interview roundups [^3] – gives me pause.

I'm working on a couple of longer posts about the arc of a tech career and, in particular, how age bias affects that. For now, I wanted to put up this discussion post. Is this something you're worried about? Do you think it's overblown? Do you do anything to help guard against it personally? Do you see a future for yourself in this field in 15 or 20 years?


[^1]: See, e.g., [this chart](https://www.statista.com/statistics/653789/average-age-of-tech-company-employees/). These figures – or similar figures – were widely reported in the media, though it's not clear from that site where the data came from or how reliable they might be. Compare that to [BLS statistics](https://www.bls.gov/emp/tables/median-age-labor-force.htm) showing the median age of the workforce as a whole – early 40s.
[^3]: "I don't get the feeling that he's a lifelong learner", "she hasn't had a consistent title progression over her [25 year] career [in which, because of title inflation, she may have topped out at sr/staff/etc 10+ years ago]", etc.
Updating and Deleting Data in Firebase Realtime Database
Tags: webdev, database, codenewbie, javascript
Published: 2020-11-02 01:30:10

Alright, so here's the continuation to my last two posts on using Firebase Realtime Database ([here is a link to the last one for some reference](https://dev.to/maasak/retrieving-data-from-firebase-realtime-database-2i97)).  So far, we have successfully implemented saving and retrieving data with the use of Firebase Realtime Database in a little bug tracking app.  Now, let's talk about how to update and delete the data!

##Updating Data

A new issue ticket looks like this: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/go4efvwq5i3n8fh7waql.jpg)

By default, the status of a new issue will be set to "Open".  We have a "Closed" button to click in order to change the status accordingly.  We will set a function to be triggered by a click event on that button in order to change the status to "Closed".  Right now, we have the "Closed" button set like this:

```javascript
<button onclick="setStatusClosed('${issue.id}')" id="closeButton" class="btn btn-warning mx-3">Close</button>
``` 

A click event on this button will call the `setStatusClosed()` function.  We pass in the issue's ID number so that we can reference it when calling Firebase's `update` method.  We then can specify which key-value to update, and in this case it will be the issue's status.  It should like something like this: 

```javascript
function setStatusClosed(id) {
  issuesRef.child(`${id}`).update({
    "status": "Closed"
  })
  document.getElementById('issuesList').innerHTML = "";
  readIssues();
}
```

The last two lines of code above are simply to have the DOM display the current database after the specified information has been updated. 

##Deleting Data

We probably won't want to keep *all* of the issue tickets, or we will be stuck with a long list of both open and closed ones.  The solution to this would be to enable our "Delete" button to get rid of it.  The code for the "Delete" button is as follows:

```javascript
<button onclick="deleteIssue('${issue.id}')" class="btn btn-danger mx-3">Delete</button>
```

The click event on this button will trigger our `deleteIssue()` function, where we again will pass in the issue ID number.  To delete it, we will call Firebase's `remove()` method.  We will again clear the current innerHTML of the `issuesList` in our DOM and call the `readIssues()` function in order to have the updated data displayed, so our code should look like this: 

```javascript
function deleteIssue(id) {
  issuesRef.child(`${id}`).remove();
  document.getElementById('issuesList').innerHTML = "";
  readIssues();
}
```

And that's it!

I'll be honest though, I'm not too sure about the way I'm currently updating the DOM.  It just seems a little repetitive, and I'm sure there's a better way to go about it.  If you have any suggestions, please feel free to comment below! 

##Helpful Links
https://firebase.google.com/docs/database/web/read-and-write#updating_or_deleting_data
GraphQL HTTP-only JWT Authentication with Next.js
Tags: graphql, nextjs, react, apollo
Published: 2020-11-02 01:25:39

Lately, I've been working on building one of the app challenges on [devchallenges.io](https://devchallenges.io).

I decided to use Next.js with GraphQL as my stack. I was a little worried about how I would implement secure HTTP-only authentication but it turned out to be super simple! Let me show you how.


Starting off we'll use a basic graphql API route adapted from the next.js [example](https://github.com/vercel/next.js/blob/canary/examples/api-routes-graphql/pages/api/graphql.js)

```js
import { ApolloServer, gql } from 'apollo-server-micro'

const typeDefs = gql`
  type Query {
    me: User
  }

  type Mutation {
    signup(username: String!, password: String!): User
  }

  type User {
    username: String!
  }
`

const resolvers = {
  Query: {
    me(_parent, _args, context) {
      // what do we do here?
    },
  },

  Mutation: {
    signup(_parent, {username, password}, context) {
      // ??
    },
  }

}

const apolloServer = new ApolloServer({ typeDefs, resolvers })

export const config = {
  api: {
    bodyParser: false,
  },
}

export default apolloServer.createHandler({ path: '/api/graphql' })
```

Here's where the fun begins.

We'll import `jsonwebtoken` and `cookies` (make sure you add them to your dependencies!): 
```js
import jwt from "jsonwebtoken";
import Cookies from "cookies";
```

Then we'll add a context within the apollo server where we'll create a cookie jar to set and get cookies within our resolves and parse our JWT token (if we have it).

```js
const verifyToken = (token) => {
  if (!token) return null;
  try {
    return jwt.verify(token, process.env.SECRET!);
  } catch {
    return null;
  }
};


const apolloServer = new ApolloServer({
  typeDefs, 
  resolvers,
  context: ({ req, res }) => {
    const cookies = new Cookies(req, res);
    const token = cookies.get("auth-token");
    const user = verifyToken(token);
    return {
      cookies,
      user,
    };
  },
});
```

Now in our resolvers, we can set the cookie when a user signs up (and signs in, but I'll let you figure that out):
```js

const resolvers = {
  // ...
  Mutation: {
    async signup(_parent, {username, password}, context) {
        let hash = await bcrypt.hash(password, 10);
        // bring your own db logic
        let user = await db.createUser({username, password: hash})

     
        let token = jwt.sign({ id: user.id }, process.env.SECRET!);
        context.cookies.set("auth-token", token, {
          httpOnly: true,
          sameSite: "lax",
          // here we put 6 hours, but you can put whatever you want (the shorter the safer, but also more annoying)
          maxAge: 6 * 60 * 60,
          secure: process.env.NODE_ENV === "production",
        });
        return user;
    },
  }
}
```

Now, whenever a request is made to check our auth status, it's easy!

```js
const resolvers = {
  Query: {
    me(_parent, _args, context) {
      // bring your own db logic
      context.user?.id ? db.findUser(context.user.id) : null
    },
  },
}
```

That should be enough to get you started 😄
Anima 4.0 is live - Transforming designs into Developer-friendly React code.
Tags: webdev, react, news, productivity
Published: 2020-11-02 01:11:19

We’re excited to announce that Anima 4.0 is finally here 

In 4.0 we’ve focused on bringing developers into the fold so that they can go straight from high fidelity designs to clean code they can actually work with. 

In a nutshell, Anima has evolved into an end-to-end solution that transforms the design-development handoff into a continuous and integrated process. This means less grunt work, minimal iterations, less pixel-pushing, and more time to get creative.

Here are the game-changers in Anima 4.0:

*DEVELOPER FRIENDLY CODE*
For the first time, developers can cherry-pick elements and get runnable code!
Generate reusable, clean code components from any design element with CSS variables, and responsive Flexbox layout. Anima’s code has no dependencies and can be exported into HTML/JS/CSS and React.js.
    
*CODE OVERRIDES*
Select any component to override Anima’s code and see your overrides rendered in real-time.

*CODE-BASED PROTOTYPES*
Go from design to realistic prototype faster using your design tools. Transform static screen designs to fully interactive code-based high-fidelity prototypes that act like the real deal (because they are). 

*DESIGN TO DEVELOPMENT COLLABORATION*
Anima streamlines design and development collaboration by transforming the handoff into a continuous and integrated process. 

Give Anima 4.0 a go, and as always, be sure to drop in any questions/feedback below so we can continue making Anima even better for you.
#Why?
Published: 2020-11-02 01:05:23

Why is Darias a software engineer? 

Writing code was borderline compulsory during my upbringing.  I had a pretty solid introduction to and understanding of BASIC and C by the time I was ten or so, with graphical and emerging web technologies not far behind.  

The first deep bite I took was actually with a freeware ray-tracing toolset called povray. (www.povray.org) These and related tools let me learn iteration, recursion, OO, and most of the other logical basics without realizing I was learning or using them.  

From a love of raytracing came my need to learn to build computers at home - at the time I didn't have access to a machine with an onboard math co-processor, so renders took weeks of processor work.  Things are slow at 25Mhz.  The first machine I built was a 486dx4 with <I>eight whole megabytes of RAM.</I>

The rest, as they say, is history.
Marquee Vanilla JS
Tags: javascript
Published: 2020-11-02 00:40:23

**[Demo](https://lucastl.github.io/currencyQuotes/)**
**[Respository](https://github.com/lucastl/currencyQuotes)**

# Cotizaciones de monedas.
Para un sitio web me pidieron mostrar cotizaciones de distintas monedas.
Consumiendo una API pública cree con Javascript un slider donde van pasando las distintas cotizaciones.

## Funcionalidades
+ Autoplay, animación para mostrar el total de items.
+ Al posicionarse encima, frena la animación. Al posicionarse fuera, reinicia la animación.
+ Click derecho desplaza un elemento hacia la derecha.
+ Click izquierdo desplaza un elemento hacia la izquierda.
___
- Author: **Lucas Tosello Latini**
- Site: [lucastosellolatini.dev](https://lucastosellolatini.dev/)
- Technologies: *Javascript, CSS, HTML*
Quick and Easy Load Spinner Tutorial for React with Hooks
Tags: react
Published: 2020-11-02 00:36:35

---
title: Quick and Easy Load Spinner Tutorial for React with Hooks
published: true
description: react load spinner
tags: react
//cover_image: https://direct_url_to_image.jpg
---

First, visit [loading.io](https://loading.io/css/) where you can customize a spinner and get the code needed to create it.

Next, create a `LoadSpinner` component in your React project.

```
	project-folder
	|_src
		|_LoadSpinner
			|_LoadSpinner.js
			|_LoadSpinner.css
		|_App.js
		...
```

Create a functional component in `LoadSpinner.js`. It doesn't need to take in any props. Then paste in the `HTML` for the spinner. Don't forget to import your `css` as well.

```
import React from 'react';
import './LoadSpinner.css';

const LoadSpinner = () => (
  <div className="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
);

export default LoadSpinner;

```

Next, paste the `css` code inside `LoadSpinner.css`

```
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #cef;
}

/* 
	... there are A LOT more classes I'm leaving off for the sake of space
*/
```

Now you can use `state` to control whether or not the spinner is displayed. For this example, I'm going to create a button to toggle between a visible and hidden spinner.

```
import React, { useState } from 'react';
import './App.css';
import LoadSpinner from './LoadSpinner/LoadSpinner';


function App() {
  const [isLoaded, setIsLoaded] = useState(true);

  const handleIsLoadedToggle = () => {
    setIsLoaded(currentIsLoaded => !currentIsLoaded)
  };
  
  return (
    <div className="App">
      <button onClick={handleIsLoadedToggle}>
      	Toggle LoadSpinner
      </button>
      
      {isLoaded && <LoadSpinner />}
    </div>
  );
}

export default App;

```

In this example, I'm simply displaying a button that says "Toggle LoadSpinner". When the button is clicked, `handleIsLoadedToggle` runs and `isLoaded` is set in state to whatever the opposite of it's current state is.

Down in the `return` statement, the `LoadSpinner` component is displayed if `isLoaded` is true. 

If you don't want to use hooks, you can just add `isLoaded` to the state of your `class` component.

```
class App extends React.Component {
  state = {
    isLoaded: true
  }

  handleIsLoadedToggle = () => {
    this.setState(prevState => ({
      isLoaded: !prevState.isLoaded
    }))
  };

  render() {
    return (
      <div className="App" >
        <button onClick={this.handleIsLoadedToggle}>Toggle LoadSpinner</button>
        { this.state.isLoaded && <LoadSpinner />}
      </div >
    );
  }
}
```
Check out the code [here](https://github.com/robotspacefish/loadspinner-example).
Why did I decide to study Software Engineering?
Published: 2020-11-02 00:24:44

I have always been interested in how computer programmers do their job. I have always thought of it as a kind of superpower to make a machine do something on its own. I never thought to learn how to program anything until a few years back when I discovered Discord, a communication platform that included bots. I was fascinated by the functions a bot could perform and how useful they were to the moderation of a server. I was moderating a server manually with a friend and thought to bring in a bot to help us out. The problem was the bots on the list were not able to do what I wanted. In a specific manner, having the bot give me a "super" role to make me appear as though I was the top-level moderator within the server. This would allow for any others within the server to know they can send a message or @mention me a little easier. Since there wasn't a bot to do this, I decided to jump in and learn how to code and program my own bot. I began learning Python from a couple of classes at the local college to get me started with basic syntax and figuring out errors. Next, I went to YouTube to learn a little bit more and learn how libraries work. I was then able to start doing trial and error with my own code and create commands that I have been able to use.

The reason why I have decided to study Software Engineering can be summed down to my work ethic. I have always felt that if there was a job needing to be done that nobody was willing to do, I would be the one to do it as a volunteer. Programming anything is no small task and that's something that will continue to drive to learn more about code and using language to create applications for a job function (or just for fun).

As such, I'm not in a career that I'm very proud of, working manual labor, and have been looking forward to a career that I can be put in a position to help others or create better options in the future. I have been planning on studying more into Computer Science eventually leading into Machine Learning, with the study of A.I., and be part of the creation of machines that can think for themselves. Creating A.I. is not a driving factor for me, but more that fact that the job is successfully completed.

So far I have enjoyed the bot application I have created and want to do more with this newfound ability and have requested friends and family with ideas of "things" that I could use towards a project. One such project includes creating a mobile app for a table-top board/card game to function as an inventory tracker. More is planned to come later, but the basic function of being a counter sounds like an easy enough task.

I aspire to have bigger ideas brought to me in the future and that I why I study Software Engineering.