teleren/devto huggingface dataset:
Adding a splash screen to portable electron builder apps
Tags: electron, builder, splash, portable
Published: 2020-04-20 19:58:41

Portable electron apps may take a few seconds to start. During this time there is no obvious feedback that the app is launching. Users might be confused and try to launch the app a few more times before they see a welcome screen.

It takes time to launch the application because the portable executable is extracting files to a temp folder in the background. Only after extraction is complete, the electron app will start. It can take more than a few seconds depending on the user's system and the size of the application.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4nyrdrht221ogtz7l1ku.gif)
To avoid this situation, we would like to see a splash screen while the extraction is taking place. Unfortunately, electron builder does not have a fully functioning implementation of this feature. (Hopefully [this PR](https://github.com/electron-userland/electron-builder/pull/4798) will be merged in the near future)
In the meantime this post will guide you through a workaround

##Use the right version of electron builder

Use electron-builder ^22.4.0 (earlier versions will not work)
```
npm i electron-builder@latest
```

##Fix portable.nsi
There is an issue with the template for portable windows applications (ROOT_OF_YOUR_PROJECT/node_modules/app-builder-lib/templates/nsis/portable.nsi) in electron builder. We will modify this file in order to fix it.
Let's take a look at the onInit function (Line 10 at the time of writing)
```
Function .onInit
  SetSilent silent
  !insertmacro check64BitAndSetRegView
FunctionEnd
```
The mode is set to silent. Because of this, the UI will not be displayed during the extraction of our electron app.
The fix is to check for an environment variable "SPLASH_IMAGE". Only if it's not defined we will start in silent mode:
```
Function .onInit
  !ifndef SPLASH_IMAGE
    SetSilent silent
  !endif
  !insertmacro check64BitAndSetRegView
FunctionEnd
```
That's it for fixing electron-builder.

##Add a splash screen bitmap image file
Let's just add an image to display as splash screen.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lymc8ok8ew343z1xmv4y.JPG)
We will name it "splash.bmp" and put it in the root of the project.
##Configure electron build options
Now let's configure our electron app to build a portable executable that displays a splash image during extraction.
In package.json the build property should look like this:
```
 "build": {
    "portable": {
      "splashImage": "..\\..\\..\\..\\splash.bmp"
    },
    "win": {
      "target": "portable"
    }
  }
```

The path must be relative to "/node_modules/app-builder-lib/templates/nsis/"
Alternatively we can use an absolute path.

##Build your electron app and behold the splash screen
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/23tl8fv22fp2w8olpjua.gif)
Airtable Developer Preview
Published: 2020-04-20 19:54:01

Airtable has been working on a private developer preview that allows users to build React-based applications. The blocks SDK makes it easy to create applications - resolving hosting, real-time UX, and relational database complexities out of the box. 

We're still in private beta but would love to extend early access with the Dev.to React community. We provide 90-day free pro-plans for developers as well as many open source examples to get started. You can review the documentation, examples, and sign-up link here: https://airtable.com/developers/blocks
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-04-20 18:45:47

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. Under The Hood

Lydia is back with another JavaScript visualization! In this post, we do a deep dive on promises and async functions. 

{% link https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke %}

#2. Helpful Discoveries

Desiré surfaces five lesser known CSS properties, so you can discover them now instead of later.

{% link https://dev.to/helleworld_/5-css-useful-properties-i-ignored-2930 %}

#3. The Basics

Emmanuel shares an overview of what Linux is and where it comes from. This post also covers vocabulary and the commands you need to get started.

{% link https://dev.to/emtes/so-linux-3i9k %}

#4. One Plugin

Niall found a way to run projects consistently across multiple operating systems via a plugin. This guide shows us how to use Visual Studio Code and Docker to mimic your production settings.

{% link https://dev.to/nialljoemaher/dockerize-your-development-environment-1a50 %}

#5. Talk of the Hour

Tulsi teaches us how to make responsive layouts using CSS grid and flexbox. A great primer!

{% link https://dev.to/tulsi_prasad/making-responsive-layouts-without-using-media-queries-59o7 %}

#6. What It Takes

Emma interviewed at Google three times, progressing further each time. This post shares an overview of the Google hiring process and lots of tips on getting through the technical interviews.

{% link https://dev.to/emmabostian/i-passed-the-google-technical-interviews-you-can-too-4i6m %}

#7. Looking Good

Mostafa built a site that shows off some of the most-loved coding fonts. The app has an interactive preview so you can check out what these fonts look like before you commit!

{% link https://dev.to/gafi/i-built-a-site-with-the-best-coding-fonts-295h %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
Progress: creating/deleting channels, switching active channel and chat history
Tags: twiliohackathon
Published: 2020-04-20 18:44:55

My laptop died on me last week so things have been a bit slow. I have made a bit of progress since my last post though.

## Creating/deleting channels
I added commands to enable creating and deleting channels. 
`/+channel channel_name` creates a new channel. 
![newchan](https://dev-to-uploads.s3.amazonaws.com/i/ye36ga4544iiroli5qte.gif)
`/-channel channel_name` deletes it.
![delchan](https://dev-to-uploads.s3.amazonaws.com/i/raemtf8ki64jpqkunyyh.gif)

## Switching active channel
Now that we can create more channels, we'll likely want to switch between them to send messages to the right channel. Clicking on `tab` changes focus from the input field to the channels window. Channels are highlighted using the `up` and `down` keys and selected using `enter`.

### Chat history
Selecting a new channel clears the screen and shows messages belonging to that channel. Chat history is saved in an in-memory sqlite3 database.
![chat-history](https://dev-to-uploads.s3.amazonaws.com/i/ge6nsqn032wt80fpt63i.gif)

## Other changes
One more change I made was with the authentication. Previously, a user could log in from inside the app interface. Now, users have to log in to access the app.
![auth1](https://dev-to-uploads.s3.amazonaws.com/i/8zd9sth980jrxpq9su6h.gif)
After logging in for the first time, subsequent logins will be automatic.
![auth2](https://dev-to-uploads.s3.amazonaws.com/i/9eul8yzu1ybo2abesmkp.gif)
2020W010W6199W8
Tags: covid19, mindump, overload
Published: 2020-04-20 18:41:18

---
title: 2020W010W6199W8
published: true
description: The earth is suddenly mute, humans are suddenly deaf, the city is now pseudo, the villages are now dead.
tags: #covid19 #mindump #overload
---

The earth is suddenly mute
humans are suddenly deaf
the city is now pseudo
the villages are now dead

They laugh while downing Vodka
fear, dependency, and money
What is it that weakens our minds and minds
suddenly stupid and quickly enter the rut?

Sometimes diction just pops up
transformed into "jokes" nickels that are not easy to laugh
circle several regions of the world with color
mark and disseminate information online without ink

Suddenly transformed the flowers that smoked the juice
by insects, they laugh and build the foundation of heaven
then laugh up there with a lot of mirage angels
what is happening now is just mere boasting?

It seems we know what happened
with lots of opinions and conspiracies
- fed up, stuffed with a pandemic theory from a baby
from immunization to vaccination

Controlled and measured for a data
analyzed and re-raised to the face to try
- I mix Vodka with dew steam sauna
a new virus named lazada
multiply to be alibaba
and evolve into neighbors

Ah!

Intentional or not, this has begun to become bottled
This intentional or not has started to become poverty
intentional or not this has started to become a habit
intentional or not this has begun to become a suspicion

- drink a spoonful of panadol smooth
comic-swallow flu and cough, breathe smoothly
- drink dettol with disinfectant!

Then slowly die
ostracized by stupidity and fear, TAI!

Don't ask me, when will this end?
the best question now is:


WHEN WE'LL START!

Earth, COVID-19, -7.550343, 110.195980
Imam Ali Mustofa - Call me Illusion!
Launched: Elastic (ELK) Stack Integration
Tags: elasticsearch, observability, featureflags
Published: 2020-04-20 18:30:53

I’m happy to announce we’ve launched an integration for the Elastic Stack! Coming from Elastic myself, I was thrilled to draw upon my experience and help build something useful right out of the gates.

Looking at all the existing integrations for LaunchDarkly, I could see the obvious themes of Observability. Of course, if your distributed systems start getting wonky and acting all out of sorts, you want to know why. Probably 80-90 percent of the time, it’s because someone made a change. Wouldn’t it be great to see that annotated on top of your error rates right before that huge spike occurs?

![elastic-annotated-graph](https://dev-to-uploads.s3.amazonaws.com/i/72mentototeiiwt6f4pf.png)

With our Elastic Stack integration, you can navigate to the LaunchDarkly dashboard, find the annotated flag, and turn it off. Systems move back towards stability in less than 200ms. Customers are happy again, and your boss is thrilled.

If you’re using Elastic for observability, go ahead right now and enable that integration on our integrations page. [Check out our documentation for how to get started quickly.](https://docs.launchdarkly.com/integrations/elastic-stack)

That’s really just the beginning of this story.

Elastic provides a tremendously flexible search platform that can perform analytics on any arbitrary data you send it. You could make use of Elastic’s Watcher feature to create robust circuit breakers, measure the impact your increased use of feature flags has on system resilience, or analyze how your decreased downtime and streamlined software launches have improved customer satisfaction and increased revenue.

The Elastic Stack integration can get your feature flag data into Elastic. What you do with it from there is up to you.

Stay tuned as we offer even more insight into some advanced configurations and how you can leverage LaunchDarkly data alongside your existing observability tools, to improve the resilience of your distributed systems and improve the safety of your software deployments.
⚠️ Permission Changes in Recent Daily Update
Tags: webdev, product, frontend
Published: 2020-04-20 18:10:14

---
title: ⚠️ Permission Changes in Recent Daily Update
published: true
description: Update on Recent Permission Changes
tags: #webdev #product #frontend
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/iw1i5acj5i9vnrqv3efx.jpg
---

We have recently pushed two updates on Daily — v2.14.5 and v2.14.6. One of them is a **critical update and related to the cookies' permission change in Daily**. It asks you to allow Daily to read cookies from [https://daily.dev](https://daily.dev) and [https://dailynow.co](https://dailynow.co).

There are two scenarios to this update:

Auto Update of extensions is
1. Enabled
2. Disabled

In the first case, your browser will update the extension to the latest **version automatically and disable it temporarily**. It will ask you for the latest permissions. A notification icon (⚠️) icon will appear on the menu (in case of Chrome — similarly it asks for permissions on update in Firefox). 

When you click on the icon, it shows the permissions required. Click on the **Accept Permissions** button to give the permissions. Check out the GIF.

![Accepting Permissions GIF](https://dev-to-uploads.s3.amazonaws.com/i/57sywq92gvzvj5yooc7p.gif)

In case if your extension is not automatically updated or you are having issues with the update, please take a look at this [guide](http://r.dailynow.co/update). After that give permissions to enable the extension.

If you still face any issues, feel free to reach out to us! ✌️


<hr/>

<center> 👋 Follow us on [Twitter](https://r.daily.dev/twitter) to stay up-to-date! </center>


_[Thanks to Daily](https://r.daily.dev/web), developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab._

[![Daily Poster](https://thepracticaldev.s3.amazonaws.com/i/od2407i0eogvtdm0ddhk.jpeg)](https://r.daily.dev/web)
Serverless Eventing: SinkBinding 101
Tags: blogroll, cloudnative, kubernetes, onserverless
Published: 2020-05-29 22:53:34

---
title: Serverless Eventing: SinkBinding 101
published: true
date: 2020-04-20 18:00:52 UTC
tags: BlogRoll,Cloud Native,Kubernetes,On Serverless
canonical_url: 
---

You are writing an applicaiton where you are trying to analyze tweets in near-real time for a live TV broadcast. A tweet sent 5 hours ago serves you no purpose in this context. How would you do this? We need to create an application capable of collecting the events and sending them to be ingested,[Continue reading "Serverless Eventing: SinkBinding 101"](https://thejaysmith.com/titles/blogroll/serverless-eventing-sinkbinding-101/)
Conditional rendering in React - using the && operator
Tags: react, beginners, javascript, tutorial
Published: 2020-04-20 17:56:31

As promised, I'm going to continue writing about conditional rendering in React and the most popular ways to achieve this behavior. Today we talk about rendering using the `&&` operator. If it looks familiar that's because it is. We know it from Vanilla Javascript and it's called the `and` operator.

Let's say we want to display a component or no component (null), based on a condition. We could of course do that using a simple `if` statement. Like in the code bellow: 

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

The problem with this is that we can't inline the condition in our JSX. To fix this, we could use the `ternary operator` and write something like: 

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

But what if we want to skip the null rendering part all together? This is where `&&` comes in handy. We can re-write the code like so:

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

On line 14, we say `{condition && <Condition/>}`, which means that the <Condition/> component will be rendered if what's before the `&&` is true and it won't if what's before the `&&` is false. This is called `short-circuit-evaluation` and it works like so: if the value on the left is true, it returns the value on the right. If the value on the left is false, it ignores the value on the right. 

By now, you already learned about three ways to achieve conditional rendering in React: `if/ else statements, the ternary operator and the && operator`. If you would like to read the two previous articles on the subject, you can check the links bellow:

{%link https://dev.to/cilvako/conditional-rendering-in-react-the-if-else-method-2ga3 %}

{%link https://dev.to/cilvako/conditional-rendering-in-react-using-the-ternary-operator-2cb1 %}

For the complete code I wrote today, you can go here: https://codesandbox.io/s/conditional-rendering-the-operator-42jxi?file=/src/App.js
A Flutter app with Clean architecture + TDD + GraphQL + flutter_bloc + CodeCov + GitHooks + GitHub Actions (CI/CD)
Tags: dart, architecture, flutter, tdd
Published: 2020-04-20 17:56:05

I apologize for bloating the title with terms. I have linked everything down below.

## What?

The app uses this amazing GraphQL [API](https://rickandmortyapi.com/) to fetch the Rick and Morty TV show data. It includes Characters, Episodes and Locations of the show. There is more to it than the basic fetch with pages, but I chose to make the app simple and not the implementation. This is how the app looks
<p>
<img src="https://raw.githubusercontent.com/excogitatr/rick-and-morty-info/develop/assets/screen_1.png" alt="Screen 1" width="250">
</p>

## Why?

Many companies nowadays (from startups to enterprises) are adopting flutter and apps can easily become complex when more than one person work on one app. And when that happens, In [Martin Fouler](https://martinfowler.com/)'s words,
“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”
With this idea in mind, I wanted to demonstrate how to make a simple app in production grade (where it stands the test of time with multiple developers working on it or over-engineer it :P) and I migrated my code with the following "production level" implementations. 

## How?

- CI/CD with [GitHub Actions](https://github.com/features/actions)
- Githooks to enusre clean commit and push
  - Pre commit formats with `flutter format`
  - Pre push checks the code with `flutter analyze` and `flutter test`
- Linting style with [Effective Dart](https://dart.dev/guides/language/effective-dart)
- Test coverage with [Codecov](https://codecov.io/)
- Dependency Injection with [injectable](https://pub.dev/packages/injectable) and [get_it](https://pub.dev/packages/get_it)
- Testing with [mockito](https://pub.dev/packages/mockito) and [bloc_test](https://pub.dev/packages/bloc_test)

You can find more "how" by directly going through the repo.
{% github https://github.com/excogitatr/rick-and-morty-info no-readme %}

## What now?

Let's follow the best practices incorporated by [unclebob](https://en.wikipedia.org/wiki/Robert_Cecil_Martin) in his books [Clean code](https://www.goodreads.com/book/show/3735293-clean-code) and [Clean architecture](https://www.goodreads.com/book/show/18043011-clean-architecture) and try to build an app that stands the test of time. I have created some **good first issue**, feel free to make Pull Requests and close the issues. I have even created [kanban board](https://en.wikipedia.org/wiki/Kanban_board) in github projects to track the issues. It will be a fun journey for all us.

## Who?

- [unclebob](https://github.com/unclebob) - For the infamous Clean Architecture)
- [resocoder](https://github.com/ResoDev) (Followed his style in Clean architecture)
- [felangel](https://github.com/felangel) (For his amazing state management solution)
- [Axel Fuhrmann](https://github.com/afuh) (For the Rick and Morty [GraphQL API](https://rickandmortyapi.com))
- Authors of all the packages I have used, who made our lives easier.
Apps written in kotlin- Example Of successful Applications written in kotlin.
Tags: android, kotlin, mobile
Published: 2020-04-20 17:43:04

Muutassim Mukhtar 
April 20, 2020 | 3 min read
Mobile
Kotlin
Android


For years, Java has been the standard for developing Android apps. In 2011, JetBrains presented Kotlin, a new statically-typed language running on Java Virtual Machine. In 2017, during Google I/O, Kotlin was announced as an official language for Android development. As Kotlin is a modern programming language with powerful features, it gained popularity among Android developers. It was placed second on the list of the most loved programming languages in the Stack Overflow Developer Survey 2018.

However, developers’ preferences do not always reflect business reality. Is Kotlin mature enough to be used in production? Is there any ‘social proof’ that successful commercial apps can be written in Kotlin?

Here is a list of 10 great Android mobile apps written in Kotlin. Some of them have been developed by top companies and have had millions of downloads from Google Play, while others are popular open-source projects appreciated by developers.
Secret features of Xamarin Forms controls revealed
Tags: xamarin
Published: 2020-04-20 17:16:04

The article is on notion:
https://www.notion.so/vapolia/Secret-feature-Xamarin-Forms-control-s-auto-registration-1fd6f1b0d98d4aabb2defa0eb14961fa

Previous posts are still on medium https://medium.com/@bigoudi

Hope you'll find it useful !
Be careful of whitespace in .php files
Tags: php, wordpress
Published: 2020-04-22 02:55:45

---
title: Be careful of whitespace in .php files
published: true
date: 2020-04-20 16:40:24 UTC
tags: php,wordpress
canonical_url: https://avdi.codes/be-careful-of-whitespace-in-php-files/
---

So I was debugging some anomalous behavior on my website and as I was poking around, I half-consciously noticed the change bars in in my editor that showed two extra newlines at the end of a .php file. But I dismissed this even as soon as I saw it because… I mean, it's just whitespace. At the end of a file.

![](https://i2.wp.com/avdi.codes/wp-content/uploads/2020/04/image-1.png?fit=770%2C100&ssl=1)<figcaption>Literally just whitespace at the end of a file, outside of any code.</figcaption>

Later I noticed a warning in the logs about “Cannot Modify Header Information”. And it was just a warning, but I didn't remember seeing it before, so I did some googling. And what I read reminded me that the way PHP works is that it tries to emit anything outside `<?php ?>` flags back to the web browser.

“What the heck” I thought, and removed the newlines. Immediately the site started to work again.

![](https://i2.wp.com/avdi.codes/wp-content/uploads/2020/04/image-2.png?fit=770%2C205&ssl=1)<figcaption>Bug fix: remove newlines</figcaption>

So lesson learned: watch out for whitespace in .php files.

This also made something else I'd seen in PHP-land make more sense. I'd noticed that some authors leave the closing `?>` off of the end of files that contain only PHP code and no HTML. This offended the well-formedness centers of my brain, and I'd previously written it off as laziness. But now I understand that this is idiomatic, and [for good reasons](https://stackoverflow.com/questions/4410704/why-would-one-omit-the-close-tag).