teleren/devto huggingface dataset:
Web Design Links
Tags: css, design, beginners
Published: 2020-04-09 16:56:45

A curated set of web design links for beginners first shared with students on the UCLA Institute of the Environment and Sustainability Sea Grass practicum team. 

## Theory and Process

- [The Web's Grain](https://frankchimero.com/writing/the-webs-grain/). Essay by Frank Chimero based on a 2015 presentation on the the nature of the web medium is a classic. 
- [Redesigning his site in the open](https://frankchimero.com/blog/2019/redesign/). Frank‘s blog posts titled Redesign are very helpful and get behind the scenes how a web designer thinks. 

- [The Web Project Guide](https://webprojectbook.com). Understand how each stage of the website process fits in with the next. Online book by Corey Vilhauer & Deane Barker.

## Toolbox

### CSS and HTML

- [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web) Start with CSS and HTML to craft your site. Technical, but very thorough and up-to-date. I visit the CSS section all the time.
- [Google Web Developers](https://developers.google.com/web).

### HTML Editors

- [Visual Studio Code](https://code.visualstudio.com/)  
- [Atom](https://atom.io/)

### Git

- [Join GitHub](https://github.com/join).  
- [GitHub Desktop](https://desktop.github.com/). Graphical user interface app.   
- [Install Git](https://git-scm.com/downloads). Use Git on the command line.   
- [GitHub Student Developer Pack](https://education.github.com/pack). For students, good collection of free offers.

### Browsers

- [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/) / [Firefox](https://www.mozilla.org/en-US/firefox/browsers/)
- [Chrome](https://www.google.com/chrome)

*And many more links on my [web design workshop](https://github.com/congo-basin-institute/web-design-workshop).*

My IndieWeb site is [scottgruber.me](https://scottgruber.me) and I work in design and development at [www.ioes.ucla.edu](https://www.ioes.ucla.edu).
Free Resources to Learn while in Lockdown
Tags: webdev, javascript, beginners, tutorial
Published: 2020-04-09 22:20:52

##Hi Guys Good Day!

If you're not doing anything right now or if you're not working at home or if you're bored. Then you need to check this out.

###1. [Pluralsight](www.pluralsight.com)
Pluralsight is offering all of its (7000+) courses for free for __1 month__, for this month of April to be specific. All you need is to register an account then you are good to go. The confirmation email may take a long time to receive but I think it's worth the wait. So check it out.


###2. [Udemy](https://www.udemy.com/courses/free/?utm_source=org-social&utm_medium=twitter&utm_campaign=resourcecenter)
[Udemy](www.udemy.com) is a great website for learning new technologies and improving old ones but we need to pay to view most of its courses but it has also some amazing free courses which I think is really great for learning new things or improving old ones. So check it out.


###3. [VueMastery](https://www.vuemastery.com/free-week/)
Who doesn't love [Vue](vuejs.org) it's one of the most famous JS frameworks according to these websites [StateOfJS](https://2019.stateofjs.com/front-end-frameworks/) and [StackOverflow Survey](https://insights.stackoverflow.com/survey/2019#most-loved-dreaded-and-wanted) and it's easy to learn. This website is offering all of its courses for free next week so, reserve your spot already so you can Master (maybe) [Vue](vuejs.org) for one week.


##Be a Better Developer...
##Thanks guys for reading this post.
##Have a Nice Day and Stay Safe :smiley:!.
Non-CS degree devs: How has your non-traditional background shaped your perspective on coding?
Tags: discuss, codenewbie, nontraditional, question
Published: 2020-04-09 22:06:46

Do you feel it has had a positive impact? Maybe it hass given you a unique perspective, allowing you to see things many others don't.

Or maybe a negative one? Separating you from the rest of your team.

Or maybe its neutral 🤔?
A Few Ways to Render in React 
Tags: react
Published: 2020-04-09 21:58:55

If you’re reading this, you’re likely familiar with rendering in React. When working with SPA, it is sometimes necessary to hide certain details from the user. There are a few of ways to do this. 

The first set of examples deal with conditional rendering. Conditional rendering evaluates some logic and renders a component or element. 

For example, you could write a ternary function that checks against a certain condition: 


![Ternary Function](https://dev-to-uploads.s3.amazonaws.com/i/ldoggv8xqze31cpyxiot.png)


Or you could write an if/else statement:


![If/Else Statement](https://dev-to-uploads.s3.amazonaws.com/i/jztb48o1vy2wqivtme9a.png)



Or you could write some logic elsewhere that handles the rendering for you, such as using state:

![State handles the display](https://dev-to-uploads.s3.amazonaws.com/i/vnqzzld735x4i1h69q4c.png)



However, it’s not always necessary to hide the entire element based on some logic. Sometimes, you just want to hide a few elements that would make your SPA seem too busy from the get-go. That’s where details come in!

Details is an HTML tag. It uses a triangle to hide details that the user can choose to hide or display by pressing on the triangle. 

![details HTML tag](https://dev-to-uploads.s3.amazonaws.com/i/h4a5najh5dwg79w88bqx.png)


That's it! It's that simple. This is also useful when working on a project that renders a bunch of elements on the page. When I’m thinking about how I want to render some elements on a page, I may want to be able to see the elements I want to manipulate before writing out the logic that does that(because I’m a visual learner, I guess). Wrapping these elements in a details tag allows me to hide the information, while still rendering it. Don’t forget to add some sort of title so you know which component you’re working with!


Another way to handle rendering an element on a page is by manipulating the CSS. Semantic UI makes this simple by adding a trigger to the component. 

![pop up with Semantic UI](https://dev-to-uploads.s3.amazonaws.com/i/4o96j1cnr11vp4hdf8jz.png)

These are just a few ways you could choose to render elements on a React application. I've probably used all of these methods at some point in projects, and would recommend that you use whatever suits your needs the best.
Controlled Components in React
Tags: beginners, react, javascript, codenewbie
Published: 2020-04-09 21:57:16

Before we even begin to look at controlled components, let's take a look at an example of an uncontrolled component. 

```jsx
import React from 'react';

const Form  = () => {
  <div>
    <label>
      Uncontrolled: <input type="text" />
    </label>
  </div>
}

export default Form;
```

This form is uncontrolled because it in no way makes an attempt to interact with the state of the component or to update the value of the input. 

By having an uncontrolled form inside of our app we are allowing the opportunity for unwanted behavior in the future. We want the data that we see to exactly match the data that we have stored in our single source of truth, in this case our state and props.

So if that's the case, what is a controlled form? First let's look at another example.

```jsx
import React from 'react';

class Form extends Component {
  state = {
    inputValue: ''
  }

  const handleChange = () => {}

  render() {
    return (
      <div>
        <label>
          Controlled: 
          <input type="text" value={this.state.inputValue} onChange={handleChange}/>
        </label>
      </div>
    )
  }
}

export default Form;
``` 

This one is closer, we see that we have a value in our state and that our input is displaying that value. However, this is still not controlled because we have no way to modify our state based on any change to input from our user.

```jsx
import React from 'react';

class Form extends Component {
  state = {
    inputValue: ''
  }

  const handleChange = (event) => {
    this.setState({
      inputValue: event.target.value
    })
  }

  render() {
    return (
      <div>
        <label>
          Controlled: 
          <input type="text" value={this.state.inputValue} onChange= (event) => this.handleChange(event)/>
        </label>
      </div>
    )
  }
}

export default Form;
```

Boom. Now in addition to having our component display the current value of state we detect for any changes made to our input by calling our event handler through onChange. Whenever there is a change to that input we update our state accordingly by using the setState method. A perfect circle. Now we have total control over our data as well as maintain a single source of truth in our state.
A quick comparison between React, Angular and Vue.js.
Tags: react, angular, vue, newbie
Published: 2020-04-09 21:56:55

React, Angular and Vue are the three most popular frameworks for software engineers. Every framework has its own pros and cons. So how do you know what to choose? Our flatiron school has chosen to use React as a study tool, and now React has become my favorite framework. But again, why React? Here are a few overall comparisons.

##Angular
**Overall:** Great for building highly interactive web applications.
**Popular companies that use Angular:** Microsoft, Autodesk, UPS, Cisco Solution Partner Program, AT&T, Apple, Adobe, GoPro, Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegram, Weather, AWS, Crunchbase...
**Pros of Angular:** Angular was created to be used alongside with Typescript. Its popular features include Angular-language-service or MVVM (Model-View-ViewModel). One-way data binding that enables singular behavior for the app which minimized risks of possible errors. Structure and architecture specifically created for great project scalability. 
**Cons of Angular:** Compare to React and vue.js, Angular's performance is slower and its structures (Injectables, Components, Pipes, Modules etc.) are harder to learn.

##Vue.js
**Overall:** Great for creating highly adaptable user interfaces and complex Single-page applications.
**Popular companies that use Vue.js:**
Xiaomi, Alibaba, Grammarly, Adobe, Behance, Codeship, Reuters...
**Pros of Vue.js:** Empowered HTML - Vue.js has many similar characteristics with Angular. Vue.js can weight in a tiny size while keeping its speed and flexibility that allows reaching much better performance in comparison to other frameworks. It can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
**Cons of Vue.js:** Since vue.js is still a smaller market compare to React or Angular, there are fewer resources available, and developers might run into issues when trying to integrating Vue.js into huge projects.

##React
**Overall:** Great for building modern single-page applications of any size and scale.
**Popular companies that use Vue.js:** Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Atlassian, Microsoft, Slack, Storybook...
**Pros of React:** Easiest to learn with a simple design and highly detailed documentation. Fastest in performance. Great support for server-side rendering for content-focused applications. Data-binding is one-way. Easy-to-test and highly reusable code. Applications can be made type-safe with either Microsoft’s TypeScript or Facebook’s Flow. Migrating between versions is easy because it is maintained by Facebook.
**Cons of React:** Engineers have too many ways of developing their application to choose from. The React community is divided on the best way of how to write CSS.

*Resource: https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d*
2020-04-10 - Code with me - hangout
Tags: phalcon, phalcon4, wuhanvirus, codewithme
Published: 2020-05-12 19:53:23

---
title: 2020-04-10 - Code with me - hangout
published: true
date: 2020-04-09 21:51:46 UTC
tags: phalcon,phalcon4,wuhanvirus,codewithme
canonical_url: 
---

We haven’t had one of these in a while. Join us tomorrow at 17:00 EST (21:00 UTC) for chit chat as well as some coding!<!--more-->

This is going to be similar to previous _Code with me_ hangouts we had in the past. No script, just a chat among friends and perhaps some coding, answering questions etc.

The hangout will be held on YouTube here:

[https://youtu.be/I3wXpAq7kdg](https://youtu.be/I3wXpAq7kdg)

Free format, just come and have fun, ask questions, bring beer, chips and wine!

Stay safe and keep coding!

* * *

Chat - Q&A

- [Discord Chat](https://phalcon.io/discord)
- [Forum](https://phalcon.link/forum)

Support

- [OpenCollective - Support Us](https://phalcon.io/fund)
- [Store - Merchandise](https://phalcon.io/store)

Social Media

- [Telegram](https://phalcon.io/telegram)
- [Gab](https://phalcon.io/gab)
- [MeWe](https://phalcon.io/mewe)
- [Parler](https://phalcon.io/parler)
- [Reddit](https://phalcon.io/reddit)
- [Facebook](https://phalcon.io/fb)
- [Twitter](https://phalcon.io/t)

Videos

- [BitChute](https://phalcon.io/bitchute)
- [Brighteon](https://phalcon.io/brighteon)
- [LBRY](https://phalcon.io/lbry)
- [YouTube](https://phalcon.io/youtube)

<3 Phalcon Team
Cooper Foodbank Management
Tags: twiliohackathon
Published: 2020-04-09 21:50:46

## What I built

Cooper Pantry is an open source inventory management and distribution system that connects food banks to those most at risk. 

## Demo Link

TBD

## Link to Code

https://github.com/geriley/cooper-pantry

## How I built it (what's the stack? did I run into issues or discover something new along the way?)

Tech Stack:

- Front-end: Angular
- Server: NestJS
- DB: Postgres 

Possible Twilio Technologies:

- Authy
- Programmable SMS
- Twilio Autopilot
- Twilio Programmable Chat

Other considered APIs and tools:

- FoodData Central API (https://fdc.nal.usda.gov/api-guide.html)
- JS barcode scanner https://serratus.github.io/quaggaJS/

## Additional Resources/Info

TBD
Whats React, and whats so great about it.
Tags: react, javascript
Published: 2020-04-09 21:35:19

The React we hear of, Is actually partly JavaScript. It's a more simplified javascript code(library) for building awesome user interfaces making it very easy to create web applications and manage data. It is regularly updated and maintained by Facebook. I'm going to just share several things I found really helpful in React. 

It gives us the option of Splitting our long code into components. Making it easier to transfer and manage data, and store data using state. You can also use more data than you originally would be able to manage thanks to props which get rendered in-between components.

Second thanks to JSX format a little different than the html we know of, makes it easier to put in data, or text in between our components. This ignores all the extra work that html has to offer like writing in Doctype, html, head and so on.

Third Probably my favorite is the fact that, thanks to the components, you can just render one component multiple times easily using a short hand of code.

Another is React Native which I have heard off but never tried yet, but from what I know is that It opens the door to mobile handling, the ability to create mobile applications, running on Android and iOS.

Overall has much more I have yet to learn, but I would recommend it to anyone, since it makes javascript just so much easier.
Gevent
Tags: python
Published: 2023-01-06 01:32:18

---
title: Gevent
published: true
date: 2020-04-09 21:22:52 UTC
tags: Python
canonical_url: https://brandonrozek.com/blog/gevent/
---

In my last post I spoke about [concurrency with asyncio](/blog/pyasyncio/). Now what if you don’t want to concern yourself with async/await practices and just want to write synchronous code that executes I/O asynchronously? That’s where the library [gevent](http://www.gevent.org/) comes in. It does this by modifying Python’s standard library during runtime to call it’s own asynchronous versions.

Last post code’s example written in `gevent`.

```
# The first two lines must be called before
# any other modules are loaded
import gevent
from gevent import monkey; monkey.patch_all()

import time

def think(duration):
    print("Starting to think for " + str(duration) + " seconds...")
    time.sleep(duration)
    print("Finished thinking for " + str(duration) + " seconds...")

gevent.wait([
    gevent.spawn(think, 5),
    gevent.spawn(think, 2)
])

```

Notice that the function `think` is written the same as the synchronous version.

`gevent` is written on top of C libraries `libev` or `libuv` . This combined with the monkey patching can make `gevent` based applications hard to debug if something goes wrong. Otherwise it’s a great tool to quickly take advantage of concurrency.
Entendendo props no VueJS
Tags: frontend, vue, javascript
Published: 2020-04-09 20:58:13

Olá! Tudo bem?

Ano passado consegui aprender muita, mas muita coisa mesmo sobre o Vue. Quando eu pensei que estava fazendo bom uso, me falaram de props e eu descobri que tinha feito tudo errado até então(hehe). Talvez não errado, mas digamos que entender bem o que props são e fazem, me abriu portas e eu fiquei completamente apaixonada por reutilização e acabou me ajudando a pensar mil vezes mais na arquitetura do projeto e dos meus componentes. Era confuso entender, e eu vivia tapando o sol com a peneira com Slots Nomeados, mas eu era jovem e ingenua.
O que são props?
Props são propiedades que passamos do componente pai para o filho, nunca do filho para o pai. Digamos que no nosso projeto, um componente de card se repete em diversas páginas, mas o conteúdo do mesmo muda. Qual é a sua solução? Criar um componente de card pra cada página ou simplesmente torná-lo reutilizável e versátil? Eu não vou entrar no mérito do estilo do componente nesse post, isso é um pouquinho mais complexo e precisa ser tratado a parte, tá bem? :)

**Props na prática**

Esse é o meu componente pai, que vou chamar de AppCard.vue, vou importá-lo no componente filho, que nesse caso se chama home.vue.

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

Abaixo temos o código do nosso filho que está sendo renderizado acima. Vamo entender o que foi feito?

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

Determinei que temos um title, um subtitle e um content. Pegando o nosso :title="title" como exemplo, que nada mais é do que um bind, eu estou dizendo que toda vez que invocar um :title, ele vai aceitar somente uma string sendo passada, como podemos observar ali em TYPE, que aceita string, número, função, array, objeto e data, você decide. Nesse caso, eu quero apenas uma simples string. Ainda confuso? Então vamos ver como passar essas props:

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

E o resultado é esse:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6pt1e2wj5kwnm0oejhq4.png)

Ok, é BEM simples, certo? Isso é apenas a pontinha do iceberg que são as props. Caso você queira tornar algum dos nossos campos obrigatórios, basta adicionar um "required", e caso queira deixar um conteúdo padrão, usamos o "default", assim caso aconteça algum erro no carregamento dos dados, não teremos um espaço em branco sendo exibido. Veja:

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

Bom, isso é uma introdução bem básica as props! :) Espero que seja útil e que tenha esclarecido um pouco as coisas para quem está ou não começando.
ICYMI, you can set release storage settings on Firebase sites
Tags: quicktip, firebase, web
Published: 2020-04-09 20:57:42

---
title: ICYMI, you can set release storage settings on Firebase sites
published: true
description: Control how many releases of your site Firebase keeps with this relatively new feature.
tags: quicktip,firebase,web
canonical_url: https://blog.rousseau.dev/posts/firebase-release-storage-settings
cover_image: https://firebasestorage.googleapis.com/v0/b/blog.rousseau.dev/o/images%2Fbackgrounds%2Frecycle.jpg?alt=media
---

I have a few different sites hosted on [Firebase](https://firebase.google.com/). It has become my go-to solution for hosting static sites.

A common problem that I ran into is that Firebase kept each release of a site for history and rolling back. That isn't necessarily a bad thing except that those old releases count against your storage quota. Which means you could run out of storage on the free tier or rack up some unexpected charges on the paid plan.

There was an option to delete old releases, but it was a manual process to click each release, choose delete, and then confirm. It was not a great experience, especially if you've automated the deployment of your sites to Firebase.

Searching for an automated solution would eventually lead you to [this comment](https://github.com/firebase/firebase-tools/issues/215#issuecomment-314211730) where you could vote for a proposed solution or to a GitHub repository for a script with web requests to delete the old versions.

In March 2019, Firebase added [release storage settings](https://github.com/firebase/firebase-tools/issues/215#issuecomment-471632451) for hosted sites. For each site, you can specify how many old versions to keep, and Firebase will do the deleting for you.

If you're like me, and initially missed this feature release, head over to the Firebase console to set the release storage settings for your sites!

_This post was originally published at [blog.rousseau.dev](https://blog.rousseau.dev/posts/firebase-release-storage-settings). Cover photo by [Gary Chan](https://unsplash.com/@gary_at_unsplash) on [Unsplash](https://unsplash.com/)._
Greetings...
Tags: intro, bio
Published: 2020-04-09 20:46:31

Geek Test Blog:

Angular, D3JS, ESRI, Swagger, OpenID Connect, ag-grid

Java, Spring, Spring JDBC, REST, Swagger, Kafka Streams

Oracle, HBase, Kafka, Druid

Ansible, Concourse, Helm, Bash, Docker, Kubernetes