teleren/devto huggingface dataset:
Flutter Cheat Sheet — Terminal
Published: 2021-05-07 16:32:28

---
title: Flutter Cheat Sheet — Terminal
published: true
date: 2020-03-05 00:00:00 UTC
tags: 
canonical_url: https://rodydavis.com/posts/flutter-cheat-sheet/
---

Run Flutter web with SKIA

```
flutter run -d web --release --dart-define=FLUTTER_WEB_USE_SKIA=true
```

- Run Flutter web with Canvas Kit

```
flutter run -d chrome --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true
```

- Build your Flutter web app to Github Pages to the docs folder

```
flutter build web && rm -rf ./docs && mkdir ./docs && cp -a ./build/web/. ./docs/
```

- Clean rebuild CocoaPods

```
cd ios && pod deintegrate && pod cache clean —all && pod install && cd ..
```

> Sometimes with firebase you need to run: `pod update Firebase`

- Create Dart package with Example

```
flutter create -t plugin . && flutter create -i swift -a kotlin --androidx example
```

- Watch Build Files

```
flutter packages pub run build_runner watch -—delete-conflicting-outputs
```

- Generate Build Files

```
flutter packages pub run build_runner build -—delete-conflicting-outputs
```

- Build Bug Report

```
flutter run —bug-report
```

- Flutter generate test coverage

```
flutter test --coverage && genhtml -o coverage coverage/lcov.info
```

- Rebuild Flutter Cache

```
flutter pub pub cache repair
```

- Conditional Export/Import

```
export 'unsupported.dart'if (dart.library.html) 'web.dart'if (dart.library.io) 'mobile.dart';
```

- Kill Dart Running

