teleren/devto huggingface dataset:
Overlooked design, blank states. (Snack Pack #3)
Tags: webdev, design, beginners
Published: 2021-03-28 02:20:36

# State not found

Often as developers, we know how our application functions and moves. My grandmother won't know why ***"her phone is broken"*** without some help. Design it for her.

---
## Most users aren't as technical as you.

Design shouldn't need an explanation, it should be simple.  If the app doesn't give users feedback, it isn't working. 

What's the difference between a search with no results and an error? How will your user know the difference?

A "**perceived bug**" is a bug, it's just a design bug.

---

## Examples of blank states
- User searches for something that doesn't exist. 
- User has an empty table without content.
- Placeholders or labels aren't clear or they are hidden while input is focused.

These are all frustrating points for a user. 

---

## Visual blank state example
Spotify:
Imagine searching for a song and Spotify gives you a blank screen with no feedback on what happened.
![Screen Shot 2021-03-27 at 9.51.58 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sobtqi0adzktf7vqtsjz.png)

---

### Always give users feedback

---

## Additional Resources
I highly recommend Refactoring UI. I'm not the best designer, but this book has helped me a lot in how I think about UI/UX.


Refactoring UI: https://refactoringui.com/
Here's an article describing more about blank states: https://www.innertrends.com/blog/blank-state-examples

---
## Closing
Go and make better blank states!

**My snack pack reads are intended for a quick read without any fluff, BS, or needless clickbait.**

What is your favorite blank state? 
- Facebook's animated cards while loading
- Twitter's "What's happening?" text area for blank tweets
- Is there a really good one I'm missing?
Portfolio - Novo layout
Tags: frontend, css, javascript
Published: 2021-03-28 01:51:05

Criei um novo layout para o meu portfolio para estudar o html/css e Sass. Fiz primeiramente voltado para o mobile. Com certeza, logo irei mudar, conforme for aprendendo coisas novas! Caso quiser dar sugestão, fique à vontade! ❤ https://danielsilveira-dev.github.io/
Python3 + GTK+3 + Glade + Templates = <3
Tags: python, gtk, glade
Published: 2021-03-28 01:26:28

---
title: Python3 + GTK+3 + Glade + Templates = <3
published: true
description: Smallest code to create a GTK app using Glade + Python
tags: python,gtk,glade
---

Many software that you use on your Gnome environment could've been developed with Python. Apps like Gnome Music and Gnome Tweaks are some examples.

In this article I'll show you a minimal example in order to give you a foundation for your ideas. Let's go:

## Create a basic layout on Glade:

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

Stuff you need to pay attention to:

- The top level component is a **GtkApplicationWindow** (you can find it under _Toplevels_ button)
- While it's selected, check the _Composite_ checkbox on the farther right (super important!)
- When you check the _Composite_ checkbox the _ID_ field becomes _Class Name_. Give it a name and save it, we'll use it soon
- Give the button an _ID_ and save it, we'll use it soon

With the Button selected, switch to the _Signals_ tab:

![Button Signals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2p580mbgbc817xaaufe7.png)

- Click on the _Handler_ column on the _clicked_ Signal row
- Type the first letter of your button's name
- Accept the suggestion (_btnMain_clicked_cb_, in my example) and save it, we'll use it soon

And that's it for Glade. Save your _.glade_ file on your project dir.

## Create a basic Python skeleton:

```python
import gi
gi.require_version("Gtk", "3.0")
from gi.repository import GLib, Gio, Gtk

import sys


#
# 1. our .glade file (may contain paths)
#
@Gtk.Template.from_file("a.glade")
class AppWindow(Gtk.ApplicationWindow):
    #
    # 2. the GtkApplicationWindow class
    #
    __gtype_name__ = "app_window"

    #
    # 3. the Button name we saved above
    #
    btnMain: Gtk.Button = Gtk.Template.Child()

    #
    # 4. the signal handler name we saved above
    #
    @Gtk.Template.Callback()
    def btnMain_clicked_cb(self, widget, **_kwargs):
        assert self.btnMain == widget
        print(widget.get_label())


class Application(Gtk.Application):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, application_id="dev.monique.Gtk1",
                         flags=Gio.ApplicationFlags.FLAGS_NONE, **kwargs)
        self.window = None

    def do_activate(self):
        self.window = self.window or AppWindow(application=self)
        self.window.present()


if __name__ == '__main__':
    Application().run(sys.argv)
```

You'll also need to:

```shell
pip install PyGObject
```

It may complain about missing libraries, just read the error output and install the missing dependencies (I had to `apt install libcairo2-dev libgirepository1.0-dev`)

With this code you'll be able to get started.

Good luck!
Tips To Find Your First Junior Software Developer Position
Tags: career, productivity, beginners, programming
Published: 2021-03-28 00:59:42

**1. Search by language or framework:**

The first time when I was looking for a Junior Web Developer position, I would type something like "junior web developer", and the result would consist of languages that I didn't want to specialize in or not all junior positions would come up as a lot of companies don't have the same job title. So I changed my strategy a bit by searching for the language or framework I wanted to specialize in. By doing that, I was able to filter out all the jobs that I didn't want to apply for or shouldn't even waste my time looking at it in the first place. 

**2. Tailor your skillset to job market demand:**

Once you followed the first step and found a few awesome jobs, it's time to compare them to each other. As you compare them, look at the most common things first and make them your #1 priority. If you want to be a frontend developer and see that ReactJs is the most common framework that companies are asking for, consider putting more of your focus and efforts into ReactJs technology. This approach can help you filter out things that you don't need to spend weeks or months studying.

**3. Sharpen your skills by setting challenges for yourself:**

About every experienced developer would say that you need to work on a project that could help you progress, and they are not wrong. However, how do you track your progress? In my case, I gave myself 10 hours to develop a project using technologies and technics that I have never used. The goal was to develop a single-page application using AngularJs (when it was hot), make it responsive, functional, and beautiful UX/UI, and deploy it onto a server. I was able to accomplish it all in 8 hours and prove it during the interview. Working on a project for more than 2 to 3 months just become an unpaid job.

These are my top 3 points that helped me get my first Junior Full Stack Developer position. But are there more tips for it? 100% yes, and you can find them on my YouTube channel DevPool. Subscribe to my channel as my goal is to help beginners and juniors succeed in the tech industry.

[YouTube - DevPool](youtube.com/channel/UC03vw5F2isFkbJhyEZU5bvg?sub_confirmation=1 "DevPool")
Front end Web developer
Tags: html, css, javascript
Published: 2021-03-28 00:16:13

## Basic Skills you should know
A front end web developer is the person who implements web designs through coding languages like HTML, CSS, and JavaScript. Though it’s not as common anymore, front end developers are/were sometimes called “client-side developers” to distinguish them from back end developers who program what goes on behind the scenes (like databases). 


#### HTML & CSS
HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) are the most basic building blocks of web coding. Without these two things, you cannot create a website design and all you will end up with is plain unformatted text on the screen. You can't even add images to a page without HTML! The html is the document the css the design of the document

