DEV Community: Sam

Simple Diff

Sam — Fri, 30 Oct 2020 07:04:29 +0000

I was building a GitHub Action and needed the jobs to NOT run if a file had just been deleted, so I built Simple Diff.

😄 Fun Fact: It was built 100% on GitHubs' web UI with the help of NPM Worker

mudlabs / simple-diff

A super simple diff checker for your GitHub workflow.

Simple Diff

A super simple diff checker for your GitHub workflow.

Very simple, you provide the action with a path to a file or folder, and it tells you if the file was added, modified, removed, or renamed. It will also output the items name and previous name, particularly usefull if it was just renamed.

Usage

- name: Simple Diff
  uses: mudlabs/simple-diff@v1.2.0
  with
    path: path/to/file

Inputs

Input	Description	Default
`path`	Specifies a path from the root of your repository to the file or folder you want to check. If not provided the action will try to find a path specification from the workflow file itself. The path can be a `glob` string.
`strict`	Specifies the action should fail if the `path` is not in the commits diff tree.	`true`

Outputs

Output	Type

…

View on GitHub

Svelte Transitions?

Sam — Tue, 27 Oct 2020 10:46:00 +0000

How are people handling page/component transitions in their Svelte web apps?

I found Barba.js the other day and want to give it a go. Thought I might try in on a Svelte app I’m building.

Anyone used Barba with Svelte? Would you recommend, or discourage?

NPM Worker

Sam — Sun, 11 Oct 2020 03:03:17 +0000

Sometimes you're working on a repo and you don't want to clone it down to your local machine, init npm, install some packages and then push it all back up.

Now there's NPM Worker. A Github Action that lets you init, install, update, and uninstall npm package on your repo. All from a single configuration file.

It also supports logging activity to an issue, so you can see what's changed from a glance.

mudlabs / npm-worker

Manage node packages on your Github Action repository.

NPM Worker

Manage node packages on your Github Action repository.

Requirements

You must include the YAML configuration file in your repository. If you don't specify its path to the config key in your workflow, the action will try to find it in your .github directory and then in root (./) .

Any of the following are accepted config file names.

npmworker.config.yaml
npmworker.config.yml
npm.worker.config.yaml
npm.worker.config.yml

Usage

1. Implement a Workflow for your action

Here we specify the workflow should only run when a change to our config file is made.

# ./.github/workflows/npmworker.yaml
name: NPM Worker
on
  push
    branches
      - master:
    paths:
      - ./path/to/npmworker.config.yaml
jobs:
  npm:
    runs-on: ubuntu-latest
    name: NPM Worker
    steps:
      - uses: actions/checkout@v2
      - name: Worker
        uses: mudlabs/npm-worker@1.3.0
        with:
          # OPTIONAL: Provide a PAT for the repository,

…

View on GitHub

NativeScript-Play-Pit Actions

Sam — Thu, 17 Sep 2020 13:57:37 +0000

My Workflow

NativeScript-Play-Pit is an opensource repo for NativeScript playgrounds. Anyone can create a new project or contribute to an existing one.

The newly added Github Actions workflow helps make contributing easy by collecting all user submitted data from issue templates. It automatically creates the project files, and opens a new pull request. Once the playground links have been verified by a reviewer the project is added to the list.

Submission Category:

Wacky Wildcards (I guess)

Yaml File or Link to Code

mudlabs / NativeScript-Play-Pit

A growing collection of NativeScript playground projects demonstrating all the AWESOMENESS🤘 of NativeScript.

NativeScript Play Pit

An open-source collection of NativeScript playground projects demonstrating all the AWESOMENESS🤘 of NativeScript.

Requirements

To view a project on your device you'll need the Playground and Preview apps. Once you have the apps you can tap a project link from you phones' browser and it will open in the Preview app. Or you can navigate to the Playground from your computer and select QR Code from the sites UI. Then use the Playground app to scan the QR Code.

iOS	Android
Playground App	Playground App
Preview App	Preview App

Projects

Contributing

All contributions are welcome. The repo deploys GitHub Actions triggered by new issues to create and update Projects; see below for details.

Creating a New Project

First build the project in your chosen flavour…

View on GitHub

Additional Resources / Info

Roll your own comments cleaner

Sam — Tue, 31 Mar 2020 01:34:17 +0000

Update - You actually don't need to do this. But it's still probably worth knowing for non-TypeScript projects, or other file manipulation.

If you need to strip comments from your code before publishing a package, or pushing to production, you might be inclined to spin up Gulp, or install an NPM dependency to do the work for you. But you may not need to.

It’s actually quite easy! (once you know how)

I recently had the need while building an NPM package. The project is written in TypeScript, and the problem arose when I needed to specify the compilerOptions for the TypeScript compiler (funnily enough).

When you’re ready to compile your TypeScript you’ll run the tsc command, or something that ends up calling tsc. When that runs TypeScript looks for a tsconfig.json file. In this file you can specify that comments should be removed.

