Property management in 2021 is still a collection of poorly integrated, often barely usable, point solutions

Pure

Pure functions are the perfect case for unit testing. For a given input, we always expect the same output—there is no internal state involved. Let’s take a look at a few examples and some simple tests that check if the methods work as expected. Jasmine Jasmine is a unit test framework for JavaScript. It can run tests in both Node.js or on the browser. It’s used in the Angular framework, and it’s especially popular in projects based on Angular. It’s a solid choice for Vanilla JS projects, or projects based on other frameworks as well. Happy Path Testing Happy path testing is when we test a method with inputs that it’s expected to work normally. The arguments are valid and within reasonable ranges. Those tests check if the method does its job correctly—the test cases should be straightforward examples of how the method is explained in its documentation. Pseudocode examples: , expect(add(2, 2)).toBe(4) expect(concatenate(“Lorem”, “Ipsum”)).toBe(“LoremIpsum”) Those tests are meant to automatically catch it anytime the method key behavior is broken. Methods Let’s see a few simple methods: simple operations that we might need in some real-world applications. All implementations are greatly simplified—all methods will break in an ugly way if only we provide them with parameters that differ slightly from what is expected. The code is far from being robust. greet Method that greets the user with their name and surname: export function greet(name, surname) {
  return `Hello ${name} ${surname}!`;
} shortDate is a formatting method that takes a date object and returns it formatted as a short string. The code: shortDate export function shortDate(date) {
  return date.toISOString().substring(0, 10);
} ellipsis takes a long text string and an optional length parameter, and then trims the string to fit within the limit: ellipsis export function ellipsis(text, length = 50) {
  if (text.length > length) {
    return text.substring(0, length) + "…";
  }

  return text;
} translate A method that provides translated string values for a and pair. It’s a simplified implementation of what could be replaced with more advanced translating libraries. key lang export function translate(key, lang = "en") {
  switch (lang) {
    case "en":
      switch (key) {
        case "hello":
          return "Hello!";
      }
    case "pl":
      switch (key) {
        case "hello":
          return "Cześć!";
      }
  }
} applyDiscount Method to apply a percentage discount to a price. It can feel like overkill with this naive implementation, but later, when we start investigating edge cases, it will get much more interesting. export function applyDiscount(price, discountPercentage) {
  return price - (price * discountPercentage) / 100;
} calculatePrice This one calculates the total price when buying multiple units at a given price. It will also get more complicated after adding interesting edge cases. export function calculatePrice(unitPrice, quantity) {
  return unitPrice * quantity;
} Complete JS Code The complete JS code, : src/main.js export function greet(name, surname) {
  return `Hello ${name} ${surname}!`;
}

export function shortDate(date) {
  return date.toISOString().substring(0, 10);
}

export function ellipsis(text, length = 50) {
  if (text.length > length) {
    return text.substring(0, length) + "…";
  }

  return text;
}

export function translate(key, lang = "en") {
  switch (lang) {
    case "en":
      switch (key) {
        case "hello":
          return "Hello!";
      }
    case "pl":
      switch (key) {
        case "hello":
          return "Cześć!";
      }
  }
}

export function applyDiscount(price, discountPercentage) {
  return price - (price * discountPercentage) / 100;
}

export function calculatePrice(unitPrice, quantity) {
  return unitPrice * quantity;
} Adding Jasmine Tests To add Jasmine, let’s start by converting the folder into an npm package: $ npm init -y
Wrote to …/package.json:
… Then we can install the Jasmine package: $ npm install --save-dev jasmine

added 42 packages, and audited 43 packages in 2s

13 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities Then we can generate folders and files used by Jasmine: $ npx jasmine init
(no output) This command generates the following: —a folder where we can put files with the test, and spec/ *.spec.js —a file with the Jasmine config. spec/support/jasmine.json Unit Tests For the following unit tests, I’m focusing on the happy path only—I check if the result is as expected for reasonable inputs. The test should be self-explanatory, so let’s take a look at them: import {
  greet,
  shortDate,
  ellipsis,
  translate,
  applyDiscount,
  calculatePrice,
} from "../src/main.js";

describe("main", () => {
  describe("greet", () => {
    it("should greet by name and surname", () => {
      expect(greet("Lorem", "Ipsum")).toEqual("Hello Lorem Ipsum!");
    });
  });

  describe("shortDate", () => {
    it("should format correclty date", () => {
      const date = new Date("2023-11-02");
      expect(shortDate(date)).toEqual("2023-11-02");
    });
  });

  describe("shortDate", () => {
    it("should shorten long text at 50 chars", () => {
      expect(
        ellipsis(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a faucibus massa."
        )
      ).toEqual("Lorem ipsum dolor sit amet, consectetur adipiscing…");
    });

    it("should leave short text unchanged", () => {
      expect(ellipsis("Lorem ipsum sin dolor")).toEqual(
        "Lorem ipsum sin dolor"
      );
    });

    it("should shorten to custom length", () => {
      expect(ellipsis("Lorem ipsum sin dolor", 10)).toEqual("Lorem ipsu…");
    });
  });

  describe("translate", () => {
    it("should translate to supported langauges", () => {
      expect(translate("hello", "en")).toEqual("Hello!");
      expect(translate("hello", "pl")).toEqual("Cześć!");
    });
  });

  describe("applyDiscount", () => {
    it("should lower the price accordingly", () => {
      expect(applyDiscount(120, 25)).toEqual(90);
      expect(applyDiscount(8, 50)).toEqual(4);
    });
  });

  describe("calculatePrice", () => {
    it("should find a price of many products", () => {
      expect(calculatePrice(4, 3)).toEqual(12);
      expect(calculatePrice(9, 0.5)).toEqual(4.5);
    });
  });
}); (file ) spec/main.spec.js Running Tests To run the tests, we can add the following script to : package.json ..
  "scripts": {
    "test": "jasmine"
  },
  … With this in place, runs our tests: npm run test $ npm run test

