kamiljozwik

'.source.js':
  'Console log':
    'prefix': 'log'
    'body': 'console.log($1)'

# React

  'Constructor':
    'prefix': 'rcon'
    'body': """

kamiljozwik

import React, { Component } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { collectionName } from '../../imports/collections/collectionName';

class componentName extends Component {  
render() {
  return (
    <div> 
    Component Content
    </div>

kamiljozwik

import { Mongo } from 'meteor/mongo';

Meteor.methods({
  'colectionName.insert': function() {   // 'colectionName.insert' - zwykła wartość tekstowa, nie użycie jakiejś metody. Nazwa naszej metody
    return ColectionName.insert({        // metoda insert, która dodaje rekord do kolekcji
      createdAt: new Date(),        // przykładowe parametry rekordu - tutaj data utworzenia rekordu
      content: '',                  // other default values for brand new record
      sharedWith: [],
      ownerId: this.userId         // obecnie zalogowany użytkownik we wszystkich naszych meteor methods jest dostępny pod this.userId
    });

kamiljozwik

import { Meteor } from 'meteor/meteor';
import { collectionName } from '../../imports/collections/collectionName';

Meteor.startup(() => {
  
  // Place to generate data
  // or Check to see if data exists in the collection
  // or See if the collection has any records
  // or ny other logic...
  

kamiljozwik

module.exports = {
    entry: "./app.ts",
    output: {
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.ts$/, loader: "ts-loader" }
        ]
    }

kamiljozwik

.app-header {
  background-color: var(--primary-color);
}

.app-title {
  color: var(--secondary-color)
}

kamiljozwik

:root {
  --font-size: 12px;
}

.alert-box {
  --alert-color: red;
}

.alert-box p {
  color: var(--alert-color);

kamiljozwik

// sposób nr. 1
let root = document.querySelector(':root');

//sposób nr. 2
let root = document.documentElement;

kamiljozwik

:root {
  --primary-color: #94baf7;
  --secondary-color: #dfe881;
  --layout: 1fr 1fr;
}

@media screen and (max-width: 600px) {
  :root {
    --layout: 1fr;
  }

kamiljozwik

let boxes = document.querySelectorAll(".color"); // wybieramy kontrolki kolorów
let root = document.documentElement; // tutaj mamy dostęp do globalnych zmiennych CSS

boxes.forEach(box => {
  box.addEventListener("click", e => {            // po kliknięcie w kontrolkę koloru
    e.target.classList.contains("primary")        // sprawdzamy, który kolor chcemy zmienić
      ? root.style.setProperty("--primary-color", e.target.style.background)    // i aplikujemy ten kolor zmieniając wartość zmiennej CSS
      : root.style.setProperty("--secondary-color", e.target.style.background);  // na kolor, który jest przypisany do kontrolki
  });
});