teleren/devto huggingface dataset:
Global Diversity CFP Day vai levar a diversidade aos eventos de tecnologia
Tags: diversidade, techtalks, comunidade
Published: 2019-12-27 20:06:08

---
title: Global Diversity CFP Day vai levar a diversidade aos eventos de tecnologia
published: true
description: Conheça mais sobre o Global Diversity CFP Day e como fortalecer a diversidade e inclusão em eventos de tecnologia
tags: diversidade, techtalks, comunidade
cover_image: https://user-images.githubusercontent.com/2198735/71530832-e56c7900-28e3-11ea-8a92-07afe4b6761d.PNG
---

Se você já assistiu uma palestra de tecnologia, como eventos de programação, workshops, seminários em universidades e escolas e até mesmo em meetups, já deve ter imaginado: “como será que deve ser estar do outro lado?”. Talvez, a barreira da vergonha ou de não saber como organizar uma palestra pode acabar atrapalhando quem tem essa vontade. Se você fizer parte de um grupo sub-representado, então, a dificuldade é bem maior.

Grupos sub-representados (ou minorias), não se refere a um número menor de pessoas na sociedade, mas sim a sua representação limitada em ambientes como escolas, universidades, empresas, entre outros. Os eventos estão carentes por diversidade (mulheres, comunidade LGBTQI+, pessoas negras, pessoas com deficiência, indígenas etc). 

Uma grade diversa é uma grade que empodera pessoas. Uma grade diversa mostra que tecnologia é sobre pessoas e principalmente, para todas as pessoas. 

Onde quer que você esteja em sua carreira, compartilhar o que você sabe é uma ótima maneira de aprimorar suas habilidades, aprender mais e se conectar com outras pessoas e oportunidades. Ajudar pessoas a darem o seus primeiros passos na comunidade a palestrar, mantém os eventos mais interessantes e vibrantes. Pensando em ajudar a reduzir o gap de representatividade, estamos organizando o Global Diversity CFP Day em São Paulo, com o objetivo de dar voz para forças menos representadas na TI.

**O que é o Global Diversity CFP Day?**

Especialmente projetado para pessoas que normalmente estão sub-representadas em eventos de tecnologia, o GDCFP Day é um workshop global e gratuito, organizado em diversas cidades no mundo, com o compromisso de incentivar e aconselhar pessoas apaixonadas por tecnologia e que tem interesse em compartilhar seus conhecimentos com a comunidade através de palestras. 

No GDCFP Day, todas as pessoas serão:
1) bem recebidas, em um espaço inclusivo e seguro
2) orientadas para criar sua proposta de palestra
3) orientadas em como criar e apresentar palestras

Este projeto é uma criação de Peter Aitken , um desenvolvedor escocês que também cuida da ScotlandJS e ScotlandCSS. Inicialmente, eles criaram uma versão deste workshop para trazer novos palestrantes para a lista das conferências de Scottland. O workshop foi tão eficaz na ativação de novos palestrantes, e tão bem recebido pelos participantes, que eles foram inspirados a se tornarem globais.


**Inscrições abertas:**
**Quando?** 18 de Janeiro, das 09:30 às 16:hrs
**Onde?** Totvs Developers | Av. Braz Leme, 1000, Bairro Santana | São Paulo, SP
**Quanto?** Gratuito!
**Inscrições:** https://globaldiversitycfpdaysaopaulo.splashthat.com/
Build instagram with React, TypeScript and Firebase. Part: 1
Tags: react, firebase, typescript
Published: 2019-12-27 19:39:51

The full code is available here https://github.com/FranciscoJavierMartin/firegram . *Disclaimer: The code may not the same that the showed in the article.*

# Description
**Y**et **A**nother **I**nstagram **C**lone. This project is made with the purpose to teach you how to use React, Firebase, integrate with TypeScript and other cool tools that I discover around my learning journey.

