PHP-ddd-example

 🐘🎯 Hexagonal Architecture, DDD & CQRS in PHP   

Example of a PHP application using Domain-Driven Design (DDD) and Command Query Responsibility Segregation (CQRS) principles keeping the code as simple as possible. 

🚀 Environment Setup

🐳 Needed tools

1. Install Docker
2. Clone this project: git clone https://github.com/CodelyTV/php-ddd-example php-ddd-example
3. Move to the project folder: cd php-ddd-example

🛠️ Environment configuration

1. Create a local environment file (cp .env .env.local) if you want to modify any parameter

🔥 Application execution

1. Install all the dependencies and bring up the project with Docker executing: make build
2. Then you'll have 3 apps available (2 APIs and 1 Frontend):
   • Mooc Backend: http://localhost:8030/health-check
   • Backoffice Backend: http://localhost:8040/health-check
   • Backoffice Frontend: http://localhost:8041/health-check

✅ Tests execution

1. Install the dependencies if you haven't done it previously: make deps
2. Execute PHPUnit and Behat tests: make test

👩‍💻 Project explanation

This project tries to be a MOOC (Massive Open Online Course) platform. It's decoupled from any framework, but it has some Symfony and Laravel implementations.

⛱️ Bounded Contexts

• Mooc: Place to look in if you wanna see some code 🙂. Massive Open Online Courses public platform with users, videos, notifications, and so on.
• Backoffice: Here you'll find the use cases needed by the Customer Support department in order to manage users, courses, videos, and so on.

🎯 Hexagonal Architecture

This repository follows the Hexagonal Architecture pattern. Also, it's structured using modules. With this, we can see that the current structure of a Bounded Context is:

$ tree -L 4 src

src
|-- Mooc // Company subdomain / Bounded Context: Features related to one of the company business lines / products
|   `-- Videos // Some Module inside the Mooc context
|       |-- Application
|       |   |-- Create // Inside the application layer all is structured by actions
|       |   |   |-- CreateVideoCommand.php
|       |   |   |-- CreateVideoCommandHandler.php
|       |   |   `-- VideoCreator.php
|       |   |-- Find
|       |   |-- Trim
|       |   `-- Update
|       |-- Domain
|       |   |-- Video.php // The Aggregate of the Module
|       |   |-- VideoCreatedDomainEvent.php // A Domain Event
|       |   |-- VideoFinder.php
|       |   |-- VideoId.php
|       |   |-- VideoNotFound.php
|       |   |-- VideoRepository.php // The `Interface` of the repository is inside Domain
|       |   |-- VideoTitle.php
|       |   |-- VideoType.php
|       |   |-- VideoUrl.php
|       |   `-- Videos.php // A collection of our Aggregate
|       `-- Infrastructure // The infrastructure of our module
|           |-- DependencyInjection
|           `-- Persistence
|               `--MySqlVideoRepository.php // An implementation of the repository
`-- Shared // Shared Kernel: Common infrastructure and domain shared between the different Bounded Contexts
    |-- Domain
    `-- Infrastructure

Repository pattern

Our repositories try to be as simple as possible usually only containing 2 methods search and save. If we need some query with more filters we use the Specification pattern also known as Criteria pattern. So we add a searchByCriteria method.

You can see an example here and its implementation here.

Aggregates

You can see an example of an aggregate here. All aggregates should extend the AggregateRoot.

Command Bus

There is 1 implementations of the command bus.

1. Sync using the Symfony Message Bus

Query Bus

The Query Bus uses the Symfony Message Bus.

Event Bus

The Event Bus uses the Symfony Message Bus. The MySql Bus uses a MySql+Pulling as a bus. The RabbitMQ Bus uses RabbitMQ C extension.

📱 Monitoring

Every time a domain event is published it's exported to Prometheus. You can access to the Prometheus panel here.

🤔 Contributing

There are some things missing (add swagger, improve documentation...), feel free to add this if you want! If you want some guidelines feel free to contact us :)

🤩 Extra

This code was shown in the From framework coupled code to #microservices through #DDD talk and doubts where answered in the DDD y CQRS: Preguntas Frecuentes video.

🎥 Used in the CodelyTV Pro courses:

• 🇪🇸 DDD in PHP
• 🇪🇸 Arquitectura Hexagonal
• 🇪🇸 CQRS: Command Query Responsibility Segregation
• 🇪🇸 Comunicación entre microservicios: Event-Driven Architecture

Download Details:

Author: CodelyTV
Source Code: https://github.com/CodelyTV/php-ddd-example 

#php #example #testing #docker 

ImageR: intense-images Htmlwidget for R

intense-images htmlwidget

This is alpha, but if you do everything just right you might get some worthwhile output. Thanks so much to @tholman for the underlying Javascript library intense-images. Check out Tim's other library giflinks for a laugh.

As I was working on imageR, I discovered this poster Redesign of cluster heatmap visualization technique through this tweet. The full-page zoomable is very similar to the effect achieved by imageR, so imageR might be a good preview for your next conference poster.

Simple Example

`# devtools::install_github("timelyportfolio/imageR")

library(imageR)

tf <- tempfile()
png( file = tf, height = 400, width = 600 )
plot(1:50)
dev.off()

intense(base64::img(tf))

Fancy Lattice 3d in Bootstrap

library(shiny)
library(htmltools)
library(lattice)
library(imageR)

tf <- tempfile()
tf2 <- tempfile()
png( file = tf, height = 400, width = 1600 )
  #example from ?lattice::cloud
  cloud(Sepal.Length ~ Petal.Length * Petal.Width | Species, data = iris,
    screen = list(x = -90, y = 70), distance = .4, zoom = .6)
dev.off()

png( file = tf2, height = 1000, width = 1000)
  #### example from http://www.cceb.med.upenn.edu/pages/courses/BSTA670/2012/R_3D_plot_ex.r
  #--------------------------------
  # persp plot of function
  #--------------------------------
  x <- seq(-10, 10, length= 30)
  y <- x
  f <- function(x,y) { r <- sqrt(x^2+y^2); 10 * sin(r)/r }
  z <- outer(x, y, f)
  z[is.na(z)] <- 1
  op <- par(bg = "white")
  persp(x, y, z, theta = 30, phi = 30, expand = 0.5, col = "lightblue")
dev.off()

html_print(fluidPage(
  tags$h1("Cloud and Wireframe from Lattice")
  ,fluidRow(style = "height:60%; overflow:hidden;"
    ,column(width = 6,  intense(base64::img(tf)))
    ,column(width = 6,  intense(base64::img(tf2)))
  )
))

With a Title and Caption

tf <- tempfile()
png( file = tf, height = 600, width = 1400 )
plot(1:50)
dev.off()

intense(
  tags$img(
    style = "height:25%;"
    ,"data-title" = "sample intense plot"
    ,"data-caption" = "imageR at work"
    ,src = paste0("data:image/png;base64,",base64enc::base64encode(tf))
  )
)

With a Non-img Target

library(htmltools)
library(imageR)
library(ggplot2)

tf <- tempfile()

png( file = tf, height = 1400, width = 1400 )
  ggplot(diamonds, aes(carat, price)) + geom_hex()
dev.off()

intense(
  tags$div(
    tags$h1("does this work? click and see")
    ,"data-image" = paste0("data:image/png;base64,",base64enc::base64encode(tf))
  )
)

Composeable with Other htmlwidgets

library(htmltools)
library(curl)
library(navr)
library(sortableR)
library(imageR)

