teleren/devto huggingface dataset:
Welcome Thread Bug in Dev.to
Tags: help
Published: 2020-01-28 06:58:04

I recently joined Dev and I was writing my introduction in the welcome thread. I wrote it and went to the home page. Again when I clicked on Dashboard in the dropdown on my profile, it was showing me you wrote nothing, write your introduction. I wrote it again and it was showing me the same. And I found there was not my post in the welcome thread. But I got a notification that someone liked my post. I am attaching some screenshots. And I found my profile dropdown was not working at that time too, It got black and was not clickable.

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3n2bphdz6uctdl33hvet.png)
GetWidget Two Week Journey
Tags: flutter, opensource, github
Published: 2020-01-28 06:15:16

Hey Everyone,

First of Fall Thanks for your support and feedback to all. Since we have released on 16th Jan 2010, our Flutter Open-Source UI Library GetFlutter on GitHub. It has been a great journey till now. We have been kept trending on GitHub and getting a nice response from your end. If you check out Today trending still we have been trending on GitHub repo in Dart Language as well as all language.

**GitHub Trending Repo of the Day:** https://github.com/trending/dart?since=daily

You can find our repo on top of the GitHub Dart Trending List https://github.com/ionicfirebaseapp/getwidget

Even we have been getting on avg 1k visitor per day (As per Google Analytics) and keep increasing, those have been reading our documentation on a daily basis and keep getting feedback to make a more perfect and one the largest Flutter open-source library.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p0w7fwuq1j1p0bz9s2c1.png)
If you have not used or check our GetFlutter open-source library then read out [why we should use GetFlutter](https://www.getwidget.dev/blog/why-use-getwidget/) and what are the benefits of that.

Again, Thanks to all. Please keep sharing your feedback to us that really help us to build the best Flutter open-source library.

You can Check out our documentation and how to use our GetFlutter Library through the below resource.

**GitHub Repo:** https://github.com/ionicfirebaseapp/getwidget
**Pub Packages:** https://pub.dev/packages/getwidget
**Documentation:** https://docs.getwidget.dev/
Immutable Updates of Objects in Reason
Tags: reason, functional, tutorial
Published: 2020-01-28 06:02:10


I've recently been playing around with objects in ReasonML and reading about using them in OCaml to get a better understanding, as there is a lack of good documentation on their use in Reason. So I thought I'd try and writing something about one of the interesting and lesser-known features of objects in ReasonML. 

I am sure none of this will come as a surprise to a seasoned OCaml developer, but like many developers, I have no experience with Ocaml and keep finding out new features that can also used in our projects.

In ReasonML the spread operator is a great piece of syntactic sugar that makes immutable updates quick to implement, similar to the copy method of case classes in Scala. I was happy to find out that this was also possible with objects, allowing the creation of immutable, but updatable, objects. In OCaml, these are known as functional objects. 

Most ReasonML developers have come across the syntax below to update immutable records:

```reasonml
type cat = {name: string, age: int};

let kitten = { name: "Charles", age: 1 };

let oldCat = { ...kitten, age: 4 };
```

A similar technique exists for objects; however, it's not so well known amongst Reason developers, as I believe it is not included in the documentation. So at first, you might attempt something like the example below, which works but quickly becomes verbose as your records grow in size:

```reasonml
class immutableDog(name, age) = {
  as _;
  pub getAge: int = age;
  pub getName: string = name;
  pub setName: string => immutableDog = newName => new immutableDog(newName, age);
  pub setAge: int => immutableDog = newAge => new immutableDog(name, newAge);
};
```

Instead, you can override values to make a new instance with only the specified updates, similar to records. The syntax is not so obvious:

```reasonml
class immutableCat(name, age) = {
  as _;
  val name = name;
  val age = age;
  pub getAge: int = age;
  pub getName: string = name;
  pub setName = newName => {<name: newName>}; // Creates a new instance.
  pub setAge = newAge => {<age: newAge>};
};
```

I believe this syntax is known as the override construct `{< ... >}`, which returns a copy of the current object and allows you to override the value of instance variables or methods.

Let's see what it looks like in action:


```reasonml
let myImmutableCat: immutableCat = new immutableCat("Cool Cat", 5);
let myNewCat: immutableCat = myImmutableCat#setName("Dave"); // does not change myImmutableCat
```

It is also possible to update values in the same way:

```reasonml
class immutable = (number) => {
  as _;
  val counter = number * number;
  pub makeNegative = {<counter: -counter>};
  pub getCounter = counter;
};

let myImmutable = new immutable(4);
let negative = myImmutable#makeNegative;
myImmutable#getCounter // 4
negative#getCounter // -16
```

Thanks for reading, I hope you found this post useful and legible!

Based on a post in a series on [using objects in Reason at _itazura.io_](https://itazura.io/objects-in-reasonml-part-3-immutable-updates/)
What do you do when waiting for build/query/etc?
Tags: discuss
Published: 2020-01-28 05:45:01

During development there are occassions when you have to wait for a moment, for example waiting for a build to finish, a query to return, a big page to load, etc. I'm talking about a minute or five.

Sometimes I get a very strong craving to do something else, and if I don't choose carefully what I do, it will break my flow. For example opening Twitter/Reddit can easily lead to a binge reading session.

Do you have a suggestion on the kind of activities that is enough of a 'microdose' for the craving but will not break flow?
Elixir project setup - config.exs
Tags: elixir, setup, ecto
Published: 2020-01-28 04:27:55

I'll be writing about typical changes I make to the default phoenix project

[See file on GitHub](https://github.com/ideaMarcos/portishead/blob/main/config/config.exs)

*NOTE*: This article assumes you will using Ecto, and the database tables use UUID as the primary key.

* If you plan on running [mix phoenix.gen.model](https://hexdocs.pm/phoenix/Mix.Tasks.Phoenix.Gen.Model.html) to generate Ecto models, set the `generators` key to use `binary_id` for schema’s primary key.

```elixir
config :portishead,
  generators: [binary_id: true]
```


* For [mix ecto.migrate](https://hexdocs.pm/ecto_sql/Mix.Tasks.Ecto.Migrate.html) with [create table](https://hexdocs.pm/ecto_sql/Ecto.Migration.html#create/2) syntax, set the `migration_primary_key` to use `uuid`. `migration_default_prefix` is the schema name of the table in postgresql.

```elixir
config :portishead, Portishead.Repo,
  migration_primary_key: [name: :uuid, type: :uuid],
  migration_default_prefix: "portishead",
  migration_source: "portishead_schema_migrations"
```
Elixir project setup - mix.exs
Tags: elixir, setup, phoenix
Published: 2020-01-28 04:27:43

I'll be writing about typical changes I make to the default phoenix 

[See file on GitHub](https://github.com/ideaMarcos/portishead/blob/main/mix.exs)

* Update the minimum elixir version allowed. If you're working with other devs, this will force them to keep their local environment up to date.

```
      elixir: ">= 1.9.0",
```

* Override the default tasks for [compile](https://hexdocs.pm/mix/Mix.Tasks.Compile.html) and [ecto.migrate](https://hexdocs.pm/ecto_sql/Mix.Tasks.Ecto.Migrate.html).

```
  defp aliases do
    [
      compile: ["compile --warnings-as-errors"],
      "ecto.migrate": ["ecto.migrate --log-sql"],
    ...
    ]
```

The `compile` alias is useful make sure that the `warnings-as-errors` flag is always enabled, even when running `mix test` or `mix release`. The `ecto.migrate` flag is to display the raw sql for migration scripts, not just the [Ecto Query DSL](https://hexdocs.pm/ecto/Ecto.Query.html).
Mental Health Pixel - Manage Anxiety
Published: 2020-01-28 04:09:21

Anxiety is common when working in tech. Here a few tips I use every day to manage anxiety at work.

## 1 - Get away from your computer

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

Every time I get stuck with a task at work, anxiety can build up: will I hit the deadline? What will my boss think of my performance? Will my co-worker make fun of me for struggling?

The best way I found for myself to relax and get my focus back it either going for a walk around the block or go in the kitchen to fill my water bottle, take the time to drink it all there, fill it again and go back to my desk.

## 2 - Stretch

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

Most of us working in tech are sitting all day. Recently I have been experiencing issues with my lower back, it was hurting E-VE-RY day. I did consult a physiotherapist to get some immediate help, but the other things that helped me a lot were: investing in a good quality sit/stand desk, workout 3 times a week and stretch frequently…. A LOT!

## 3 - Take a breath

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

When in the thick of it, it easy to spiral and get overwhelmed. I purchased an Apple Watch last year and set up reminders on it to take deep breaths with its Breathe feature. Every time I am getting overwhelmed, I set my Breathe app to 1 or 2 minutes, close my eyes and focus on the vibrations on my wrist to guide my breathing.

## 4 - Call a friend or family member

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

Stay in contact during the day with your friends and family. You can also call them during your break, whether to share your anxiety with them or just catch up.

I regularly communicate with my girlfriend, family, and friends during the day, to help me wind down. The added benefit is that your partner, friend or family member can benefit from that conversation too.

—

You can also find these pixels on my Instagram: https://instagram.com/valentinprgnd. I will publish Pixels every Monday, Wednesday, and Friday about career development in tech, code, mental health and health for developers. Follow me for more tips @valentinprngd and check out my podcast https://rebased.whatdafox.com.
First impression on Flutter as a React Native dev (pt II)
Tags: flutter, reactnative, react, dart
Published: 2020-01-28 04:08:34

######Take a look at what I've been coding: https://github.com/MarlonX19


A few days ago I wrote a post in which I briefly described my first (not so good) impressions on Flutter, just in case you don't know what Flutter is: it's Google's framework for cross-platform mobile development, using Dart you code apps that run on both Android and iOS.

I felt the need to come back here and state some of the features that I enjoyed about all this Flutter experience thing. Feel free to share your thoughts.


#EASY TO INSTALL
Ok, I must admit it is really easy to set up your environment and get started with Flutter, I wasn't expecting that! React Native can be a little tricky and sometimes takes you a few hours to get everything properly working, Flutter made everything easy and fast.
____________________________


#EASY TO USE
Even though I consider Flutter's code hard to read, messy and even a bit hideous I also found it easy to use when it comes to Widgets, you have a lot of Widgets at your disposal, you just have to import them, use them and make changes in case you need it, that allows you to save time.
_______________________


#EASY INTEGRATION
Since Flutter is still kind of new I wasn't expecting it to be easy to use on IDEs, needless to say I fell in love with how easily it integrated with VSCode, for example. Plus, its autocomplete, code suggestions and snippets in general are so handy!
_________________________

#COMMUNITY
Flutter community seems to become bigger every day and that surprised me, even in Portuguese, which is my native language, I was able to find a lot of content and help when needed.


I plan on continuing my studies in Flutter!
Easiest way to manage multiple Git users on the same machine
Tags: git, multiple, users, management
Published: 2020-01-28 03:29:17

For a long time, I've been trying to figure out the easiest way to manage multiple git users on a single machine.
Currently I have 3 accounts:

* Github - Work
* Gitlab - Work
* Github - Personal

Switching between these use to be a huge pain, but I've finally come up with setup thats so easy to setup and use.

...

Checkout the full post on [my blog](https://twolambdalabs.com/easiest-way-to-manage-multiple-git-users-on-the-same-machine/).
How to use WebP images effectively
Tags: html, beginners, codenewbie, tutorial
Published: 2020-01-28 03:18:30

WebP images are great for everyone because they have many things going for them. They are new(ish) to the web which means they aren't accepted everywhere (yet). Two of the best things about them are that they compress like JPG images to very small file sizes, and they support transparency like PNG images.

## [The picture element](#the-picture-element)

When adding these to your website you can just put them in an image tag and be done. Doing so will leave out older browsers and/or devices that just don't support Webp images yet.

```html
<img src="/file/path/to/image.webp" alt="Some bacon webp image" />
```

## [Backup images](#backup-images)

While this does work for browsers that support the Webp file type the image won't display on browsers that don't support the file. The best way to add Webp images to your site would be a `<picture>` element. The way the picture element works is by loading the first file type that can be loaded by the browser. Within the picture element, you will need `<source>` elements. The source elements are where you add the `src` attribute to the different file types. The first source element in the parent picture element is the first to be loaded if the file type is supported. The first source element is where you want to put the source for the Webp file that you want to add. You will also want to add a type attribute to tell the browser what file type the file is.

```html
<picture>
	<source type="image/webp" src="/file/path/to/image.webp" />
	<source type="image/png" src="/file/path/to/image.png" />
</picture>
```

## [Un-supported picture tag](#un-supported-picture-tag)

Adding the above to your website won't work just yet because the picture element requires a backup `img` within the picture element. This is for browsers that don't support the picture element yet. This img element is also where you will add all your SEO related attributes, include the alt attribute.

```html
<picture>
	<source type="image/webp" src="/file/path/to/image.webp" />
	<source type="image/png" src="/file/path/to/image.png" />
	<img src="/file/path/to/image.png" alt="This images contains bacon" />
</picture>
```

For the img element added in the picture element should not be a webp image because if the browser is too old for the picture element then it is also too old for loading Webp images.
Solution to Leetcode's ZigZag Conversion: My thought process as a beginner
Tags: leetcode, algorithms, problemsolving, datastructures
Published: 2020-01-28 03:17:14

This is a medium [Leetcode Problem](https://leetcode.com/problems/zigzag-conversion). See below image for description:
![problem description]
(https://miro.medium.com/max/901/1*tEh6Z-j3-mC63L8MORnMbg.png)


<h1>ALGORITHM</h1>
1.Have a map of a row to a StringBuilder of the characters for that row;
2.Have a global counter (row): the current count of the row as you loop through;
3.boolean variable to know when to increment or decrement the row variable in step 2 above;
4.loop through the string, check if the current count of the global variable row is equal to the number of row; if it is, it should set the increment variable to false; else, it should set the increment variable to true;
5.increment/decrement row variable depending on the current value of the increment variable;
6.check the map for availability of the current row value. if it is not found, put the row with a new StringBuilder object;
7.Get the the value of the current row and append the current character to it;
8.loop through the map, append values to stringbuilder, then return string value of the stringbuilder.

**OUTCOME**
![outcome image]
(https://miro.medium.com/max/1635/1*AUfBaBzpJ5uwyr4-l-isOw.png)


**LESSONS**
After checking discussion section on Leetcode, I discovered that there was pattern to use. Learnt a lot from reading other people’s solutions.
How to set up a favicon
Tags: html, codenewbie, beginners, tutorial
Published: 2020-01-28 02:25:55

## [The short answer](#the-short-answer)

The easiest way to set up a favicon (assuming that a web-sized image is already made) if by using the following code, and placing it in the `<head>` tag.

```html
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
```

## [The long answer](#the-long-answer)

Setting up a favicon can be super easy once you get the hang of it. The simplest and quickest way is listed above, but what if you want to have different sizes of favicons for different devices and browsers?

## [PNG Sizes](#png-sizes)

To add different sizes to a favicon link you can just add a `sizes` attribute to the link tag. The typical sizes for favicons on most browsers are `16x16`, `32x32` and higher. For some other browsers like Google Tv and Chrome on Android, the recommended sizes are `96x96` and `192x192` respectively. An example of these sizes would look like this.

```html
<link rel="icon" type="image/png" sizes="16x16" href="http://example.com/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="http://example.com/favicon-32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="http://example.com/favicon-96.png" />
<link rel="icon" type="image/png" sizes="192x192" href="http://example.com/favicon-192.png" />
```

## [ico file type](#ico-file-type)

The primary way to set an icon would be to use a .ico file. While all modern browsers can read the png format, this is primarily used for older versions of IE. You can find plenty of favicons.ico generators online to build a properly formated ico file. The use of a favicon.ico file would look like this.

```html
<link rel="icon" href="favicon.ico" />
```

Browsers will also be able to find the ico file if it is just left on the root of the site and not declared in a meta tag.
Hobby Project: Reference Content File in Meta Data
Tags: contracts, dlang
Published: 2020-01-28 02:03:20

I spent this effort on a cross-reference in the meta data to the content file. This eliminates a required convention where file name of the meta and content is the same, which is a nice convention but I want to allow folders to be specified. We'll see how this evolves.

https://gitlab.com/jessephillips/devarticlator/compare/v0.0.3...v0.0.4

```dlang
in(buildPath(folder,articleContentFolder).exists, format("Create direcorty `buildPath(\"%s\",articleContentFolder)` before calling to save articles.", folder))
```

I will be enforcing articles being written in a sub directory of the output location. I have updated the [contract](https://dlang.org/spec/contracts.html#pre_post_contracts) to check the sub folder exists.

I have also modify the error message to provide a code sample. I've decided this sub directory is not configurable making the error message more valuable.

```dlang
out(path) {
    assert(path.articleSaveLocation != path.metaSaveLocation, "Can't save to same file");
    assert(path.articleSaveLocation.endsWith(path.articleMetaPath), "Meta Reference to Article File must match.");
    assert(!path.articleSaveLocation.find(folder).empty, "Save Locations should utilized specified folder");
    assert(!path.metaSaveLocation.find(folder).empty, "Save Locations should utilized specified folder");
}
```

Since I'm creating an intricate relationship between the three paths, I wanted to verify that relationship.

To create this validation I needed to pull out the logic to create the paths from the method writing the data.

-----

I also wired up the dev.to api pulling. 

```dlang
if(!exists(buildPath(savePath, articleContentFolder)))
    mkdirRecurse(buildPath(savePath, articleContentFolder));

meArticles(data)
  .structureArticles
  .saveArticles(savePath);
```

Since I choose to delegate folder creation, the first step is creating the needed directory structure. 

After that the rest of the components have been built and all I need is to sequence the calls.

D also provides a way to [delegate the output](https://dlang.org/phobos/std_range_primitives.html#isOutputRange). When I looked into this I remember I also want to start using iopipe. But ultimately I did not feel that the output range concept was going to hold its weight. `saveArticles` is already pretty disconnected and could easily be replaced. 

-----

In this case I did not start with the tests or contracts, these were added after manual confirmation. 

```dlang
unittest {
    ArticleMeta meta;
    meta.title = "Article Title";
    articlePaths("someLocation", meta);
}
```

The specific unittest does no validation itself. Instead it exists to exercise the contract. By placing the test on the contract allow validation during code execution along with the unittests identified. 

For those concerned with performance, contracts are removed if building release.