DEV Community: Kai Oswald

Complete CI/CD for Flutter Apps

Kai Oswald — Wed, 24 Nov 2021 19:10:45 +0000

My Workflow

This GitHub Action workflow can be used to fully automate your build, test and deployment processes for Flutter.
All Flutter build targets are supported with this workflow: android, iOS and web.
When pushing without a tag this workflow will analyze and test your Flutter app.
When pushing with a tag (starting with 'v' in this case) this workflow additionally creates a release including all artifacts needed for deployment.
These artifacts can then be used to deploy your apps.
I have added the firebase hosting deploy as an example for web deployment.

This can be further extended to deploy the iOS and Android app to a test platform like testflight or directly to the platform specific stores (don't forget to sign your apps 😄).

This workflow is a great starting point for any Flutter app and can be tweaked to your personal preference.

Submission Category:

DIY Deployments, Phone Friendly

Yaml File or Link to Code

name: Build Flutter apps

on:
  push:
    branches:
      - main
    tags:
      - v*


jobs:
  build:
    runs-on: macos-latest

    steps:
      - uses: actions/checkout@v2
      - uses: subosito/flutter-action@v1.5.3
        with:
          channel: 'stable'

      - name: Install Dependencies
        run: flutter packages get

      - name: Analyze
        run: flutter analyze lib test

      - name: Run tests
        run: flutter test --no-pub --coverage --test-randomize-ordering-seed random packages test

      - name: Build Android App
        if: startsWith(github.ref, 'refs/tags/v')
        run: flutter build apk

      - name: Build iOS App
        if: startsWith(github.ref, 'refs/tags/v')
        run: |
            flutter build ios --no-codesign
            cd build/ios/iphoneos
            mkdir Payload
            cd Payload
            ln -s ../Runner.app
            cd ..
            zip -r app.ipa Payload

      - name: Build web
        if: startsWith(github.ref, 'refs/tags/v')
        run: |
          flutter build web
          cd build/web
          zip -r web-app.zip .

      - name: Archive Production Artifact
        if: startsWith(github.ref, 'refs/tags/v')
        uses: actions/upload-artifact@master
        with:
          name: web
          path: build/web

      - name: Release Apps
        if: startsWith(github.ref, 'refs/tags/v')
        uses: ncipollo/release-action@v1
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          artifacts: 'build/app/outputs/**/*.apk,build/ios/iphoneos/app.ipa,build/web/web-app.zip'

  deploy:
    if: startsWith(github.ref, 'refs/tags/v')
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: web
          path: build/web

      - name: Deploy to Firebase hosting
        uses: w9jds/firebase-action@master
        with:
          args: deploy --message \"${{ github.event.head_commit.message }}\" --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Additional Resources / Info

We currently use this workflow for our own Flutter app that is not yet published and not yet open-source, but are planning on doing so in the near future!

5 tools no developer needs

Kai Oswald — Thu, 20 Aug 2020 10:56:13 +0000

A satirical approach to tools that exist, but no developer actually needs.

1: Power Mode

Unleash your true developer power with power mode extensions!

Do you find writing code boring? Well, you just didn't have the right extensions installed.

With this extension you can immerse yourself into your code and enable your inner coder beast by looking at increasing combo counters, screen-shaking and fancy particles!

But it gets better: Customizable particles!

Missing your old friend Clippy? No more!

If you're using Hyper, you can even unleash your full power in the terminal.

Links:

2: Rainbow fart

Never get the attribution you deserve for your code?

This VS Code extension compliments you for writing code with an automated computer voice.

The code quality doesn't matter at all, even shitty code will get complimented.

Not an actual rainbow fart btw:

Rainbow Fart is a literal translation word from Chinese, which means giving somebody exaggerated compliment that even seems a little fake. It is not connected to any specific group or individuals.

Links:

VS Code

3: Explodal

Do your dialogs not get the attention they deserve? Just add explodal to your projects.

Links:

GitHub

4: Obnoxious.css

Speaking of lack of attention. With this css library you will guarantee the attention of your users.

You can choose between 5 highly efficient animations.

My favorite among these beauties is probably "Intensifies".

Links:

GitHub

5: Git push rockets

Would you really forget to push your code if that triggers a rocket launch? I can tell you that my git pushes have increased drastically since I've used some of these tools.

Terminal rocket for Hyper

Not realistic enough? Cover your whole editor with this VS Code extension

Links:

Concluding words

This was a fun article to write. Definitely more on the side of "Too deep into the code extension marketplace".

Install them for fun or just for the memes.

Let's connect on twitter.

What tools do you use to create presentations?

Kai Oswald — Fri, 11 Oct 2019 11:58:02 +0000

Apart from the obvious PowerPoint; what tools do you use to create presentations especially as a "techy" person?

What makes you cringe looking back at your beginner self?

Kai Oswald — Thu, 10 Oct 2019 10:39:03 +0000

I'll start.
The application for my very first job contained the following:

The programming language HTML and web design appeals to me.

ASP.NET Core Integration Testing: Protected endpoints

Kai Oswald — Mon, 07 Oct 2019 08:17:59 +0000

In this post I'll describe how you can test protected API endpoints.
I'll use the two most common scenarios: Cookie & JWT Authentication.

I have also created a public repo with the full code. If you want to follow step by step you can also look at the commit history.

Set up the `IntegrationTestInitializer`

If you've read my introduction to integration testing in ASP.NET Core you'll notice that we've changed the IntegrationTestInitializer quite a bit, because a lot of work has been put into Microsoft.AspNetCore.Mvc.Testing to allow for more configuration. By default the TestServer didn't handle cookies automatically, but when inheriting from WebApplicationFactory<T> the cookies are handled by default. This also cleans up the code.

Introduction to ASP.NET Core Integration Testing

Kai Oswald ・ Sep 10 '19

#csharp #aspnetcore #testing #dotnet

> Install-Package Microsoft.AspNetCore.Mvc.Testing

[TestClass]
public abstract class IntegrationTestInitializer : WebApplicationFactory<Startup>
{
    protected HttpClient _client;

    protected override void ConfigureWebHost(IWebHostBuilder builder)
    {
        builder.UseEnvironment("Testing")
            .UseStartup<Startup>();
        base.ConfigureWebHost(builder);
    }

    [TestInitialize]
    public void Setup()
    {
        var builder = new WebHostBuilder()
            .UseEnvironment("Testing")
            .UseStartup<Startup>();

        _client = this.CreateClient();
    }
}

Note that we've also set a custom environment Testing for our WebHost.
This will be used so we can decouple our testing code from our production code.

Cookie Authentication

The cookie authentication setup in the API could look similiar to this:

services.AddAuthentication(o => o.DefaultScheme = "Cookies")
    .AddCookie("Cookies", o =>
    {
        o.Cookie.Name = "auth_cookie";
        o.Cookie.HttpOnly = true;
        o.Events = new CookieAuthenticationEvents
        {
            OnRedirectToLogin = redirectContext =>
            {
                redirectContext.HttpContext.Response.StatusCode = 401;
                return Task.CompletedTask;
            }
        };
    });

This configuration basically sets up our HTTP Only Cookie scheme that returns a 401 on unauthenticated requests (by default a 302 redirect to the login page would be returned).

Then the login Method:

[HttpPost("Login")]
public async Task<IActionResult> Login([FromBody] UserLoginModel user)
{
    ClaimsPrincipal claimsPrincipal = null;

    // Return a test user when environment is our Test environment
    if (_env.EnvironmentName == "Testing")
    {
        var claimsIdentity = new ClaimsIdentity(new[]
        {
            new Claim(ClaimTypes.Name, user.UserName)
        }, "Cookies");

        claimsPrincipal = new ClaimsPrincipal(claimsIdentity);
    }
    else
    {
        // you should validate the userName and password here and load the specified user
        // We'll just return a default user to keep things simple...
    }
    await Request.HttpContext.SignInAsync("Cookies", claimsPrincipal);
    return NoContent();
}

Note that we just return a default user when we're in the test environment for now.
In a future post I'll also cover invalid users and a simple Database setup.

Testing the unauthorized client

With the authentication method in tact, you should also test if the protected endpoints behave correctly when the client is unauthorized. We expect a HTTP status code of 401 if an unauthorized client tries to access an authorized endpoint.

[TestMethod]
public async Task GetUsersUnauthorizedShouldReturn401()
{
    var response = await _client.GetAsync("api/users");

    Assert.AreEqual(HttpStatusCode.Unauthorized, response.StatusCode);
}

Testing the authorized client

In C# the HttpClient handles cookies by default, so all we need to do now is to make a POST request to the Login method providing user credentials before we can access protected endpoints.

private async Task PerformLogin(string userName, string password)
{
    var user = new UserLoginModel
    {
        UserName = userName,
        Password = password
    };

    var res = await _client.PostAsJsonAsync("api/account/login", user);
}

[TestMethod]
public async Task CanGetUsers()
{
    List<string> expectedResponse = new List<string> { "Foo", "Bar", "Baz" };

    await PerformLogin("Test", "hunter2");

    var responseJson = await _client.GetStringAsync("api/users");
    List<string> actualResponse = JsonConvert.DeserializeObject<List<string>>(responseJson);

    CollectionAssert.AreEqual(expectedResponse, actualResponse);
}

JWT Authentication

To set up JWT Authentication we have to add it as an Authentication Scheme in our Startup.cs

// Configure Authentication
services.AddAuthentication(o => o.DefaultScheme = "Cookies")
    .AddCookie("Cookies", o =>
    {
        // omitted
    })
    .AddJwtBearer("Token", o => 
    {
        var key = Encoding.ASCII.GetBytes(appSettings.Secret);
        o.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuerSigningKey = true,
            IssuerSigningKey = new SymmetricSecurityKey(key),
            ValidateIssuer = false,
            ValidateAudience = false
        };
    });

