lmcardle

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "fluid": false

lmcardle

Adding tailwind css to a svelte app that is based off of svelte kit

Step 1: Set up the project

mkdir my-app
cd my-app
npm init svelte@next
npm install -D tailwindcss autoprefixer

lmcardle

Microservice Patterns for Sharing Data

Database Ownership

As a general pattern, it has been well established that access to any given database should be limited to a single service. Meaning that no two services should both be able to directly reach into the database to read, insert, update or delete the data. Instead, a single service should hove ownership of that database and if another service has need to access that same data, it must go through the owning service.

<diagram 1>

Patterns for Providing Shard Data to Customers

lmcardle

function flattenObject(objToFlatten) {
  let result = {};
  let objectsToFlatten = [objToFlatten];

  while (objectsToFlatten.length) {
    let currentObject = objectsToFlatten.pop();
    let currentKeys = Object.keys(currentObject);

    for (let i=0; i<currentKeys.length; i++) {
      let currentKey = currentKeys[i];

lmcardle

Build Server

• Go to Digital Ocean
• Create new droplet
• London
• Ubuntu
• No apps
• Add SSH keys

lmcardle

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li'
});

lmcardle

let subsets = 'abcd';

printSubsets(subsets);

function printSubsets(subsets, prefix='') {
    let subsetLength = subsets.length;
    
    if (prefix.length > 0) {
      console.log(prefix);
    }

lmcardle

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    import: function(item) {
      console.log('Making API call', item);
      item.set('isProcessing', true);
    }
  }
});

lmcardle

Ember Closure Actions

When building complex components, the traditional way of passing and calling actions was cumbersome. Often while building and constructing components, it is preferable to build them in a composable manner and keep each composable part completely isolated and only concerned about itself. However the traditional approach to calling actions made this difficult, rather the parent component always needed to know about the child components actions. For example, suppose I have three components, all related to building a table (my-table, my-table-header-row, my-table-header-cell). Anytime I click on the "my-table-header-cell", the "cellClicked" action should be called and passed the key for that cell. The traditional approach would look something like this:

{{! /templates/application.hbs}}
{{#my-table}}
  {{#my-table-header-row}}
    {{#my-table-header-cell key="cell1" clickAction="cellClicked"}}Cell 1{{/my-table-header-cell}}
    {{#my-table-header-cell key="cell2" clickActi

lmcardle

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});