##### CSSDOM
HTML has the DOM, and CSS has CSSOM, an acronym for CSS Object Model. When the browser is loading the HTML DOM, which is the HTML object tree, it finds a call to a CSS code and starts to build another tree, based on the CSS selectors. This tree makes a reference between the selectors, which will represent the elements in HTML and their properties visuals that will be modified by the CSS.

#### Javascript
JavaScript lets you add a ton more functionality to your websites, and you can create a lot of basic web applications using nothing more than HTML, CSS, and JavaScript (JS for short). On the most basic level, JS is used to create and control things like maps that update in real time, interactive films, and online games. 

#### JQuery
jQuery is a JavaScript library, a collection of plug-ins and extensions that makes developing with JavaScript faster and easier. Instead of having to code everything from scratch, jQuery allows a front-end web developer to add ready-made elements to projects and then customize as needed (a reason why knowing JavaScript is so important). You can use jQuery for things like countdown timers, automatically filling out survey forms, and even automatically rearranging and resizing grid layouts.
Azure Functions University - Configuration Lesson (.NET Core)
Tags: azure, serverless, programming, dotnet
Published: 2022-03-16 20:07:08

---
title: Azure Functions University - Configuration Lesson (.NET Core)
published: true
date: 2021-03-28 00:00:00 UTC
tags: azure, serverless, programming, dotnet
canonical_url: https://blog.marcduiker.nl/2021/03/28/azfuncuni-configuration-lesson-dotnet.html
series: Azure Functions University
---

