teleren/devto huggingface dataset:
Creating a Custom appBar
Tags: flutter, widget, material, beginners
Published: 2020-07-17 15:57:02

---
title: Creating a Custom appBar
published: true
description: 
tags: flutter, widget, material, beginners
//cover_image: https://direct_url_to_image.jpg
---

 😜 Yo!

A couple of days, I was building a simple app that takes data from an API and displays them on the screen. A simple app though.

Then I needed to add some height to my appBar. Well you might suggest 
```dart
...
toolbarHeight: 100.0,
title: Text('Yo! Title here'),
...
```
but what if I want to customize my title, add some color, and use the properties across other screens well I don't want to go through the `ctrl c & ctrl v` kinds of stuff.

Here is what I did 

1. Created a widget directory inside my lib folder
2. Created a new custom_appBar.dart file
```dart
import 'package:flutter/material.dart';

class MyAppbar extends StatelessWidget with PreferredSizeWidget {
  @override
  final String title;
  final Size preferredSize;

  MyAppbar(this.title, {Key key})
      : preferredSize = Size.fromHeight(100.0),
        super(key: key);
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title, 
        style: TextStyle(color: Colors.white)
      ),
      backgroundColor: Colors.white38,
    );
  }
}
```

My new `MyAppbar` class extend the `statelessWidget`. you also noticed I have `with PreferredSizeWidget` right? Yea! this is because the Scaffold takes in a PreferredSizeWidget and not the AppBar class directly.

Then I set my constructor like so
```dart
...
MyAppbar(this.title, {Key key})
      : preferredSize = Size.fromHeight(100.0),
        super(key: key);
...
```

Lastly, my build method returns the AppBar class and there I can now set my AppBar properties

Now I can import and reuse my newly customized MyAppbar everywhere on my app

```dart
...
appBar: MyAppbar('Title goes here!'),
...
```

