Automate UI testing with Mocha and Puppeteer (Updated)

Loading

Reading Time: 2 minutes Github: https://github.com/railsstudent/image-gallery-native-js 1) yarn add puppeteer mocha chai yarn add puppeteer mocha chai 2) Create bootstrap.js file to share global variables among tests. Expose chai.expect, chai.assert and an instance of browser ‘use strict’; const puppeteer = require(‘puppeteer’); const chai = require(‘chai’); const expect = chai.expect; const globalVariables = { browser: global.browser, expect: global.expect }; // … Read more

Projects built in July, 2018

Loading

Reading Time: < 1 minute Angular Lazy Loading Memes with IntersectionObserver API Demo: https://railsstudent.github.io/ng-lazy-load-memes/ Repo: https://github.com/railsstudent/ng-lazy-load-memes Stackblitz Demo: https://stackblitz.com/edit/ng-lazy-load-memes Vanilla JS, SCSS, HTML Apply image effects using CSS Variables Stackblitz Demo: https://stackblitz.com/edit/image-filter-css-variables/ Update responsive layout with CSS Variables Stackblitz Demo: https://stackblitz.com/edit/responsive-layout-css-variable/

Import bootstrap, ng-bootstrap and font-awesome in angular app

Loading

Reading Time: < 1 minute 1) yarn add bootstrap @ng-bootstrap/ng-bootstrap font-awesome yarn add bootstrap @ng-bootstrap/ng-bootstrap font-awesome 2) In style.scss, import bootstrap and font-awesome @import “~bootstrap/scss/bootstrap”; $fa-font-path : ‘../node_modules/font-awesome/fonts’; @import “~font-awesome/scss/font-awesome”; 4) type ng serve to launch application in development mode. Index page should open at url http://localhost:4200. ng serve

Projects built in June, 2018

Loading

Reading Time: < 1 minute Angular Functional Programming Apply functional programming to arrays and render the results in table by Angular Material Demo: https://railsstudent.github.io/ng-fun-prog/ Repo: https://github.com/railsstudent/ng-fun-prog AngularJS Use $compile to generate dynamic form from HTML string in AngularJS Stackblitz Demo: link