teleren/devto huggingface dataset:
Greatly Reduce PNG Weight With This One Trick
Tags: webdev, svg, html, optimization
Published: 2019-04-26 08:10:20

---
title: Greatly Reduce PNG Weight With This One Trick
published: true
description: Using SVG masks can greatly reduce the size of an image with transparency.
tags: webdev,svg,html,optimization
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5x7p479c12tgf9ji18yl.jpg
---

*Preface: In this article I'm assuming you're already familiar with SVG. If not, now's a great time to [familiarise yourself](https://www.w3schools.com/graphics/svg_intro.asp)! The power of SVG is truly amazing.*

More than likely you've found yourself in this situation... You get handed a design, it's beautiful and full of color and images. 

The designer then informs you that the hero banner has text that changes and so does the background color.

Here's what that hero banner may look like (though likely far better designed, but hey, it gets the point across):

![Ice cream hero banner design](https://thepracticaldev.s3.amazonaws.com/i/tpr6l76i9im41y9hc0uu.jpg)

Ok, no problem, that means we can't just use a background image and be done with it, we need to break the hero up into piece so portions of it can be dynamic.

Usually you'd reach to a PNG for the ice cream cone image. But, PNGs are usually pretty big, especially once we start catering to high DPI screens. **Our ice cream as a PNG would clock in at a whopping 1.9mb!** So instead, we're going to use a trick with [SVG masks](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask).

![Isolated ice cream image and mask](https://thepracticaldev.s3.amazonaws.com/i/lltqlgebz3qwcenhqfz2.jpg)
<figcaption>Jpg (left) 292kb, 8-bit PNG (right) 17kb</figcaption>

First, we're going to save our ice cream as a jpg. I'll use a black background in place of the transparency.

Next, we'll save another image as an 8-bit png to use as the mask image. Any part that is black will be invisible and any part that is white will be visible.

Those 2 images we'll then use together in our SVG like this:

```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin" version="1.1" viewBox="0 0 938 1912">
  <defs>
    <mask id="mask">
      <image width="938" height="1912" xlink:href="/images/ice-cream-mask.png"/>
    </mask>
  </defs>
  <image mask="url(#mask)" width="938" height="1912" xlink:href="/images/ice-cream.jpg"/>
</svg>
```

You can reference the images as seen in the code above or you can even inline them as [base64](https://www.base64-image.de/) which you can see in this Codepen.

{% codepen https://codepen.io/getreworked/pen/QPzxwB %}

And there you have it. We've gone from a **1.9mb transparent PNG to roughly 309kb SVG without compromising quality or transparency**. Pretty sweet, hey?

As always, happy coding! 🤓

*It should be noted, I haven't tested all the browsers out there, but SVG support is now very wide spread so I wouldn't expect many issues. That said, if you've encountered any, let me know in the comments.*

*You can also use this [great Codepen to help with your tests](https://codepen.io/shshaw/full/IDbqC/).*
Serial Port Troubleshooting. How to debug serial connection problems.
Tags: analyzer, comportsniffer, rs232, pinout
Published: 2019-04-26 07:55:27

---
title: Serial Port Troubleshooting. How to debug serial connection problems.
published: true
description: With this “Serial Port Troubleshooting Guide,” you'll find out about the most characteristics of the RS-232 communication and know about the foremost common interface errors.
tags: analyzer, com port sniffer, rs232, pinout
---

The RS-232 communication protocol is one in all the foremost common ways that to manage skilled A/V instrumentation. numerous amplifiers, dimmers, extenders, projectors, and matrix switchers use the RS-232 commonplace to speak serial signals.

If you perceive the essential technology of RS-232 protocol, you'll haven't any drawback troubleshooting RS232 association problems. it'll take less time to mend a COM port error if you recognize what to seem for.

[In this article](https://www.virtual-serial-port.org/articles/com-port-troubleshooting/), we’ll tell you concerning the most characteristics of the RS-232 communication and highlight the most common problems you may face while using your serial A/V equipment.
Friday Blast #69
Tags: fridayblast, links, post
Published: 2019-04-29 18:39:30

---
title: Friday Blast #69
published: true
tags: friday_blast,links,post
canonical_url: https://horia141.com/friday-blast-69.html
series: "Friday Blast"
---

[The Netflix Problem #youtube (2019)](https://www.youtube.com/watch?v=fDF-S68kx5o) - a Vlog type link this time, but an interesting analysis of this space. Basically every big movie producing company has been building their own streaming platform lately. Which has caused a fragmentation of content much like in the days of ‘yore when movie companies also owned the cinemas. The author posits this is not a sustainable thing and points to the increase of piracy after years of decline as an leading indicator of this thing. It’s an interesting space for me, as I’ve always had a side-interest in the media business. But also because I _like_ Netflix as a tech company. I’ll try to write a bit more about this, cause the video itself didn’t address all that’s happening in this space IMO.

[How SQL database engines work #youtube (2012)](https://www.youtube.com/watch?v=Z_cX3bzkExE) - a quite old video on the innards of SQL DB engines, from the author of SQLite. All the back-and-forth between DB people in the room is really interesting. Nothing spectacular here, but it might be interesting if you’ve ever wondered what happens after SQL.

[10 things I regret about node.js #youtube (2018)](https://www.youtube.com/watch?v=M3BM9TB-8yA) - it’s pretty rare we get such talks and this was was realy high on [techyaks](https://techyaks.com) as a result. Every technology has it’s flaws and rough edges. It’s refreshing to acknowledge them and even more so to dedicate a big talk to all the things the _author themselves_ considers mistakes. The one about ignoring the strong isolation of the browser and just allowing anything to run with user privileges was really interesting to me. Hadn’t considered it but now that I _do_ I think every language should _be_ like that. And it would make the life of JSBin and others much easier.

[The curse of the data lake monster (2019)](https://www.thoughtworks.com/insights/blog/curse-data-lake-monster) - a retrospective of sorts of how to build “data lakes”. The authors advocate for an incremental and business driven evolution of such a system. Rather than a big-bang project which isn’t linked to any business reality. And which will slow things down in the end.
populate crontab using api calls possible ?
Tags: discuss
Published: 2019-04-26 06:42:38

---
title: populate crontab using api calls possible ?
published: true
tags: discuss
---

Okay, so i was figuring out and thinking about managing crontab tasks using http api call or something?

example when i call api /cron/add with body 

{
    command: "echo 'abc'",
    time: "* * * * *"
}


is it possible to implement such thing if yes then can you please give hints about how i can or using which tools i can do that ? 

i have ec2 instance running for crontab tasks but i want them to add/remove automatically using api calls

Thanks.
C# Initialize Array
Tags: csharp, tutorial, beginners
Published: 2019-06-18 15:15:39

---
title: C# Initialize Array
series: C# for Beginners
published: true
tags: csharp,tutorial,beginners
cover_image: https://wellsb.com/csharp/wp-content/uploads/sites/2/2019/03/beginners-while-dowhile-featured-min.png
---

The Array data structure is often better than individually declared variables. This tutorial will cover when to use arrays and how to initialize an array in C#. Often, you will need to work with several related variables of the same data type. An array allows you to declare multiple variables and treat them as part of a single group. This makes data processing and variable manipulation much easier...

[Source](https://wellsb.com/csharp/beginners/csharp-initialize-array/)
Let's build browser engine! in typescript vol0 Toy browser engine
Tags: browser
Published: 2019-04-26 05:37:32

---
title: Let's build browser engine! in typescript vol0 Toy browser engine
published: true
description: understand browser step by step. Let's build browser engine! in typescript vol0 Toy browser engine.
tags: browser
---

I want to be a browser engineer!

Let's follow this article: [Let's build a browser engine! Part 1: Getting started](https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html)

## Goal

Understand this rendering pipeline <img src="https://limpet.net/mbrubeck/images/2014/pipeline.svg"> https://limpet.net/mbrubeck/images/2014/pipeline.svg .

Input html and css, then output pixels.

## references

- [Let's build a browser engine! Part 1: Getting started](https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html)
- [mbrubeck/robinson](https://github.com/mbrubeck/robinson)
- [sanemat/js-toy-engine](https://github.com/sanemat/js-toy-engine)
- [sanemat/ts-toy-engine](https://github.com/sanemat/ts-toy-engine)

## series
- [Let's build browser engine! in typescript vol0 Toy browser engine](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol0-toy-browser-engine-egm)
- [Let's build browser engine! in typescript vol1 Canvas with Color](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol1-canvas-with-color-2nd7)
- [Let's build browser engine! in typescript vol2 Display Command](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol2-display-command-3466)
- [Let's build browser engine! in typescript vol3 Layout Box, Dimensions](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol3-layout-box-dimensions-4613)
- [Let's build browser engine! in typescript vol4 Layout Tree to Display List](https://dev.to/sanemat/let-s-build-browser-engine-in-typescript-vol4-layout-tree-to-display-list-c54)
Create Ionic 4 release build for Android
Tags: ionic, ionic4
Published: 2019-04-26 05:18:51

---
title: "Create Ionic 4 release build for Android"
published: true
description: "Create Ionic 4 release build for Android"
tags: ionic, ionic 4
cover_image: 
canonical_url: http://niranjankala.in/post/Create-Ionic-4-release-build-for-Android
layout: post
---

# Introduction

In this article, you will learn how to create ionic 4 release build for the Android platform.

## What is Ionic?
Ionic framework is the free, open-source toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web—all from a single codebase. It allows us to develop UI using the famous frameworks e.g Angular, Vue.js, React, etc.

# Setting up release build for Android platform

**Steps 1 -** 
Run "npm install" on the root directory

**Steps 2 -**
Add android platform with the CLI:
```
ionic platform add android
```
**Steps 3 -** 
If you are working in a distributed development environment then make sure to install the required files. Run  [ionic cordova prepare](https://ionicframework.com/docs/cli/commands/cordova-prepare) command. it will Install platforms and plugins listed in "config.xml". 
```
ionic cordova prepare android
```
**Steps 4 -**
Now navigate to platforms/android with the CLI :
```
cd platforms/android
```	
Create/Copy release signing key store file under platforms/android folder
Copy the created Key store file for android application if you already have otherwise generate a key.store file with the CLI and answer all the questions:
```
keytool -genkey -v -keystore YourApp.keystore -alias YourApp -keyalg RSA -keysize 2048 -validity 10000
```
Follow the steps suggested in the documentation for [Deploying to a Device](https://ionicframework.com/docs/v3/intro/deploying/).

### Create/Specify release signing information

**Steps 1 -**
Create a file with name "release-signing.properties" under "platforms\android" folder.

**Steps 2 -**
 Add below information to this file:
 ```
key.store=YourApp.keystore
key.store.password=<YourApp keystore password>
key.alias=YourApp
key.alias.password=<YourApp alias password>
```
# Create build for application

Now go back to the root of your Ionic project with the CLI and build a release version:
```
ionic cordova build android --prod --release
```
If command run successfully then you will find release APK under -- APP_Root_Folder\platforms\android\app\build\outputs\apk\release


### Reset plugins and platforms


To install Or reinstall all cordova plugins In Package.json with Ionic, Run this command on windows command prompt with administrator privilege 
```
rd  plugins /d/s && rd platforms /d/s  && ionic cordova prepare
```


# Conclusion
There are the steps to create a build for ionic 4 application and then you can host your application on Android store.
Ruby: Getting boolean from string or nil
Tags: ruby, rails
Published: 2019-04-26 05:04:36

---
title: Ruby: Getting boolean from string or nil
published: true
description: converting string or nil to boolean
tags: #ruby,#rails
---

There are times when you will run into 

```
nil == false
 => false
'true' == true
 => false
'false' == false
 => false
```

Here is my solution to this problem. (not sure if this is the best way, but I love it)

NOTE: If you are using rails, create a file called `extend_string.rb` in `config/initializers` folder. Then add the code below. 

> Or just import it somewhere before you start your ruby app.

```
class NilClass
  def self.to_bool
    false
  end
  def to_bool
    false
  end
end

class String
  def to_bool
      return true if self.downcase == "true"
      return false if self.downcase == "false"
      return nil
  end
end
```

Now that you have this in your code, you can run

```
nil.to_bool == false
 => true
'true'.to_bool == true
 => true
'false'.to_bool == false
 => true
'TRUE'.to_bool == true
 => true
'FaLSE'.to_bool == false
 => true
```

If you there is any other way to do this, please let me know so I can improve my code.

Thankz :D
Introduction of AiForms.Dialogs for Xamarin.Forms
Tags: xamarinforms, xamarin, dialog
Published: 2019-04-26 03:08:10

---
title: Introduction of AiForms.Dialogs for Xamarin.Forms
published: true
description: 
tags: xamarinforms,xamarin,dialog
---

Speaking of Dialogs in Xamarin.Forms, [ACR User Dialogs](https://github.com/aritchie/userdialogs) is very famous, and I have used a lot in business.
In personal development, I used not it but self-implemented using DependencyService. And I implemented such as a loading dialog with it.
On Android, I used a ProgressDialog, and this turned to Deprecated, so I thought refactoring it.
When I was refactoring it, I hit on "This can be independent as a Library by a little effort".
Although it wasn't a little effort as a result,  I almost finished it and so I released this as a NuGet package.

First of all, I thought that I wanted to replace self-implemented to ACR User Dialogs. But its GitHub repository is not active and it is not customizable such as replacing a loading icon. So I thought that I should make a library myself.

While implementing it, I found [Popup Page Plugin](https://github.com/rotorgames/Rg.Plugins.Popup) at my twitter timeline. I thought this library was just what I wanted. But because I had already implemented most of it then, I decided to complete it differentiating from Popup Page Plugin.

## Repository

### Source

https://github.com/muak/AiForms.Dialogs

### Nuget

https://www.nuget.org/packages/AiForms.Dialogs/

> This is currently a pre-release.

## Demo

{% youtube -DzMvQCQU1Q %}

## Summary

AiForms.Dialogs is what can be put a ContentView defined by XAML or c# code into each platform native dialog and show it.

The position of a dialog can be specified any position in the screen with `VerticalLayoutAlignment`,  `HorizontallayoutAlignment`, `OffsetX` and `OffsetY`  property.

## Features

* Dialog – Showing a general dialog.
* Toast – Showing what is called a toast.
* Loading – Showing a full-screen modal dialog for loading.

## Usage

```cs
var ret = await Dialog.Instance.ShowAsync<MyDialogView>(new{Title="Hello"});
// If canceled, return false. If completed, return true.
// Optionally, you can pass a ViewModel to a DialogView.
// When the dialog is closed, all related resources are automatically disposed of.

Toast.Instance.Show<MyToastView>(new{Title="Hello",Duration=1500});
// Optionally, you can pass a ViewModel to a ToastView.

await Loading.Instance.StartAsync(async progress =>{
    // Heavy process
    for (var i = 0; i < 100; i++)
    {
        await Task.Delay(50);
        // You can send the progress to a dialog with IProgress<double> value.
        progress.Report((i + 1) * 0.01d);
    }
});
```

For more information about how to use AiForms.Dialogs, see [ReadMe](https://github.com/muak/AiForms.Dialogs/blob/master/README.md).

## Concluding

I would be grateful if you could use this library for using an elaborate dialog in a NETStandard project.

If there are some questions, requests, and bug reports, please report it to GitHub issues or [twitter](https://twitter.com/muak_x).
Using the Python Write to File Function
Tags: python, beginners, tutorial, devtips
Published: 2019-04-25 18:50:37

---
title: Using the Python Write to File Function
published: true
description: Python excels at flat-file writing and manipulation, especially when handling data from online data sources.
tags: python, beginners, tutorial, devtips
canonical_url: https://kite.com/blog/python/python-write-to-file/
---

![Python Write to File] (https://thepracticaldev.s3.amazonaws.com/i/slrqscbk60hj0fodhb3i.jpg)

How can developers and clients benefit from data being in a file format when there are so many other options out there? Why not just use a simple HTML page with AJAX requests and tables to display the data? In this blog post, let me show you why using Python to construct files is productive way of of creating and filling them with data. We will go over a few APIs to populate our files with data, and learn how to use the Requests HTTP library to fetch data. In this post, we'll be using Python 3 and its toolkit. Let’s get started!

You can easily access the code from this article in [Kite' github repository] (https://github.com/kiteco/kite-python-blog-post-code/tree/master/python-write-to-file).

## Setting Objectives
Our first step is to set some objectives for our files.

  * First, we want some inspiration: to do that, we’re going to form a request to a famous quotes API using the Requests module in Python.
  * Second, we want to make sure our investments in the stock market are looking solid. We'll use IEXFinance Python wrapper around the Investors Exchange Developer API.
  * Third, we also want to make sure our cryptocurrencies are staying green as well. We'll fetch data with the Requests module from the Coinbase API to check on our digital assets.
  * Lastly, we'll take all this fetched data and write to files that correspond to each time we run the script and have one accumulative file. All of our files will be in CSV format.

I’m assuming that we’ll utilize the functionality of spreadsheet software to graph the data stored in the files. Let's dive into how the Requests HTTP library works, and get our quotes!

Read more [on the Kite blog] (https://kite.com/blog/python/python-write-to-file)!
Coding worksheet #4: Callback functions
Tags: javascript, development, learning
Published: 2019-04-26 00:42:07



Just something I made as a primer. I've tried to condense as much information I could for 'scoped' learning

 {% codepen https://codepen.io/Kauress/pen/ZRjGxr %} 


[View full page on codepen here](https://codepen.io/Kauress/full/ZRjGxr)
[Discussion] Why GraphQL?
Tags: graphql, rest, webdev, discuss
Published: 2019-04-26 00:34:37

---
title: [Discussion] Why GraphQL?
published: true
description: Help me understand why people are so excited by it.
tags: graphql,rest,webdev,discuss
---

## Background
At my place of work we have both REST and GraphQL APIs. I have to maintain and use both regularly. All of our backend development is in Flask (Python), our front ends are Angular and AngularJS (TypeScript).

## What I know
People post all over the place about how amazing GraphQL is, how it’s the future, the death of REST, all that jazz 🕺. Here are the main points I usually see people bring up in favor of GraphQL over a standard REST API.

1. It’s easier to maintain
2. Queries are easier to read/write
3. You only pull what you need
4. It’s interactive (with something like GraphiQL)
5. You can craft a single request to get all the data you need
6. Easy to generate documentation

## I prefer REST 😴
There’s my bias, I’m wearing it on my sleeve. Here are my counterpoints.

1. It’s not easier to maintain, at least not in my experience. I have to write more code in more locations to add something to a GraphQL API than a REST one.
2. They’re easier to read and write in tools that are designed to do so, but they are hard to parse when in a big string blob (as they always end up being when consumed). Meanwhile in REST land I can have Swagger generate native code (TypeScript for me) that gives me all the models and services.
3. You only pull what you want from a good REST API too, using something like X-Fields
4. Swagger UI on the server doing the serving is at least as easy and interactive.
5. Yeah but I’ve never come across a situation where you only need one query anyway, or where it’d make a noticeable difference.
6. Again, not in my experience. Flask-RESTPlus generates docs based on comments... that’s pretty easy.

I also have further reasons I like REST more:
A. You can only do CRUD with GraphQL, there’s more to APIs than that.
B. The tooling for GraphQL is very lackluster (or maybe just young?) especially when consuming such an API.

## Please help
I don’t want to be so fully in the camp of REST, I want to understand why people love GraphQL. Are we just doing it wrong? Is it that Graph is amazing on Node and React, and not on the techs we use? Am I a curmudgeon 👴🏻? Please let me know.