# Where can I start?
For this project you may start from this point https://dev.to/franciscojaviermartin/setup-your-react-project-with-ci-cd-with-firebase-and-gitlab-1nce, setup a project from scratch or use create-react-app and a project in firebase. That all you need.

# Packages installation
The package required are:
- dotenv
- firebase
- node-sass (if you prefer use another thing to style, feel free to use)

# Prerequisites
I suppose that you know at least the basics of React and JavaScript. TypeScript is only JavaScript with types, but you can use raw JavaScript if you feel more comfortable. Only ignore the types and interfaces parts.

# Let's start to code
Create a .env file at the client folder and fill with your own values provides by firebase
~~~
REACT_APP_API_KEY=
REACT_APP_AUTH_DOMAIN=
REACT_APP_DATABASE_URL=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGING_SENDER_ID=
REACT_APP_APP_ID=
~~~
All properties must start with REACT_APP_ in order to work for create react app.
Reinvent the Wheel
Tags: javascript, webdev
Published: 2019-12-27 19:23:20

---
title: Reinvent the Wheel
published: true
description: It's a good thing, I promise!
tags: #javascript #webdev
---

While I tagged this as JavaScript, it applies everywhere.

Don't believe the folks who state that you shouldn't design and code a system that already exists. Similarly, never be afraid to revisit existing code to upgrade it with all your newest tricks.

The TLDR is simple: everything is a learning experience.

Do take into account, however, the needs of your organization. I have the advantage of being able to crank out code like there's no tomorrow, so I always take a little time to refactor and reinvent.

Focusing on the reinvent. When you download a massive Swiss army knife, we all have a good example I am sure (Dev Express for this example), you know it will do alot, but also have many limitations. Say you need a smart excel-like table tool. You could use an external system with it's blessings and flaws, or you could steal the design and reimplement.

Half the work is done. You know the tool you are borrowing from, and you know your specific requirements. You know the things you like, need, don't need from the other tool. So you begin the process of coding off of those designs and requirements.

Along the way you will learn tons, re-enforce tons, and have an outcome that may be better or may not.

Here's always my biggest take-away from these mini-projects: through the process you will either learn why the original had the perceived flaws, or you will find out that you were able to master those flaws and have a product that has the feature-set and the implementation you need, without any bloat.

Or you could have just constructed the largest pile of pasta you've ever seen.

But the TLDR is still true! You learned stuff.
Three inspirational developer websites at 240 x 320 px
Tags: webdev, design, a11y
Published: 2019-12-27 19:20:34

A hundred million new internet users are coming online in the developing world thanks to the advent of low-cost, internet-connected featurephones such as those running on KaiOS. For the first time ever, users are taking their first steps into the internet on screens as limited as 240 x 320 resolution. Unfortunately their browsing experience will be marred by [biased standards](https://dev.to/shemthedev/is-the-future-of-the-web-text-centric-3ck9) of the modern web. As a kind of tribute, I want to highlight five excellent examples of developer websites whose designs scale perfectly down to minimal screen sizes.

# [Zoe Chew: whizzoe.com](https://whizzoe.com/)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/oh2a2p9se28crlc04d0s.png)

Zoe's website is the pinnacle of a modern developer website. Taking a single-column approach, her website scales flawlessly down to our minimum resolution without a single thing out of alignment and not a pixel of horizontal scroll is needed. A text-first, image-lite experience means that loading is lightning fast and there is plenty of content to consume on the homepage alone.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kpcy1mnfcuyjvhn0qtjg.png)

# [Franco Scarpa: francoscarpa.com](https://francoscarpa.com/)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mriv5ep10g3n19fpgjqx.png)

Franco's site is as minimal and text-centric as it gets with a uniquely vibrant colour scheme, darkmode toggle and fully responsive design. Franco's website loads lightning fast and is **user experience first** with no tracking cookies, analytics or third-party integrations.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/yphcgv57gssnw4rcf0sy.png)

# [Lyndsey Scott](https://www.lyndseyscott.com/)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p29b83sn090aoqbolttf.png)