n1 <- navr(
  selector = "#sortableR-toolbar"
  ,taglist = tagList(
    tags$ul(id = "sort-navr"
      ,style="line-height:120px; text-align:center; vertical-align:middle;"
      ,tags$li(
        style="border: solid 0.1em white;border-radius:100%;line-height:inherit;width:130px;height:130px;"
        , class="fa fa-binoculars fa-4x"
        #  attribution everywhere Creative Commons Flickr
        #  awesome picture by https://www.flickr.com/photos/12859033@N00/2288766662/
        , "data-image" = paste0(
          "data:image/jpg;base64,"
          ,base64enc::base64encode(
            curl("https://farm4.staticflickr.com/3133/2288766662_c40c168b76_o.jpg","rb")
          )
        )
        , "data-title" = "Binoculars, a working collection"
        , "data-caption" = "awesome picture courtesy Flickr Creative Commons
            <a href = 'https://www.flickr.com/photos/12859033@N00/2288766662/'>jlcwalker</a>"
      )        
      ,tags$li(
        style="border: solid 0.1em white;border-radius:100%;line-height:inherit;width:130px;height:130px;"
        , class="fa fa-camera fa-4x"
        #  attribution everywhere Creative Commons Flickr
        #  awesome picture by https://www.flickr.com/photos/s58y/5607717791
        , "data-image" = paste0(
          "data:image/jpg;base64,"
          ,base64enc::base64encode(
            curl("https://farm6.staticflickr.com/5309/5607717791_b030229247_o.jpg","rb")
          )
        )
        , "data-title" = "Leica IIIc converted to IIIf BD ST"
        , "data-caption" = "awesome picture courtesy Flickr Creative Commons
            <a href = 'https://www.flickr.com/photos/s58y/5607717791'>s58y</a>"
      )
    )
  )
)

html_print(tagList(
  tags$div(
    id = "sortableR-toolbar"
    ,style="width:300px;border: dashed 0.2em lightgray; float:left;"
    ,tags$h3("sortableR Icons for Intense Images")
    ,"These icons drag and drop. Click on them for an"
    ,tags$strong("intense")
    ,"result."
  )
  ,add_font_awesome(n1)
  ,sortableR("sort-navr")
  ,intense( selector = "#sort-navr li" )
))

Download Details:

Author: Timelyportfolio
Source Code: https://github.com/timelyportfolio/imageR 
License: MIT license

#r #image 

A Collection Of Examples for The intern Testing Library

intern-examples

Intern is a complete test system for JavaScript designed to help you write and run consistent, high-quality test cases for your JavaScript libraries and applications. It can be used to test any JavaScript code.

This repository is a collection of examples of using Intern in web applications. Use these examples as your guide to integrate Intern into your projects! Every example has a README that will guide you through the process of setting it up.

Intern 4 Examples

dojo-example

It is based on the TodoMVC Dojo Example.

Setup

Install the JRE or JDK. This demo uses Selenium, which requires Java, to run WebDriver tests.

Install node modules

$ npm install

Running tests

Run unit and functional tests in Chrome

$ npm test

Run unit and functional tests in other browsers

$ npm test config=@firefox
$ npm test config=@ie

Note that the above commands all require that the browser be available on the test system.

electron-example

This example is based on the React Redux example, running in Electron. It contains two sets of functional tests, one that uses Intern’s built-in WebDriver library, and one that uses Spectron. It also contains unit tests, but these are run in Node rather than Electron as Intern 4.x does not currently support running unit tests in Electron.

Setup

Install the JRE or JDK. This demo uses Selenium, which requires Java, to run WebDriver tests.

Install node modules

$ npm install

Build the example

$ npm run build

Running Tests

Unit tests (in Node) and functional tests

$ npm test

On Windows, run

$ npm test config=@windows

WebDriver tests using Spectron

$ npm test config=@spectron

jquery-example

This example is based on the TodoMVC jQuery Example.

Setup

Install the JRE or JDK. This demo uses Selenium, which requires Java, to run WebDriver tests.

Install node modules

npm install

Running tests

To run the unit and functional tests in Chrome:

$ npm test

react-enzyme-example

This example is based on the React Redux example.

Setup

Install the JRE or JDK. This demo uses Selenium, which requires Java, to run WebDriver tests.

Install node modules

npm install

Build the example (this is necessary for functional tests to work)

$ npm run build

Running tests

Unit tests in Node

$ npm test

WebDriver tests

$ npm test webdriver

Notes

In the intern.json file, there are separate browserSuites and nodeSuites properties. This is because some of the unit tests don't work in the browser, but all of them will work in Node.

typescript-example

This example uses Intern to test a jQuery + Backbone TodoMVC app written in TypeScript.

Setup

Install the JRE or JDK This demo runs with local Selenium, which Intern will automatically install.

Install node modules

npm install

Running tests

From a browser

npm start

Navigate to http://localhost:9000/__intern/

Using WebDriver

npm test

The npm test command will run tests in Chrome by default. The test config in this project contains convenience configurations for other browsers as well.

npm test config=@edge
npm test config=@firefox
npm test config=@ie
npm test config=@safari

grunt-example

Setup

Install the JRE or JDK. This demo uses Selenium, which requires Java, to run WebDriver tests.

Install grunt-cli

$ npm install -g grunt-cli

Install node modules

$ npm install

Running Tests

Unit tests in Node

$ grunt test

WebDriver tests

$ grunt test:browser

More information

Check the Gruntfile for details. If you haven't used Grunt before, here are some commands that are also available using the Gruntfile in this example:

• grunt runs the default task in the Gruntfile, which is test in this case.
• grunt intern:node will run Intern’s Node executor
• grunt intern:webdriver will run Intern’s WebDriver executor, which will run unit tests in a browser

If you need more information check out the task documentation.

Intern 3 Examples

Each of the examples can be switched from running tests locally to using a cloud testing provider by setting the relevant Cloud testing Intern settings within the Intern config for that example.

Backbone-example

Setup

Install the JRE or JDK This demo runs with local Selenium, which Intern will automatically install.

Install intern command line interface

npm install -g intern-cli

Install node modules and intern

npm install

Running tests

Local browser tests

intern serve

Navigate to http://localhost:9000/node_modules/intern/client.html?config=tests/intern.js.

Remote node / browser tests

intern run --webdriver

React-example

Setup

Install the JRE or JDK This demo runs with local Selenium, which Intern will automatically install.

Install intern command line interface

npm install -g intern-cli

Install node modules and intern

npm install

Running tests

Local browser tests

intern serve

Navigate to http://localhost:9000/node_modules/intern/client.html?config=tests/intern.js.

Remote node / browser tests

intern run --webdriver

Parallel-example

Setup

Install node modules and intern

npm install

Setup tunnelOptions and capabilities.

Running tests

Run tests in parallel

./parallel.sh

Travis-ci-example

Setup

• The easiest way to try this yourself is to probably fork this example
• Go to https://travis-ci.org/profile and switch on the repository you would like to use with Travis CI
• Adjust .travis.yml
• Make a commit

You can find more information on continuous integration with Intern in the wiki.

External Examples

Intern 4 hasn’t been out for very long yet, so most of these are still based on Intern 3.

• Cassowary JS
• jQuery PEP
• Official Intern Tutorial
• Tutorial from ArcGIS
• Firefox Accounts JS Client testing example

Contributing

We welcome contributions of new examples, or improvements/updates to existing examples. Just fork this repo, add your example to a new branch, and make a PR. Note that like most open source projects, we require everyone to sign a contributor license agreement when making non-trivial PRs.

© SitePen, Inc. and its contributors

Download Details: 

Author: Theintern
Source Code: https://github.com/theintern/intern-examples 

#javascript #typescript #example 

Video SDK Flutter to Simply integrate Audio & Video Calling API

Video SDK Flutter

Video SDK Flutter to simply integrate Audio & Video Calling API or Live Video Streaming API to your app with just a few lines of code.

Functionality

Getting Started

Setup Guide

Add videosdk as a dependency in your pubspec.yaml file.

Android Setup

Update AndroidManifest.xml file for the permissions