![Table Lesson .NET Core](https://blog.marcduiker.nl/assets/2021/03/28/AzureFunctionsUniversity_Configuration_Lesson_dotnetcore.png)

Hi serverless friends, we have a new Azure Functions University lesson for you! In this lesson we will learn how to use Configuration & Settings in Azure Functions written in .NET Core 3.1.

<!--more-->
## Lesson

You can find the lesson on GitHub: [Configuration & Settings (.NET Core)](https://github.com/marcduiker/azure-functions-university/blob/main/lessons/dotnetcore31/configuration/README.md).

And you can watch the video on YouTube:
{% youtube p8FVnMSYMpA %}

The lesson consists of the following exercises:

| Nr | Exercise |
| --- | --- |
| 0 | Prerequisites |
| 1 | Why do we use configuration? |
| 2 | Function App application settings |
| 3 | Using custom application settings |
| 4 | Manage app settings using Azure CLI |
| 5 | Using App Configuration Service |
| 6 | Homework |
3 Ideas How to Use Whiteboards for Software Development
Tags: productivity, programming
Published: 2021-04-05 15:56:52

---
title: 3 Ideas How to Use Whiteboards for Software Development
published: true
date: 2021-03-28 00:00:00 UTC
tags: productivity, programming
canonical_url: https://mannes.tech/whiteboard-software-development/
---

When I'm programming, I'm often making notes or scribble on paper or a whiteboard.

It helps me explore and keep track of my options.

For small or big architectural decisions (which we're making all the time), it's hard to keep all options to implement something and their pros and contras in mind.

Here are 3 effective ways you can use a whiteboard (analog or digital, or just a piece of paper) to improve your software engineering:

* **A mind map of options** you have to implement something. If there are multiple ways to implement a more complex part of your application, you can use a classic mind map. Write your problem in the middle. Then add your solutions around it. Then add pros and contras. Having all known options and their implications visible makes the decision and the discovery of new options much easier.
* **A user journey** with concrete steps. You can either write down the specific steps you want a user to take or sketch out the ui and annotate it.
* **An UML diagram**, e.g. to keep track of event flows. The three UML diagram types I use most often are [activity diagrams](https://www.lucidchart.com/pages/uml-activity-diagram) (to understand what happens when, in which order, and under which conditions), [sequence diagrams](https://www.lucidchart.com/pages/uml-sequence-diagram) (to keep track of the order of events, messages, and calls), and [context diagrams](https://en.wikipedia.org/wiki/System_context_diagram) (to get clear on who uses some software or is affected by it, and in which ways).

[_Follow me on Twitter @simon_mannes_](https://twitter.com/@simon_mannes)
How to watch a file for changes using Node.js?
Tags: node
Published: 2021-03-28 00:00:00

---
  title: How to watch a file for changes using Node.js?
  published: true
  tags: Nodejs
  date: Sun Mar 28 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/watch-for-changes-in-file-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-f7c4f0d94795c59fda49fb48958531c7.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/watch-for-changes-in-file-nodejs)
  
To watch for any changes to a file, you can use the `watchFile()` method from the `fs` (filesystem) module in Node.js.

```js
// require fs (filesystem) module
const fs = require("fs");

// use fs.watchFile() method to look for changes
fs.watchFile("./myfolder/myFile.txt", (currentStat, prevStat) => {
  console.log("Current File Stats: ", currentStat);
  console.log("Previous File Stats:", prevStat);
});
```

Imagine you have a file named `myFile.txt` inside the `myFolder` directory and you want to check for changes that are happening to the file.

For that, we use the `fs.watchFile()` method and pass the `path` to the file as the first argument, and then pass the callback function like this,

```js
// require fs (filesystem) module
const fs = require("fs");

// use fs.watch() method to look for changes
fs.watchFile("./myfolder/myFile.txt", () => {
  // some good stuff here! 😃
});
```

We have now defined the path of the file we want to check for changes. Whenever there is a change to the file, the callback function is called and passed with two arguments:

- The first one is `current`, which tells all the statistics on the current file.
- The second parameter is `previous`. which tells all the statistics on the previous file.

It looks like this,

```js
// require fs (filesystem) module
const fs = require("fs");

// use fs.watchFile() method to look for changes
fs.watchFile("./myfolder/myFile.txt", (currentStat, prevStat) => {
  console.log("Current File Stats: ", currentStat);
  console.log("Previous File Stats:", prevStat);
});
```

See the above code live in [repl.it](https://replit.com/@melvin2016/watch-for-changes-in-file-using-nodejs).

That's all! 😃

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

---
Build a Rest API with NodeJS and PostgreSQL
Published: 2021-03-27 23:07:36

Recently I’ve been learning backend development with Node.

I put together a video where you can build a rest api along with me.

[Build a Rest API](https://youtu.be/DihOP19LQdg)

In the video you’ll learn about:
* routing concepts
* the express framework
* how to use Postman to test your routes
* how to create a database in the psql shell
* performing SQL queries
* callback functions
And much more!
Dynamic generation of informative `Enum`s in Python
Tags: python, enum
Published: 2021-03-27 23:04:05

Since I started learning some Rust and getting to know its enums, I've been very into using `Enum`s in Python. And while enums in both languages are very different, they're close enough for most of my current use cases. Moreover, within Python, `Enum`s are used in frameworks like `Typer` (CLI) and `FastAPI` (API), where they are used to provide validation to input within a set of possibilities.

In Python, an `Enum` [without explicit member values](https://docs.python.org/3/library/enum.html#using-automatic-values) is created as follows

```python
from enum import Enum, auto
class Color(Enum):
    RED = auto()
    BLUE = auto()
    GREEN = auto()

list(Color)
# [<Color.RED: 1>, <Color.BLUE: 2>, <Color.GREEN: 3>]
```

or alternatively, using a [functional API](https://docs.python.org/3/library/enum.html#functional-api)

```python
from enum import Enum
Animal = Enum('Animal', 'ANT BEE CAT DOG', module=__name__)
list(Animal)
# [<Animal.ANT: 1>, <Animal.BEE: 2>, <Animal.CAT: 3>, <Animal.DOG: 4>]
```

Great! The problem is that when having `Enum`s that interface with external users, the integer values of the members are of little use and very uninformative.

That's why I tend to prefer to use a different way, where the values are strings.

```python
class Animal(str, Enum):
    ANT = 'ant'
    BEE = 'bee'
    CAT = 'cat'
    DOG = 'dog'
list(Animal)
# [<Animal.ANT: 'ant'>,
#  <Animal.BEE: 'bee'>,
#  <Animal.CAT: 'cat'>,
#  <Animal.DOG: 'dog'>]
```

Now, attending to the real problem at hand hinted at by the title. I had a rather long set of about 15 possible elements, and I didn't want to manually create all the elements of the `Enum` myself in a way that the values are informative. That's the exact thing we try to avoid, repetitive manual work.
We already saw the functional API work with an iterable, so basically, the problem is already solved. However, it does in a way that the member values are uninformative.

The solution is to provide a dictionary instead of a list (or a string in the example). Then, the (keys, value) pairs of the dictionary become the member name and value of the `Enum` as shown below. Going from a list (or an iterable) to a dictionary is straightforwardly achieved with a dictionary comprehension.

```python
Animal = Enum('Animal', {el:el.lower() for el in 'ANT BEE CAT DOG'.split(" ")}, type=str)
list(Animal)
# [<Animal.ANT: 'ant'>,
#  <Animal.BEE: 'bee'>,
#  <Animal.CAT: 'cat'>,
#  <Animal.DOG: 'dog'>]
```

Which accomplishes what I was going for.
What Kills Developer’s Willpower?
Published: 2021-03-27 22:22:39

## Best ways to kill the software engineer willpower


Developers are under constant fire. Bugs, deadlines, and a lot of abstractions. Really easy to lose the willpower to code.

Why developers don’t like coding? Paychecks are good. You sit all day. You don’t do any physical labor.

_What aggravates developers the most?_

# Meaningless coding jobs

For any software engineer, this is by far, the best way to lose interest. Lose interest in coding. You become a drag-n-drop developer.

Drop-in a plugin, add a few adjustments, job well done. It is easy money, but no valuable progress.

Freelance developers can’t pick work. They work on adult sites, scams, and Ponzi schemes.

Imagine your friends asking about work. You would feel upset about this, and leave programming for good.

# Micromanagement

Ask developers every day for status reports. Even better, ask them every hour.

Push them to finish that feature. Ask them constantly about the progress.

Change scope. Change it mid-sprint. To agitate on the developer’s pain.

# Impossible schedule

Notify them about the critical bug on friday. Expect, the fix in few hours.

Don’t think about their well-being. Ask them to deliver. Deliver instantly.

# Don’t provide the best tools

Blame everything on them. Build failed? It’s your fault. Not that we don’t have CI in place. Your fault.

Work with legacy systems. Then question why developers are not happy. The answer presents itself.

# Dysfunctional team composition

Testers don’t match the developers. You’re pulling your hair to explain basic features. You’re drained from all that explaining.

Even after you explain. Testers don’t test properly. Bugs occur. You lose your motivation to work.

# Tech debt

Code is locked down. No changes. It works. Don’t touch it.

And tech debt takes its toll. Developers get to a breaking point.

The point at which one can’t add code. Changes on feature X break feature Y, or even worse problems occur.

# Unclear software requirements

Business giving requirements directly to developers. Never works well. Without a good business analyst, it is impossible to do work.

You’re constantly bombarded with dumb requests._“Margins are bad”_,_“why is this not brown?”._While performance issues are causing more and more customers to click away.

# Disruption of flow

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

[source](https://undraw.co/search)

Constant meetings. You drop from one to join another one. Talks about mundane things.

Disrupting your code flow. Directly impacting your will to code.

# Conclusion

Times are hard. Your mental health is important.

Leave bad businesses. New opportunities do come up. Don’t stay and feel upset, leave and find a better workplace.

Photo by[Andrea Piacquadio](https://www.pexels.com/@olly?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)from[Pexels](https://www.pexels.com/photo/photo-of-man-holding-black-eyeglasses-3760137/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)
Implementing the heart of clox's VM
Tags: 100daysofcs, computerscience, c
Published: 2021-03-27 22:13:38

Halfway through Chapter 2 of Crafting Interpreters. We are implementing a VM to "execute" the instructions we had managed to store in chunks in the last post.

So far, we've added an `interpret` method, which initializes the Instruction Pointer (a pointer which always points to the next instruction to execute) and calls a `run` method, which just keeps iterating over the `vm.chunk` which consists of  opcodes and their operands, and runs corresponding C code. It looks like this:

```c
InterpretResult run() {
    #define READ_BYTE() (*vm.ip++)
    #define READ_CONSTANT() (vm.chunk->constants.values[READ_BYTE()])

    for (;;) {
        uint8_t instruction = READ_BYTE();
        #ifdef DEBUG_TRACE_EXECUTION
            disassembleInstruction(vm.chunk, (int)(vm.ip - vm.chunk->code));
        #endif
        switch (instruction) {
            case OP_RETURN: {
                return INTERPRET_OK;
            }
            case OP_CONSTANT: {
                Value constant = READ_CONSTANT();
                // For now, let's just print the value
                printValue(constant);
                printf("\n");
                break;
            }
        }
    }
    #undef READ_CONSTANT
    #undef READ_BYTE
}
```

Not a whole lot useful, you'd say but hey, we don't have any supporting infrastructure right now. Bob tells me that this is the heart of the interpreter we are building and it will spend some 90% of its time here.

For the same "program" we embedded in [our last post](https://dev.to/rj722/laying-down-ground-work-for-a-bytecode-virtual-machine-5614), this outputs:

```
== Test Chunk ==
0000  122 OP_CONSANT          0 '1.2'
0002  123 OP_CONSANT          1 '456'
0004    | OP_RETURN
1.2
456
```

Here on, I see that we're going to build a stack -- for holding values of local variables? perhaps. Let's find out!

---

Housekeeping announcement: I'm not really enjoying writing daily posts. Way too less time to cram the interesting, juicy  stuff. The entire point of this was to learn CS every day, I added daily posts to keep myself accountable. I'll still be pushing a bullet-point-style log every day, and push interesting long form posts only when I have something interesting to write about.
convert file to image 
Published: 2021-03-27 22:11:24

i wrote this code to convert image from bytes :

Future<ui.Image> _loadImage(File file) async {
    final data = await file.readAsBytes();
    return await decodeImageFromList(data);
  }

but i dont want to use "package:image/image.dart" not "dart:ui" package

so what the code will be i do so:

import 'package:image/image.dart' as imglib;

Future<imglib.Image> _loadImage(File file) async {
    final data = await file.readAsBytes();
    return ..........................????
  }

thnx in advance