Lyndsey is rightfully a legend around these parts and her website is nothing short of cosmic. It's a much more maximalist style with plenty of media content and fancy animations that somehow renders absolutely perfectly down to our minimal screen resolution. Not a pixel is out of place on any page even at a tiny screen size!

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2yuytgikmt288axn4dtr.png)

Do you know any developer websites which adapt perfectly to minimal screen sizes? Let me know down below!
Flask or Django ? Here's what I learned from using both.
Tags: django, flask, python, webdev
Published: 2019-12-27 18:49:06

Hello everyone at DEV, I am a self-taught web developer and a learner. Recently I switched to developing web apps in Python and using Python as my server side programming language the two most popular and pretty obvious web frameworks are: Flask and Django.  So, I gave both of them a try and made a similar project on both these frameworks using a relatively easy to configure database(i.e SQLite) which won't require a dedicated server to run and work in development. 


####**Here's my view and tell me your opinions:**


1. Both come with the support for Jinja2 template engine and it was the same HTML markup on both. No difference here, even though Django has its own template language it isn't much different from Jinja2.

2. While Flask is lightweight but it misses on preloaded tools. Unlike Flask, Django comes with numerous ready to use tools out-of-the-box which makes development quicker than Flask.

3. In terms of project layout and structure Django focuses on building projects which hosts multiple applications whereas Flask focuses on building a single application and add required views and models to the single app.

4. Flask was easy to learn as compared to Django, it is described as a micro-web framework and referred to as more "PYTHONIC" in nature. Django comes with preloaded tools which is great and doesn't require use of third party libraries but this doesn't enable the flexibility which flask achieves by offering extensibility.

5. Both have the support for a great and robust ORM system which supports popular databases like MySQL, PostgreSQL etc , Django has a built in ORM which Flask doesn't. If you were to perform these operations you would install another popular python package called "SQLAlchemy".

6.  The biggest advantage that I felt Django had over Flask was the included Admin interface which makes creating a superuser super easy. It also allows customizing the interface and user management from the panel .

7. In terms of support for security and authentication Django again has builtin modules , you will have to use extensions like Flask-Login, Flask-Security for account management and authorization in Flask.


In term's of performance I didn't really see much of a difference and honestly can't say much.
5 things I do when I'm stuck coding
Tags: beginners, codenewbie
Published: 2019-12-27 18:44:08

As somebody who learnt coding by copying and pasting snippets from anywhere on the internet, I get stuck quite a lot when working on projects as that's not exactly the best way to learn.

But after almost 2 years of coding, I've gotten better and along the way made a mental checklist of things to do when I hit a new pothole to get back on track. I don't know what expert coders with CS degrees do when they're stuck so this may not be the best list. But if it helps anyone else, here goes:

**1. Check for missing brackets.**

I used to code in an editor in which I couldn't see missing brackets until the app would crash and the error message would mention something about a missing curly brace. I've since shifted to VS code that does the job for me before I run the code. Atom also has some great plugins that help you.

**2. Change the order**

Sometimes it will make no sense at all, and sometimes it will make all the sense in the world. But oftentimes just moving some lines of code back and forth does the trick.

**3. Add lots of console messages**

I saw an article on Medium the other day about how you should never use console.log. I think that's ridiculous. I'm sure even the experts use them.

Add as much console.log messages as you can in the functions that is crashing. Fit it in between steps. Add variables to the messages to see what they are at each step before processing.

**4. Search the error message**

Sometimes it's not even your fault. Might be some bug in the package or framework you're using. A quick Google search will show somebody else in the same predicament and an Einstein or two that would have already solved it.

**5. Understand the code**

If all else fails I go back to the documentation and try and understand every bit of the code I'm running. It helps. I used to do this more often in the beginning when I was learning programming. Because it also helps give me more technical terms for the stuff I'm working with. 

Putting that in Google gives better search results than what you'd get with a description of the crash.


-----