> testing-example@1.0.0 test
> jasmine

Randomized with seed 76873
Started
........


8 specs, 0 failures
Finished in 0.004 seconds
Randomized with seed 76873 (jasmine --random=true --seed=76873) Summary In this post, we took a look at a simple example of JS code and how it can be covered by unit tests. You can find the . complete code example on GitHub Also published here

Jasmine: A Beginner-Friendly Guide on Pure Functions and Basic Tests

জেসমিন: বিশুদ্ধ ফাংশন এবং প্রাথমিক পরীক্ষাগুলির উপর একটি শিক্ষানবিস-বান্ধব গাইড

Jasmine: Ein anfängerfreundlicher Leitfaden zu reinen Funktionen und grundlegenden Tests

Jasmine: una guía para principiantes sobre funciones puras y pruebas básicas

Jasmine : un guide convivial pour les débutants sur les fonctions pures et les tests de base

जैस्मीन: शुद्ध कार्यों और बुनियादी परीक्षणों पर एक शुरुआती-अनुकूल मार्गदर्शिका

Jasmine: 純粋関数と基本テストに関する初心者向けガイド

Jasmine: 순수 함수 및 기본 테스트에 대한 초보자 친화적인 가이드

Jasmine: um guia para iniciantes sobre funções puras e testes básicos

Жасмин: руководство для начинающих по чистым функциям и базовым тестам

Jasmine: Saf Fonksiyonlar ve Temel Testler Konusunda Yeni Başlayanlara Uygun Bir Kılavuz

Jasmine: Hướng dẫn thân thiện với người mới bắt đầu về các hàm thuần túy và các bài kiểm tra cơ bản

Jasmine：关于纯函数和基本测试的初学者友好指南

The Duty of American Women to Their Country by Catharine Esther Beecher, is part of the HackerNoon Books Series. You can jump to any chapter in this book . Sufferings of Little Children for Want of Pure Air. here SUFFERINGS OF LITTLE CHILDREN FOR WANT OF PURE AIR. To understand this subject properly, it must be borne in mind, that the body is so constructed as to inhale at every breath about a pint of air. The air is composed of 79 parts nitrogen and 21 parts oxygen. When it is drawn into the lungs, the oxygen is absorbed by the blood, and what we exhale is the nitrogen, mixed with the carbonic acid, formed in the lungs by the union of the oxygen of the air with the carbon of the blood. Now, neither carbonic acid, or nitrogen can support life. Take the oxygen from the air, and then breathe it, and instant death ensues. So, put any animal into carbonic acid alone, and it dies instantly. Thus, every breath of every human being uses up the oxygen in one pint of air, and returns it with only nitrogen and carbonic acid. Let a schoolroom, containing 18,000 gallons of air and twenty scholars, be made perfectly airtight, and in twenty minutes they would all be corpses. The horrible sufferings produced by this process, were once witnessed in Calcutta, where 146 men were driven into a room 18 feet square, with only one small window, and kept there from eight at night till six next morning. Before midnight they all became frantic with agony, fought for the window, choaked each other to death, screamed to the soldiers to shoot them, and thus end their misery; and in the morning only 26 were alive, and these in a putrid fever! the amount of oxygen in the air by breathing, produces languor, sleepiness, nausea, headache, flushed face, and sometimes palsy and apoplexy. Lessening On this subject, the superintendents of the New-York schools make these statements: “Confinement in some of our schoolrooms is . Our children, shut up in these hot holes, made so by their own breaths, by perspiration, and by a close, overheated stove, lay the foundation for diseases which show no gain except to the physician, and which, in after-life, no riding on horseback, or journeys by sea or land, or southern residence can cure.” manslaughter Another states, that the uncomfortable condition of the schoolhouses, in his county, is such as to cause much suffering, both mental and bodily, to the children doomed to inhabit their gloomy walls and breathe the tainted air. Another writes of the schoolhouses in his district, that they are usually low, and in cold weather so overheated as to be hotbeds of disease, the close atmosphere being actually dangerous. One teacher, in one instance, was struck with palsy from the effects of confinement in such a poisonous atmosphere. At a public meeting, one citizen stated it as his conviction, that one of his children died from disease engendered by breathing the pestilential atmosphere of the schoolroom. Instances are numerous where the children come home dull, listless, and with severe colds and coughs. The teacher, in such situations, often loses ambition, energy, and health, and closes school pale and emaciated, perhaps to sink to an early grave, a victim of the poisonous air in which, for day after day, he has been confined. About HackerNoon Book Series: We bring you the most important technical, scientific, and insightful public domain books. This book is part of the public domain. Catharine Esther Beecher (2016). The Duty of American Women to Their Country. Urbana, Illinois: Project Gutenberg. Retrieved https://www.gutenberg.org/cache/epub/53739/pg53739-images.html This eBook is for the use of anyone anywhere at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re-use it under the terms of the Project Gutenberg License included with this eBook or online at , located at . www.gutenberg.org https://www.gutenberg.org/policy/license.html