I won't go into too much detail how to set up JWT Authentication, but you can look at the GitHub repository containing the full source code. Note that we now have 2 valid Authentication methods active: Cookie & JWT, with Cookies being the default. So if we want to support both authentication methods we'd have to mark our Controller/Action with both authentication schemes.

 [Authorize(AuthenticationSchemes= "Cookies,Token")]

Testing the unauthorized client

Let's write our test with a random token where the authentication should fail.

[TestMethod]
public async Task GetUsersJwtInvalidTokenShouldReturnUnauthorized()
{
    _client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", "invalid_token");

    var response = await _client.GetAsync("api/users");
    Assert.AreEqual(HttpStatusCode.Unauthorized, response.StatusCode);
}

Testing the authorized client

To obtain a valid bearer token, we have to make a POST request to our token endpoint providing our credentials.

private async Task<string> GetToken(string userName, string password)
{
    var user = new UserLoginModel
    {
        UserName = userName,
        Password = password
    };

    var res = await _client.PostAsJsonAsync("api/account/token", user);

    if(!res.IsSuccessStatusCode) return null;

    var userModel = await res.Content.ReadAsAsync<User>();

    return userModel?.Token;
}

Then we can set the token for the Authorization header on the test client.

[TestMethod]
public async Task GetUsersJwtInvalidTokenShouldReturnUnauthorized()
{
    _client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", "invalid_token");

    var response = await _client.GetAsync("api/users");
    Assert.AreEqual(HttpStatusCode.Unauthorized, response.StatusCode);
}