I'd love to hear what everyone else does when they're stuck programming. Also, if you're interested in seeing where I invest my time coding, check out my site: [thiscodeworks.com](https://www.thiscodeworks.com)
Is the future of the web text-centric?
Tags: webdev, design, discuss, emergingmarkets
Published: 2019-12-27 18:34:51

I've been thinking a lot recently about how... well... I just don't really *like* the Internet right now. The constant bombardments of ads, rich media content like auto-playing videos and constant social media pressure causes the Internet to be an honest chore to navigate. We can all agree that especially the mobile web experience is severely obtuse right now. There's such an importance placed on responsive design and yet our modern web design philosophies seem to work directly to the contrary. 

Additionally, the overly data-heavy modern web is completely biased toward developed countries and high-powered devices. In countries where expensive devices and data plans are impossible to afford, Internet-enabled feature phones are barely able to keep up. Some hundred million new Internet users are making their first steps online into a connected world that is already 20 years ahead.

Finally, the P2P distributed web keeps growing in both conceptual importance and usability despite bandwidth bottlenecks and other technical limitations.

# A few questions
Here are some theoretical questions borne from the cluttered nature of modern websites:
- Is it viable to continue to adapt modern web philosophies from 240PX-width feature phones to 1080p monitors to 4K TVs?
- Is it viable to create UX that adapts from mouse and keyboard to T9 to screen-readers and more?
- Should websites look completely different between mobile and desktop layouts?
- How much "in the way" is really acceptable (in-line images, PIP videos, pop-up ads)?