End of story right, we need comments removed and that’s what removeComments does. Note so fast.

The problem with removeComments is the comments (a.k.a documentation) are not only removed from the generated JavaScript files, but also the declaration files. This might not always be a problem. But for me it was. I didn’t want the comments in the JavaScript, but keeping them in the declaration file is part of the projects documentation strategy.

So, what do we need?

We need to run tsc and compile our code.
Grab the compiled JavaScript file and remove all the comments.

This is a small project with no dependencies. So it seems, shall we say... undesirable to add Gulp or what-not for this little task. But how else do we do it? 🤔

Here’s what I learned.

The Node-CLI has a print command that we use to execute an exported function from a JavaScript file somewhere in our directory. We’ll use it like this;

/** package.json **/
{
 ...
 "scripts": {
    "prepare": "tsc && node -p \"require('./cleaner').clean()\""
 }
 ...
}

When I call npm run prepare in the terminal the TypeScript compiler (tsc) will fire, and then node will look for a file called cleaner.js at the same directory level as package.json. If it finds one, it will attempt to call an exported function named clean.

Lets add the cleaner file, and export the clean function.

// cleaner.js

const fs = require(“fs”); // comes with node.

module.exports.cleaner = function () {
  try {
    let file, data, nocomments;
    const filePath = "dist/index.js";
    const regex = new RegExp(/((^\/\*\*\n(\D\W.+\n)+))/, "gm");

    fs.accessSync(filePath, fs.constants.F_OK);

    file = fs.openSync(filePath, "r+", fs.constants.O_RDWR);
    data = fs.readFileSync(file, "utf8");
    nocomments = data.replace(regex, "");

    fs.writeFileSync(filePath, nocomments);
    return "Comments Removed";
  } catch (error) {
    return error;  
  }
}

And that's it!

When the clean function executes it locates our newly generated JavaScript file, reads in its content, replaces all the comments with nothing, and then writes the new version back to file.

There's probably a bit going on here you're not familiar with; what's all this fs stuff? I didn't know either. But I found this good post that explains it all, so I'll point you there.

Node.js File System API, Beginner Friendly Guid
Oh, and NPM: Short Scale Units, incase you give any Fs about my little project.

This is a pretty specific solution. I now all the comments are block style, so the RegExp has been designed to match that pattern.

/**
 * My block style comment explaining important stuff
 * @param tag explaining the param stuff.
 * @return tag explaining the return stuff.
 */

And I know the compiler will output an index.js file to a generated dist/ directory. But I think this gives a good outline of the type of solution you have available, with no added dependencies.

Update

Thanks to these Redditors

I since learned how to get the same desired outcome for a TypeScript project without needing to roll your own comments remover.

The tsconfig.json file has an available property named extends. We can use that and the command chaining we already used here to remove the comments from the output JavaScript, but leave them in the declaration files.

We'll change our run command in package.json to

"prepare": "tsc && tsc -p ./tsconfig.nocomments.json"

We'll create the new config file, and extend it from the main tsconfig.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "declaration": false,
    "removeComments": true
  }
}

The main, default tsconfig file runs first generating declaration and JavaScript files with comments in place. Then our next call to tsc specifies a path to the new config file (tsconfig.nocomments), and that one does not create a new declaration file, but does create a new JavaScript file with no comments; which replaces the existing file.

So while you don't need to roll your own comments cleaner in a TypeScript project, the strategy outlined here can still be used for non TypeScript projects, or to do some other manipulation of a files content.

Getting tap location in NativeScript

Sam — Thu, 19 Mar 2020 23:31:46 +0000

Until now, if you wanted to get the x/y touch coordinates from a tap event you needed to drop down into the underlying native code.

As of v6.5.0 NativeScript exposes this functionality for you and provides a TapGestureEventData interface. You use it like this;

import { TapGestureEventData } from "@nativescript/core";

export function myTapHandler(args: TapGestureEventData): void {
  const x = args.getX(); // x coordinate in DP
  const y = args.getY(); // y coordinate in DP
  const pointers = args.getPointerCount(); // number of pointers.
  const fingers = pointers > 1 "fingers" : "finger";

  console.log(`You tapped at (${x},${y}), with ${pointers} ${fingers}`);
}

// You tapped at (67, 123), with 1 finger.
// You tapped at (321, 45), with 2 fingers.

The TapGestureEventData is exposed for both tap and doubleTap events.

The returned coordinates are in Device Pixels (DP). To convert them to Device Independent Pixels (DIP) use;

import { layout } from "@nativescript/core";

export myTapHandler(args: TapGestureEventData): void {
  const x_dp = args.getX();
  const x_dip = layout.toDeviceIndependentPixels(x_dp);

  console.log(`Your x coordinate is (DP: ${x_dp}, DIP: ${x_dip})`);
}