Sufferings of Little Children for Want of Pure Air.

The Noonification: Smoke and Mirrors in Pure UIKit (5/19/2023)

As app developers, we're not just coders – we're creators, builders, and sometimes, illusionists. The art of app development goes beyond just code and design. Sometimes, it's about crafting an element of surprise and illusion that captures users' attention and creates an immersive experience. This time around, we're stepping out of our comfort zone of the 2D world, and taking a bold leap into the captivating world of . 3D UIKit is more than a set of tools for building user interfaces. It's a powerful toolkit that, when used right, can create amazing visual effects. In this article, we'll dig deep into UIKit and showcase a technique to create a mirror-like reflection. This effect can give your app a visually impressive and engaging look that typically seems achievable only with complex graphical tools, yet it's crafted with nothing but code. The end result Check out this beautiful, shiny cube. It will never rust, as it doesn't use any Metal. Now, let's learn how to create it using code. Some basics first For our purposes, UIKit serves as a slim layer atop Quartz Core, providing us with free access to its 3D capabilities. A holds a reference to a object, which is the actual component the OS uses for on-screen rendering. There are three properties of that influence its on-screen presentation: position, bounds, and transform. The first two are fairly self-explanatory, while can be initialized with any arbitrary 4x4 matrix. When multiple 3D layers need to be presented simultaneously, we must employ a specialized CATransformLayer, which uniquely preserves the 3D space of its child layers instead of flattening them onto a 2D plane. UIView CALayer CALayer transform A cube Let's begin by drawing a simple cube. First, we'll create a helper function to adjust the position of each side: func setupFace(
    layer: CALayer,
    size: CGFloat,
    baseTransform: CATransform3D,
    translation: (x: CGFloat, y: CGFloat, z: CGFloat),
    rotation: (angle: CGFloat, x: CGFloat, y: CGFloat, z: CGFloat)
) {
    layer.bounds = CGRect(origin: CGPoint(), size: CGSize(width: size, height: size))
    
    var transform = baseTransform
    transform = CATransform3DTranslate(transform, translation.x, translation.y, translation.z)
    transform = CATransform3DRotate(transform, rotation.angle, rotation.x, rotation.y, rotation.z)
    layer.transform = transform
} Next, in the body of our ViewController's function, we will assemble all six sides of the cube: viewDidLoad let cubeLayer = CATransformLayer()
cubeLayer.position = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
view.layer.addSublayer(cubeLayer)

let cubeSize: CGFloat = 200.0

var baseTransform = CATransform3DIdentity
baseTransform = CATransform3DRotate(baseTransform, 0.5, 0.0, 1.0, 0.0)
baseTransform = CATransform3DRotate(baseTransform, -0.5, 1.0, 0.0, 0.0)

let frontFace = CALayer()
frontFace.isDoubleSided = false
frontFace.backgroundColor = UIColor.blue.cgColor
setupFace(layer: frontFace, size: cubeSize, baseTransform: baseTransform, translation: (0.0, 0.0, cubeSize * 0.5), rotation: (0.0, 0.0, 1.0, 0.0))
cubeLayer.addSublayer(frontFace)

let backFace = CALayer()
backFace.isDoubleSided = false
backFace.backgroundColor = UIColor.red.cgColor
setupFace(layer: backFace, size: cubeSize, baseTransform: baseTransform, translation: (0.0, 0.0, -cubeSize * 0.5), rotation: (-.pi, 0.0, 1.0, 0.0))
cubeLayer.addSublayer(backFace)

let leftFace = CALayer()
leftFace.isDoubleSided = false
leftFace.backgroundColor = UIColor.green.cgColor
setupFace(layer: leftFace, size: cubeSize, baseTransform: baseTransform, translation: (-cubeSize * 0.5, 0.0, 0.0), rotation: (-.pi * 0.5, 0.0, 1.0, 0.0))
cubeLayer.addSublayer(leftFace)

let rightFace = CALayer()
rightFace.isDoubleSided = false
rightFace.backgroundColor = UIColor.yellow.cgColor
setupFace(layer: rightFace, size: cubeSize, baseTransform: baseTransform, translation: (cubeSize * 0.5, 0.0, 0.0), rotation: (.pi * 0.5, 0.0, 1.0, 0.0))
cubeLayer.addSublayer(rightFace)

