teleren/devto huggingface dataset:
Draw your application sketch with Inkscape
Tags: inkscape, sketch, design, ui
Published: 2020-04-17 23:22:03

---
title: Draw your application sketch with Inkscape
published: true
description: Tips to create sketch 
tags: inkscape, sketch, design, ui
---

If you believe or not Inkscape is really great software to draw your ideation for everything.

- Inkscape is free, open-source and hackable
- Inkscape is cross-platform
- Inkscape is stable
- Inkscape is fast 
- Inkscape is powerful/featureful

I've been using it for about 5 years, recently i have some challenges to draw a good sketch. i love Inkscape but what about alternative softwares for sketching? yes i  searched a lot. Inkscape is really fit with my desires, but searching helped me to learn more and bring other software ideas in it. 
Finally i want to share some tips you need to learn about Inkscape and start drawing.

## Cloning 
DRY, create once and clone it as many as you want. when you change source object, clones will change too!

_p.n: It's like Adobe XD's component_

- To clone an object, select object use `alt+d` shortkey
- To clone an object in very advanced way: `Edit -> clone -> Create tiled clones...` [learn more](https://wiki.inkscape.org/wiki/index.php/Tiled-Clones)
- Duplicate and object `ctrl+d` (source changes will not apply)

## Paths and nodes
You should able to edit path and nodes, [learn about it](https://inkscape-manuals.readthedocs.io/en/latest/editing-paths.html).

![Inkscape edit node](https://dev-to-uploads.s3.amazonaws.com/i/2lqwypj6n6iri1ucpgmn.png)

## Grid, Snap and Guide
It's very important part to achieve a perfect design.

Another sketching softwares has really sexy tool, known as Smart Guide. for example when you move object beside another one, its magically snap in same position that neighbors has.
 
![Inkscape grid and snap](https://dev-to-uploads.s3.amazonaws.com/i/454zlr4gba3xrgrz269d.png)

Inkscape has no feature like that (when i`m writing this post), you should define grid size and turn on the snapping manually. Yes, little old fashioned but not annoying at all. [Learn more](https://inkscape.org/doc/tutorials/tips/tutorial-tips.html)

![Smart Guide Adobe XD](https://dev-to-uploads.s3.amazonaws.com/i/0t4fvlqyktxm2t9xfkjo.gif)

Moreover Inkscape has Guides to drag in where it needs and position the objects.

- Learn how to create, delete, move and rotate Guide lines [Learn more](https://inkscapetutorials.wordpress.com/2014/04/25/working-with-guides-in-inkscape/)

![Inkscape Guide Lines](https://dev-to-uploads.s3.amazonaws.com/i/ia2ofbdne1t76jqot36m.png)

## Conclusion
I've mentioned important parts, of-course you need more. learn about layers, gradients, document size, colors, shapes, etc.
But i promise, learning Inkscape in action is much easier than Sand Play.

Inkscape is not best choice if you need:
- Built-in prototyping tool
- Share / Review and online collaborate
- Large collection of Components and UI kits (like material design components exists for Sketch App or Adobe XD)
Twilio hackathon Project update: Received; UI 
Tags: twiliohackathon, webdev, opensource, javascript
Published: 2020-04-17 23:13:12

Hi, I would like to update the status of my Twilio hackathon project.

A quick reminder about the project's goal

>my goal, is to build a platform that enable people to reserve a storage space and create a public gateway with an easy to remember URL.

By now I've reached the step 3 of the project which is preparing the UI or Hi-fi prototype for the app.

without further ado, these are some UIs design for the main features

## Landing page
As I described in the initial post, I'm aiming for market ready product. Hence I've prepared a landing page to add more value for the product.

![Landing page](https://dev-to-uploads.s3.amazonaws.com/i/vghfxxi7yhmbymoekj6u.jpg)

## Storage space

When a user logs in, he will have access to a storage space where he can manage all the received files or create and share new folders.

![App main interface](https://dev-to-uploads.s3.amazonaws.com/i/z708kfwxdt4dcek8e2x1.jpg)

## Public bucket

When a user share his public profile URL with a friend or a co-worker. The later will need a password to unlock a specific folder and upload files to it.

![Public bucket password](https://dev-to-uploads.s3.amazonaws.com/i/fdbvovikrrzocnm6rpq5.jpg)

![Public bucket upload](https://dev-to-uploads.s3.amazonaws.com/i/zn2sk47wrazni6pfcj8r.jpg)

## 2FA authentication

Regarding Twilio I'll use 4 API:

- Twilio Verify to ensure phone validity.
- Twilio Authy as the 2FA which will be enabled by default.
- Programmable SMS & SendGrid as notification channels.

The following is the UI part for the 2FA step

![2FA](https://dev-to-uploads.s3.amazonaws.com/i/x0hfux9h38dy2xmwvxzk.jpg)

## Links

I've already pushed all the established UIs alongside the Source file (Adobe XD) to the repository. Also, as for Step 2 of the project I've pushed the initial database model too.

Project's repository: [Recieved on Github](https://github.com/sunchayn/received)

Twitter: [@mazen_touati](https://twitter.com/mazen_touati)

Thanks for reading, feedbacks are appreciated 🦄
Looking for Proverbs websites and APIs
Tags: proverbs, python, help, discuss
Published: 2020-04-17 23:10:25

---
title: Looking for Proverbs websites and APIs
published: true
description: Looking for Proverbs websites and APIs, any language
tags: proverbs, python, help, discuss
cover_image: https://7esl.com/wp-content/uploads/2019/12/Proverbs-3.jpg
---

Proverbs are something very characteristic across regions among the world, every proverb has a huge component of popular culture. People knows proverbs of their region but,  probably igonres proverbs of a nearby region despite of they are on the same language. This is my main reason why i started building this app. Retrieving and preserving the maximum number of proverbs possible of any language and region, and help a bit sharing this part of popular culture.

I started a few months ago with a toy. I built a telegram bot which shares Galician proverbs(my native language). It has 2 main functions:

* A subscription (sends you a random proverb each day).

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

* A inline search to send on chats proverbs.

![Current bot](https://media.giphy.com/media/jOmWhZkkcoa7vWePnt/giphy.gif)

Telegram bot was built with [pyTelegramBotAPI](https://github.com/eternnoir/pyTelegramBotAPI) a quite simple library. I strongly redommend it if you want to quick setup a python bot.

### The project

So, my idea is storing proverbs and share it citing the original source. As a second iteration of the project i would like to make a form wich enable to anyone send proverbs to my database and mark it as a draft. But before runing we need to walk, the PVM is the website wich only shows the proverbs. Because the bot i built months ago can be integrated easily with other languages/databases, so in this point there is no much work to do.

Of course, i am a developer. All the proverbs that i will be retrieving  and indexing i will be exposed it via API,  so anyone can integrate other apps on it. Code will be open source, i will publish it in my [Github](https://github.com/mandrewcito). But firstly i would like to publish web with a few of websites retrieved and indexed.

#### Why i´m asking for help ?

Simple, i know proverbs websites on my native languages (Galician, spanish). But on other languages i dont.

Do you known a cool site with proverbs i can query/scrap/API in your respectives native languages? A website that you can query, in which I do not break any law: P

#### Some questions/ feedback

* What do you think about this project, do you consider it usefull ?
* Do you consider usefull the website that i previously describe ?
* and finally, what do you think about the bot?

Thank you for reading me! :D
Going Deeper with Nuxt
Tags: nuxt, javascript, vue, webdev
Published: 2020-04-17 22:27:17

Well, well well... It's been a while since my last post in this series.

Obviously, I don't have to worry about not having enough spare time right now. Y'all know why.

But honestly, after the second post I'd basically exhausted my then-current knowledge of Nuxt. But since then, I've been experimenting and learning (oh have I!) and I figured now's the time to share some of what I've learned about Nuxt, and about JavaScript/web development in general in the last couple of months. Thanks [@almostconverge](https://dev.to/almostconverge) for the giving me the motivation to continue this series.

## For Starters

I'm just going to assume you already got a Nuxt app up and running if you want to follow along. By all means, check out the first two articles in this series in you need a refresher, and visit [nuxtjs.org](https://nuxtjs.org) for all things Nuxt.

Also, since a lot has changed over the past few months, if you somehow _have_ been following along, by all means try executing this in your Nuxt app folder:

```sh
$ yarn upgrade --latest
```

(Yes, I'm a [Yarn](https://yarnpkg.com) user. NPM? You mean "Nautical Pirate Moustache?" But seriously, though; if you are using NPM, the commands are super similar; usually `yarn dev` or what have you is `npm run dev`. In this case, gee, I dunno; check out {% medium https://medium.com/@jh3y/how-to-update-all-npm-packages-in-your-project-at-once-17a8981860ea %} I guess. Or maybe do `npm outdated` then look on [NPMJS.com](https://npmjs.com) for the specific packages to find their latest versions, then add those to your `package.json`)

You may as well update everything (though at your own risk; it _might_ break stuff.) in your Nuxt app anyway, since the Nuxt dev team has been doing some big updates in rather rapid succession lately. Cool stuff!

## That out of the way...

Let's get down to the actual article, shall we?

Psyche! Sorry, but I have so much to discuss here that I'm splitting it up into separate articles. I've started a new series on Nuxt, so check out the first post below (you'll see a Table of Contents there with the rest of them).

There are a bunch of mini tutorials and things, so do check them out if you want to do more with Nuxt.js.

Also, I got a whole bunch of examples running at https://nuxt-toolkit.overscore.media, so take a look if you want to see them in action.

Stay safe, stay healthy, and keep coding, everybody! :]

{% link https://dev.to/overscoremedia/nuxt-meet-vuetify-58fj %}
Requirements as code: documentation update
Tags: architecture, design, testing, java
Published: 2020-04-17 22:11:30

Hi folks. I hope you're doing good and staying healthy.

I just wanted to let you know that I did a major update of the GitHub frontpage of my long term side project, requirements as code.
My goal has been to improve the description of what the project is about, to clearly describe the proposed application design, and to give concrete code examples to try out.

You can find the project at: [https://github.com/bertilmuth/requirementsascode](https://github.com/bertilmuth/requirementsascode).

I'd be glad if you check it out. Comments & questions are welcome.
If you want to have a direct conversation, don't hesitate: bertil@requirementsascode.org
Thanks!
Do you double check your PR’s?
Tags: discuss, codereview, pullrequest
Published: 2020-04-17 22:09:14

Do you ever read your own pull requests? Or are you more of a >that’ll do< uploader?

I received my first code review with a lot, like a lot of annotations, including typos that I could have caught myself - that was _embarrassing_.
Since then I have established a short checklist that I follow before I submit a pull request for a code review.

### 1 Double check every file that I submit
I give myself a nice long break before submitting the PR - if possible I come back to my code on the next day, just so I am the most distanced I can be.  Since the person that will review my code will have a very different perspective than I do, This will give me the chance of reading my code as the reviewer. Helping  catch any error or unclear line of code that I could not have seen before. Since the person reviewing my PR will have a different perspective than I, this gives me a chance of reading my own code from their point of view. This type of distancing will make it easier to catch errors and any unclear lines of code that I may have missed before.
Bonus: It helps with exactly knowing what you did in this PR in order to write a nice summary.

![GIF with subtitle "I should have double checked"](https://media.giphy.com/media/ygzet3hYgxrD48KuuB/giphy.gif)

### 2 Question variable names
While in the zone, I often don’t think a lot about naming my variables, although I’m not as terrible as just naming them `x` or `array`. However, Naming variables can be decisive in making your code readable, So therefore the pull request PR is a good opportunity to question  my variable names. the choice of names I have given. Same goes for method names - here I take my time and think about if that method might be used in another scope or scenario later and therefore should be named differently.

### 3 Watch out for typos
Especially if you’re dealing with any kind of text, a transactional email you were drafting, or an automated flash message - double check your spelling.

### 4 Run a linter
If you haven’t done so, now would also be the time to run a linter checking your style.

Those points might seem obvious, but I am sure following them religiously has spared my reviewers some comments.

__Let me know what you are checking before you submit a PR for review.__
Developer Relations: online events and content series
Tags: devrel, content, writing
Published: 2020-04-20 13:23:07

---
title: Developer Relations: online events and content series
published: true
date: 2020-04-17 21:56:03 UTC
tags: DevRel, DeveloperRelations, content, writing
canonical_url: https://maxkatz.org/2020/04/17/developer-relations-online-events-and-content-series/
---

If you are in Developer Relations space: online events and content scale, travel doesn’t scale. The following are of articles to help you scale: run online events and write content.

- [How to scale Developer Relations with online meetups](https://dev.to/maxkatz/how-to-scale-developer-relations-with-online-meetups-4216)
- [Some advice on running online meetups](https://dev.to/maxkatz/some-advice-on-running-online-meetups-138f)
- [What can you do besides online events?](https://dev.to/maxkatz/what-can-you-do-besides-online-events-105f)
- [A year of blogging every week](https://dev.to/maxkatz/a-year-of-blogging-every-week-187j)
- [Interesting content ideas you can try](https://dev.to/maxkatz/interesting-content-ideas-you-may-try-fo1)

And this is my all-time favorite. It coves both types of events (in-person and online) but still gives you great ideas on how once piece of content can create a lot more content.

- [How content creates content](https://dev.to/ibmdeveloper/how-content-creates-content-3edj)

I hope these articles are useful during COVID-19 pandemic. Once we go back to normal (and we will), these resources should be as important as these activities will allow you to scale you Developer Relations program.
Predicting Sensor Readings with Time Series Machine Learning
Tags: apachenifi, apachenifi111, cameras, deeplearning
Published: 2020-04-20 17:33:20

---
title: Predicting Sensor Readings with Time Series Machine Learning
published: true
date: 2020-04-17 21:25:00 UTC
tags: apache nifi,apache-nifi-1.11,cameras,deep learning
canonical_url: 
---

  
**Sensors:**  
  
**Sensor Unit** ([https://shop.pimoroni.com/products/enviro?variant=31155658457171](https://shop.pimoroni.com/products/enviro?variant=31155658457171))  

- BME280 temperature, pressure, humidity sensor
- LTR-559 light and proximity sensor
- MICS6814 analog gas sensor
- ADS1015 ADC with spare channel for adding another analog sensor
- MEMS microphone
- 0.96-inch, 160 x 80 color LCD

**Unit**

- Raspberry Pi 4
- Intel Movidius 2
- JDK 8
- MiNIFi Java Agent 0.6.0
- Python 3

  

**See** :   [https://www.datainmotion.dev/2019/12/iot-series-minifi-agent-on-raspberry-pi.html](https://dev.to/tspannhw/iot-series-minifi-agent-on-raspberry-pi-4-with-enviro-hat-for-environmental-monitoring-and-analytics-l8d)

**See**** :**   [https://learn.pimoroni.com/tutorial/sandyj/getting-started-with-enviro-plus](https://learn.pimoroni.com/tutorial/sandyj/getting-started-with-enviro-plus)

  

**Source** :   [https://github.com/tspannhw/meetup-sensors/](https://github.com/tspannhw/meetup-sensors/)

  

  

  

**Example Data**

  

{"uuid": "rpi4\_uuid\_omi\_20200417211935", "amplitude100": 0.3, "amplitude500": 0.1, "amplitude1000": 0.1, "lownoise": 0.1, "midnoise": 0.1, "highnoise": 0.1, "amps": 0.3, "ipaddress": "192.168.1.243", "host": "rp4", "host\_name": "rp4", "macaddress": "dc:a6:32:03:a6:e9", "systemtime": "04/17/2020 17:19:36", "endtime": "1587158376.22", "runtime": "36.47", "starttime": "04/17/2020 17:18:58", "cpu": 0.0, "cpu\_temp": "59.0", "diskusage": "46651.6 MB", "memory": 6.3, "id": "20200417211935\_7b7ae5da-905b-418b-94f1-270a15dbc1df", "temperature": "38.7", "adjtemp": "29.7", "adjtempf": "65.5", "temperaturef": "81.7", "pressure": 1015.6, "humidity": 6.8, "lux": 1.2, "proximity": 0, "oxidising": 8.3, "reducing": 306.4, "nh3": 129.5, "gasKO": "Oxidising: 8300.63 Ohms\nReducing: 306352.94 Ohms\nNH3: 129542.17 Ohms"}
Grateful Dead project
Tags: todayilearned, html, 100daysofcode, codenewbie
Published: 2020-04-17 21:19:24

Today was my second day of learning how to code. I was struggling with creating files on my computer. When I expressed my frustration to my coworker, they suggested I check out [Glitch.com](https://glitch.com). This site lets me host my files, edit them, and see the results immediately. I can also share my work with others. 

In fact, you can see where I just started playing with Glitch here: https://glitch.com/~grateful-dead-project

Right now, everything is really challenging, but I know from my experiences in life, that it will get easier over time!

Happy weekend everybody!
Debug Crystal in VSCode via CodeLLDB
Tags: crystal, debug, lldb
Published: 2020-04-17 21:06:39

---
title: Debug Crystal in VSCode via CodeLLDB
published: true
description: Copy & Paste configuration to debug Crystal in VSCode via CodeLLDB 
tags: crystal, debug, lldb
---

> This post mentions features that will be released in 0.35.0, or that will require you to compile Crystal master branch ;-)

Crystal uses LLVM under the hood. To allow a more comfortable debugging experience it is required to instruct `lldb` how to understand the values stored in memory. Recently this story got a lot of effort and it finally got merged. You can read more at [#8538](https://github.com/crystal-lang/crystal/pull/8538). 

Let me share with you the configurations that will let you use the  [CodeLLDB](https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb) 
extension to debug [Crystal](https://crystal-lang.org/) programs.

[Create a task](https://go.microsoft.com/fwlink/?LinkId=733558) that will compile the current file and leave it in `bin/` folder. In your project’s `.vscode/tasks.json` add:

```js
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "crystal: build current file (debug)",
      "type": "shell",
      "command": "crystal build --debug ${relativeFile} -o bin/${fileBasenameNoExtension}"
    }
  ]
}
```

> You might need to set the Crystal binary path in `"command"` field depending on your environment.

Check you have the [CodeLLDB](https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb) extension installed.

[Create a launch configuration](https://go.microsoft.com/fwlink/?linkid=830387) that will run the previous task and start debugging the binary left in `bin/`. It will also set up `lldb` with the appropriate formatters. In your project’s `.vscode/launch.json` add:

```js
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "lldb",
      "request": "launch",
      "name": "crystal: debug current file",
      "preLaunchTask": "crystal: build current file (debug)",
      "program": "${workspaceFolder}/bin/${fileBasenameNoExtension}",
      "args": [],
      "cwd": "${workspaceFolder}",
      "initCommands": [
        "command script import /path/to/crystal/etc/lldb/crystal_formatters.py"
      ]
    }
  ]
}
```

> You will need to set the `crystal_formatters.py` path in `"initCommands"` field accordingly to your environment. The file is located in the compiler’s repo at [etc/lldb/crystal_formatters.py](https://github.com/crystal-lang/crystal/blob/master/etc/lldb/crystal_formatters.py)


You are all set, have fun!

![GIF Video debugging a hello world program](https://dev-to-uploads.s3.amazonaws.com/i/l798idf1xt2hsfdukrjx.gif)

Keep in mind we are still in the early days for these improvements. Debug information metadata and more formatters are still pending. But the recent effort to improve their current state sets the scaffolding to move steadily forward.

Happy Crystalling!
Responsive, Performant Images for the Web
Tags: webperf, webdev, html, css
Published: 2020-04-17 20:55:34

Want to learn how to make your images more responsive and more performant? Haven't gotten a chance to read that book/article/doc on web performance for images yet?

I spoke at my first virtual conference, PerfMatters Conf, and luckily they recorded it. This talk is a great intro into all things images for the web. Enjoy!

> Images account for 50% of the bytes downloaded to load a website. How can you make sure that your users only download the smallest image necessary while preserving image quality? In this talk, we'll focus on the underlying concepts in HTML and CSS for serving responsive images, which you can take with you no matter which tool you use. Which file formats suit which image types best? How can you use art direction in images to show the best image for a viewport layout? 

{% youtube XecoxR1ckbc %}


---

This article was originally published on [sia.codes](https://sia.codes/posts/responsive-images-perf-matters-video/). Head over there if you like this post and want to read others like it, or sign up for my [newsletter](https://buttondown.email/sia.codes) to be notified of new posts!
How to install Tailwind UI in Gridsome
Tags: gridsome, vue, tailwindcss, ux
Published: 2020-04-17 20:01:24

**Tailwind** is a CSS utility framework focusing on providing users a set of classes to use in their HTML. These classes are very well thought, non-opinionated, cross-browser and easy to learn.

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

The authors of Tailwind CSS recently released a product called **Tailwind UI**. Tailwind UI is a set of pre-made HTML snippets containing all the necessary classes to include in your pages full blown sections and functionality. For example they have snippets for navbars, footers, alerts, menus among many more elements.

With **Gridsome** you can create static generated websites that are fast by default and have tons of other benefits.

The easiest way to install Tailwind UI is to first [install Tailwind CSS in Gridsome](https://thevueguy.com/blog/how-to-install-tailwind-gridsome/). After you've completed all the steps, you can follow the instructions you receive when you purchase Tailwind UI. It's just an `npm` command and adding some configuration and options to your existing files.

Sources:
- [Tailwind CSS](https://tailwindcss.com/)
- [Tailwind UI](https://tailwindcui.com/)
- [Gridsome](https://gridsome.org)
- [Installing Tailwind CSS in Gridsome](https://thevueguy.com/blog/how-to-install-tailwind-gridsome/)