I also recommend checking this medium article too 👍
{% medium https://medium.com/flutter-community/flutter-increase-the-power-of-your-appbar-sliverappbar-c4f67c4e076f %}


{% tag dart %}
Tutorial 4: Desplegar una app de Angular CLI a Firebase
Tags: angular, kikstart, beginners, espanol
Published: 2020-07-17 15:30:55

---
title: "Tutorial 4: Desplegar una app de Angular CLI a Firebase"
description: "En este tutorial vamos a aprender cómo desplegar nuestra app a Firebase."
published: true
series: "Introducción a Kikstart UI"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/i/c60ri1xnyuhzrqt7wm2i.png"
// canonical_url: ""
tags: angular, kikstart, beginner, espanol
---
En este tutorial vamos a aprender cómo desplegar nuestra app a Firebase. 

> 💡 KikstartTip
> El primer paso solo se realiza una vez por cada app, no es
necesario repetirlo.

## Requisitos

- Haber realizado el tutorial 3, donde creamos las rutas.
- Tener un [proyecto firebase](https://console.firebase.google.com/u/0/)

## Paso # 1
Vamos a agregar @angular/fire

1: Busca en la terminal tu proyecto y ejecuta el siguiente comando:

```bash
ng add @angular/fire
```
> 💡 KikstartTip
>
Si es la primera vez que instalas @angular/fire en tu computador te hará preguntas como esta:
`Allow Firebase to collect CLI usage and error reporting information? (Y/n)`.

2: Durante el proceso de instalación sobre el proyecto elige el que quieres desplegar.

```
Installing packages for tooling via npm.
Installed packages for tooling via npm.
UPDATE package.json (1516 bytes)
✔ Packages installed successfully.
✔ Preparing the list of your Firebase projects
? Please select a project: (Use arrow keys or type to search)
❯ site2 (site2-8ce5b)
```
## Paso # 2
Configura el enviroment con las llaves de tus proyectos en `firebase`.

1: En la consola de `firebase` busca tu proyecto.

2: En descripción general haz clic en configuración del proyecto. 

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

3: Busca el siguiente título:

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

4: Busca la ruta `src/enviroments/enviroment.ts` y coloca esta secuencia de comandos con sus respectivas llaves:

```bash
export const environment = {
  production: false,
  firebase: {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
    measurementId: '',
  },
};
```

> 💡Tip
>
Si quieres tener un proyecto en producción y otro en desarrollo realiza todos este paso en el archivo `enviroment.prod.ts`.

 
## Paso # 3
En este paso vamos a desplegar la app. No tenemos que hacer el `ng build` porque este comando lo hace por nosotros.

1: Busca en la terminal tu proyecto y ejecuta el siguiente comando:

```bash
ng deploy
```
2: Si todo sale bien te genera el `Hosting URL: https://site2-8ce5b.web.app`. Haz clic en el link y disfruta tu nuevo sitio !!! =)

## Resumen
En este tutorial agregamos `@angular/fire`, desplegamos la app y tenemos listo un resultado 
que podemos ver en el navegador.


El repositorio con este paso lo puedes encontrar [aquí](https://github.com/KikstartDev/introduccion-a-kikstart-ui/tree/tutorial-4).

# Muchas gracias!
Te esperamos en la siguiente serie de `Kikstart UI` =)
Cualquier pregunta sobre esta serie siéntete libre de comentar.
La reformas necesarias para la PSF
Tags: python, opensource
Published: 2020-07-17 15:29:38

Revisando la discusión al rededor de la reforma electoral para la PSF, noté de nuevo una falta de voces latinas. Es necesario involucrarnos a esta conversación si queremos aumentar las posibilidades de vernos representados en la junta directiva.

Es ahora el momento de informarnos sobre la situación actual para aportar nuestro punto de vista como comunidad, participar y hacer crecer el impacto que tenemos.

Mi opinión es que debemos postear algo que acordemos juntos. 

#### Corto plazo
* Limitar los votos al número x de plazas abiertas.
* Cambiar los textos, dejar de decir "Select all candidates you think are acceptable" y decir "Select the top x candidates to be the next Board Members".
* La PSF dará recursos (no necesariamente dinero) para conseguir más votantes diversos.
* Traducir la información de la PSF y las votaciones.

#### Largo plazo

* Elegir regiones. Podemos usar como base [la división regional de la ONU](https://unstats.un.org/sdgs/report/2019/regional-groups/)
* De esas regiones seleccionadas otorgar asientos para sus representantes.
    * Su votación será por las personas de esa región.
    * Para poder ser elegible debe ser comprobable el trabajo dentro de esa región o comunidad sin que forzosamente sea su lugar de residencia.
* Si se crea el rol de embajadores, deben tener el poder de votar dentro de las reuniones de juntas directivas o al menos de levantar mociones(1).
* Limitar la capacidad de postularse sí ya existen X número de personas de la misma región en la Junta Directiva.

(1) El rol de embajador de asistir a las reuniones pero no poder votar no genera cambio dentro de la junta directiva. Podemos tener esos roles pero no para resolver esta situación.

##### Mi meta personal para la próxima elección
* Conseguir 20 votantes activos para la siguiente elección en 10 meses. ¿Por qué? Ese número hubiera asegurado, al menos, dos asientos para candidatos Latinos.

El documento cierra el 24 de Julio para recibir comentarios. Podemos trabajar esta petición hasta el Martes 21 y todos los involucrados postear una versión del acuerdo en la discusión de la PSF.

Trabajemos en estos puntos, esto simplemente es mi opinión resumiendo los comentarios formulados también en el documento: https://discuss.python.org/t/psf-board-election-reform/4527/33
กฏของพาร์กินสัน
Published: 2020-07-17 15:16:19

![Alt Text](https://upload.wikimedia.org/wikipedia/en/b/b1/Parkinson%27s_Law_Book.jpg)

จากวิกิพีเดียว่า "Work expands so as to fill the time available for its completion."

#"งานขยายออกเท่ากับเวลาที่กำหนดให้เสร็จ"

ซึ่งอันนี้มันไม่ไดเกี่ยวข้องอะไรกับโรคพาร์กินสันเลย.

ดูสิ พอกำหนดเวลาเท่าเดิม แต่งานมากขึ้น ก็ทำเสร็จได้. ต.ย. จากรายการวิทยุที่เดิมจัด 30 นาที. พอมาเพิ่มเป็น 60 นาที ก็ยังจัดได้

หรือ งานเท่าเดิม แต่กำหนดเวลาลง คือ เอา deadline เข้ามาใกล้ขึ้น ก็เสร็จได้เหมือนเดิม.
From Lean Startup to Big Blue: Adapting Developer Relations to Zillions of Active Developers  – my interview with Dave Nugent
Tags: devrel, ibmdeveloper
Published: 2020-07-20 16:39:41

---
title: From Lean Startup to Big Blue: Adapting Developer Relations to Zillions of Active Developers  – my interview with Dave Nugent
published: true
date: 2020-07-17 15:12:09 UTC
tags: DevRel,IBMDeveloper
canonical_url: https://maxkatz.org/2020/07/17/from-lean-startup-to-big-blue-adapting-developer-relations-to-zillions-of-active-developers-my-interview-with-dave-nugent/
---

[Dave Nugent](https://twitter.com/drnugent) and I sat down together and Dave asked me the following questions about Developer Relations:

- How do you prove the value of DevRel inside a large company?
- How valuable is consistent messaging for DevRel?
- How does leading DevRel differ between a startup and enterprise?
- How does your team interface inside IBM?
- How has your mission changed since you started at IBM?
- Who in DevRel would you like to call out?

**Q: How do you prove the value of DevRel inside a large company?**

Probably one of the best ways and my favorite is to explain that developers today have a lot of influence. In other words, developers make decisions what software to use and buy. Many years ago software was purchased by executives and pushed down to developers (top-down approach). In most companies today it’s the complete opposite. Developers try software and if they like it they go to their managers/executives (who has the budget) and ask them to buy the software. Instead of top-down it’s now bottom-up approach. In some companies developers not only influence what software to buy but they also have the [buying power](https://www.techrepublic.com/article/developers-now-control-a-big-chunk-of-enterprise-budgets-heres-how-to-reach-them/).

Continue [reading the interview](https://dev.to/drnugent/from-lean-startup-to-big-blue-adapting-developer-relations-to-zillions-of-active-developers-2678).
India's Ex-Finance Secretariat said Cryptos can be Considered as Commodities
Tags: cryptocurrencyindia
Published: 2020-07-17 14:48:15

Highlights
India’s former finance secretary said that cryptocurrencies can be regulated as commodities but not as currencies.

The speakers in the panel suggested that crypto is very young and the government should let it grow before concluding with any judgment.

The Indian crypto space is content with the initialization of a dialogue on cryptocurrencies in the country amidst the misty environment.

Unfortunately, Mr.Garg's views are immaterial at the present situation as he stepped down from the Inter-ministerial committee in October 2019

Know more here:- https://coinpedia.org/news/ex-chair-of-indias-virtual-asset-committee-suggests-crypto-as-commodity/
WebP: Compress THEN Convert
Tags: html, webperf, design, webp
Published: 2020-07-17 14:42:01

A common task on the web is converting images such as .png files into other formats, such as WebP.

WebP has often been criticized unfairly for not having full-native browser support until recent times. One criticism that was justified, was the actual filesize savings...

A JPG/JPEG file converted into WebP for example can often offer very little compared to simply compressing the JPG/JPEG.

![File Reduction Size Comparison](https://dev-to-uploads.s3.amazonaws.com/i/zxo0cqh5dirawy68k007.png)

Compressing prior to converting into the WebP format makes all the difference. In the case above, the total filesize reduction totaled 92.07% when compressed AND then converted.
Frontend developer need to rethink their work?
Tags: discuss
Published: 2020-07-17 14:39:16

---
title: Frontend developer need to rethink their work?
published: true
description: 
tags: #discuss
//cover_image: https://direct_url_to_image.jpg
---

If any of you are on Twitter and following the tech trends

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">I just built a *functioning* React app by describing what I wanted to GPT-3. <br><br>I&#39;m still in awe. <a href="https://t.co/UUKSYz2NJO">pic.twitter.com/UUKSYz2NJO</a></p>&mdash; Sharif Shameem (@sharifshameem) <a href="https://twitter.com/sharifshameem/status/1284095222939451393?ref_src=twsrc%5Etfw">July 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

someone built this using GPT-3 and its both amazing and freaking me out. 

Even though I do both frontend and backend, it looks like all that'd be left for me to do with this getting better and better will be to just maybe change styles instead of coding the functionality. 

What do you guys think?
Probando Backdrop Filter
Tags: css, html, beginners, spanish
Published: 2020-07-17 14:38:46

Seguramente en algún momento has querido lograr un efecto como el de la imagen de inicio con tu CSS, seguramente lo primero que piensas es agregarle un `filter: blur()` a tu contenedor pero descubres que no funciona 😫.

Luego de este intento empiezas a buscar y descubres que hay una [forma de hacerlo](https://codepen.io/jorgehossa/pen/ExPdqeX) con `filter` pero para lograrlo debes de realizar un proceso que requiere agregar más elementos de los que realmente necesitas.

Pero gracias a Dios ahora podemos usar [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)! Esta propiedad nos permite aplicar el efecto gráfico a los elementos que sen encuentran detrás del elemento al que le configuremos la propiedad.  
Esta sería la sintaxis:
```css
.element {
  backdrop-filter: <filter-function> [<filter-function>]* | none
}
```
Y estas serían las funciones de filtro (`<filter-function>`) que podríamos pasarle:
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
- url() – (for applying SVG filters)

Aquí les dejo un [pequeño experimento que realice con esta propiedad](https://codepen.io/georgehossa/pen/ExPdqeX) y espero puedan hacer uso de esta interesante propiedad en sus proyectos.

En temas de compatibilidad con navegadores solo nos falta el soporte en Firefox, pero seguramente muy pronto lo veremos soportado, aquí les dejo la info de [caniuse](https://caniuse.com/#feat=css-backdrop-filter).

Muchas gracias por tomarte el tiempo de leer mi primer post y espero que este tip té sea útil, pronto compartiré un nuevo tip.
Join us for a Web Monetization roundtable 
Tags: gftwhackathon, grantfortheweb, webmonetization
Published: 2020-07-17 14:35:21

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0irwz22hwf53iq8mak5s.jpeg)

### Join us in a discussion about a new way to make money from your content. Users pay for what they view without having to subscribe.

Sign up [here] (https://www.eventbrite.co.uk/e/web-monetization-roundtable-tickets-108732648278)

** About this Event **

We are holding a discussion about a new way to support creatives and activists. You can contribute, listen, ask questions, and do some research in the background.
We'll start with a 10-minute presentation and then move around different video rooms. There will be discussions with experts in the following areas:

* Journalism
* Podcasting
* Community
* Organizing
* Game development
* Comics

Photo by Florian Klauer on Unsplash
Recommend me some books for teaching
Tags: help
Published: 2020-07-17 14:25:20

---
title: Recommend me some books for teaching
published: true
description: 
tags: #help
//cover_image: https://direct_url_to_image.jpg
---
With the current global pandemic, our teaching strategies have changed drastically. I need you to recommend me books that use images, charts and other graphic resources for teaching CS. Some of the ones I've seen include:
- Head first series.
- Illustrated.dev: not a book per-se, but a great visual learning resource.
- JavaScript & jQuery: Interactive Front-End Development: one of the best books I've read on the subject.

I teach Python and Java, so any book recommendation on these languages would be very apreciated.
Microsoft Edge!
Tags: edge, chrome, browsers
Published: 2020-07-17 14:18:18

Edge has radically changed and seems it may give Chrome a run for the money!

I just decided to try Edge again.  I jettisoned all Microsoft Browser use around IE10 time. Reason: 

>Chrome did things right, while MSFTs proprietary ways hindered the developer (massively).

I haven't tried any development work in it yet, but these are the things I really like about it.

- Interface in dark mode is fantastic.
- Fast.
- Imports all bookmarks from Chrome easily.
- Ties in perfectly (for Profiles) associated with Microsoft sign ins. Which I still use for Azure and other things.
- It's News Feed page is excellent looking and keeps my interest with a seemingly endless graphical preview of things to read.

> Note: I dislike Microsoft for how they threw their own development community under the bus so many times in the past. However, if this tool is a good one and helps me personally as a developer, then that's good. 

Here's the Microsoft News page which shows up by default... and is totally customizable.

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

Update Jan 2021, Edge is much faster to start up than Chrome. I made the switch recently and am on Edge full-time now.

JWP 2020
Tailwind CSS Plugin that brings Webgradients into your app
Tags: showdev, react, tailwindcss, css
Published: 2020-07-17 14:14:43

---
title: Tailwind CSS Plugin that brings Webgradients into your app
published: true
description: Tailwind CSS Plugin that brings Webgradients into your app
tags: #showdev #react #tailwind #css
cover_image: https://i.imgur.com/4wiMRIp.png
---
Hey devs!

This is my first shot at creating a plugin for Tailwind CSS. I wanted to play around with their plugin development and thought I should bring the gradients from webgradients.com.
Here's the NPM package: https://www.npmjs.com/package/tailwindcss-webgradients. Check it out and tell me what you guys think. I hope people will find it useful.
Here's a little playground I made so you can check it out instantly:
{% stackblitz tailwindcss-webgradients-playground %}

Cheers,
L
Gate CS 2021
Tags: tabassummj
Published: 2020-07-17 14:07:07

#Every month preparation strategy for Gate CS 2021
1.First cover concept/Theory, it will take around 12 to 15 days to complete all the concepts.
2. After completing concepts, then prepare notes in 3 days 
3. Then solve previous year Questions for 5 days
4. Then do Practice Questions or Test series in 2 days(Test series are important).
5. Solve Excercise of prescribed TextBook for 5 days 
Lastly Prepare Short notes in 2 to 3 hours 
so this is every months preparation strategy for all the subjects.
 
->For aptitude and reasoning do practice this every morning 2 hours and take practice daily.

so if you guys like this then comment below .
i will share more regarding gate cs 2021
Duo Video Chat App
Tags: javascript, productivity, node, git
Published: 2020-07-17 13:59:56

# Simple Video Chat WebRTC

### By using [simple-peer](https://github.com/feross/simple-peer), this web app connects video chat between two clients.

## How To Use

Install dependencies - npm install  
Start - npm start  

For development run watchify - npm run watch  

Open localhost in two browser tabs for testing. On the same machine, don't open tabs in two different browsers as it will fail to provide camera access to 2 different applications(browsers) simultaneously.   
Deploy it and open url in two separate devices for real-world usage.

Thanks and Cheers!!
Gaurav Singh

<a href="https://vdovideochat.herokuapp.com" target="_blank">App link</a>
<a href="https://github.com/GauravSingh9356/Video-Chat-App">GitHub code</a>
Road to Genius: superior #52
Tags: javascript, beginners, codenewbie, computerscience
Published: 2020-07-17 13:54:54

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

```JS
function intersected(a, b) {
  if (a[0] > b[1] || a[1] < b[0])
    return false;
  return true;
}
function mergeTwo(a, b) {
  return [Math.min(🚀[0], b[0]), Math.max(a[1], b[1])];
}
function merge(VLS) {
  VLS.😈((a, b) => a[0] - b[🍎]);
  for (let i = 0; i < VLS.length - 1; i++) {
    const cur = VLS[i];
    const next = VLS[i + 1];
    if (intersected(cur, next)) {
      VLS[i] = undefined;
      VLS[i + 1] = mergeTwo(cur, next);
    }
  }
  return VLS.filter(q => q);
}
let arr = [[1, 10], [10, 15], [15, 15]];
let A = 🐼(arr);
A = A[0][1];

// 🐼 = ? (identifier)
// 🍎 = ? (number)
// 😈 = ? (identifier)
// 🚀 = ? (identifier)
// such that A = 15 (number)
```

Today's challenge seems to be some specific algorithm related to merging arrays. To solve the challenge we have to fix four bugs.

The easiest bug is 🐼 which should be a call to the function `merge`.

The next bug 🍎 is likely going to be 0, because the arrow function seems to be comparing `a[0]` with `b[0]`. Consequently 🍎 is likely going to be `sort` function. Similarly the bug 🚀 should be `a`.

After a brief analysis, this algorithm is designed to merge the given intervals. Notice that the input `arr` is an array of intervals in the form of [start, end]. When two intervals overlap (using `intersected` function) then the two intervals are merged into one.

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/g25gst23q8jqmjlbv7zj.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Get started and become a certified Codr today at https://nevolin.be/codr/
GitHub vulnerability reports are also notified on my abandoned  repos
Tags: discuss, github, security, node
Published: 2020-07-17 13:52:33

I don't have time or drive to correct all of my old repos. What should I do with it?

Just accept suggested PR's? What about the possibilities of breaking what is already working?

If it is a relative popular repo, maybe I would try to correct it. But if no one else use it, and even I am not currently using it? Not all GitHub repos are published in NPM. 

Also, is it just me, or NPM packages usually have more vulnerabilities than perhaps, Python's PyPI?