let topFace = CALayer()
topFace.isDoubleSided = false
topFace.backgroundColor = UIColor.cyan.cgColor
setupFace(layer: topFace, size: cubeSize, baseTransform: baseTransform, translation: (0.0, -cubeSize * 0.5, 0.0), rotation: (.pi * 0.5, 1.0, 0.0, 0.0))
cubeLayer.addSublayer(topFace)

let bottomFace = CALayer()
bottomFace.isDoubleSided = false
bottomFace.backgroundColor = UIColor.gray.cgColor
setupFace(layer: bottomFace, size: cubeSize, baseTransform: baseTransform, translation: (0.0, cubeSize * 0.5, 0.0), rotation: (-.pi * 0.5, 1.0, 0.0, 0.0))
cubeLayer.addSublayer(bottomFace) Here's what this code looks like in action: It's undeniably 3D, but something feels off, doesn't it? The concept of 3D perspective in art was first mastered by Italian Renaissance painters in the 15th century. Fortunately, we can achieve a similar effect by just using a perspective projection matrix: var baseTransform = CATransform3DIdentity
baseTransform.m34 = -1.0 / 400.0
baseTransform = CATransform3DRotate(baseTransform, 0.5, 0.0, 1.0, 0.0)
baseTransform = CATransform3DRotate(baseTransform, -0.5, 1.0, 0.0, 0.0) Now let’s look at the result: Better, isn’t it? The term at m34 is what creates the perspective effect. For the actual math, see -1.0 / 400.0 https://www.scratchapixel.com/lessons/3d-basic-rendering/perspective-and-orthographic-projection-matrix/building-basic-perspective-projection-matrix.html Mapping the environment Our goal is to demonstrate a mirror effect, so we'll need something to reflect. In 3D graphics, cube maps are commonly used to simulate reflective surfaces. In our example, we can create one using the actual cube we made earlier. First, we assign images to the corresponding faces: frontFace.contents = UIImage(named: "front")?.cgImage
backFace.contents = UIImage(named: "back")?.cgImage
leftFace.contents = UIImage(named: "left")?.cgImage
rightFace.contents = UIImage(named: "right")?.cgImage
topFace.contents = UIImage(named: "up")?.cgImage
bottomFace.contents = UIImage(named: "down")?.cgImage Next, for every face, we set and increase the size of the cube to . This essentially places the "camera" inside the cube: isDoubleSided = true cubeSize: CGFloat = 2000.0 Next, since we're going to create several cubes at once, let's simplify the setup functions: enum CubeFace: CaseIterable {
    case front
    case back
    case left
    case right
    case top
    case bottom

    func translationAndRotation(size: CGFloat) -> (translation: (x: CGFloat, y: CGFloat, z: CGFloat), rotation: (angle: CGFloat, x: CGFloat, y: CGFloat, z: CGFloat)) {
        switch self {
        case .front:
            return ((0.0, 0.0, size * 0.5), (0.0, 0.0, 1.0, 0.0))
        case .back:
            return ((0.0, 0.0, -size * 0.5), (-.pi, 0.0, 1.0, 0.0))
        case .left:
            return ((-size * 0.5, 0.0, 0.0), (-.pi * 0.5, 0.0, 1.0, 0.0))
        case .right:
            return ((size * 0.5, 0.0, 0.0), (.pi * 0.5, 0.0, 1.0, 0.0))
        case .top:
            return ((0.0, -size * 0.5, 0.0), (.pi * 0.5, 1.0, 0.0, 0.0))
        case .bottom:
            return ((0.0, size * 0.5, 0.0), (-.pi * 0.5, 1.0, 0.0, 0.0))
        }
    }
    
    func texture() -> UIImage? {
        ...
    }
    
    func color() -> UIColor {
        ...
    }
}

func setupFace(
    layer: CALayer,
    size: CGFloat,
    baseTransform: CATransform3D,
    face: CubeFace,
    textured: Bool
) {
    layer.bounds = CGRect(origin: CGPoint(), size: CGSize(width: size, height: size))
    layer.isDoubleSided = textured
    
    let (translation, rotation) = face.translationAndRotation(size: size)
    var transform = baseTransform
    transform = CATransform3DTranslate(transform, translation.x, translation.y, translation.z)
    transform = CATransform3DRotate(transform, rotation.angle, rotation.x, rotation.y, rotation.z)
    layer.transform = transform
    
    if textured {
        layer.contents = face.texture()?.cgImage
    } else {
        layer.backgroundColor = face.color().cgColor
    }
}

func setupCube(
    view: UIView,
    size: CGFloat,
    textured: Bool,
    baseTransform: CATransform3D,
    faces: [CubeFace]
) -> CATransformLayer {
    let cubeLayer = CATransformLayer()
    cubeLayer.position = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
    
    for face in faces {
        let faceLayer = CALayer()
        setupFace(layer: faceLayer, size: size, baseTransform: baseTransform, face: face, textured: textured)
        cubeLayer.addSublayer(faceLayer)
    }
    
    return cubeLayer
} Now, let's render both the cube map and a small cube simultaneously: var baseTransform = CATransform3DIdentity
baseTransform.m34 = -1.0 / 400.0
baseTransform = CATransform3DRotate(baseTransform, 0.5, 0.0, 1.0, 0.0)