# A path forward inspired by the past
In my opinion the solution to many of these problems is a shift away from a media-first Internet to small, low-bandwidth, lightning fast text-first websites. In fact, the trend [among](https://francoscarpa.com/) [many](https://www.taniarascia.com/) [developers](https://whizzoe.com/) and [websites](https://dev.to/) these days is largely text-content first. Text-based websites are fast, automatically flexible, easy to develop and maintain and force you to be creative.

- Modern styling options mean that text can be beautiful and unique
- Text is infinitely scalable with no loss of quality
- Adapting text content to various screen sizes takes almost no work at all
- Text content loads quickly

This is my take on the future of the web. I believe we'll see more websites, especially personal sites, moving away from huge frameworks with bright colours and flashing images and more toward simple layouts and text-centric content approaches. This will definitely change the way I develop sites, but how about you? What's your vision for the modern web going forward?
A Walkable Christmas Scene built with ThreeJS
Tags: showdev, threejs, webgl, javascript
Published: 2019-12-27 18:30:21


![Header](https://www.consolelogs.dev/bfa912599b92d347ec602cb4c0502d72/intro.gif)


{% codepen https://codepen.io/codypearce/pen/MWYoJgL %}

This simple 3D Christmas Scene was built with basic geometry and shapes provided by [Three.js](https://threejs.org/). The player controls were implemented using the [PointerLockControls](https://threejs.org/docs/#examples/en/controls/PointerLockControls) module along with a few functions to handle keyboard input. Collision detection was implemented only on the top surface, which means you can walk through objects like trees and snowmen but jump on other objects like the top hats.

## The Code

The entire project, from drawing and placing objects to adding interactivity, only took about 700 lines of Javascript. The code is also broken into 28 functions that initialize variables, render objects, respond to user input, and animate.

![Folders](https://www.consolelogs.dev/static/6a21ed14ed2a348d8d30424e2cb6455e/799d3/folders.png)

This is the first Three.js project I've worked on, so any improvements would be greatly appreciated. Let me know what you think so far.
We are holding a security token offering!
Tags: ethereum, sto, blockchain, crypto
Published: 2019-12-27 18:03:43

We are carrying out an STO as a PoC for the effectiveness of blockchain as an investment channel into emerging markets and our #whitepaper is finally here 📝 feel free to download it share it and give us your thoughts. 

https://utilis.ventures/wp-content/uploads/2019/12/UTILIS-VENTURES-Security-Token-Offering-2020-Whitepaper.pdf

Also, go ahead and follow us on our twitter https://www.twitter.com/Utilisventures to keep up to date with what we are doing.
Extracting text from images using Tesseract
Tags: ocr, textextraction, textrecognition
Published: 2019-12-27 17:47:34

---
title: Extracting text from images using Tesseract
published: true
description: A simple web app to extract text from images locally, using Tesseract
tags: ocr, text extraction, text recognition
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ftanmxde2aimnet78mpg.png
canonical_url: https://github.com/victorqribeiro/ocr
---

After I learned about [Tesseract](https://tesseract.projectnaptha.com/) I immediately wanted to use it. So I made this simple web app. 

[![screenshot](https://thepracticaldev.s3.amazonaws.com/i/ftanmxde2aimnet78mpg.png)](https://victorribeiro.com/ocr/)

You can take a picture of a document, edit it on your favorite photo editor, crop the part you're interested in, and feed to the app, so you can extract the text.

I'm also planning using this to extract text from memes, so people with visual impairment can also have a laugh.

Get the app [here](https://github.com/victorqribeiro/ocr).

The memes app I was talking about is [here](https://victorribeiro.com/memes/) - I'm not the creator of the memes, I just scrape them together.
A weekend hack that gained 1,300+ users
Tags: showdev, blockchain, javascript, devops
Published: 2019-12-27 17:43:20

Recently I got started to collaborate with a few friends of mine on a weekend project creating a decentralized application with Blockstack. In just over 5 days, we launched a scrappy version of our chat app called Mumble (Rebranding to Bondfire). 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1pdxj0qhztklixtmm35h.png)


Mumble is an encrypted text and voice chat for passionate online communities. We see a need for a “built for all” type of chat app for all type of community. Unlike how community are building their community in slack (that is focused on workplace) and discord (focus for game communication), Mumble is highly focused on pushing features that encourages community engagement.

Most people still uses slack and discord that does not have end to end encryption built on to manage their community. Putting their user's information at risk.

We currently have more than 1,200+ users in less than 6 weeks during beta and plans to expand more. We are also working on a rebrand soon. Feel free to try it out yourself at https://trymumble.com
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-12-27 17:35:15

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Last full week before the new year!! What was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting through the holidays
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![happy-friday](https://media.giphy.com/media/l0Iy5FYwKBrFdeLIs/giphy.gif)
What Are The Best A11y Resources/Tips?
Tags: webaccessibiity, a11y, discuss
Published: 2019-12-27 17:25:24

---
title: What Are The Best A11y Resources/Tips?
published: true
description: I was asked for web accessibility resources on Twitter
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0d35lfcf2afc3266r9je.png
tags: #WebAccessibiity #A11y #Discuss
---

What are some of the best tips for making sites accessible and A11y compliant? Do you only use semantics? Aria roles; do you toggle them on/off in Javascript, visible/ hidden in CSS? Is there an end-all-be all resource for web accessibility?

Personally, I use these tools when checking the accessibility compliance of the web apps I build: 

## Accessible color palette builder

This elm based prototype helps designers build color palettes that conform to accessibility standards. Check out the project's website [here](https://toolness.github.io/accessible-color-matrix/). 



![this tool shows a matrix of foreground and background colors](https://cloud.githubusercontent.com/assets/124687/15707652/e6ecca76-27c7-11e6-8373-e1231b81f1ba.png)

## Accessibility Archives From My Favorite Dev Sources:

### - [CSS Tricks](https://css-tricks.com/tag/accessibility/)

### - [MDN](https://developer.mozilla.org/en-US/search?q=a11y)

### - (Some people won't agree, but) [W3](https://www.w3.org/WAI/roles/developers/)

### - Talking to Other Devs
Specifically ones that work on web accessibility at work everyday. Shout out to [VWC](https://dev.to/vetswhocode) and all the troops that help me be a better developer everyday.
 

Drop links and personal experiences below.