Conclusion

Now we can test Cookie and JWT protected API endpoints.

In the next post I'll describe how you can test database access using an in-memory database approach.

How to gain traffic for your open-source library

Kai Oswald — Thu, 12 Sep 2019 12:51:01 +0000

In this post I will describe you a process in how you can get traffic for your open-source libraries.

Introduction

I made my first open-source library that I knew can be useful for other people too. So I created an npm-package, but it didn't find a lot of traffic. It was until I got my very first random GitHub star that motivated me to spread the word about the package I built. The following steps will describe the process I took to grow the weekly download count to 600+ and GitHub stars to 80+.

Create & Publish the package

The first thing you'll have to do is create a reusable package of your library and publish it to the public registry of the ecosystem your package belongs to.
Here's a quick overview of some of the more popular registries.

language	registry
JavaScript	npm
.NET	NuGet
Ruby	Rubygems
Python	pip / PyPi

If your language is not listed don't worry, there's probably a public registry too. You'll probably find it with a quick google search: {language} package registry.

Good README and documentation

Add a good README to your repository, so other developers can quickly get started using your library.
A good README should include at the minimum:

What the package is about
How to install the package
A sample how to use the package
How to customize the package

If your package is for the UI, you should also include a visual demo.
This can be just an Image/Gif or even a full documentation site dedicated to it.

For the documentation you can quickly get started with static site generators and host them for free on GitHub pages.
GitHub has a nice article of the process.

Post in related forums