view.layer.addSublayer(setupCube(view: view, size: 2000.0, textured: true, baseTransform: baseTransform))
view.layer.addSublayer(setupCube(view: view, size: 100.0, textured: false, baseTransform: baseTransform)) Reflections UIKit is a robust framework, yet it lacks built-in features for complex visual effects. However, it does offer the ability to apply arbitrary masks to objects, and that's precisely what we're going to exploit to create the mirror effect. Essentially, we will render the environment six times, each masked by the corresponding cube face. The tricky aspect is that we can't directly mask a . However, we can circumvent this limitation by nesting it inside a container: CATransformLayer CALayer func setupReflectiveFace(
    view: UIView,
    size: CGFloat,
    baseTransform: CATransform3D,
    face: CubeFace
) -> CALayer {
    let maskLayer = CALayer()
    maskLayer.frame = view.bounds
    maskLayer.addSublayer(setupCube(view: view, size: size, textured: false, baseTransform: baseTransform, faces: [face]))
    
    let colorLayer = CALayer()
    colorLayer.frame = view.bounds
    colorLayer.mask = maskLayer
    colorLayer.addSublayer(setupCube(view: view, size: 2000.0, textured: true, baseTransform: baseTransform, faces: [.front, .back, .left, .right, .top, .bottom]))
    
    return colorLayer
} And now, our viewDidLoad should look like this: var baseTransform = CATransform3DIdentity
baseTransform.m34 = -1.0 / 400.0
baseTransform = CATransform3DRotate(baseTransform, 0.5, 0.0, 1.0, 0.0)

for face in CubeFace.allCases {
    view.layer.addSublayer(setupReflectiveFace(view: view, size: 100.0, baseTransform: baseTransform, face: face))
} This image already closely resembles what we intended to achieve, but at this point, the cube is merely a 3D-esque mask over the cube map. So, how do we transform it into an actual mirror? The Mirror Dimension It turns out there's a straightforward method to mirror the world relative to an arbitrary plane in 3D space. Without delving into complex , this is the matrix we're seeking: mathematics func mirrorMatrix(planePoint: Vector4D, planeTransform: CATransform3D, planeNormal: Vector4D) -> CATransform3D {
    let pt = applyTransform(transform: planeTransform, point: planePoint)
    
    let normalTransform = CATransform3DInvert(planeTransform).transposed
    let normal = applyTransform(transform: normalTransform, point: planeNormal).normalized()
    
    let a = normal.x
    let b = normal.y
    let c = normal.z
    let d = -(a * pt.x + b * pt.y + c * pt.z)
    
    return CATransform3D([
        1 - 2 * a * a, -2 * a * b, -2 * a * c, -2 * a * d,
        -2 * a * b, 1 - 2 * b * b, -2 * b * c, -2 * b * d,
        -2 * a * c, -2 * b * c, 1 - 2 * c * c, -2 * c * d,
        0.0, 0.0, 0.0, 1.0
    ]).transposed
} Next, we incorporate the following code into the cube setup function: func setupCube(
    view: UIView,
    size: CGFloat,
    textured: Bool,
    baseTransform: CATransform3D,
    faces: [CubeFace],
    mirrorFace: CubeFace? = nil
) -> CATransformLayer {
    ...
    if let mirrorFace {
        let mirrorPlane = mirrorFace.transform(size: size, baseTransform: baseTransform)
        let mirror = mirrorMatrix(planePoint: Vector4D(x: 0.0, y: 0.0, z: 0.0, w: 1.0), planeTransform: mirrorPlane, planeNormal: Vector4D(x: 0.0, y: 0.0, z: 1.0, w: 1.0))
        cubeLayer.sublayerTransform = mirror
    }
} And finally, we can behold the shiny cube we've been striving for: Why UIKit? Sure, achieving the same effect might seem easier with Metal or a Metal-based framework like SceneKit. But those come with their own set of limits. The big one? You can't bring live UIKit views into the 3D content drawn by Metal. The method we've looked at in this article lets us display all sorts of content in a 3D setting. This includes maps, videos, and interactive views. Plus, it can smoothly blend with any UIKit animations you might want to use. The source code for this article, along with some helper functions, can be found at https://github.com/petertechstories/uikit-mirrors Happy coding!

Smoke and Mirrors in Pure UIKit

বিশুদ্ধ UIKit-এ ধোঁয়া ও আয়না

Rauch und Spiegel in Pure UIKit

Humo y espejos en UIKit puro

Fumée et miroirs dans Pure UIKit

शुद्ध UIKit में धुआँ और दर्पण

Pure UIKit の煙とミラー

Pure UIKit의 연기와 거울

Fumaça e espelhos em Pure UIKit

Pure UIKit'te Duman ve Aynalar

Khói và Gương trong Pure UIKit

纯 UIKit 中的烟雾和镜子

Purely personal odors