// Assuming a screen scale of 3.
// Your x coordinate is (DP: 63, DIP: 21)

There is an open issue requesting a standardisation of UI values provided by the NativeScript API. The issue requests all API properties and methods that hold or provide UI coordinates or view dimensions are in DIP. If the core team accepts the standardisation you will no longer need to do this conversion.

If you need to convert DIP to DP use layout.toDevicePixels(dip);

Shadows in NativeScript

Sam — Fri, 09 Aug 2019 07:26:20 +0000

Before we begin it's worth remembering, there's many ways to skin a cat.

😸 (🔪,✂️,🐶) 🙀

But for this post we're going to look at implementing a shadow in NativeScript using a single view; the label view shown below.

<!--
  main-page.xml

  This is the `xml` layout we'll be referring to throughout.
-->
<Page loaded="onLoaded" xmlns="http://schemas.nativescript.org/tns.xsd">
    <Label id="label" text="Shadow Games"/>
</Page>

iOS Shadows

In the xml above you'll note that no backgroundColor or borderRadius have been set.

That's because on iOS the same view that's implementing a shadow can not also implement a backgroundColor or borderRadius (a.k.a. cornerRadius). Well it can, but they'll need to be set with the shadow, on the views underlying CALayer.

// main-page.js
function onLoaded(args) {
  const page = args.object;
  const label = page.getViewById("label");

  if(page.ios) {
    const layer = label.ios.layer;
    layer.backgroundColor = UIColor.whiteColor.CGColor;
    layer.shadowOffset = CGSizeMake(0, 1);
    layer.shadowOpacity = 1;
    layer.shadowRadius = 5;
    layer.cornerRadius = 20;
    /*
     You can also specify the shadow colour;
     (i.e. layer.shadowColor = UIColor.yellowColor.CGColor)

     But it will default to black if not set.
    */
  }
}

And now we have a shadow in iOS

Android Shadows

Since NativeScript 5.4 we have androidElevation. The feature is currently only available on Android, hence the name.

The androidElevation is an implementation of Material Designs elevation. To use it you just set the elevation and give your view a backgroundColor and a margin (and a borderRadius if you like that).

<Label 
  id="label" 
  text="Shadow Games"

  margin="10"
  borderRadius="20"
  androidElevation="12"
  backgroundColor="white"/>


Android shadow using elevation	iOS shadow has been lost

Unfortunately, setting the backgroundColor and borderRadius will mean our iOS shadows will stop working. To fix that we can scope the offending properties to android.

<Label 
  id="label"
  text="Shadow Games"

  margin="10"
  android:borderRadius="20"
  androidElevation="12"
  android:backgroundColor="white"/>

Voila, we have our cross platform shadows 🤘.


Android shadow	iOS shadow

Where does it break down?

In a word, animation. On Android you won't have any problems animating the views backgroundColor, but on iOS you'll lose the shadow.

Thats because NativeScript animations animate the view properties, but we implemented the iOS backgroundColor (and borderRadius) on the views underlying CALayer. So in order to animate the backgroundColor we're going to have to animate it down there.

// ...
const layer = label.ios.layer;
const newColor = UIColor.yellowColor.CGColor;
const bgAnimation = CABasicAnimation.animationWithKeyPath("background");

bgAnimation.fromValue = layer.backgroundColor;
bgAnimation.toValue = newColor;
bgAnimation.duration = 2 // seconds

// triggers the animation to run.
layer.addAnimationForKey(bgAnimation, "bgAnimation");

// update layer prop to new value after animation, else it pops back to the initial value.
layer.backgroundColor = newColor;

And if you made it this far, here's a Playground with the animations in full effect.

DEV Community: Sam

Simple Diff

😄 Fun Fact: It was built 100% on GitHubs' web UI with the help of NPM Worker

mudlabs / simple-diff

A super simple diff checker for your GitHub workflow.

Simple Diff

Table of Contents

Usage

Inputs

Outputs

Svelte Transitions?

NPM Worker

mudlabs / npm-worker

Manage node packages on your Github Action repository.

NPM Worker

Table of Contents

Requirements

Usage

1. Implement a Workflow for your action

NativeScript-Play-Pit Actions

My Workflow

Submission Category:

Yaml File or Link to Code

mudlabs / NativeScript-Play-Pit

A growing collection of NativeScript playground projects demonstrating all the AWESOMENESS🤘 of NativeScript.

NativeScript Play Pit

Table of Contents

Requirements

Projects

Contributing

Creating a New Project

Additional Resources / Info

Roll your own comments cleaner

Update - You actually don't need to do this. But it's still probably worth knowing for non-TypeScript projects, or other file manipulation.

Here’s what I learned.

Update

Thanks to these Redditors

Getting tap location in NativeScript

Shadows in NativeScript

😸 (🔪,✂️,🐶) 🙀

iOS Shadows

Android Shadows

Where does it break down?