Funny memes for your workplace

Meteor shortcuts

Meteor is a framework that speeds up web development.

Before we start:

Install Sublime (recommended editor)

Install Cmder (recommended command prompt)

Create new app

Cmder:

meteor create simple-todos

cd simple-todos meteor npm install meteor

Browser:

http://localhost:3000

File:
Open folder > simple-todos


Best Practices (my own)

• Different modules for different sections of website e.g. head, body, footer
• Each module has a file for its look (html) and a file for what it does (js) e.g. body.html, body.js
• Load sequence: main.js --> [others].js --> [others].html

Create a template
<template>... </template>

Call a template
{{>templateName}}


Import all JS using the main JS file
Sublime: /client/main.js

import '../imports/ui/body.js';

Add logic or data
{{#each}} ...{{/each}} and {{#if}}...{{/if}}



DISPLAY COLLECTION OF DATA
JS file:
Template.body.helpers({
  mybunch: [
    { mysentence: 'This is task 1x' },
    { mysentence: 'This is task 2' },
    { mysentence: 'This is task 3' },
  ],
});
HTML file:
<ul>
      {{#each mybunch}}
        {{> mytemplate1}}
      {{/each}}
</ul>

<template name="mytemplate1">
  <li>{{mysentence}}</li>
</template>


FORM WITH RESPONSIVE BUTTONS
HTML file:
<template name="mytemplate2">
  <li class="{{#if checked}}checked{{/if}}">

    <button class="delete">&times;</button>

    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />

    <span class="text">{{text}}</span>
  </li>
</template>
JS File: (use event listener "template.task.events" to listen for the event "click" located in css tag "toggle-checked"; when triggered, it UPDATE into the "Tasks" collection)

Template.task.events({

  'click .toggle-checked'() {

    // Set the checked property to the opposite of its current value

    Tasks.update(this._id, {

      $set: { checked: ! this.checked },

    });

  },

});

HTML file:

<template name="mytemplate2">

  <li class="{{#if checked}}checked{{/if}}">




    <button class="delete">&times;</button>




    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />




    <span class="text">{{text}}</span>

  </li>

</template>

Template.task.events({

  'click .delete'() {

    Tasks.remove(this._id);

  },

});

CREATE A DATABASE
Sublime: /imports/tasks.js
import { Mongo } from 'meteor/mongo';
export const Tasks = new Mongo.Collection('tasks');
Server must import: /server/main.js

import '../imports/api/tasks.js';

Client must import: /imports/body.js

import { Tasks } from '../api/tasks.js';

Template.body.helpers({
  tasks() {
    return Tasks.find({});
  },
});

ADD ENTRY TO DATABASE MANUALLY

Cmder:
meteor mongo
db.tasks.insert({ text: "Hello world!", createdAt: new Date() });


ADD FORM
HTML File:

       <form class="new-task">

        <input type="text" name="text" placeholder="Type to add new tasks" />

      </form>

JS File: (use event listener "template.body.events" to listen for the event "submit" located in css tag "new-task"; when triggered, it INSERT into the "Tasks" collection)

Template.body.events({

  'submit .new-task'(event) {

    // Prevent default browser form submit

    event.preventDefault();

    // Get value from form element

    const target = event.target;

    const text = target.text.value;

    // Insert a task into the collection

    Tasks.insert({

      text,

      createdAt: new Date(), // current time

    });

    // Clear form

    target.text.value = '';

  },

});

SHOW NEWEST TASK AT THE TOP:
return Tasks.find({}, { sort: { createdAt: -1 } });  

How to see Wifi Password on Windows 10

1. From the Start screen, swipe in from the right edge of the screen, and tap Settings.
2. Tap or click wireless network .
3. Tap and hold or right click on a wireless network name, and choose View connection properties.
4. Select Show characters to see the wireless network password.