🏆 What will you learn in this tutorial? Single page application fetches and loads the main UI skeleton into the browser only once, during the first fetch. And thereafter, loads the subsequent UI modules dynamically without re-fetching as the user interacts with the app. Look at the example given below. It is a simple single-page application developed using purely HTML, CSS and Javascript. In this tutorial, you are going to learn how to implement it. Open Example In New Tab 💡 What's New In This Tutorial? Front-end frameworks such as React, Angular, Vue, etc. exist today that enable the development of single-page applications. But the development of single-page applications using purely HTML, CSS and Javascript is still not very straightforward. In this tutorial, you will learn about , which allows you to architect HTML applications in a modular fashion. It paves the way for developers to choose just HTML, CSS and Javascript for writing complex apps with a scalable, maintainable and testable codebase. SfNav, a web component ⚠ Before You Begin The following are the pre-requisites for this tutorial: - You need to be familiar with the basic concepts of HTML, CSS & Javascript. You need not be an expert developer, but basic knowledge is necessary. could be a good starting point for this. Familiarity with Web Development W3 Schools Roadmap - In this example, we will use an NPM-based web server. So to follow this tutorial properly, I will recommend that you have npm installed on your development machine. Once you get the hang of it, you can also try the same method on other web servers, no problem! NPM Installation - You will also need a good web editor. I like VS Code. You can use any editor of your choice. Editor 🍽 Step 1 - Project Setup 1.1 Project Directory Create a new folder on your machine for this task. I called it SfNav-Demo. You can name it as you want. 1.2 Initialize NPM npm init Just accept the default values, and keep pressing ENTER until the initialization completes and the package.json file is generated. Your project will now have only one file, namely package.json. 1.2 Create the dist/ folder Create a folder to store all the html files. I called it "dist/". 1.3 Install the HTTP-server packages npm install connect serve-static 1.4 Create index.js Create index.js, to hold the code for the HTTP-server. Paste the code given below in index.js. var connect = require('connect');
var serveStatic = require('serve-static');

connect()
     .use(serveStatic('./dist'))
     .listen(8080, () => console.log('Server running on 8080...')); Your folder structure should look like this: 1.5 Start the HTTP-server Start the web server using the below command node index.js Browse to for confirming that the web server is running. A running server will throw an error message similar to the one given below. This is because we haven't yet created index.html in the dist folder. http://localhost:8080/ 1.6 Create dist/index.html Create index.html file in the dist folder and initialize it with the following code: <html>
hello sfnav
</html> Go back to the browser and refresh it. Confirm that the HTTP-server now serves the index.html page. At this point, the basic project setup is complete. Let us move on to the next steps. 💀 Step 2 - Create The HTML App Skeleton The code of the HTML skeleton is given below. Copy and paste it into your dist/index.html. <!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>&lt;sf-nav&gt; Demo</title>
    
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet">
    
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
    
    <script type="module">
        import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
        import {SfNav} from 'https://unpkg.com/sf-nav/sf-nav.js?module';
    </script>
    <style>
      
      body {
        background-color: #efefef;
        margin: 0px;
        font-family: 'Source Sans Pro';
      }

      sf-nav:not(:defined) {
        display: none;
      }
      
    </style>
  </head>
  <body style="margin: 0px;">
    <sf-nav>

      
      <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
      
      <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>
      
    </sf-nav>
  </body>
</html> This skeleton code does the following: It sets up the viewport It includes the material icons package, which is required by the SfNav web component It includes fonts, although you can use any fonts of your choice It includes the web component loader script It includes the Lit library. SfNav component depends on Lit, hence this inclusion is necessary It includes the SfNav web component library It includes a style block that - (1) Sets some basic styling to the document body and (2) Ensures that the SfNav component will show up only after it is defined properly It then includes/renders the SfNav component in the body HTML with a brand name and brand image. 💾 ↺ Save dist/index.html, and reload the browser. You will see that a bare-bones navigation component has loaded which only contains the brand name and brand image. The point to note is that it contains both the header part and the footer part. ⥣ Step 3 - Setup Routing 3.1 Understanding Links SfNav recognizes routes that are prefixed with hash. For example, in the file dist/index.html, the brand name and the brand image are linked to #home, which essentially means that the component home.html will be loaded if the user clicks on either of the brand name and the brand image links. 3.2 Setup Route Container Create a page content slot in the sf-nav block as shown below. This container sits between the header and footer and dynamically displays the page content as the user navigates across pages. <sf-nav>

        
        <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
        
        <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>

        
        <div slot="content">
        </div>
      
</sf-nav> 3.3 Setup Parameter Passing To enable parameter pass-down during routing, include the following Javascript code block in the sf-nav block. This code block: Listens to the routeChange event from SfNav and updates the routeMap associative array with the new route and its parameters, every time the routeChange event is fired. Exposes two functions - (1) getCurrentPathname and (2) getCurrentArgs, which can be used to obtain the current location and the current parameters. <body>
    <sf-nav>

        <h2 slot="brandName"><a href="#home" >Superflows</a></h2>
        
        <a slot="brandImage" href="#home" ><img alt="logo" src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>
        
        <div slot="content">
        </div>
    </sf-nav>

    <script>
        var routeMap = [];
  
        function getCurrentPathName() {
          return window.location.hash.length === 0 ? '' : window.location.hash.split("/")[0].replace('#', '');
        }
        function getCurrentArgs() {
          return routeMap[getCurrentPathName() + '.html'];
        }
  
        document.getElementsByTagName('sf-nav')[0].addEventListener('routeChange', (e) => {
          routeMap[e.detail.pathName] = e.detail.args;
        })
    </script>