Find forums related to your library. You could just submit the link to your repository or write a full blog post about what problems the library solves. Examples for such forums can be:

reddit
dev.to
hackernews
discord

Post on social media

Make a post on social media with related hashtags showcasing your library.

Submit it to a newsletter

If the ecosystem of your library has an official newsletter you can submit it there!
Often times you just have to submit the link to your repository. Again, you could also write a full blog post about it and submit the blog post to the newsletter.

Look for an awesome list

Awesome lists are lists of awesome tools for a particular ecosystem. There even is an awesome list of awesome lists. Find your list and create a pull-request with your added repository.

Concluding

The most important thing however about open-source is to provide added value for others. And if you provide added value your package will be used.

For the curious here are some stats and a link to my repository.

kai-oswald / vue-svg-transition

Create 2-state, SVG-powered transitions

vue-svg-transition

Create 2-state, SVG-powered animated icons

Codesandbox Demo

inspired by Icon Transition Generator

Quick start

npm install --save vue-svg-transition

import Vue from 'vue';
import SvgTransition from 'vue-svg-transition';

Vue.use(SvgTransition);

Template Example

It is recommended to use vue-svg-loader so we can import our SVGs from external files. But it's possible to use inline SVG as well.

<template>
    <svg-transition :size="size">
        <MyIcon slot="initial" />
        <MyOtherIcon />
    </svg-transition>
</template>

<script>
import MyIcon from "./assets/MyIcon.svg";
import MyOtherIcon from "./assets/MyOtherIcon.svg";

export default {
    components: {
        MyIcon,
        MyOtherIcon
    }
    data() {
        return {
            size: {
                width: 48,
                height: 48
            }
        }
    }
}
</script>

Trigger programmatically via ref

<svg-transition ref="transition"

…

View on GitHub

Introduction to ASP.NET Core Integration Testing

Kai Oswald — Tue, 10 Sep 2019 12:46:55 +0000

In this post I'll give you a quick introduction into how you can test your ASP.NET Core Controllers.

Please note that the term "Integration Testing" also covers other cases, such as testing data access or accessing the file system.

Set up the project

A common guideline is to structure your ASP.NET Core projects in the following way:

.
├── src
│   └── MyProject.Api
│       └── Controllers
│           └── ValuesController
└── test
    ├── IntegrationTests
    │   └── MyProject.Api.Test
    │       └── ValuesControllerTest
    └── UnitTests

Install the TestHost NuGet

Create a .NET Core Test project and then install the Microsoft.AspNetCore.TestHost package.
This package will provide options to configure the TestServer.

> Install-Package Microsoft.AspNetCore.TestHost

Create the base class

Create a base class that our ControllerTest classes can inherit from. We will set up the TestServer and HttpClient used to perform requests.

[TestClass]
public abstract class IntegrationTestInitializer
{
    protected HttpClient _client;

    [TestInitialize]
    public void Setup()
    {
        var builder = new WebHostBuilder()
            .UseStartup<Startup>();
        var server = new TestServer(builder);

        _client = server.CreateClient();
    }
}

Create a `ControllerTest`

Let's pretend the Controller we want to test looks like this

[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
    // GET api/values
    [HttpGet]
    public ActionResult<IEnumerable<string>> Get()
    {
        return new string[] { "value1", "value2" };
    }
}

With the base class set up, we can then simply inherit from the base class and use our _client to perform requests against the API.

[TestClass]
public class ValuesControllerTest : IntegrationTestInitializer
{
    [TestMethod]
    public async Task CanGetValues()
    {
        List<string> expectedResponse = new List<string> { "value1", "value2" };

        var responseJson = await _client.GetStringAsync("api/values");
        List<string> actualResponse = JsonConvert.DeserializeObject<List<string>>(responseJson);

        Assert.AreEqual(expectedResponse.Count, actualResponse.Count);
        foreach(var expectedValue in expectedResponse)
        {
            Assert.IsTrue(actualResponse.Contains(expectedValue));
        }
    }
}

This post described how you can integration test a very basic ASP.NET Core API.

In the real world you'll probably have a database behind the API that must be accessed and some endpoints may also be protected by an API-Key or JWT.
This post however should only serve as a quick introduction into integration testing.

kai-oswald / IntegrationTestSample

An ASP.NET Core Sample project showcasing how to write integration tests

IntegrationTestSample

An ASP.NET Core Sample project showcasing how to integration test against Controllers