```
killall -9 dart
```
 ![](https://rodydavis.com/.netlify/functions/ga?v=1&_v=j83&t=pageview&dr=https%3A%2F%2Frss-feed-reader.com&_s=1&dh=rodydavis.com&dp=%2Fposts%2Fflutter-cheat-sheet%2F&ul=en-us&de=UTF-8&dt=Flutter%20Cheat%20Sheet%E2%80%8A%E2%80%94%E2%80%8ATerminal&tid=G-JQNPVBL9DR)
CRUD Operation In Laravel 7 Tutorial
Published: 2020-03-05 13:39:30

---
title: CRUD Operation In Laravel 7 Tutorial
published: true
date: 2020-03-05 00:00:00 UTC
tags: 
canonical_url: 
---

This article will give you example of laravel 7 crud operation step by step i explained simply about laravel 7 crud example you will learn insert update delete with laravel 7 In this article we will implement a crud operation laravel 7 Alright lets dive into the stepsToday i will explai
Vue Quick Shot - Image Upload Previews
Tags: vue, webdev, javascript
Published: 2020-03-08 19:34:21

---
title: Vue Quick Shot - Image Upload Previews
published: true
date: 2020-03-05 00:00:00 UTC
tags: vuejs,webdev,javascript
cover_image: https://static.raymondcamden.com/images/banners/tip.jpg
canonical_url: https://www.raymondcamden.com/2020/03/05/vue-quick-shot-image-upload-previews
---

Welcome to the fourth entry of my Vue Quick Shots. Be sure to check out [part one](https://www.raymondcamden.com/2020/03/02/vue-quick-shot-disabling-a-submit-button-while-waiting-for-an-ajax-call), [part two](https://www.raymondcamden.com/2020/03/04/vue-quick-shot-using-a-loading-message), and [part three](https://www.raymondcamden.com/2020/03/04/vue-quick-shot-copy-to-the-clipboard). Today's entry is slightly more complex than the previous ones - adding an image preview to file upload controls.

This is something I've covered before, but not with Vue.js. Let's start with the HTML:

```html
<div id="app" v-cloak>
  <p>
  <input type="file" accept="image/*" ref="myFile" @change="previewFile">
  </p>
  <img v-if="imgsrc" :src="imgsrc" class="imgpreview">
</div>

```

In my input field, pay attention to the attributes:

- `accept="image/*` tells the browser to filter files that can be selected to images of any type. However, the user can switch this filter to any file.
- I then use `ref="myFile"` so Vue can have access to it. You'll see how in a bit.
- Finally, I specify the when the file input is changed, it should run the `previewFile` method.

Below the input field I have an img tag that will display the image when one is selected.

Alright, now let's look at the JavaScript:

```js
const app = new Vue({
  el:'#app',
  data: {
    imgsrc:''
  },
  methods:{
    previewFile() {
      let file = this.$refs.myFile.files[0];
      if(!file || file.type.indexOf('image/') === -1) return;
      let reader = new FileReader();

      reader.onload = e => {
        this.imgsrc = e.target.result;
      }

      reader.readAsDataURL(file);
    }
  }
})

```

My `previewFile` method checks the file input field via $refs and looks at the first file available. If there's one, and it's an image, we then use a `FileReader` object to read in the data and create a data url. This then gets assigned to `imgsrc` so that the image can render it.

And that's it! Here's a live version you can play with:

{% codepen https://codepen.io/cfjedimaster/pen/gOpGKZG %}

I hope you enjoyed this quick shot - only one more to go!
Call UseSession after UseRouting and before UseEndpoints
Tags: net, csharp, sessions, cookies
Published: 2020-03-05 12:20:00

---
title: Call UseSession after UseRouting and before UseEndpoints
published: true
date: 2020-03-05 00:00:00 UTC
tags: .net, csharp, sessions, cookies
canonical_url: 
---

Today, I fixed a bug where session cookies were not being persisted in an ASP.Net Core Razor Pages application.

The answer was in the [documentation](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/app-state?view=aspnetcore-3.1#configure-session-state).

To quote that page:

> The order of middleware is important. Call `UseSession` after `UseRouting` and before `UseEndpoints`


So my code which did work in the past, but probably before [endpoint routing](https://wildermuth.com/2019/09/09/Endpoint-Routing-in-ASP-NET-Core-3-0) was introduced was this:

```csharp
app.UseSession();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapRazorPages();
});
```

And the fix was to move `UseSession` below `UseRouting`

```csharp
app.UseRouting();
app.UseSession();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapRazorPages();
});
```

Success 🎉
finding the root cause...
Tags: rootcause, debug, troubleshooting
Published: 2020-03-04 23:48:51

One of the hardest thing for me was trying to find what code is not working as intended, locally it's fine to spend some time, read the logs or worst case attach a debugger and run, if not instantly but eventually, you will find the root cause. My problem was mostly a mental block rather than a lack of ability.

I had to get rid of this mental block when I started working in HFT company where on failure there are a ton of messages generated and have to scan through all the messages spread across multiple files to find the root cause like finding fields correctness or timing of the messages. 

Initially, this was hard for me as I used to go in the logs without giving a lot of thought to where and what is failing and which logs should be checked. This all changed as I realized I am spending a long time finding the root cause without any plan. The technique I use now is a technique I observed from 1 colleague and decided to adapt so now if there is any error, instead of directly looking in the logs or stack trace, 

> I start creating process flow in the head and then logically go step by step till error starts making sense.

Not sure if that made any sense to you, so to make it clear, let's say you are a mechanic and there is a car in front of which is not starting. Old me would open the bonnet and start looking for issues but the New me, will first think, "hmm, why is the car not starting? is key inserted? is battery charged? is there enough fuel?" and then will check all those things 1 by 1 and reach to the bottom of a problem which might be inside the bonnet only! but the point here is, earlier I was missing the "process"

> Process is more important than the result
Deploying to Netlify is easier than you think
Tags: netlify, git, webdev
Published: 2020-03-04 23:16:36

If you are posting your code to GitHub, GitLab or BitBucket and are looking for a place to deploy your code, it is super easy to have your code continuously deployed and hosted on Netlify.

Netlify is great for hosting static sites and best of all the starter plan is free of cost.


####Deploy steps

The first thing you need to do is to push your code to a git repository.
Log in or Sign up on the [Netlify](https://www.netlify.com/) website.

Once you are signed in, in the sites section you will see a button labeled **New Site from Git**

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

Once you click on it you will be asked to authenticate and connect to your git account

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5c0nqnmxs45m6sv0qgp0.JPG)

Select the repository you want to deploy and go to the next step

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


Here you you can select which branch you want to deploy. If there are any build settings you can select it here. Netlify is smart enough to pick the build commands for common site types.

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

If you need to configure any environment variables, it can be setup in the advanced section. There are additional settings which can be configured using a Netlify configuration file.

Click **Deploy** and your site will be deployed

###Bonus Tip
When you deploy your site, it is hosted at a randomly generated subdomain. If you want something that would suit your site better you can customise it.

Go to your site overview and click **Domain Settings**. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7fktf19u24t0v67b16ru.JPG)


Under the Custom domains section you will see your sites current subdomain. To change it click options to change the site subdomain. You can also link a custom domain to your site if you like.

That's all there is to it. Now your site is live. Everytime you update your site and push to GitHub, Netlify will automatically trigger a build and publish your changes to the site without you having to lift a finger :smile:.
Canary deployment in Gitlab using nginx-ingress
Tags: gitlab, canary, kubernetes, autodevops
Published: 2020-03-04 22:55:32

# Canary deployments in gitlab AutoDevops using nginx-ingress

Gitlab AutoDevops is a great feature in [Gitlab](https://gitlab.com) which allows us to Build,Test,Deploy our apps seamlessly to Kubernetes.   
This tutorial will not walk over steps to configure kubernetes integration in Gitlab as its already [well documented here](https://docs.gitlab.com/ee/user/project/clusters/).  

## AutoDevops Helm Chart setup for canary-deployments

This chart is the modified form of official [auto-deploy-app](https://gitlab.com/gitlab-org/charts/auto-deploy-app) that is intended to achieve traffic routing in `canary deployment` using `nginx-ingress`.  
Assuming you have already configured your Gitlab project with [AutoDevops](https://docs.gitlab.com/ee/topics/autodevops/), next is to use the modified chart that I created here -> https://gitlab.com/hayderimran7/auto-deploy-canary-chart 
AutoDevops is completely customizable, so in order to use this chart instead of official chart, all you need to do is copy the files and move under `chart` directory in your repo.  
Next, you want to enable canary stage which can be done simply in your `.gitlab-ci.yml` as:
```
include:
  - template: Auto-DevOps.gitlab-ci.yml
variables:
  CANARY_ENABLED: "true"
```



## Traffic Routing in Auto Deploy canary deployments using Nginx-ingress
The traffic routing in canary deployment is done based on header value while using `nginx-ingress` and AutoDevOps.
  
## How it works
We used `canary by header value` feature of `nginx-ingress` annotations https://kubernetes.github.io/ingress-nginx/user-guide/nginx-configuration/annotations/#canary.  
For that we had to modify official chart https://gitlab.com/gitlab-org/charts/auto-deploy-app to add two additional resources that are created during `canary` stage:
* `canary-ingress`
* `canary-service`

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

The `canary-ingress` checks for header `canary`, if set, routes to `canary` service backend that then forwards  to `canary-deployment`.  

There was a bug `auto-deploy-app` where the `production` service was pointing to both `production` deployment and `production-canary` deployment based on its selectors, which is raised here  https://gitlab.com/gitlab-org/charts/auto-deploy-app/issues/51.

## Testing in AutoDevops 

Simply set `CANARY_ENABLED` in your `.gitlab-ci.yml` when using `AutoDevops.  
Deploy the app using this chart in `production` and then to `canary`.  

Now make a request to service URL as:
```
curl -H "canary: always" http://<service-url> 
```
 This will hit the `canary-ingress` that will route to `canary-deployment` that you can verfiy in pod logs.
Introducing Devsplained
Tags: career, youtube, educational
Published: 2020-03-04 22:51:53

##Devsplained...Development Explained. 

I've started an educational series that doesnt only focus on the hard skills. The goal is to provide a transparent view into a career in Software Development.

Find out more at https://www.devsplained.com

Watch and judge me at https://www.youtube.com/channel/UC94T40Ofwbe129fkVnLIWUg

All feedback is welcome!
Makers - Week 9
Tags: rails, ruby, css, bootstrap
Published: 2020-03-04 21:59:40

Week 9 came and went, and through many early mornings and late nights, we finally had the finished product. 

I am immensely proud of the team for pulling together and creating a great final product. (It can be found here https://acebook-u-jakd.herokuapp.com/) The first weeks momentum ran into the second one, however it focused more around refinement, luxury features and  final finishing touches. 

We added features (at the request of our new product manager) that consisted of 'likes' for comments, comments on comments, and even 'likes' on comments of comments. Although this sounds simple, and a rinse-and-repeat style (I certainly thought it would be), it involved 3 new migration/database/table set ups, and many to many to one to many relationships!

As my experience with Rails grew, the more I realised what was possible. Rendering forms became easier, relationships with models/objects became more flexible, and paths began to route themselves, The seamless interaction in Rails continued to amaze me, and the final features were quickly implemented.

Overall the two weeks taught me the value of teamwork, communication, and not to be freaked out by new tech at the first taste (something that is slowly becoming more of a running theme at my time during makers!). I had a great time (shout out to Team U-JAKD), learnt a tremendous amount and am thrilled with the final product. Now we are off to present our project to the rest of the class and a well earned beer!

Next on the menu of makers is tech tests week - practising real world tech tests that are common as part of an interview. Dare I say for once I am looking forward to this new topic, after all it has been a while since I rolled my sleeves up and coded some good old object orientated problems! 

As always, wish me luck!

David
Deploy “The Big Fan” Serverless Pattern Today (AWS API Gateway, SNS, SQS and Lambda)
Tags: serverless, aws, cdk, architecture
Published: 2020-03-04 21:45:01

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

This is a pattern that was presented by Heitor Lessa at re:Invent 2019. The readme contains a link to the static slides and youtube recording.

API Gateway integrates directly with SNS without a Lambda in between, then there are 2 SQS consumers with message filtering applied to distribute the load.

This pattern is offered in Typescript/Python CDK versions and each has the vanilla CloudFormation (template.yml) included.

Clone the repo, deploy the pattern and learn today on cdkpatterns.com - https://github.com/cdk-patterns/serverless/blob/master/the-big-fan/README.md
ROW_NUMBER, PARTITION, & other reasons SQL is beautiful
Tags: sql, api, orm
Published: 2020-03-04 21:16:28

---
title: ROW_NUMBER, PARTITION, & other reasons SQL is beautiful
published: true
description: Feeling the love from raw SQL.
series: Love Letters to SQL
tags: SQL, API, ORM
---

The more I work with raw SQL, the more I enjoy it. Not only do I get a professional confidence boost, I also take back a bit of power over my data from whatever ORM happens to proliferate our codebase.

For example, we needed the lowest-priced offer per product for each marketplace.

Attempt #1

```sql
SELECT * FROM (
  SELECT ROW_NUMBER() OVER (
    PARTITION BY product_id, market ORDER BY price ASC
  ) AS r, t.* FROM offers t
) offers

WHERE offers.r = 1
```

That returns the best offer for each product in each marketplace. How? `r` refers to the "row number" of each record within its own partition i.e. grouped by product and market. Our `WHERE` clause allows us to only return the top offer. Results look something like:

| r | product | price | market | size |
|---|---------|-------|--------|------|
| 1 |    100  | 45.99 | amazon |  c   |
| 2 |    100  | 49.00 | walmart|  a   |
| 1 |    200  | 15.00 | walmart|  d   |
| 2 |    200  | 26.50 | amazon |  e   |

Great. Next, we wanted to consider the user's size preferences.

The first solution was adding a `WHERE` clause to only include sizes that are in the user's preferences. But that's no good because it leaves us without any offer at all for the product when the user's size is unavailable. Instead, we can use a few cool features of SQL - `WITH`, arbitrarily selecting a raw value & conditional statements.

Let's create a "virtual property" in our offers selection. Let's also move it outside of our main query using `WITH` for readability. Then we'll sort by both our "virtual attribute" and price:

Attempt #2

```sql
WITH offers_a AS (
  SELECT *,
    CASE WHEN size IN (a, b)
      THEN 1
      ELSE 2
    END AS size_pref
  FROM offers
)

SELECT * FROM (
  SELECT ROW_NUMBER() OVER (
    PARTITION BY product_id, market ORDER BY size_pref ASC, price ASC
  ) AS r, t.* FROM offers_a t
) offers

WHERE offers.r = 1
```

Now, for each product, the query will return the lowest-priced offer in the user's preferred size or the lowest-priced offer in any size. Results now look something like this:

| r | product | price | market | size | size_pref |
|---|---------|-------|--------|------|-----------|
| 1 |    100  | 49.00 | walmart|  a   |     1     |
| 2 |    100  | 45.99 | amazon |  c   |     2     |
| 1 |    200  | 15.00 | walmart|  d   |     2     |
| 2 |    200  | 26.50 | amazon |  e   |     2     |

The first product's offers swapped positions because `size_pref` takes precedence in our sorting.

---

We are able to feed other API endpoints with only minor alterations to our query. Primarily, we can remove the `market` partition wherever we load a product and its offers. That allows us to always display the most attractive, relevant price using a single query.

Feel the SQL ❤️ !!
Decontamine_Linux, your usb devices cleaning station
Tags: security, showdev, python
Published: 2020-03-04 21:33:57

You are an IT security specialist in your firm and you are always wondering "How the heck can I limit virus spreading from USB devices in this damn information system ?"  
Your boss won't let you buy this very expensive USB kiosk you saw during your last trip in a cyber security trade show ?  
The tool I'm going to present you might be the solution !  

Decontamine_Linux, a Python script I have been working on, aims to scan and clean your USB devices (keys, hard drives) from viruses. It can also scan CD/DVD in read only mode.
It automatically detects your devices, lets you choose the one you want to scan then runs scanning tools in multiple threads.  
It asks you if you want to delete viruses and eventually generates a report you can read and save on your device.

Currently its compatible with 3 antivirus:
    - Clamav
    - Sophos
    - F-Secure
I have been planning to add more and also add other (open source) scanning tools targeting specific files.

**Use case**
- Setup an hardening Debian system on a computer with antivirus and Decontamine_Linux
- Enable persistence of the script
- Kindly ask your colleagues, with the blessing of your boss, to systematically scan their USB devices before plugging in their computer
- Marvel about the decreased of security incidents related to USB devices in your company

**Demo**
<img id="demo" src="https://whatsecur1ty.com/contents/IMG/virus-scan.gif" alt="virus scan">

**Interested ?** : visit [my website](https://whatsecurity.org/contents/projects/decontamine_linux.php) !

**You want to contribute or you find an issue** : please pull a request or open an issue on [its Github repo](https://github.com/alevoski/decontamine_Linux) !  

If you **like** this project, please **share** it and **star** it !
You can also [buy me a **coffee**](https://www.buymeacoffee.com/alevoski) ;) !

<u>PS</u> : Why this name ? At the beginning, I created Decontamine to run on Windows (there are still running Windows Decontamine stations at the organization I originally developed it between 2015 and 2018), one day I realize it would be better to run it on Linux.
So, after this former employer had accepted this software to go open source, I have been rewriting everything especially for Linux.  
<u>PS2</u> : As a cybersecurity specialist, you should sensitize your colleagues to the hazardousness of USB devices !
Firefox Add-Ons - Search on Twitter
Tags: javascript, firefox
Published: 2020-03-04 21:26:39

Hi,
I develop Firefox Add-Ons(extension) tool, selected text > right click > search on twitter

<img src="http://semihcelikol.com/wp-content/uploads/2020/03/searchOnTwitter.png">

Add-Ons Link:  https://addons.mozilla.org/tr/firefox/addon/search-onn-twitter/

Github link: https://github.com/semihcelikol/searchOnTwitter

<b>Manifest.json</b>

```javascript
    {
        "manifest_version": 2,
        "name":"Search on Twitter",
        "description": "Selected text Search on Twitter",
        "version": "1.0",
        "author": "Semih Çelikol",
        "homepage_url": "http://semihcelikol.com",
        "icons": {
            "48": "icons/icon48.png",
            "64": "icons/icon64.png",
            "96": "icons/icon96.png"
        },
        "permissions": ["contextMenus"],
        "background": {
            "scripts": [
                "background.js"
            ]
        }
    }
```

<b>background.js</b>

```javascript
    browser.contextMenus.create({
        id: "tts",
        title: "Search on Twitter",
        contexts: ["selection"]
    });
     
    browser.contextMenus.onClicked.addListener(contextMenuAction);
     
    function contextMenuAction(info, tab){
        const url = "https://twitter.com/search?q="+ info.selectionText+ "&amp;src=typed_query";
     
        browser.tabs.create({url:url});
    }
```

See more: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items