</body> 3.4 Confirm That Routing Works At this point, the routing configuration is complete. 💾 ↺ Save dist/index.html, and reload the browser. You will observe the following: The header and the Footer are now separated with a content block in between. SfNav now throws the 'Could not find home.html' message. Don't worry, this is perfectly fine because we haven't yet created the home.html file. 3.5 Create dist/home.html Create a new file dist/home.html with the below HTML: <div class="cContainer">
    <h1>Home Page</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div> 💾 ↺ Save dist/home.html, and reload the browser. The home page content will now load. You will observe that the content loads properly. Let us style it a bit, so that it looks a bit nicer. Add the following styles in the style block of dist/index.html: <head>
    <style>
        
        
        .cContainer {
            margin: 10px;
            padding: 20px;
            border: dash 1px gray;
        }
    </style>
</head> 💾 ↺ Save dist/index.html, and reload the browser. This looks good for now. We can surmise now that routing is working normally. Let us move ahead. 🍔 Step 4 - Setup Main Menu SfNav supports two-level menus. Creating it is pretty straightforward. Create an unordered list as shown below and set it to the main menu slot. Some menu items point to internal links (links with hash) and some menu items point to external links (links with http(s)). <body>
    <sf-nav>
        
        <ul slot="mainMenu">
            <li><a href="#about">About</a></li>
            <li class="li-solutions">
                <a href="javascript:void(0);" class="a-solutions">Solutions</a>
                <ul>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#products">Products</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">Contact Us</a>
                <ul>
                    <li><a href="https://instagram.com">Instagram</a></li>
                    <li><a href="https://facebook.com">Facebook</a></li>
                    <li><a href="https://youtube.com">YouTube</a></li>
                </ul>
            </li>
        </ul>
    </sf-nav>
</body> 💾 ↺ Save dist/index.html, and reload the browser. If you click on any menu items with internal links such as services, products, you will observe that SfNav throws the file not found message. This is because we haven't yet created these files. 📝 Quick Task Go ahead and create and with any content of your choice and observe how it is rendered. services.html products.html Drop your observations in the comments section! 🔎 Step 5 - Setup Search Search functionality is available by default. Just subscribe to the searchClick event to capture the event when the user types something in the search box and presses Enter. <script>
document.getElementsByTagName('sf-nav')[0].addEventListener('searchClick', (e) => {console.log('search clicked ' + JSON.stringify(e.detail));})
</script> 🦜 Step 6 - Setup Social Media Links Social media links can be configured using an unordered list as well. Below is an example: <body>
    <sf-nav>
        
        
        <ul slot="socialMedia">
            <li><a href="https://facebook.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
            <li><a href="https://twitter.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
            <li><a href="https://youtube.com"><img src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
        </ul>

    </sf-nav>
</body> 💾 ↺ Save dist/index.html, and reload the browser. 🔔 Step 7 - Setup Notifications 7.1 HTML Configuration The notifications section has three parts - (1) Unread notifications, (2) Read notifications and (3) View-all link. Configuration is shown below: <body>
    <sf-nav>
        
        
        <ul slot="unreadNotifications">
            <li><a href="#notification/1"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
            <li><a href="#notification/2"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
            <li><a href="#notification/3"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
        </ul>
        <ul slot="readNotifications">
            <li><a href="#notification/4"><h3>Sonali Joshi</h3><p>mentioned you in a comment</p><div>1 day ago</div></a></li>
            <li><a href="#notification/5"><h3>Rahim Ahmed</h3><p>reacted to your blog post</p><div>2 days ago</div></a></li>
            <li><a href="#notification/6"><h3>John Bolton</h3><p>replied to a thread that you posted in</p><div>1 month ago</div></a></li>
        </ul>
        
    </sf-nav>
</body> 💾 ↺ Save dist/index.html, and reload the browser. If you try clicking on any notification, you will see the file not found message. This is fine because we haven't yet created dist/notification.html. Shall we do that now? 7.2 Create dist/notification.html Create a new file dist/notification.html. Copy and paste the HTML code given below into it. <div class="cContainer">
    <h1>Notification Page</h1>
    <h2></h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<script>
    document.getElementsByClassName('cContainer')[0].children[1].innerHTML = 'Arguments: ' + JSON.stringify(getCurrentArgs())
</script> 💾 ↺ Save dist/notification.html, and reload the browser. Go ahead, and try clicking on any of the notifications. You will observe the following: The notification page will render. The URL parameters or arguments such as #notification/1 or #notification/2 will be passed down to the notification component and rendered as well. Quick Note This is essentially routing at work where the parameters from the browser address bar are fed to the notification component. © Step 8 - Copyright Notice Copyright notice can be configured in the footer as follows: <body>
    <sf-nav>
        
        
        <p slot="copyright">Copyright 2022 Superflows</p>

    </sf-nav>
