Kenan Klisura

JUnit5 vs JUnit4 JUnit5 is a successor of the JUnit4 testing framework. JUnit5 introduces some notable new features: Changes to annotations (JUnit4 -> JUnit5): @BeforeClass -> @BeforeAll @Before -> @BeforeEach @AfterClass -> @AfterAll @After -> @AfterEach @Ignore -> @Disable   Tags for tagging and filtering via @Tag  annotation Parameterized tests with @ParameterizedTest  annotation and a arguments source (@ValueSource , @CSVFileSource , @MethodSource , @EnumSource ) @ParameterizedTest @ValueSource(strings = { "Hello", "World" }) void test(String argument) {      assertNotNull(argument); }   Repeated tests with @RepeatedTest  annotation Dynamic tests - Tests generated via the factory method annotated with @TestFactory @TestFactory Collection<DynamicTest> testFactory() {    return Arrays.asList(       dynamicTest("Test #1", () -> assertTrue(true)),       dynamicTest("Test #2", () -> assertEquals(4, 2 * 2))    ); }   Contextual Components When using component-based architecture in the frontend, contextual components are wrapper components. They can act either as presentational or container components with an extended capability of passing a data up via yield functionality. One example, in Ember, would be a checkbox list: // components/ui-checkbox-list.hbs (component template) {{#each items as |item|}}    {{yield item}} {{/each}}   // Usage in other parts of the application {{ui-checkbox-list items=_checkboxItems as |item|}} {{ui-checkbox-item item=item}} {{/ui-checkbox-list}}   "JUnits 4, 5 and Contextual Components" Tech Bite was brought to you by Kenan Klisura, Lead Software Engineer at Atlantbh.  (more…)

module.exports module.exports is an empty object and a property on the module object. Module  is a special object in NodeJS which contains information about the current module. The exports property is used to expose properties or functions of the current module. Use require to import properties from some module. // file.js module.exports = “Hello world”;   // file2.js module.exports = {   fn: function () { // ... } }; // app.js var message = require(‘./file’); console.log(message); // Hello world var file2 = require(‘./file2’); console.log(file2.fn()); // call fn on the file2 With the introduction of ES Modules via ES6, an export and import keyword can be used for exporting and importing properties. // file.js const message = “Hello world”; export default message; // file2.js export function fn() { // ... } // app.js import message from ‘./file’; console.log(message); // Hello world import { fn } from ‘./file2’; console.log(fn()); // call fn on the file2   "module.exports" Tech Bite was brought to you by Kenan Klisura, Lead Software Engineer at Atlantbh.  (more…)

Bootstrap partial Sass Bootstrap is a component-based library for developing web UI. Not all components are used when developing frontend with Bootstrap. In order to minimize the number of unused styles in a project, create a single sass file with custom imports of bootstrap components. Start with adding bootstrap as npm/yarn dependency, copy contents of a bootstrap.scss (defined in bootstrap/sass directory of node_modules) to a new file and change the imports path accordingly. The following is an example of the sass file that imports some bootstrap components: // styles/bootstrap/_bootstrap.scss // Import constants overrides @import './constants; // Import bootstrap components @import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables'; @import '~bootstrap/scss/mixins'; @import '~bootstrap/scss/root'; // styles/bootstrap/_constants.scss $body-bg: red; The ~ (tilde) is used for resolving from node_modules and is supported by sass-loader (webpack). For ember.js use ember-cli-bootstrap-sassy dependency, but without the tilde prefix. ESLint ESLint is code linting utility for JavaScript. Code linting is a static code analysis that is used to find potential problems and can enforce code style guides. To use ESLint, start by installing it with npm install -g eslint and creating an .eslintrc file for configuration. Run a check against a file with eslint src/some-file.js. ESLint can be integrated with various editors like Sublime Text, Atom and VSCode via plugins where one can get instant feedback on the code and make necessary changes. Whenever you start a new project, start by using ESLint and adhere to its rules. "Bootstrap partial Sass & ESLint" Tech Bite was brought to you by Kenan Klisura, Lead Software Engineer at Atlantbh.  (more…)

Symbols and Variables in Ruby Symbols and variables are very different things in Ruby. Symbols are like strings, they’re immutable and behave like constants. All equal symbols point to the same memory location. Variables, on the other hand, are references to some objects and can reference symbols. a = “test” // a, b variable that points to “test” string a = “test” c = :test // c, d variable that points to :test symbol d = :test > a.object_id == b.object_id // Strings with different instance > false > c.object_id == d.object_id // All symbols are same instance > true Destructuring (assignment) in JavaScript Destructuring assignment is a syntax in JavaScript (ES6) that enables the unpacking of values from arrays and objects into separate variables. Regular assignment Destructured assignment const array = [1, 2, 3, 4]; const one = array[0]; const two = array[1]; const three = array[2]; const obj = { one: 1, two: 2, three: 3 }; const one = obj.one; const two = obj.two; const three = obj.three;   const array = [1, 2, 3, 4]; const [one, two, three] = array; const obj = { one: 1, two: 2, three: 3 }; const { one, two, three } = obj;     This Tech Bite was brought to you by Kenan Klisura, Lead Software Engineer at Atlantbh. (more…)

Falsy and truthy values in Javascript Falsy values in JavaScript are false, null, undefined, 0, NaN, ““ (empty strings). The following construct: let val = ...; if (!val) { // Execute } ... will always Execute if the val contains one of the above values. Truthy values are all others. Some examples are: {} (empty object), [] (empty array), function () {} (empty function), ‘0’ (string with 0 as value). This enables us to write: if (val) { // We’re guaranteed val will not be null, undefined or any other // falsy value. } Use this when writing if statements, instead of writing val == null or val == undefined. Arrow functions in JavaScript Arrow functions were introduced in ES6 and represent a shorter syntax for function declaration. They don’t have their own this (or arguments) and they preserve this context of the outer function. The following examples will print test on the output if the fn function is called on object. Observe the console.log argument in the example below, with and without arrow function. Without arrow function With arrow function. { test: 'test', fn: function() { const that = this; function sub() { console.log(that.test); } sub(); } } { test: 'test', fn: function() { const sub = () => console.log(this.test); sub(); } }   Use the arrow functions on the reduce, map, forEach, filter and similar functions and only if the function body is short. "Falsy and Truthy values & Arrow Functions in JS" Tech Bite was brought to you by Kenan Klisura, Lead Software Engineer at Atlantbh. (more…)