Ensure the following permission is present in your Android Manifest file, located in <project root>/android/app/src/main/AndroidManifest.xml:

<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission android:name="android.permission.WAKE_LOCK" />

If you need to use a Bluetooth device, please add:

<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />

The Flutter project template adds it, so it may already be there.

Also you will need to set your build settings to Java 8, because official WebRTC jar now uses static methods in EglBase interface. Just add this to your app level build.gradle:

android {
    //...
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

If necessary, in the same build.gradle you will need to increase minSdkVersion of defaultConfig up to 23 (currently default Flutter generator set it to 16).

If necessary, in the same build.gradle you will need to increase compileSdkVersion and targetSdkVersion up to 31 (currently default Flutter generator set it to 30).

## iOS Setup

Add the following entry to your Info.plist file, located in `<project root>`/ios/Runner/Info.plist:

```xml
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) Camera Usage!</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) Microphone Usage!</string>

This entry allows your app to access camera and microphone.

Import it

Now in your Dart code, you can use:

import "package:videosdk/meeting.dart";
import "package:videosdk/meeting_builder.dart";
import "package:videosdk/participant.dart";
import "package:videosdk/rtc.dart";
import "package:videosdk/stream.dart";

Installing

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add videosdk

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  videosdk: ^0.0.14

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:videosdk/rtc.dart';
import 'package:videosdk/utils/constants.dart';

example/lib/main.dart

import 'package:flutter/material.dart';

import 'constants/colors.dart';
import 'navigator_key.dart';
import 'screens/splash_screen.dart';

void main() {
  // Run Flutter App
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Material App
    return MaterialApp(
      title: 'VideoSDK Flutter Example',
      theme: ThemeData.dark().copyWith(
        appBarTheme: const AppBarTheme().copyWith(
          color: primaryColor,
        ),
        primaryColor: primaryColor,
        backgroundColor: secondaryColor,
      ),
      home: const SplashScreen(),
      navigatorKey: navigatorKey,
    );
  }
}

Author: Videosdk-live
Source Code: https://github.com/videosdk-live/videosdk-rtc-flutter-sdk-example 
License: BSD-3-Clause

#flutter #sdk #dart #example 

Airpay_example: A Airpay Flutter Example Project for The integeration

Airpay Example

Shows how to use the Airpay plugin.

Installing

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add airpay_example

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  airpay_example: ^2.0.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:airpay_example/main.dart';
import 'package:airpay_example/screens/home.dart';
import 'package:airpay_example/screens/launch.dart';

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

• Lab: Write your first Flutter app
• Cookbook: Useful Flutter samples

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Original article source at: https://pub.dev/packages/airpay_example 

#flutter #dart #example 

How to Create a CSS Glitch Animation from Scratch

Learn How to Create Glitch Effect with CSS. Let's Create a CSS Glitch Animation from Scratch
 

Do you remember the earlier television sets right? Then you definitely will remember the glitches effects!

You have also noticed that nowadays glitchy effects are quite trendy. Let’s dive in and create the most catching glitch effect for our website!

Create HTML

• Create <div> with the id "example".
• Add three <h2> tags and input your content on which the glitch effect should be applied.

<div id="example">
  <h2>W3DOCS</h2>
  <h2>W3DOCS</h2>
  <h2>W3DOCS</h2>
</div>

Add CSS

• Style the first <h2> tag by specifying its color, font-size, letter-spacing and font-weight. Set the text-align property to "center" and define the animation.
• Use :nth-child() pseudo-class so as to put style to the next two <h2> tags. The :nth-child() pseudo-class selects and styles elements based on their index. For both the second and third child elements, specify the color and animation.
• Define the starting and the ending point of animation. The keyframe declaration block includes CSS properties and their values. The keyframe selector can start with a percentage (%) or with the keywords “from” (same as 0%) and “to” (same as 100%). 0% is a starting point of the animation, 100% is the endpoint. The values define how the animation should behave at some point. Here, we use the CSS transform and the opacity properties, where the first property specifies a three-dimensional transformation of the element and the second one sets the level of transparency of an element.

h2 {
  text-align: center;
  color: #d9fff9;
  font-size: 80px;
  letter-spacing: 6px;
  font-weight: 300;
  margin: 0;
  line-height: 0;
  animation: glitch1 0.5s infinite;
}

h2:nth-child(2) {
  color: #0ef0e1;
  animation: glitch2 1.0s infinite;
}

h2:nth-child(3) {
  color: #ff94eb;
  animation: glitch3 1.0s infinite;
}

@keyframes glitch1 {
  0% {
    transform: none;
    opacity: 1;
  }
  50% {
    transform: skew(-2deg, 0.6deg);
    opacity: 0.75;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes glitch2 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  50% {
    transform: translate(-3px, -1px);
    opacity: 0.5;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
  @keyframes glitch3 {
    0% {
      transform: none;
      opacity: 0.25;
    }
    50% {
      transform: translate(3px, 1px);
      opacity: 0.5;
    }
    100% {
      transform: none;
      opacity: 0.25;
    }
  }

Now let’s bring all the parts together and see the result!

Example of creating a glitchy effect:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-color: #eee;
      }
      #example {
        width: 450px;
        margin: 250px auto;
      }
      h2 {
        text-align: center;
        color: #d9fff9;
        font-size: 80px;
        letter-spacing: 6px;
        font-weight: 300;
        margin: 0;
        line-height: 0;
        animation: glitch1 0.5s infinite;
      }
      h2:nth-child(2) {
        color: #0ef0e1;
        animation: glitch2 1.0s infinite;
      }
      h2:nth-child(3) {
        color: #ff94eb;
        animation: glitch3 1.0s infinite;
      }
      @keyframes glitch1 {
        0% {
          transform: none;
          opacity: 1;
        }
        50% {
          transform: skew(-2deg, 0.6deg);
          opacity: 0.75;
        }
        100% {
          transform: none;
          opacity: 1;
        }
      }
      @keyframes glitch2 {
        0% {
          transform: none;
          opacity: 0.25;
        }
        50% {
          transform: translate(-3px, -1px);
          opacity: 0.5;
        }
        100% {
          transform: none;
          opacity: 0.25;
        }
      }
      @keyframes glitch3 {
        0% {
          transform: none;
          opacity: 0.25;
        }
        50% {
          transform: translate(3px, 1px);
          opacity: 0.5;
        }
        100% {
          transform: none;
          opacity: 0.25;
        }
      }
    </style>
  </head>
  <body>
    <div id="example">
      <h2>W3DOCS</h2>
      <h2>W3DOCS</h2>
      <h2>W3DOCS</h2>
    </div>
  </body>
</html>

Example of creating a glitchy effect with more @keyframes values:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-color: #eee;
      }
      #example {
        width: 450px;
        margin: 250px auto;
      }
      h2 {
        text-align: center;
        color: #d9fff9;
        font-size: 80px;
        letter-spacing: 6px;
        font-weight: 300;
        margin: 0;
        line-height: 0;
        animation: glitch1 3.5s infinite;
      }
      h2:nth-child(2) {
        color: #0ef0e1;
        animation: glitch2 2.5s infinite;
      }
      h2:nth-child(3) {
        color: #ff94eb;
        animation: glitch3 2.5s infinite;
      }
      @keyframes glitch1 {
        0% {
          transform: none;
          opacity: 1;
        }
        8% {
          transform: skew(-0.5deg, -0.9deg);
          opacity: 0.75;
        }
        10% {
          transform: none;
          opacity: 1;
        }
        28% {
          transform: none;
          opacity: 1;
        }
        30% {
          transform: skew(0.8deg, -0.1deg);
          opacity: 0.75;
        }
        33% {
          transform: none;
          opacity: 1;
        }
        45% {
          transform: none;
          opacity: 1;
        }
        55% {
          transform: skew(-1deg, 0.2deg);
          opacity: 0.75;
        }
        60% {
          transform: none;
          opacity: 1;
        }
        72% {
          transform: none;
          opacity: 1;
        }
        78% {
          transform: skew(0.4deg, 1deg);
          opacity: 0.75;
        }
        80% {
          transform: none;
          opacity: 1;
        }
        100% {
          transform: none;
          opacity: 1;
        }
      }
      @keyframes glitch2 {
        0% {
          transform: none;
          opacity: 0.25;
        }
        8% {
          transform: translate(-2px, -3px);
          opacity: 0.5;
        }
        10% {
          transform: none;
          opacity: 0.25;
        }
        28% {
          transform: none;
          opacity: 0.25;
        }
        30% {
          transform: translate(-5px, -2px);
          opacity: 0.5;
        }
        33% {
          transform: none;
          opacity: 0.25;
        }
        45% {
          transform: none;
          opacity: 0.25;
        }
        55% {
          transform: translate(-5px, -1px);
          opacity: 0.5;
        }
        60% {
          transform: none;
          opacity: 0.25;
        }
        72% {
          transform: none;
          opacity: 0.25;
        }
        78% {
          transform: translate(-2px, -6px);
          opacity: 0.5;
        }
        80% {
          transform: none;
          opacity: 0.25;
        }
        100% {
          transform: none;
          opacity: 0.25;
        }
      }
      @keyframes glitch3 {
        0% {
          transform: none;
          opacity: 0.25;
        }
        8% {
          transform: translate(2px, 3px);
          opacity: 0.5;
        }
        10% {
          transform: none;
          opacity: 0.25;
        }
        28% {
          transform: none;
          opacity: 0.25;
        }
        30% {
          transform: translate(5px, 2px);
          opacity: 0.5;
        }
        33% {
          transform: none;
          opacity: 0.25;
        }
        45% {
          transform: none;
          opacity: 0.25;
        }
        55% {
          transform: translate(5px, 1px);
          opacity: 0.5;
        }
        60% {
          transform: none;
          opacity: 0.25;
        }
        72% {
          transform: none;
          opacity: 0.25;
        }
        78% {
          transform: translate(2px, 6px);
          opacity: 0.5;
        }
        80% {
          transform: none;
          opacity: 0.25;
        }
        100% {
          transform: none;
          opacity: 0.25;
        }
      }
    </style>
  </head>
  <body>
    <div id="example">
      <h2>W3DOCS</h2>
      <h2>W3DOCS</h2>
      <h2>W3DOCS</h2>
    </div>
  </body>
</html>

Example of creating a glitchy effect with the :hover selector:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .content {
        display: flex;
        width: 100vw;
        height: 100vh;
        background-color: black;
        background-image: url("https://images.unsplash.com/photo-1489875347897-49f64b51c1f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjM4MDE5fQ&auto=format&fit=crop&w=1050&q=80");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }
      .text {
        margin: auto;
        font-family: 'Montserrat', sans-serif;
        font-size: 120px;
        text-transform: uppercase;
      }
      .glitch {
        position: relative;
        color: white;
        mix-blend-mode: lighten;
      }
      .glitch:before,
      .glitch:after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        width: 100%;
        background: black;
        clip: rect(0, 0, 0, 0);
      }
      .glitch:before {
        left: -1px;
        text-shadow: 1px 0 rgba(255, 0, 0, 0.7);
      }
      .glitch:after {
        left: 1px;
        text-shadow: -1px 0 rgba(0, 0, 255, 0.7);
      }
      .glitch:hover:before {
        text-shadow: 4px 0 rgba(255, 0, 0, 0.7);
        animation: glitch-loop-1 0.8s infinite ease-in-out alternate-reverse;
      }
      .glitch:hover:after {
        text-shadow: -5px 0 rgba(0, 0, 255, 0.7);
        animation: glitch-loop-2 0.8s infinite ease-in-out alternate-reverse;
      }
      @keyframes glitch-loop-1 {
        0% {
          clip: rect(36px, 9999px, 9px, 0);
        }
        25% {
          clip: rect(25px, 9999px, 99px, 0);
        }
        50% {
          clip: rect(50px, 9999px, 102px, 0);
        }
        75% {
          clip: rect(30px, 9999px, 92px, 0);
        }
        100% {
          clip: rect(91px, 9999px, 98px, 0);
        }
      }
      @keyframes glitch-loop-2 {
        0% {
          top: -1px;
          left: 1px;
          clip: rect(65px, 9999px, 119px, 0);
        }
        25% {
          top: -6px;
          left: 4px;
          clip: rect(79px, 9999px, 19px, 0);
        }
        50% {
          top: -3px;
          left: 2px;
          clip: rect(68px, 9999px, 11px, 0);
        }
        75% {
          top: 0px;
          left: -4px;
          clip: rect(95px, 9999px, 53px, 0);
        }
        100% {
          top: -1px;
          left: -1px;
          clip: rect(31px, 9999px, 149px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1 class="text glitch is-glitching" data-text="Hover me!">Hover me!</h1>
    </div>
  </body>
</html>

Let’s see another example:

Example of creating a glitchy effect using a linear-gradient:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body,
      h1 {
        padding: 0;
        margin: 0;
        font-family: 'Montserrat', sans-serif;
      }
      #example {
        height: 100vh;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: linear-gradient(rgba(5, 5, 5, 0.6), rgba(0, 0, 0, 0)), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px), url("https://images.unsplash.com/photo-1528372444006-1bfc81acab02?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80");
        background-size: cover;
        background-position: center;
        z-index: 1;
      }
      #wrapper {
        text-align: center;
      }
      .glitch {
        position: relative;
        color: white;
        font-size: 4em;
        letter-spacing: .4em;
        animation: glitch-skew 0.5s infinite linear alternate-reverse;
      }
      .glitch::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        left: -2px;
        text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
        animation: glitch-anim2 1s infinite linear alternate-reverse;
      }
      @keyframes glitch-anim {
        0% {
          clip: rect(30px, 9999px, 42px, 0);
          transform: skew(0.85deg);
        }
        5% {
          clip: rect(59px, 9999px, 21px, 0);
          transform: skew(0.34deg);
        }
        10% {
          clip: rect(99px, 9999px, 15px, 0);
          transform: skew(0.01deg);
        }
        15% {
          clip: rect(25px, 9999px, 61px, 0);
          transform: skew(0.97deg);
        }
        20% {
          clip: rect(35px, 9999px, 42px, 0);
          transform: skew(0.94deg);
        }
        25% {
          clip: rect(39px, 9999px, 62px, 0);
          transform: skew(0.31deg);
        }
        30% {
          clip: rect(62px, 9999px, 55px, 0);
          transform: skew(0.9deg);
        }
        35% {
          clip: rect(36px, 9999px, 31px, 0);
          transform: skew(0.13deg);
        }
        40% {
          clip: rect(27px, 9999px, 26px, 0);
          transform: skew(0.01deg);
        }
        45% {
          clip: rect(55px, 9999px, 9px, 0);
          transform: skew(0.5deg);
        }
        50% {
          clip: rect(69px, 9999px, 73px, 0);
          transform: skew(0.85deg);
        }
        55% {
          clip: rect(53px, 9999px, 89px, 0);
          transform: skew(0.15deg);
        }
        60% {
          clip: rect(20px, 9999px, 28px, 0);
          transform: skew(0.62deg);
        }
        65% {
          clip: rect(81px, 9999px, 28px, 0);
          transform: skew(0.1deg);
        }
        70% {
          clip: rect(54px, 9999px, 93px, 0);
          transform: skew(0.3deg);
        }
        75% {
          clip: rect(22px, 9999px, 6px, 0);
          transform: skew(0.84deg);
        }
        80% {
          clip: rect(23px, 9999px, 5px, 0);
          transform: skew(0.55deg);
        }
        85% {
          clip: rect(24px, 9999px, 76px, 0);
          transform: skew(0.68deg);
        }
        90% {
          clip: rect(3px, 9999px, 29px, 0);
          transform: skew(0.48deg);
        }
        95% {
          clip: rect(43px, 9999px, 95px, 0);
          transform: skew(0.37deg);
        }
        100% {
          clip: rect(58px, 9999px, 66px, 0);
          transform: skew(0.05deg);
        }
      }
      @keyframes glitch-anim2 {
        0% {
          clip: rect(66px, 9999px, 28px, 0);
          transform: skew(0.12deg);
        }
        5% {
          clip: rect(85px, 9999px, 40px, 0);
          transform: skew(0.7deg);
        }
        10% {
          clip: rect(14px, 9999px, 33px, 0);
          transform: skew(0.81deg);
        }
        15% {
          clip: rect(48px, 9999px, 76px, 0);
          transform: skew(0.57deg);
        }
        20% {
          clip: rect(77px, 9999px, 16px, 0);
          transform: skew(0.4deg);
        }
        25% {
          clip: rect(15px, 9999px, 43px, 0);
          transform: skew(0.27deg);
        }
        30% {
          clip: rect(33px, 9999px, 11px, 0);
          transform: skew(0.84deg);
        }
        35% {
          clip: rect(50px, 9999px, 51px, 0);
          transform: skew(0.16deg);
        }
        40% {
          clip: rect(52px, 9999px, 11px, 0);
          transform: skew(0.21deg);
        }
        45% {
          clip: rect(39px, 9999px, 58px, 0);
          transform: skew(0.98deg);
        }
        50% {
          clip: rect(88px, 9999px, 42px, 0);
          transform: skew(0.42deg);
        }
        55% {
          clip: rect(98px, 9999px, 11px, 0);
          transform: skew(0.51deg);
        }
        60% {
          clip: rect(73px, 9999px, 73px, 0);
          transform: skew(0.81deg);
        }
        65% {
          clip: rect(82px, 9999px, 59px, 0);
          transform: skew(1deg);
        }
        70% {
          clip: rect(64px, 9999px, 84px, 0);
          transform: skew(0.94deg);
        }
        75% {
          clip: rect(41px, 9999px, 44px, 0);
          transform: skew(0.38deg);
        }
        80% {
          clip: rect(23px, 9999px, 35px, 0);
          transform: skew(0.54deg);
        }
        85% {
          clip: rect(20px, 9999px, 100px, 0);
          transform: skew(0.76deg);
        }
        90% {
          clip: rect(9px, 9999px, 96px, 0);
          transform: skew(0.64deg);
        }
        95% {
          clip: rect(29px, 9999px, 82px, 0);
          transform: skew(0.47deg);
        }
        100% {
          clip: rect(15px, 9999px, 94px, 0);
          transform: skew(0.76deg);
        }
      }
      @keyframes glitch-skew {
        0% {
          transform: skew(2deg);
        }
        10% {
          transform: skew(4deg);
        }
        20% {
          transform: skew(4deg);
        }
        30% {
          transform: skew(-2deg);
        }
        40% {
          transform: skew(4deg);
        }
        50% {
          transform: skew(2deg);
        }
        60% {
          transform: skew(-3deg);
        }
        70% {
          transform: skew(-1deg);
        }
        80% {
          transform: skew(-3deg);
        }
        90% {
          transform: skew(-2deg);
        }
        100% {
          transform: skew(-2deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="example">
      <div id="wrapper">
        <h1 class="glitch" data-text="glitch">glitch</h1>
      </div>
    </div>
  </body>
</html>

#css #html #programming #webdev

How to Make Animated Notifications using Angular

Learn how to make animated Notifications using Angular. This is a beginners tutorial for Angular development.

Angular2-Notifications

A light and easy to use notifications library for Angular 2.

Push Notifications have been moved to a separate library ng-push

Example

Take a look at the live demo here: Live Demo

Setup

Install the library

npm install --save angular2-notifications
# Or using Yarn for a faster installation
yarn add angular2-notifications

SystemJS

Map the library in your system.config.js if you’re using SystemJs.

var map = {
    'angular2-notifications': 'node_modules/angular2-notifications'
}

var packages = {
    'angular2-notifications': { main: './dist/index.js', defaultExtension: 'js' }
}

Webpack

If you’re using Webpack >= 2, just include the library in your main.ts or vendor.ts file

import 'angular2-notifications';

Setup

Import the SimpleNotificationsModule in to your root AppModule (it will not work if you try to import it into a shared module)

import { SimpleNotificationsModule } from 'angular2-notifications';

@NgModule({
    imports: [
        BrowserModule,
        // Animations need to be imported in to your project to use the library
        BrowserAnimationsModule, 
        SimpleNotificationsModule.forRoot()
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Add the SimpleNotificationsComponent in to the component where you want to use the notifications. Or in your top level component for use in child components.

...
template: '<simple-notifications></simple-notifications>'
...

You will also need to use the NotificationsService in your component to create or remove the notifications.

...
constructor( private _service: NotificationsService ) {}
...

The create and destroy Event Emitters emit the notification that was created or destroyed you can utilise this functionality like this:

<simple-notifications [options]="options" (create)="created($event)" (destroy)="destroyed($event)"></simple-notifications>

If your app cannot find the built JS files for this package, you may need to tell your build script to scan the angular2-notifications directory. See the related issue #25. Example:

'angular2-notifications/*.+(js|js.map)',
'angular2-notifications/lib/*.+(js|js.map)'

Creating Notifications

This are the currently available access methods:

• The access methods return the constructed notification along with the created id.

The title, content and html arguments can be a string, html string or TemplateRef. Now it’s also possible to pass the datas (context) to the TemplateRef by using the optional context argument.

Example using TemplateRef

To use a TemplateRef in the title or content you need to create it in a component template:

<ng-template #example let-title="title">
    <p>{{title}}</p>
</ng-template>

Then you need to somehow get it to the component:

  title: string = 'Winter is coming';
  @ViewChild('example') example: TemplateRef<any>;

  open() {
    let context: any = {title: this.title};
    this._service.html(this.example, null, null, null, context);
  }

You could also pass the template through the open() method:

    open(temp: TemplateRef<any>) {
        this._service.html(temp, null, null, null, context);
    }

Subscribing to clicks

If you are interested in the clicks that happen on a notification you have the possibility to subscribe to a EventEmitter. The methods (success, error, alert, warn, info, bare, create and html) from the NotificationsService return an Object of type Notification.

const toast = this.notificationsService.success('Item created!', 'Click to undo...', {
      timeOut: 3000,
      showProgressBar: true,
      pauseOnHover: true,
      clickToClose: true
    });

The returned object has a click property with an EventEmitter on it which you can subscribe to. Your callback then gets notified with the click event at each click that happens on your Notification.

toast.click.subscribe((event) => {
    doSomething(event)
});

If you have configured the notification to close when the icon is clicked, an EventEmitter exists to listen for those clicks as well.

const toast = this.notificationsService.success('Item created!', 'Click to undo...', {
      timeOut: 3000,
      showProgressBar: true,
      pauseOnHover: true,
      clickToClose: false,
      clickIconToClose: true
    });

With the corresponding clickIcon property as above.

toast.clickIcon.subscribe((event) => {
    doSomething(event)
});

Options

Global options can be added in two ways. They can be passed through the forRoot() method on the module.

SimpleNotificationsModule.forRoot({
    ...options
})

You can also pass them in to the root component.

<simple-notifications [options]="options"></simple-notifications>

This are the current options that can be set globally:

Icons

Here is an example of passing the options to the component. You only pass the options you want changed. Options passed to the component are global. They apply to all of the notifications the get created.

...
template: '<simple-notifications [options]="options"></simple-notifications>'
...
public options = {
    position: ["bottom", "left"],
    timeOut: 5000,
    lastOnBottom: true
    ...
}

If you want a specific notification to have different options you can override them when calling any of the access methods by passing them to the override object. The following options can be overridden:

• id
• animate
• timeOut
• showProgressBar
• pauseOnHover
• clickToClose
• clickIconToClose
• maxLength
• theClass
• icon

This is an example of overriding global options:

this._notificationsService.success(
    'Some Title',
    'Some Content',
    {
        timeOut: 5000,
        showProgressBar: true,
        pauseOnHover: false,
        clickToClose: false,
        maxLength: 10
    }
)

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

Download Details:

Author: flauc

Live Demo: https://flauc.github.io/angular2-notifications/

GitHub: https://github.com/flauc/angular2-notifications

License : MIT license

#angular 

Modern-go-application: Modern Go Application Example

Modern Go Application 

Go application boilerplate and example applying modern practices

This repository tries to collect the best practices of application development using Go language. In addition to the language specific details, it also implements various language independent practices.

Some of the areas Modern Go Application touches:

• architecture
• package structure
• building the application
• testing
• configuration
• running the application (eg. in Docker)
• developer environment/experience
• telemetry

To help adopting these practices, this repository also serves as a boilerplate for new applications.

Features

• configuration (using spf13/viper)
• logging (using logur.dev/logur and sirupsen/logrus)
• error handling (using emperror.dev/emperror)
• metrics and tracing using Prometheus and Jaeger (via OpenCensus)
• health checks (using AppsFlyer/go-sundheit)
• graceful restart (using cloudflare/tableflip) and shutdown
• support for multiple server/daemon instances (using oklog/run)
• messaging (using ThreeDotsLabs/watermill)
• MySQL database connection (using go-sql-driver/mysql)
• Redis connection (using gomodule/redigo) removed due to lack of usage (see #120)

First steps

To create a new application from the boilerplate clone this repository (if you haven't done already) into your GOPATH then execute the following:

chmod +x init.sh && ./init.sh
? Package name (github.com/sagikazarmark/modern-go-application)
? Project name (modern-go-application)
? Binary name (modern-go-application)
? Service name (modern-go-application)
? Friendly service name (Modern Go Application)
? Update README (Y/n)
? Remove init script (y/N) y

It updates every import path and name in the repository to your project's values. Review and commit the changes.

Load generation

To test or demonstrate the application it comes with a simple load generation tool. You can use it to test the example endpoints and generate some load (for example in order to fill dashboards with data).

Follow the instructions in etc/loadgen.

Inspiration

See INSPIRATION.md for links to articles, projects, code examples that somehow inspired me while working on this project.

Author: Sagikazarmark
Source Code: https://github.com/sagikazarmark/modern-go-application 
License: MIT License

#go #golang #example 

TypeScript@3 Monorepo Example CRA Version

typescript-monorepo-cra-example

🙉 TypeScript Monorepo Sample
Required TypeScript@3 above

Create monorepo with create-react-app

Prerequisition

create-react-app, yarn

Create monorepo

$ create-react-app typescript-monorepo/packages/react-app --react-scripts=react-scripts-ts
$ cd typescript-monorepo
$ rm -r packages/react-app/node_modules

• create package.json
• create packages/tsconfig.json
• create packages/tsconfig.base.json

Create component

• create packages/component-a - 3 files

Edit react-app

• edit packages/react-app/src/App.tsx
  • packages/react-app/src/App.tsx
  • packages/react-app/src/App.tsx
• edit packages/react-app/package.json

$ yarn
$ yarn build:packages
$ yarn start

Related

• typescript-monorepo-next-example - Next.js version

Author: Deptno
Source Code: https://github.com/deptno/typescript-monorepo-cra-example 
License: 

#typescript #example 

TypeScript@3 Monorepo Example Next.js Version

typescript-monorepo-next-example

🙉🙉 TypeScript Monorepo Sample
Required TypeScript@3 above

Create monorepo with next.js

Prerequisition

yarn

Create monorepo

$ mkdir typescript-monorepo && cd $_
$ yarn init -y -p

• edit package.json # setup workspace and scripts

$ mkdir -p packages/app && cd $_
$ yarn init -y
$ yarn add -D typescript @types/react
$ yarn add next react react-dom @zeit/next-typescript
$ mkdir pages
$ touch pages/index.tsx next.config.js .babelrc.js tsconfig.json
$ cd ../.. # change root directory

• edit packages/app/next.config.js
• edit packages/app/.babelrc.js
• edit packages/app/tsconfig.json
• edit packages/app/package.json
  • packages/app/package.json # add script
  • packages/app/package.json # add package(component-a) dependency
• edit packages/app/pages/index.tsx # add default page and load component from package

Configure typescript monorepo

• create packages/tsconfig.json
• create packages/tsconfig.base.json

Create component

$ mkdir -p packages/component-a && cd $_
$ yarn init -y
$ yarn add -D typescript @types/react
$ yarn add react
$ touch index.tsx tsconfig.json
$ cd ../.. # change root directory

• edit packages/component-a/index.tsx # add default page and load component from package
• edit packages/component-a/tsconfig.json # add default page and load component from package

$ yarn
$ yarn build:packages # or yarn build:packages:watch
$ yarn start

Related

• typescript-monorepo-cra-example - CRA(create-react-app) version
• next.js-typescript-starter-kit - Next.js TypeScript starter kit

Author: Deptno
Source Code: https://github.com/deptno/typescript-monorepo-next-example 
License: 

#typescript #next #example 

Minimalistic BDD-style Assertions for Node.JS and The Browser

proxyquire 

Proxies nodejs's require in order to make overriding dependencies during testing easy while staying totally unobtrusive.

If you want to stub dependencies for your client side modules, try proxyquireify, a proxyquire for browserify v2 or proxyquire-universal to test in both Node and the browser.

Features

• no changes to your code are necessary
• non overridden methods of a module behave like the original
• mocking framework agnostic, if it can stub a function then it works with proxyquire
• "use strict" compliant

Example

foo.js:

var path = require('path');

module.exports.extnameAllCaps = function (file) {
  return path.extname(file).toUpperCase();
};

module.exports.basenameAllCaps = function (file) {
  return path.basename(file).toUpperCase();
};

foo.test.js:

var proxyquire =  require('proxyquire')
  , assert     =  require('assert')
  , pathStub   =  { };

// when no overrides are specified, path.extname behaves normally
var foo = proxyquire('./foo', { 'path': pathStub });
assert.strictEqual(foo.extnameAllCaps('file.txt'), '.TXT');

// override path.extname
pathStub.extname = function (file) { return 'Exterminate, exterminate the ' + file; };

// path.extname now behaves as we told it to
assert.strictEqual(foo.extnameAllCaps('file.txt'), 'EXTERMINATE, EXTERMINATE THE FILE.TXT');

// path.basename and all other path module methods still function as before
assert.strictEqual(foo.basenameAllCaps('/a/b/file.txt'), 'FILE.TXT');

You can also replace functions directly:

get.js:

var get    = require('simple-get');
var assert = require('assert');

module.exports = function fetch (callback) {
  get('https://api/users', callback);
};

get.test.js:

var proxyquire = require('proxyquire').noCallThru();
var assert = require('assert');

var fetch = proxyquire('./get', {
  'simple-get': function (url, callback) {
    process.nextTick(function () {
      callback(null, { statusCode: 200 })
    })
  }
});

fetch(function (err, res) {
  assert(res.statusCode, 200)
});

Table of Contents generated with DocToc

• Usage
• API
  • Preventing call thru to original dependency
    • Prevent call thru for all future stubs resolved by a proxyquire instance
    • Re-enable call thru for all future stubs resolved by a proxyquire instance
      • All together, now
  • Using proxyquire to simulate the absence of Modules
  • Forcing proxyquire to reload modules
  • Globally override require
    • Caveat
    • Globally override require during module initialization
    • Why is proxyquire messing with my require cache?
    • Globally override require during module runtime
  • Configuring proxyquire by setting stub properties
• Backwards Compatibility for proxyquire v0.3.x
• Examples
• More Examples

Usage

Two simple steps to override require in your tests:

• add var proxyquire = require('proxyquire'); to top level of your test file
• proxyquire(...) the module you want to test and pass along stubs for modules you want to override

API

proxyquire({string} request, {Object} stubs)

• request: path to the module to be tested e.g., ../lib/foo
• stubs: key/value pairs of the form { modulePath: stub, ... }
  • module paths are relative to the tested module not the test file
  • therefore specify it exactly as in the require statement inside the tested file
  • values themselves are key/value pairs of functions/properties and the appropriate override

Preventing call thru to original dependency

By default proxyquire calls the function defined on the original dependency whenever it is not found on the stub.

If you prefer a more strict behavior you can prevent callThru on a per module or contextual basis. If your stub is a class or class instance rather than a plain object, you should disable callThru to ensure that it is passed through with the correct prototype.

class MockClass {
  static '@noCallThru' = true;
}

var foo = proxyquire('./foo', {
  './my-class': MockClass
});

class MockClass {
  get '@noCallThru'() {
    return true;
  }
}

var foo = proxyquire('./foo', {
  './my-class-instance': new MockClass()
});

If callThru is disabled, you can stub out modules that don't even exist on the machine that your tests are running on. While I wouldn't recommend this in general, I have seen cases where it is legitimately useful (e.g., when requiring global environment configs in json format that may not be available on all machines).

Prevent call thru on path stub:

var foo = proxyquire('./foo', {
  path: {
      extname: function (file) { ... }
    , '@noCallThru': true
  }
});

Prevent call thru for all future stubs resolved by a proxyquire instance

// all stubs resolved by proxyquireStrict will not call through by default
var proxyquireStrict = require('proxyquire').noCallThru();

// all stubs resolved by proxyquireNonStrict will call through by default
var proxyquireNonStrict = require('proxyquire');

Re-enable call thru for all future stubs resolved by a proxyquire instance

proxyquire.callThru();

Call thru configurations per module override callThru():

Passing @noCallThru: false when configuring modules will override noCallThru():

var foo = proxyquire
    .noCallThru()
    .load('./foo', {

        // no calls to original './bar' methods will be made
        './bar' : { toAtm: function (val) { ... } }

        // for 'path' module they will be made
      , path: {
          extname: function (file) { ... }
        , '@noCallThru': false
        }
    });

All together, now

var proxyquire = require('proxyquire').noCallThru();

// all methods for foo's dependencies will have to be stubbed out since proxyquire will not call through
var foo = proxyquire('./foo', stubs);

proxyquire.callThru();

// only some methods for foo's dependencies will have to be stubbed out here since proxyquire will now call through
var foo2 = proxyquire('./foo', stubs);

Using proxyquire to simulate the absence of Modules

Some libraries may behave differently in the presence or absence of a package, for example:

var cluster;
try {
  cluster = require('cluster');
} catch(e) {
  // cluster module is not present.
  cluster = null
}
if (cluster) {
  // Then provide some functionality for a cluster-aware version of Node.js
} else {
  // and some alternative for a cluster-unaware version.
}

To exercise the second branch of the if statement, you can make proxyquire pretend the package isn't present by setting the stub for it to null. This works even if a cluster module is actually present.

var foo = proxyquire('./foo', { cluster: null });

Forcing proxyquire to reload modules

In most situations it is fine to have proxyquire behave exactly like nodejs require, i.e. modules that are loaded once get pulled from the cache the next time.

For some tests however you need to ensure that the module gets loaded fresh everytime, i.e. if that causes initializing some dependency or some module state.

For this purpose proxyquire exposes the noPreserveCache function.

// ensure we don't get any module from the cache, but to load it fresh every time
var proxyquire = require('proxyquire').noPreserveCache();

var foo1 = proxyquire('./foo', stubs);
var foo2 = proxyquire('./foo', stubs);
var foo3 = require('./foo');

// foo1, foo2 and foo3 are different instances of the same module
assert.notStrictEqual(foo1, foo2);
assert.notStrictEqual(foo1, foo3);

proxyquire.preserveCache allows you to restore the behavior to match nodejs's require again.

proxyquire.preserveCache();

var foo1 = proxyquire('./foo', stubs);
var foo2 = proxyquire('./foo', stubs);
var foo3 = require('./foo');

// foo1, foo2 and foo3 are the same instance
assert.strictEqual(foo1, foo2);
assert.strictEqual(foo1, foo3);

Globally override require

Use the @global property to override every require of a module, even transitively.

Caveat

You should think very hard about alternatives before using this feature. Why, because it's intrusive and as you'll see if you read on it changes the default behavior of module initialization which means that code runs differently during testing than it does normally.

Additionally it makes it harder to reason about how your tests work.

Yeah, we are mocking fs three levels down in bar, so that's why we have to set it up when testing foo

WAAAT???

If you write proper unit tests you should never have a need for this. So here are some techniques to consider:

• test each module in isolation
• make sure your modules are small enough and do only one thing
• stub out dependencies directly instead of stubbing something inside your dependencies
• if you are testing bar and bar calls foo.read and foo.read calls fs.readFile proceed as follows
  • do not stub out fs.readFile globally
  • instead stub out foo so you can control what foo.read returns without ever even hitting fs

OK, made it past the warnings and still feel like you need this? Read on then but you are on your own now, this is as far as I'll go ;)

Watch out for more warnings below.

Globally override require during module initialization

// foo.js
var bar = require('./bar');

module.exports = function() {
  bar();
}

// bar.js
var baz = require('./baz');

module.exports = function() {
  baz.method();
}

// baz.js
module.exports = {
  method: function() {
    console.info('hello');
  }
}

// test.js
var bazStub = {
  method: function() {
    console.info('goodbye');
  }
};
  
var stubs = {
  './baz': Object.assign(bazStub, {'@global': true}) 
};

var proxyquire = require('proxyquire');

var foo = proxyquire('./foo', stubs);
foo();  // 'goodbye' is printed to stdout

Be aware that when using global overrides any module initialization code will be re-executed for each require.

This is not normally the case since node.js caches the return value of require, however to make global overrides work , proxyquire bypasses the module cache. This may cause unexpected behaviour if a module's initialization causes side effects.

As an example consider this module which opens a file during its initialization:

var fs = require('fs')
  , C = require('C');

// will get executed twice
var file = fs.openSync('/tmp/foo.txt', 'w');

module.exports = function() {
  return new C(file);
};

The file at /tmp/foo.txt could be created and/or truncated more than once.

Why is proxyquire messing with my require cache?

Say you have a module, C, that you wish to stub. You require module A which contains require('B'). Module B in turn contains require('C'). If module B has already been required elsewhere then when module A receives the cached version of module B and proxyquire would have no opportunity to inject the stub for C.

Therefore when using the @global flag, proxyquire will bypass the require cache.

Globally override require during module runtime

Say you have a module that looks like this:

module.exports = function() {
  var d = require('d');
  d.method();
};

The invocation of require('d') will happen at runtime and not when the containing module is requested via require. If you want to globally override d above, use the @runtimeGlobal property:

var stubs = {
  'd': {
    method: function(val) {
      console.info('hello world');
    },
    '@runtimeGlobal': true
  }
};

This will cause module setup code to be re-excuted just like @global, but with the difference that it will happen every time the module is requested via require at runtime as no module will ever be cached.

This can cause subtle bugs so if you can guarantee that your modules will not vary their require behaviour at runtime, use @global instead.

Configuring proxyquire by setting stub properties

Even if you want to override a module that exports a function directly, you can still set special properties like @global. You can use a named function or assign your stub function to a variable to add properties:

function foo () {}
proxyquire('./bar', {
  foo: Object.assign(foo, {'@global': true})
});

And if your stub is in a separate module where module.exports = foo:

var foostub = require('../stubs/foostub');
proxyquire('bar', {
  foo: Object.assign(foostub, {'@global': true})
});

Backwards Compatibility for proxyquire v0.3.x

Compatibility mode with proxyquire v0.3.x has been removed.

You should update your code to use the newer API but if you can't, pin the version of proxyquire in your package.json file to ~0.6 in order to continue using the older style.

Examples

We are testing foo which depends on bar:

// bar.js module
module.exports = {
    toAtm: function (val) { return  0.986923267 * val; }
};

// foo.js module
// requires bar which we will stub out in tests
var bar = require('./bar');
[ ... ]

Tests:

// foo-test.js module which is one folder below foo.js (e.g., in ./tests/)

/*
 *   Option a) Resolve and override in one step:
 */
var foo = proxyquire('../foo', {
  './bar': { toAtm: function (val) { return 0; /* wonder what happens now */ } }
});

// [ .. run some tests .. ]

/*
 *   Option b) Resolve with empty stub and add overrides later
 */
var barStub = { };

var foo =  proxyquire('../foo', { './bar': barStub });

// Add override
barStub.toAtm = function (val) { return 0; /* wonder what happens now */ };

[ .. run some tests .. ]

// Change override
barStub.toAtm = function (val) { return -1 * val; /* or now */ };

[ .. run some tests .. ]

// Resolve foo and override multiple of its dependencies in one step - oh my!
var foo = proxyquire('./foo', {
    './bar' : {
      toAtm: function (val) { return 0; /* wonder what happens now */ }
    }
  , path    : {
      extname: function (file) { return 'exterminate the name of ' + file; }
    }
});

More Examples

For more examples look inside the examples folder or look through the tests

Specific Examples:

• test async APIs synchronously: examples/async.
• using proxyquire with Sinon.JS: examples/sinon.

Author: Thlorenz
Source Code: https://github.com/thlorenz/proxyquire 
License: MIT License

#javascript #example #node 

CustomPod Example Axon With Swift

CustomPod_Example_Axon

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

Installation

CustomPod_Example_Axon is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'CustomPod_Example_Axon'

Author

Zhenya-Petrovskyi-Axon, epetrovskyi@axon.dev

How to make you're own custom cocoa pod and publish it

1. Set up new project

XCode -> File -> New -> Project -> FrameWork/Library

- include unit tests also
- implement functionality
- cover with unit tests

1. if you want to make a pod from the framework in you're existing project
   • Create folder in "Documents" specifically for you're pod
   • Run Terminal and follow this path

`cd <folder>

pod lib create <name of the pod> (make sure the name is free by visiting https://cocoapods.org)

- answer questions:

What platform do you want to use?? [ iOS / macOS ]
 > iOS

What language do you want to use?? [ Swift / ObjC ]
 > Swift

Would you like to include a demo application with your library? [ Yes / No ]
 > Yes

Which testing frameworks will you use? [ Quick / None ]
 > None

Would you like to do view based testing? [ Yes / No ]
 > No

- Set up Pod target with all the files you need for you're pod - just drag and drop them to the folder you want to have you're files to locate, "DevelopmentPods -> create new folder or drag files in"
- Set up basic implementation in example View Controller, so users can see how to use you're pod
- Drag and drop you're unit test file to File "Tests"

1. Set up project on github
   • Run Terminal and follow this steps

cd <project root folder> git init git add -A git commit -m "commit description" git remote add origin <RemoteUrl.git> git push -u origin master

- Navigate back to you're project in XCode or open ProjectName.xcworkspace
    - find a a file ".podspec" and set up it by this example or read comments for each section

Pod::Spec.new do |s|
 s.name             = 'CustomPod_Example_Axon'
 s.version          = '1.0.1'
 s.summary          = 'Simple class to perform basic math methods.'
 
 s.description      = 'Practicing with implementation of custom cocoa pod'

 s.homepage         = 'https://github.com/Zhenya-Petrovskyi-Axon/CustomPod_Example_Axon'
 s.license          = { :type => 'MIT', :file => 'LICENSE' }
 
 s.author           = { 'Zhenya-Petrovskyi-Axon' => 'epetrovskyi@axon.dev' }
 
 s.source           = { :git => 'https://github.com/Zhenya-Petrovskyi-Axon/CustomPod_Example_Axon.git', :tag => s.version.to_s }

 s.ios.deployment_target = '12.0'
 
 s.swift_version = '5.0'
 s.platforms = {
     "ios": "12.0"
 }
 
 s.source_files = 'Source/**/*.swift'
 
 // MARK: - you can set up dependencies here, commented code will be included
 
end

- push to remote

Source Controll -> "commit" or option+command+c -> "commit"

- open terminal and check if file is ok and fix it if needed

cd <project root folder> pod spec lint <name>.podspec

- if everything is 👍
    - go to remote git project and navigate to "Publish you're first release"
    - make a tag that is the same version as .podspec -> s.version
    - publish
- open terminal and follow nest steps

cd <project root folder> pod trunk register <you're e-mail address> pod lib lint pod trunk push <podspec file name>.podspec

- you should see following message saying that you're pod is ready for use

--------------------------------------------------------------------------------

 🎉  Congrats 🚀  <you're pod name> (1.0.1) successfully published

 📅  November 2nd, 12:13

 🌎  https://cocoapods.org/pods/<you're pod name>

 👍  Tell your friends!

--------------------------------------------------------------------------------

Testing

Author: Zhenya-Petrovskyi-Axon
Source Code: https://github.com/Zhenya-Petrovskyi-Axon/CustomPod_Example_Axon 
License: MIT License

#swift #example 

Tutorial How to Create Qr Code Generator in Java

We look into writing a QR code generator in java from scratch. QR Code has a lot of different technologies and strategies in order to create a readable and unambiguous code. Writing an implementation in Java needs to be done in multiple steps and have a lot of fun and interesting challenges.

#java  #qrcode  #example 

Kotlin : For loop usage and declaration example

In this part of the tutorial we will see the implementation of for-loop in Kotlin.

Kotlin Complete Course:
Kotlin Introduction : https://youtu.be/2_EXYeKVX3g
Kotlin Variables & Data Types : https://youtu.be/bevfj0pFH6Q
Kotlin If-Conditions : https://youtu.be/8r0TMiKLwGo
Kotlin When Condition (Switch) : https://youtu.be/oQ3rXxU2bK4
Kotlin For Loop : https://youtu.be/10uMCFiUDNU
Kotlin While & Do-While Loop : https://youtu.be/nXStQ8WFCT0

#loop usage #kotlin #example

Genetic Algorithm: A Simple Example

Introduction

Genetic Algorithm (GA) can sometimes be a bit difficult to understand !! :(

In this article, I’ll help you understand GA with a simple example. So don’t worry. Hang tight. All will be clear soon !! :)

Below are the steps to be followed to solve any optimization problem with the help of GA.

• Step 1- Choose an encoding technique, a selection operator, and a crossover operator
• Step 2- Choose a population size
• Step 3- Randomly choose the initial population
• Step 4- Select parental chromosomes
• Step 5- Perform Crossover (random crossover points)
• Step 6- Evaluation of offsprings
• Step 7- Repeat the process

Now we’ll see an example of a simple optimization problem and try to solve it with the help of the steps mentioned above.

#evolutionary-algorithms #data-science #genetic-algorithm #example