</body> 💾 ↺ Save dist/notification.html, and reload the browser. The copyright notice will be displayed in the footer. 🕺 Step 9 - Setup Call To Action Button Most navbars have a call to action button. In SfNav, it can be configured as follows: <a slot="cta" href="#login">Sign In</a> 💾 ↺ Save dist/notification.html, and reload the browser. The call to action button will be displayed in the header. 👨👩 Step 10 - Setup User Profile The user profile section contains two parts - (1) The profile picture toggle and (2) The profile menu. Both parts can be configured as follows: <body>
    <sf-nav>
        
        
        <img alt="profile" slot="profilePicture" src="https://preview.keenthemes.com/metronic-v4/theme/assets/pages/media/profile/profile_user.jpg" />

        
        <ul slot="profileMenu">
            <li><a href="#settings">My Profile</a></li>
            <li>
                <a href="javascript:void(0);">Settings</a>
                <ul>
                    <li><a href="#settings_data">Data & Privacy</a></li>
                    <li><a href="#settings_notifications">Notifications</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">Support</a>
                <ul>
                    <li><a href="#ticket">Create Ticket</a></li>
                    <li><a href="#chat">Chat With Us</a></li>
                </ul>
            </li>
            <li><a href="#signout">Sign Out</a></li>
        </ul>

    </sf-nav>
</body> 💾 ↺ Save dist/notification.html, and reload the browser. 🔴🟢🔵 Step 11 - Theme The User Interface Let us now modify the colours, to make the UI more attractive and customizable to your needs. For the sake of this tutorial, we have used some colours, but you are free to choose any colours. Add the below-given styles to the style block of dist/index.html. <style>

    sf-nav {
        --nav-background-color: rgb(4, 135, 205);
        --nav-color: #fff;
        --notif-background-color: rgb(4, 135, 205);
        --notif-color: #fff;
        --menu-background-color: rgb(49, 161, 222);
        --menu-color: #fff;
        --footer-background-color: rgb(167, 147, 60);
        --footer-color: #fff;
    }

</style> 💾 ↺ Save dist/notification.html, and reload the browser. Conclusion That is it then! I have shown you how to create a single-page web application with a modular code architecture using SfNav, a web component provided by Superflows. If you have any questions, do not hesitate to drop a comment below and I would be happy to answer. Please find a video of the same tutorial below: https://www.youtube.com/watch?v=ZGDhUaleN84&embedable=true Resources Documentation Read Demo Project View Demo YouTube Channel View Channel Join The Community Join Now Also published . here

Creating a Single Page Modular App Architecture Using Pure HTML, CSS & Javascript

The Problem As a data scientist or software engineer, sharing your projects with the world can be incredibly rewarding. One effective way to do this is by creating a web app that can showcase your work in a dynamic and interactive way. However, learning web development technologies such as JavaScript, HTML, and CSS can be a significant undertaking, especially if you’re short on time or don’t have a lot of experience in this area. Many existing low-code solutions may seem appealing at first because they promise to make web development easier and more accessible. However, these solutions often come with significant limitations that can hinder their flexibility, customization, and performance. Due to these limitations, users often become frustrated with low code frameworks and their lack of features. For this reason, users are left unable to produce quality results that they are proud to share. The Solution: Web Apps in Pure Python Without Compromising is a new Python framework that aims to bridge the gap between low-code solutions and traditional web development. It offers the ease of use and accessibility of low-code frameworks, combined with the flexibility, performance, and customizability of traditional web development. Pynecone With Pynecone, data scientists and software engineers can create high-quality web applications quickly and easily without needing to learn web development. Whether you want to build a small-scale data science project/internal app, or a large-scale multi-page web app, Pynecone has the tools and features to handle any project. The framework is optimized for performance, scalability, and SEO, so you can focus on creating a beautiful and engaging web app. We built our and docs with Pynecone. Pynecone has over 60+ built-in components and are adding more. whole website The in the preview was created in ~50 lines of Python. Dalle Pynecone App Conclusion Pynecone is a powerful tool for building web apps in Python without the need for extensive knowledge of web-specific technologies. It offers a simple and intuitive interface, allowing developers to focus on creating functional and engaging web apps without getting bogged down in the details of web development. Overall, Pynecone is an excellent choice for anyone looking to build Python web apps quickly and easily. We are actively trying to grow this project so no matter your skill level we welcome contributions! Open up an issue if you find missing features/bugs or contribute to existing issues. Star us on if you want to follow our progress as new updates come. GitHub

Pynecone: Web Apps in Pure Python

The Noonification: Pure Evil (11/5/2022)

PURE

purepm.co

-- employees

Since n.d.

COMPANY RANKING

PURE

EVERGREEN INDEX #8926

Representing this company? Click here to claim and customize this page!

Pure WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

PURE

purepm.co

-- employees

Since n.d.

COMPANY RANKING

PURE

EVERGREEN INDEX #8926

RELATED COMPANIESRANK

STORIES ABOUT PURE

Representing this company? Click here to claim and customize this page!

Pure WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!