teleren/devto huggingface dataset:
Running a Flutter app on iOS and Android emulators
Tags: flutter
Published: 2021-07-09 06:35:00

When developing hybrids apps, there comes a time where you want to check out your app on certain devices.
Luckily we can leverage emulators for this 📱.

In today's article, I'll show you how to launch the emulators from within Visual Studio Code.

As you may have seen in my previous Flutter introduction article, we can run a basic app by executing `flutter run`.
This command will run our Flutter app, and it actually can run on multiple devices.

## Running a Flutter app on an iOS emulator

Before we get started, make sure you have Xcode installed on your Mac and can open an emulator in general.
For this, you need to have downloaded Xcode from the App Store and opened it at least once.

From there, the easiest way to go about this is to open your Flutter project in Visual Studio Code.

Two great plugins actually help with Flutter development these are:

- [Flutter for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter)
- [Dart for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code)

From here, select a device at the bottom of the screen.

![Flutter select device](https://cdn.hashnode.com/res/hashnode/image/upload/v1625288144780/Mdu5axqDv.png)

This will open up the specific emulator for the device you choose.

From there, click the Run and Debug menu on the left, and click the Run icon. This will now load your app on the emulator!

![Flutter run on iOS emulator](https://cdn.hashnode.com/res/hashnode/image/upload/v1625288369340/mAnEBIup3.png)

And there we go. We have our app running on an iOS emulator.
Do note the hot-reload option here. We can quickly restart our app with the latest changes.

## Running a Flutter app on an Android emulator

For android, we need to make sure we have our development studio setup as well.

Make sure you download and install [Android Studio](https://developer.android.com/studio) and follow the installation steps.

Also, make sure you have an emulator setup. If you're unsure about these steps, check out the [Android article on setting up emulators](https://developer.android.com/studio/run/managing-avds).

With that in place, we can go back to Visual Studio Code and change our device to be the Android emulator.

![Launch Android emulator](https://cdn.hashnode.com/res/hashnode/image/upload/v1625288640933/Z9Vb2mZz7.png)

> Note: You can also create an emulator from this window

Once the emulator is started, open the Run and Debug menu and press the start button.

![Run Flutter on Android emulator](https://cdn.hashnode.com/res/hashnode/image/upload/v1625288843455/88IICbf5C.png)

Also, note the hot-reload option from this menu. It's a super quick way to debug and run your apps on a device.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Introducing my new project awesome tree!
Tags: opensource, vscode, typescript, github
Published: 2021-07-09 05:36:00

Introducing my new project - awesome tree extension!
This is code completion plugin. Analyze your files content on your computer and create content for new files.

![CreateNewFile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3vbkptwz8ssgu8et9xu.gif)

More informaction about project here
- https://marketplace.visualstudio.com/items?itemName=bajdzis.awesome-tree

Do you like my project? Give me star on github!
- https://github.com/Bajdzis/vscode-awesome-tree

Tech used:
React (render webview), Jest (unit test), Redux (cache files), RxJS

![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5jmp2fgjcsnqx2dp4se.png)
React.js
Tags: react, dev
Published: 2021-07-09 02:26:24

React is a front-end framework maintained by Facebook. It is extremely fun to use once you get the hang of it, this language builds off of basic(vanilla) JavaScript and adds new exciting features for building a UI interface or its components. It is declarative and component-based so the main idea is to build and encapsulate components and web them together this makes creating reactive user interfaces a breeze in the long run and makes everything easier to read and edit later on.

In my short time learning the basics and building my first project I can say with confidence that I would absolutely recommend this language to anyone wanting to level-up there JavaScript skills. React.js has some of the best documentation and video resources out there for anyone struggling or wanting to learn it. React can also render on the server using Node and power mobile apps using React Native. React is a great tool for front-end devs who are just starting out. 

Check out my recent project video
https://youtu.be/h1yuuf_bsfA

and the updated Github Repo
https://github.com/Hpollard003/Project-2-Phase2
How to make Custom Scrollbar using Pure CSS
Tags: css, html
Published: 2021-07-09 04:20:30

Good Morning Dear Readers

So you are a web developer/designer and you are making awesome websites but the annoying scrollbar is destroying you website.
it can't destroy your website anymore
Because my Friend I'm here for you

So Let's Start

Github: https://github.com/nishthaneeraj/Custom-Srollbar-using-css
Live Demo: https://nishthaneeraj.github.io/Custom-Scroll-Bar-Using-Css/
Codepen:
{% codepen https://codepen.io/Yashodhararaje/pen/MWmKBXV %}

Specify the width using:

```css
::-webkit-scrollbar {
  width: 10px;
}
```

then add background color using: 

```css
::-webkit-scrollbar-track {
  background-color: #fff;
}
``` 

then add the color of the trackbar using:
```css
::-webkit-scrollbar-thumb {
  background-color: #e02f6b;
  border-radius: 5px;
}
```

that's it !

if you have any issue the let me Know in the Comment Section.

Bye Good Day. 

Thanks!
Creating Dev.to Clone with Angular
Tags: angular, webdev, typescript, showdev
Published: 2021-07-09 04:07:40

I'm starting a new series in which we will create a dev.to clone in angular. I will release some work every Thursday. I'm busy on all other days. I will use
1. Component store for state management
1. Rx-angular template for RxLet and push pipe

Rest we will add stuff as needed and think about it in various scenario's as we go. I'll add stuff to github repo on Thursday and drop an article on what we did on Friday. Follow along if you want to learn more about Angular.

Github Repo - https://github.com/ajitsinghkaler/devto-clone

Deployed on Firebase - https://dev-toclone.firebaseapp.com/

Right now we have created the header component and next we will create the side bar.
![Sidebar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/einwybxpfjnh6jhx2p7z.png)

Each commit message will tell what we have done in that commit. Follow alone if you want to learn angular and let me know if any enhancements you think are needed create an issue on the repo if you want we can discuss there.
Inertia Adapter for ProcessWire
Tags: javascript, php, processwire, inertia
Published: 2021-07-09 03:57:47

---
title: Inertia Adapter for ProcessWire
published: true
description: inertia + processwire = win!
tags: javascript, php, processwire, inertia
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrfes6769n17jxb6kbq5.png
---

For the [ProcessWire](https://processwire.com) project. I created this simple [Inertia](https://inertiajs.com/) adapter.
And also a sample [ProcessWire + Svelte + Laravel Mix + Inertia](https://github.com/joyofpw/inertia-svelte-mix-pw) project.

{% github https://github.com/joyofpw/inertia %}

![Files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrfes6769n17jxb6kbq5.png)
Learn About F# and Web Development
Tags: azure, serverless, fsharp, web
Published: 2021-07-11 23:04:37

---
title: Learn About F# and Web Development
published: true
date: 2021-07-09 03:43:33 UTC
tags: azure,serverless,fsharp,web
canonical_url: https://www.aaron-powell.com/posts/2021-07-09-learn-about-fsharp-and-web-development/
---

Every week my colleague [Cecil Philips](https://twitter.com/cecilphillips) hosts [On .NET Live](https://www.youtube.com/playlist?list=PLdo4fOcmZ0oV2fcY7wsQHx4RNWXEDKgm4), an hour of live streaming about all things .NET.

He invited me on this week to talk about F# and web development, specifically how we can do serverless web development with F# and Azure Functions. This was a chance for me to show off some of the awesome community projects such as [Fable](https://fable.io) and [Feliz](https://zaid-ajaj.github.io/Feliz/), which make it easy to build client-side JavaScript applications, but done using F#.

We talked about how to created [Azure Functions with F#](https://dev.to/azure/creating-azure-functions-in-f-482k), I showed how you can get started using [some GitHub repo templates](https://dev.to/azure/creating-static-web-apps-with-f-and-fable-4nac) to simplify a dev environment using Fable + Functions, and we finished by looking at an [app I build](https://github.com/aaronpowell/ondotnet-fsharp-complete) using this stack and [have deployed to Static Web Apps](https://black-glacier-08edf5f10.azurestaticapps.net/).

Check out the session on the [dotnet YouTube channel](https://www.youtube.com/channel/dotnet).

{% youtube wBP8k1ZuRmQ %}
July 8th, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-07-09 03:41:58

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Image of the brain](https://media.giphy.com/media/ojmB7lOn3VUU8/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{%link https://dev.to/devteam/what-was-your-win-this-week-4h3g %}

<center>

![Little kid making a fist as if to say "Yes!"](https://media.giphy.com/media/6brH8dM3zeMyA/giphy.gif)
</center>

Photo by <a href="https://unsplash.com/@qmikola?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mikołaj</a> on <a href="https://unsplash.com/s/photos/book?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Firebase Hosting with HTML, CSS, Prettier, Docker sample code.
Tags: firebase, html, prettier, docker
Published: 2021-07-09 03:35:56

I create that [Firebase Hosting](https://firebase.google.com/docs/hosting) with HTML, CSS, [Prettier](https://prettier.io/), [Docker](https://www.docker.com/) sample code.
<https://github.com/otashun/firebase-hosting-html-css-prettier>

## Getting Started

```bash
git clone git@github.com:otashun/firebase-hosting-html-css-prettier.git
cd firebase-hosting-html-css-prettier
```

[Create a Firebase project](https://firebase.google.com/docs/web/setup#create-firebase-project)

Edit [.firebaserc](https://github.com/otashun/firebase-hosting-html-css-prettier/blob/main/.firebaserc). That is to change the Firebase project name to your Firebase project name.

```bash
docker-compose up -d && docker-compose exec app bash
npm install
firebase login
firebase emulators:start
```

Visit <http://localhost:5000>
How to Customize the React Charts Axes of Syncfusion
Tags: react, charts, webdev, customize
Published: 2021-07-09 03:30:25

Learn how easily you can customize the Syncfusion [React Charts](https://www.syncfusion.com/react-ui-components/react-charts "React Charts") axes. This video explains how to display a title, multiple axes, and an inversed axis, as well as how to set axis crossing, an opposed position, tick lines, and gridlines.

Download the example from GitHub: 
https://bit.ly/3wbwQ3Z

Refer to the following documentation to customize the axis in the Syncfusion React Charts:
https://bit.ly/3AhrjfF

Check out this online example of multiple axes in the Syncfusion React Charts: 
https://bit.ly/3yrEYPF

Check out this online example of inversed axis in the Syncfusion React Charts: 
https://bit.ly/363TNLN

Check out this online example for setting the axis intersection point in the Syncfusion React Charts: 
https://bit.ly/3y5gPy2

{% youtube EirmVDtpvcE %}
My Approach towards Learning and Note taking
Published: 2021-07-09 02:21:54

I'll be asking myself 2 questions, when I'm reading something.

1. **Does this make sense ?** _Else, have to get this clarified_
2. **Can I explain this to a kid ?** _Else, have to understand this better_

Also, I follow the below note taking process. 

1. First, **read a paragraph of text end-to-end, before you start highlighting**. Don't highlight as you read. You may end up highlighting everything/more text which might not be important at the end.

2. After reading and understanding it, **highlight the most important information or takeaway** from it. This helps to quickly revise the highlighted key points later on. 

3. **Use multiple but limited colors to highlight different types of info to organise it better**. It is as below.

_Titles - **Red**
Definitions/Main Points - **Blue**
Relevant/Supporting Info - **Yellow**
Interesting Info - **Green**
Queries/Clarification Needed - **Orange**
References - **Grey**_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyoige214m9f9dgqaq4x.jpg)

Too many colors can be distractive. So, **use limited colours but make good use of them**.

_**PS :** This is the process that I follow and shall keep this post updated over time with any new learnings_.
Serverless GraphQL in Rust with Diana
Tags: graphql, rust, serverless
Published: 2021-07-09 01:52:03

{% github arctic-hen7/diana %}

A while ago, I was thinking about how to get serverless GraphQL working with subscriptions. Unfortunately, you can't easily, because subscriptions are state*ful*, and so they have to be run on a server*ful* system. But there's nothing to stop a serverful subscriptions system from being connected to a serverless queries/mutations system!

[Diana](https://github.com/arctic-hen7/diana) is a GraphQL system for Rust that does just this. It's mostly a high-level wrapper around the excellent work of [async_graphql](https://github.com/async-graphq/async-graphql), but it adds authentication and a bridge between serverful and serverless systems.

Right now, Diana supports integration with [Actix Web](https://actix.rs) and AWS Lambda (including derivatives like Netlify) out of the box, with support for more platforms coming soon! You can read Diana's documentation in [the book](https://arctic-hen7.github.io/diana).

## Installation

You can easily install Diana by adding this to your `Cargo.toml` under `[dependencies]`:

```toml
diana = "0.2.3"
```

All Diana's integrations (currently [`diana-actix-web`](https://crates.io/crates/diana-actix-web) and [`diana-aws-lambda`](https://crates.io/crates/diana-aws-lambda)) are kept to the same version as the core library, so everything is always at the same version.

## Usage

Diana is pretty easy to use, just define your configuration and set up the integration and you're good to go, with authentication built-in! There's more on how to do this in the docs [here](https://arctic-hen7.github.io/diana/getting_started.html).

## Closing Words

I've found Diana to be really useful so far for simplifying GraphQL in my own projects, so I hope it helps someone! Please open an issue on the repository if you find a bug or want to propose a new feature!
Deeply understand call, apply, bind

Published: 2021-07-09 01:09:07

In the previous article, we know that call, apply, and bind are all related to the this point. These three methods are the prototype methods of the JavaScript built-in object Function. A considerable number of front-end engineers still have a relatively simple understanding of them. The so-called solid JavaScript foundation cannot bypass these basic and commonly used knowledge points. This time let us understand and master them in depth.

https://xiaobo.blog/deeply-understand-call-apply-bind
Creating Static Web Apps With F# and Fable
Tags: azure, staticwebapps, web, fsharp
Published: 2021-07-11 23:03:16

---
title: Creating Static Web Apps With F# and Fable
published: true
date: 2021-07-09 00:56:43 UTC
tags: azure,staticwebapps,web,fsharp
canonical_url: https://www.aaron-powell.com/posts/2021-07-09-creating-static-web-apps-with-fsharp-and-fable/
cover_image: https://www.aaron-powell.com/images/banners/2021-07-09-creating-static-web-apps-with-fsharp-and-fable.png
---

While I’ve done [lots of stuff with F#](https://www.aaron-powell.com/tags/fsharp) over the years, it’s pretty much all centred around apps on the server. With [Azure Static Web Apps](https://docs.microsoft.com/azure/app-service-static-web/?WT.mc_id=dotnet-33392-aapowell) being a big area for myself these days I’ve been looking at the role that F# plays with it.

This led me to have a proper look at [Fable](https://fable.io). Fable is a F# to JavaScript compiler, meaning you can write F# code and have it compiled to JavaScript, which is then run in the browser (or in a Node.js/Electron/etc. but I’m focusing on the browser usage).

So, in an effort to make it easier to get started with Fable and Static Web Apps, I’ve put together three [GitHub repo templates](https://docs.github.com/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/creating-a-repository-from-a-template?WT.mc_id=dotnet-33392-aapowell). All the templates have a common Azure Function backend (using F#), use [Paket](https://fsprojects.github.io/Paket/) for dependency management, [Vite](https://vitejs.dev/) for bundling the JavaScript (I wanted to avoid webpack), [Thoth.Fetch](https://thoth-org.github.io/Thoth.Fetch/) for calling the API and a [VS Code Remote Container](https://code.visualstudio.com/docs/editor/remote-containers?WT.mc_id=dotnet-33392-aapowell) config to setup an F# environment. For the client, there’s [Fable](https://github.com/aaronpowell/swa-fable-template), [Feliz](https://github.com/aaronpowell/swa-feliz-template) ([a React DSL in F#](https://zaid-ajaj.github.io/Feliz/#/)) and [Elmish](https://github.com/aaronpowell/swa-elmish-template) ([a Model-View-Update pattern](https://elmish.github.io/elmish/)).

I’ve also included some instructions on deploying to SWA, as it’s a bit tricker than a _normal_ app.

Check out the templates, and let me know if there’s anything you’d like to see in them to make it easier to get started with F# and Static Web Apps.

{% github aaronpowell/swa-fable-template %}

{% github aaronpowell/swa-feliz-template %}

{% github aaronpowell/swa-elmish-template %}
When is the best time to share a "new" product?
Tags: showdev, opensource, postgres, graphql
Published: 2021-07-09 00:17:23

**Is now** (as soon as possible), even if it's not the way you want it


pREST exists since 2016 and today I remembered to publish it on Product Hunt, without having much expectation on the engagement.

To my surprise, has a much higher engagement than I imagined, especially in the installation of binary (software).

We will be a software for API development based on PostgreSQL database (new or existing) with low-code, there is a lot of work to be done... we are just in the beginning.

{% twitter 1412956727822200835 %}

{% github prest/prest %}

https://www.producthunt.com/posts/prest
Day 14 of #100DaysOfCode!

Tags: saas, codenewbie, 100daysofcode, beginners
Published: 2021-07-08 23:55:45

<h2>Today's progress</h2>
Continued working on SASS and learned a little bit about one key functionality of SASS which are `@mixins` and `@include`.

<h2>What I learned</h2>
`@mixin` allows you to create CSS code that can be reused and are defined using the syntax `@mixin`. They can also contain styles of their own. the `@include` is created to use the `mixin`. 



Let's see how that looks like...

```css
@mixin red-color{
  color: red;
}

h1{
  @include red-color;
}
```

In the above example we created a `@mixin` name `red-color` and gave it the property `color` which has the value `red`. 

Then we grab the tag name `h1` and use `@include` on the defined mixin `red-color`. 

Now when we compile the SASS to CSS it will make the `h1` tag the color `red` on our CSS file.

That was a simple example of using the syntax `@mixin` and `@include`. I mentioned earlier that `mixin` allows CSS code to be reused and does this by passing in `arguments`.

Say, throughout our webpage we have different sizes of heading elements `h1`, `h2`, `h3` and we want a different color for each of one. We can solve this by using `mixins` and passing in a different `color argument`. 

Here's an example of that.

```css
@mixin some-color($pick-color){
    color: $pick-color;
}

h1{
   @include some-color(red);
}

h2{
   @include some-color(blue);
}
```
######<center>style.scss<center>

When we compile the SASS to CSS it will create a `h1` and `h2` tag that will have the property values that we assigned it on our SASS file. 
```css
h1{
   color: red;
}

h2{
   color: blue;
}
```
######<center>style.css<center>

<h2>In Conclusion</h2>
Of course these were very basic examples of compiling SASS code to CSS code and using the functionality of `@mixin` and `@include` to create reusable code. It helps to pass in an argument with your `mixin` so that you can have different property values passed while using the same `@mixin`.
What do I think about BizDevOps?
Tags: devops, bizdevops, scrum
Published: 2021-07-11 13:37:47

---
title: What do I think about BizDevOps?
published: true
date: 2021-07-09 00:00:00 UTC
tags: devops,bizdevops,scrum
canonical_url: https://jhall.io/archive/2021/07/09/what-do-i-think-about-bizdevops/
---

Yesterday, after my [presentation at Scrum Day Europe](https://jhall.io/archive/2021/07/08/how-scrum-and-devops-go-hand-in-hand/), I was asked my view on BizDevOps.

First, let me try to define BizDevOps for the unfamiliar: Whereas DevOps aims to align the operations of development and operations, BizDevOps aims to align the operatoins of business, development and operations.

So what do I think about it?

I have three answers:

1. If including “Biz” in your nomenclature helps you in some way, by including business decision makers in the software development process, for example, then by all means, do it! I’m a big advocate of doing what works. If this works for you, don’t let anyone tell you to change.
2. Having said that, the term feels superfluous to me. The entire reason we do Dev and Ops is to serve a business need. In this sense, tacking on the “Biz” prefix to “DevOps” seems analogous to tacking on “Cust” (as in cusotmer) to the beginning of “Business”, just so we don’t forget that the business exists to serve customers. CustBizDevOps! But why stop there? Customers care about their children, right? ChilCustBizDevOps FTW!
3. And finally, in particular for my audience yesterday who were (presumably) using Scrum, Scrum largely fills the role of the “Biz” in “BizDevOps” anyway. So if you’re using Scrum with DevOps, you’re probably already explicitly doing BizDevOps, just by another name.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._