View on GitHub

CSS Transform/Detransform

Kai Oswald — Fri, 06 Sep 2019 13:25:19 +0000

When you only want the transform on the parent element you'll want to apply the negative transform on the child.
This is especially useful for skew and rotate.

.container {
    transform: skewX(15deg)
}
.container > * {
    transform: skewX(-15deg);
}

<div class="container">
    <div class="content">
        This content is not transformed
    </div>
</div>

Now with CSS variables. This uses calc() to negate the value.

:root {
    --value: 15deg;
}
.container {
    transform: skewX(var(--value))
}
.container > * {
    transform: skewX(calc(-1 * var(--value)));
}

Adding media-queries to handle different screen sizes with different values (rotating an element can make it really big depending on its width).

:root {
    --value: 15deg;
}

@media screen and (min-width: 1440px) {
    :root {
        --value: 5deg;
    }
}

.container {
    transform: skewX(var(--value))
}
.container > * {
    transform: skewX(calc(-1 * var(--value)));
}

Another example using SkewY on a full-width container

I created an extension that lets you ignore tags on dev.to

Kai Oswald — Fri, 05 Jul 2019 07:19:17 +0000

I'm following the #webdev and the #vue tags, but my feed is full of #react, #python and #angular posts. I don't care about these, but many articles are tagged with multiple tags like #react, #webdev.

So what are we gonna do about it?
Wait until dev.to introduces the option to ignore tags?
Follow the tag and set its relevance to -999?
Since we are lazy developers, there's only one remaining option. Write our own extension ¯\(ツ)/¯.

Introducing Dev.no

So how does it work?
The extension can essentially be broken down to this little snippet

const tags = ['react', 'python']; // hardcoded tags list for demo purposes
tags.forEach(tag => {
    var tagElements = Array.from(
      document.querySelectorAll(`.single-article .tags a[href='/t/${tag}']`)
    );

    tagElements.forEach(tagElement => {
      // the whole article is located 2 elements above (parent.parent);
      var articleElement = tagElement.parentElement.parentElement;
      articleElement.style.display = "none";      
    });
  });

To better understand that snippet, let's have a look how an article looks like on the dev.to main page and break it down to the essential elements we need to focus on.

<div class="single-article single-article-small-pic">
  <!-- removed -->
  <div class="tags">
    <a href="/t/javascript"><span class="tag">#javascript</span></a>
    <a href="/t/webdev"><span class="tag">#webdev</span></a>
    <a href="/t/tutorial"><span class="tag">#tutorial</span></a>
    <a href="/t/discuss"><span class="tag">#discuss</span></a>
  </div>  
  <!-- removed -->
</div>

The tag 'react' can then for example be located with the following selector
.single-article .tags a[href='/t/react'].

The full article can then be accessed by calling .parentElement 2 times.

The extension also has an options UI, which is built with vue, where you can manage the ignored tags and view some nice stats. I'm not really satisfied with how it looks right now, so feel free to shoot a PR :)

This extension may become obsolete as soon as dev.to rolls out the option to ignore tags.

It's open source btw, so make sure to check out the repo and download the extension.

kai-oswald / dev.no

Chrome extension to ignore tags on dev.to

dev.no

Chrome extension to ignore tags on dev.to

Download link

View on GitHub

Tell me about your custom vue directives!

Kai Oswald — Tue, 18 Jun 2019 15:42:48 +0000

I didn't find a useful case where I needed a custom vue directive in my side-projects yet, but maybe you did. Tell me about it!

Easily create 2-state, SVG-powered transitions with vue

Kai Oswald — Wed, 12 Jun 2019 16:38:25 +0000

With the library vue-svg-transition you can easily add micro-animations to your vue application.

So how does this library work?
Basically one SVG is scaled down while the other SVG is scaled up simultaneously. Using the right timing this creates a very nice transition between these two.

Installing

npm i vue-svg-transition

import Vue from 'vue';
import SvgTransition from 'vue-svg-transition';

Vue.use(SvgTransition);

Usage

Using vue-svg-loader, we can import SVGs and use them like vue components.
This leads to a very concise syntax.

<template>
    <svg-transition>
        <MyIcon slot="initial" />
        <MyOtherIcon />
    </svg-transition>
</template>

<script>
import MyIcon from "./assets/MyIcon.svg";
import MyOtherIcon from "./assets/MyOtherIcon.svg";

export default {
    components: {
        MyIcon,
        MyOtherIcon
    }
}
</script>

And that's already all the magic. By default the transition triggers on click, but you can also pass hover or none with the trigger prop.

<svg-transition trigger="hover">
<!-- your icons -->
</svg-transition>

You can also trigger the transition programmatically using ref.

<svg-transition ref="transition" trigger="none">
<!-- your icons -->
</svg-transition>

<script>
export default {
    mounted() {
        this.$refs.transition.performTransition();
    }
}
</script>

kai-oswald / vue-svg-transition

Create 2-state, SVG-powered transitions

vue-svg-transition

Create 2-state, SVG-powered animated icons

Codesandbox Demo

inspired by Icon Transition Generator

Quick start

npm install --save vue-svg-transition

import Vue from 'vue';
import SvgTransition from 'vue-svg-transition';
Vue.use(SvgTransition);

Template Example

It is recommended to use vue-svg-loader so we can import our SVGs from external files But it's possible to use inline SVG as well.

<template&gt
    <svg-transition :size="size">
        <MyIcon slot="initial" />
        <MyOtherIcon />
    </svg-transition>
</template>

<script>
import MyIcon from "./assets/MyIcon.svg";
import MyOtherIcon from "./assets/MyOtherIcon.svg";

export default {
    components: {
        MyIcon,
        MyOtherIcon
    }
    data() {
        return {
            size: {
                width: 48,
                height: 48
            }
        }
    }
}
</script>

Trigger programmatically via ref

<svg-transition ref="transition"

…

View on GitHub

Dynamic text effects with css mix-blend-mode

Kai Oswald — Fri, 10 May 2019 12:05:04 +0000

I recently discovered the css property mix-blend-mode, which describes how the text blends into the background, and started experimenting with it.
You can achieve dynamic text colors without adjusting the text-color manually. Even one single character can have multiple colors using this technique. This can lead us to some.. let's call them interesting .. results.

This pen uses mix-blend-mode: difference to invert the color on the background.

The background can also be transformed and animated.

When using the same text and background color, we can get creative and create reveal effects. In this specific pen, we've set the mix-blend-mode: darken to preserve the dark text.

A slightly more advanced method is used in the following pen. It uses a mask with a background image, fixed text and mix-blend-mode: color-dodge.

Browser Support

I'm excited about your comments and ideas how mix-blend-mode can be further (ab-)used.

DEV Community: Kai Oswald

Complete CI/CD for Flutter Apps

My Workflow

Submission Category:

Yaml File or Link to Code

Additional Resources / Info

5 tools no developer needs

1: Power Mode

2: Rainbow fart

3: Explodal

4: Obnoxious.css

5: Git push rockets

Concluding words

What tools do you use to create presentations?

What makes you cringe looking back at your beginner self?

ASP.NET Core Integration Testing: Protected endpoints

Set up the IntegrationTestInitializer

Introduction to ASP.NET Core Integration Testing

Kai Oswald ・ Sep 10 '19

Cookie Authentication

Testing the unauthorized client

Testing the authorized client

JWT Authentication

Testing the unauthorized client

Testing the authorized client

Conclusion

How to gain traffic for your open-source library

Introduction

Create & Publish the package

Good README and documentation

Post in related forums

Post on social media

Submit it to a newsletter

Look for an awesome list

Concluding

kai-oswald / vue-svg-transition

Create 2-state, SVG-powered transitions

vue-svg-transition

Quick start

Template Example

Introduction to ASP.NET Core Integration Testing

Set up the project

Install the TestHost NuGet

Create the base class

Create a ControllerTest

kai-oswald / IntegrationTestSample

An ASP.NET Core Sample project showcasing how to write integration tests

IntegrationTestSample

CSS Transform/Detransform

I created an extension that lets you ignore tags on dev.to

Introducing Dev.no

kai-oswald / dev.no

Chrome extension to ignore tags on dev.to

dev.no

Tell me about your custom vue directives!

Easily create 2-state, SVG-powered transitions with vue

Installing

Usage

kai-oswald / vue-svg-transition

Create 2-state, SVG-powered transitions

vue-svg-transition

Quick start

Template Example

Dynamic text effects with css mix-blend-mode

Browser Support

Set up the `IntegrationTestInitializer`

Create a `ControllerTest`