Skip to content

podcast

  • in podcast
  • 2 min read

Setting Up a Proxy Server with Express

The Problem:

Welcome to "Continuous Improvement," the podcast where we explore practical solutions to everyday problems. I'm your host, Victor. Today, we're going to talk about a common issue when working with APIs and how to overcome it.

Imagine you're working on a project that uses BreweryDB. You're trying to load some data from the API, but suddenly, you encounter a problem. The API doesn't support JSONP, leading to a CORS issue when you attempt to fetch data directly using Angular. Frustrating, right?

But fear not! I've got a solution for you. In this episode, I'll guide you step-by-step on how to set up an intermediate proxy using Node.js and Express. This will allow you to avoid exposing your API key and resolve the CORS issue.

Let's dive into the solution.

First, we need to install Express and Request. Open up your terminal and type in:

npm install express --save
npm install request --save

After the installations are complete, it's time to create a server.js file. In this file, we'll set up the proxy using Node.js and Express. Make sure you have it ready before moving on to the next step.

So, let's set up the route. Replace API_KEY with your actual API key. This step is crucial to ensure proper authentication.

Inside your server.js file, add the following code:

var express = require('express');
var request = require('request');
var app = express();

app.get('/api', function(req, res) {
  request('https://api.brewerydb.com/v2/?key=' + API_KEY, function (error, response, body) {
    if (!error && response.statusCode === 200) {
      console.log(body);
      res.send(body);
    }
  });
});

Great! Now that we have the route set up, let's move on to setting up the port.

In your server.js file, add the following code:

app.listen(3000);
console.log('Server running on port %d', 3000);

Superb! You're almost there. Now it's time to start the server. Open your terminal, navigate to the location of your server.js file, and enter the following command:

node server.js

Congratulations! You've successfully set up the intermediate proxy using Node.js and Express.

It's time to test your proxy. Open your browser and type in http://localhost:3000/api. If everything goes well, you should be able to see the JSON object and even log it in your browser console.

And that's it! You've overcome the CORS issue by setting up an intermediate proxy. Now you can fetch data from the BreweryDB API without any problems.

If you encounter any difficulties or have any questions, please feel free to send me an email at victorleungtw@gmail.com. I'll be more than happy to assist you.

Thank you for tuning in to this episode of "Continuous Improvement." I hope you found the solution helpful and can apply it to your own projects. Don't forget to subscribe to our podcast for more practical solutions to everyday problems. Until next time, keep improving.

  • in podcast
  • 2 min read

Angular UI Bootstrap: Opening the First Accordion with ng-repeat

The Problem:

Welcome to "Continuous Improvement," the podcast where we explore solutions to common programming problems and help you become a better developer. I'm your host, Victor. In today's episode, we'll be discussing a problem I recently encountered with the accordion directive in Angular UI Bootstrap and the solution I found to make it work with dynamic content. So let's dive in!

The problem arose when I was using the accordion directive in Angular UI Bootstrap version 0.1.2. On the demo page, you can see an example where the first accordion group is opened by default:

<accordion-group heading="First Header" is-open="true"> </accordion-group>

This worked perfectly fine for static content. However, when I tried to generate dynamic content using ng-repeat, it didn't behave as expected. The accordion didn't open as intended. Let me show you an example:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups" is-open="true"> </accordion-group>

But don't worry, I've found a solution to this problem!

Instead of using a static value for is-open, we can bind it to a property in our controller. Here's what the updated template looks like:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups" is-open="status.isItemOpen[$index]"> </accordion-group>

And in the controller, we define the groups and the status object which will hold the isItemOpen property:

$scope.groups = ['First Header', 'Second Header', 'Third Header'];
$scope.status = { isItemOpen: new Array($scope.groups.length), isFirstDisabled: false };
$scope.status.isItemOpen[0] = true;

By using $index, we can dynamically set the value of isItemOpen for each accordion group based on their index. In this example, the first accordion group will be opened by default.

[BREAK]

If you prefer the first accordion group to be closed by default, simply change the value of true to false in the last line of the code snippet.

So, with this solution, you can now have dynamic content in your accordion groups and control their initial state using the is-open property.

And that's a wrap for today's episode of "Continuous Improvement." I hope this solution helps you overcome the problem with the accordion directive in Angular UI Bootstrap. If you have any questions or need further clarification, feel free to reach out to me. Thanks for listening, and until next time, happy coding!

  • in podcast
  • 3 min read

Note on Ionic Framework: Android Platform in OS X

In this blog post, we will walk through several error messages that you might encounter when installing dependencies for the Android platform of the Ionic framework on Mac OS X. Follow this official guide to install Cordova and Ionic, and then create a project up until the step where you configure the platform.

Hello everyone and welcome to another episode of Continuous Improvement - your source for tips, tricks, and solutions to help you overcome hurdles in your development journey. I'm your host, Victor, and in today's episode, we will be discussing some common error messages that you might come across while installing dependencies for the Android platform of the Ionic framework on Mac OS X.

But before we dive into that, I want to remind you to check out our official guide at ionicframework.com/docs/guide/installation.html. It provides a step-by-step walkthrough for installing Cordova and Ionic, as well as creating a project up until the point where you configure the platform.

Alright, let's get started!

So, you've followed the official guide and reached the point where you need to enable the Android platform by running the command:

ionic platform add android

But hold on, you might encounter an error message that says:

Error: ANDROID_HOME is not set and "android" command not in your PATH.

What does this mean? Well, it simply means that the Android command is not recognized by your system because the necessary environment variables are not properly set. But fret not, I'm here to guide you through the process of resolving this.

Step 1 is to download the Android SDK. You can find the link to the Android developer website in our blog post at [link]. Once you're there, go ahead and download the stand-alone SDK Tools.

Step 2 involves unzipping the downloaded file. Make sure to choose a suitable location for the SDK. For me, I extracted it to my workspace directory at:

/Users/Victor/Workspace/android-sdk-macosx

But you can choose a different location if you prefer.

Now that we have the Android SDK set up, it's time for Step 3: setting the Android command in your PATH. This step is crucial for your system to recognize the Android command as a valid command. So, open your terminal and follow along.

First, let's make sure your .bash_profile ends with a newline:

echo >> /Users/Victor/.bash_profile

Next, we need to set the ANDROID_HOME environment variable in your .bash_profile file. This can be accomplished with the following command:

echo "export ANDROID_HOME=/Users/Victor/Workspace/android-sdk-macosx" >> /Users/Victor/.bash_profile

Remember to replace "Victor" with your own username.

In addition to the ANDROID_HOME variable, we also need to update the PATH variable. This ensures that your system knows where to find the Android tools and platform tools. Execute the following command:

echo "export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools" >> /Users/Victor/.bash_profile

Great, we're almost there! Now, in order to apply the changes we made to the .bash_profile file, we need to reload the terminal. You can do this by executing the command:

. /Users/Victor/.bash_profile

Phew, we've made it through Step 3! Now we're ready for Step 4, which involves installing Android-19. If you try running the command:

ionic platform add android

You might come across the following error message:

Error: Please install Android target "android-19".

To resolve this, we need to open the SDK manager by running the android command from your terminal:

android

Once the SDK manager is open, check the box for Android 4.4.2 (API 19) and click on "Install 8 packages…". Then, simply accept the license and patiently wait for the download process to complete.

Now, it's time to give it another shot! Run the command again:

ionic platform add android

And voila! Hopefully, you will see the reassuring message:

Project successfully created.

And there you have it, folks! You've successfully resolved the error messages that can occur while installing dependencies for the Android platform of the Ionic framework on Mac OS X. If you experience any issues throughout the process, don't hesitate to reach out to me via email at victorleungtw@gmail.com.

That wraps up another episode of Continuous Improvement. I hope you found this information helpful and that it saves you time and frustration in your development journey. Make sure to subscribe to our podcast for more valuable tips and solutions. Until next time, happy coding!

  • in podcast
  • 2 min read

Configure CircleCI with Karma Test

Welcome to "Continuous Improvement," the podcast where we discuss solutions to common programming and development challenges. I'm your host, Victor. Today, we're going to delve into an issue that many developers face when setting up continuous integration with CircleCI and Karma tests for Angular on Heroku.

So, picture this: you've been working hard on your Angular project, and you're ready to set up continuous integration to ensure that your code is always tested and deployed smoothly. You choose CircleCI as your CI/CD platform because of its popularity and great features. You follow all the necessary steps, configure your build process, and run your tests locally. Everything seems to be working fine until you push your code to CircleCI. Suddenly, your tests fail, and you're left scratching your head.

Let me paint you a clearer picture. The error message you see on CircleCI says, "Uh-oh, some tests have failed! Failing command: npm test. Exit code: 1. Output: > karma start karma.conf.js. sh: 1: karma: not found. npm ERR! Test failed. See above for more details." Frustrating, isn't it?

But fear not, my friends! I have a solution for you. After spending some time digging through forums and consulting the documentation, I found a way to resolve this issue.

To get Karma to work on CircleCI, you'll need to make a small tweak to your CircleCI configuration file, commonly referred to as the circle.yml file. This file specifies the build process and dependencies required for your project.

Here's what you need to do: open your circle.yml file and add the following lines of code:

dependencies:
  pre:
    - npm install -g karma-cli
  cache_directories:
    - ~/.npm

By adding these lines, you're instructing CircleCI to install karma-cli globally before running your tests. This ensures that the karma command is available and avoids the dreaded "karma not found" error. Additionally, the cache_directories line ensures that npm dependencies are cached for faster builds.

Once you make these changes and push your code to CircleCI, you should see your tests running successfully, without any errors. And that's it! You've conquered this challenge and brought continuous integration to your Angular project seamlessly.

Thanks for tuning in to this episode of "Continuous Improvement." I hope you found the solution to the CircleCI and Karma issue helpful. Remember, as developers, we encounter problems all the time, but it's through continuous learning and improvement that we grow. Join me next time as we explore more programming challenges and their solutions.

  • in podcast
  • 3 min read

How to Upload Files with Meteor.js?

Welcome to another episode of Continuous Improvement where we discuss ways to enhance your development skills and solve common coding challenges. I'm your host, Victor. Today, we're going to talk about handling file uploads in a Meteor project.

Last week, a friend of mine ran into an issue when deploying his Meteor app with a file upload feature. It worked perfectly fine on his local machine, but once deployed, the server kept refreshing and failed to load any page. After investigating this issue, I found a solution that I want to share with you all.

The problem arises when using cfs:filesystem, which uploads the file to a public folder directory. This is not allowed by the server for security reasons, resulting in the page failing to load. However, we have a workaround to solve this issue by using GridFS as a storage adapter to insert files into MongoDB.

Let's go through the steps to implement this solution in your Meteor project.

First, you need to install the necessary packages. Replace cfs:filesystem with cfs:gridfs in your project.

Open your terminal and enter the following commands:

meteor add cfs:standard-packages
meteor add cfs:gridfs

Great! Once you've added the required packages, you can move on to the syntax changes. Instead of using FS.Collection, switch to FS.Store.GridFS when declaring your collection.

var imageStore = new FS.Store.GridFS("images");

Images = new FS.Collection("images", {
 stores: [imageStore]
});

Now, let's configure the permissions for your collection. Add the following deny and allow rules based on your requirements.

Images.deny({
 insert: function(){
 return false;
 },
 return false;
 },
 remove: function(){
 return false;
 },
 download: function(){
 return false;
 }
});

Images.allow({
 insert: function(){
 return true;
 },
 return true;
 },
 remove: function(){
 return true;
 },
 download: function(){
 return true;
 }
});

Moving on to the user interface. In your client template, add a file input button for users to select their file.

<input type="file" name="..." class="myFileInput">

Now, let's handle the file upload event in your template.

Template.Profile.events({
   'change .myFileInput': function(event, template) {
      FS.Utility.eachFile(event, function(file) {
        Images.insert(file, function (err, fileObj) {
          if (err){
             // handle error
          } else {
             // handle success depending on your needs
            var userId = Meteor.userId();
            var imagesURL = {
              "profile.image": "/cfs/files/images/" + fileObj._id
            };
            Meteor.users.update(userId, {$set: imagesURL});
          }
        });
      });
   },
});

Don't forget to set up the publication and subscription if you have removed the autopublish package.

Meteor.publish("images", function(){ return Images.find(); });

Subscribe to it in your iron:router to ensure that you have the necessary data when rendering the template.

Router.route('/profile',{
 waitOn: function () {
 return Meteor.subscribe('images')
 },
 action: function () {
 if (this.ready())
 this.render('Profile');
 else
 this.render('Loading');
 }
});

That's it! By following these steps, you can successfully handle file uploads in your Meteor project, even when deployed to a server. If you're using an Amazon S3 bucket, consider using cfs:s3 as the adapter. And as a last resort, consider Filepicker as an alternative approach for file uploads.

I hope this solution helps you overcome any file upload challenges you may encounter in your projects. Remember, continuous improvement is key to becoming a better developer.

Thank you for listening to this episode of Continuous Improvement. Stay tuned for more tips, tricks, and solutions to enhance your coding journey. I'm Victor, your host, signing off.

  • in podcast
  • 3 min read

Q&A with General Assembly Hong Kong

Welcome to Continuous Improvement - the podcast where we delve into the world of web development, share stories, and explore ways to continuously improve our skills and projects. I'm your host, Victor, a software engineer with a passion for coding and a thirst for knowledge.

In today's episode, we'll be discussing my experience in the Web Development Immersive course at General Assembly Hong Kong. But before we dive in, let me give you a brief overview of what I'm currently working on.

At the moment, I'm involved in several exciting projects that make use of JavaScript frameworks. One project is a native iOS/Android mobile app using Ionic and the Neo4j graph database. Another is a video chatroom built with WebRTC, Node.js, and Express.js. And then there's a music visualizer using WebGL and Three.js. Additionally, I'm working on a LinkedIn-like network platform using Angular.js and MongoDB, as well as a real-time voting system using Meteor.js and D3 data visualization. Some of these projects are open-source, so if you're interested in contributing or checking out demos, head over to my GitHub page at github.com/victorleungtw.

Now, let's rewind a bit and talk about my decision to enroll in the Web Development Immersive course at General Assembly. Before diving into web development, I was actually a digital marketer handling social media promotions in Australia. This job sparked my curiosity about how technology is transforming traditional media and marketing channels. Realizing the significance of having a strong web presence, I wanted to develop my coding skills. I chose the WDI course at General Assembly because I wanted an education that matched the pace of cutting-edge technologies.

Moving on, I want to share some insights about the student experience at General Assembly. One of my favorite aspects of the WDI course was the sense of camaraderie among students. We all came from different backgrounds, but we helped and supported each other both technically and emotionally. Building a website is a team effort, no matter your skill level.

Now, let's talk about how the course helped me achieve my goals. My primary objective was to secure a job in the web development industry, and General Assembly's strong network in Hong Kong greatly facilitated that process. I actively networked and participated in various events, such as hackathons. I'm grateful for the support of Justin, who played a significant role during this period.

Throughout the course, I learned countless lessons, but let me share the top three takeaways with you.

Lesson number one is the importance of wireframing. Initially, I underestimated the significance of planning ahead. But as I gained more project experience, I realized that taking the time to wireframe can save us a lot of time in the long run.

Lesson number two is all about user testing. It's crucial to continuously gather feedback from users. After all, code should be driven by market demand and user needs, not solely by what a developer thinks is cool.

Lastly, lesson number three is learning how to learn. The WDI course provided a strong foundation, but technology is ever-evolving. This means that ongoing self-directed learning is crucial to stay on top of the game.

Now that I've completed the course, you might be wondering what's next for me. Well, I live by the principle of "Always Be Coding." The more we code, the better we become. Currently, I'm focusing on strengthening my theoretical foundation to prepare for leadership positions within the IT industry.

And that's a wrap for today's episode of Continuous Improvement. Thank you for joining me on this journey as we explore the world of web development and share our experiences. If you have any questions, suggestions, or topics you'd like us to cover in future episodes, feel free to reach out to me on social media. You can find me on Twitter and LinkedIn. Stay tuned for more episodes focused on continuous improvement in the world of web development. Until next time, keep coding and keep improving!

  • in podcast
  • 2 min read

Does Hack Reactor Make You Smarter?

Welcome to Continuous Improvement, the podcast where we explore personal growth and development through the lens of daily routines. I'm your host, Victor, and today we're diving into the world of software engineering and the impact it can have on our intelligence.

Have you ever wondered how software engineers create exceptional products? It's not just about writing code. It's about having the right mindset and continuously improving our skills. But where do we learn these skills? Is it just from books and online videos?

In a recent blog post titled "The Daily Routine", the author shares their experience as a remote student studying to become a software engineer. They start their day at 12 a.m., being 16 hours ahead of San Francisco time in Hong Kong. Talk about dedication! The course material covers complex topics like recursion, hash tables, and various frameworks. But what stands out is their focus on the daily routines that help them become a better software engineer.

One key aspect highlighted in the blog post is the importance of thinking critically. Being a skilled coder is just one part of the equation. Professional software engineers are fast and consistent learners, effective communicators, and motivated problem solvers. These skills are developed through hands-on practice, observing instructors, and learning from mentors. It's not just about learning from textbooks; it's about experiencing the real challenges of coding.

Another interesting point raised is the value of learning from smarter peers. The author admits feeling inadequate and experiencing imposter syndrome when surrounded by intelligent individuals. But instead of discouragement, the author uses this as an opportunity to learn at a faster rate. It's about embracing the discomfort of being around more knowledgeable peers and growing from that experience.

So, does coding actually make us smarter? The author believes it does and I couldn't agree more. The mindset we adopt and the people we surround ourselves with have a direct impact on our growth. As the saying goes, "You are the average of the five people you spend the most time with." When we interact with intelligent individuals, we push ourselves to think differently, to explore better solutions, and ultimately increase our own intelligence.

And that's a wrap for today's episode of Continuous Improvement. We've explored the daily routines of a software engineering student and how coding can enhance our intelligence. Remember, it's not just about the technical skills, but also about our mindset and surroundings.

If you enjoyed this episode, be sure to subscribe to Continuous Improvement on your favorite podcast platform. And don't forget to leave a review and share it with your friends. Stay curious, keep learning, and always strive for continuous improvement.

[End]

  • in podcast
  • 2 min read

Testing with Mocha: Array Comparison

Hello and welcome to Continuous Improvement, the podcast where we explore common development issues and find solutions for them. I'm your host, Victor, and today we're going to talk about an interesting problem that I encountered while writing a Mocha test suite for array comparison.

So, I had this simple test suite for array comparison that should return true if two arrays have the same values. Here's the code:

describe('Array comparison', function () {
  'use strict';
  it('should return true if two arrays have the same values', function () {
    var myArray = ['a', 'b', 'c'];
    expect(myArray).to.equal(['a', 'b', 'c']);
  });
});

Now, you would expect this test to pass, right? After all, the arrays have the same values. But, to my surprise, the test failed with an AssertionError. Here's the error message:

AssertionError: expected ['a', 'b', 'c'] to equal ['a', 'b', 'c']

So, I started digging into the problem and here's what I found. Arrays in JavaScript are considered as objects in terms of their data type. That's why when we use the to.equal assertion in Mocha, it checks if the two operands are the exact same object, not just semantically equal.

Understanding this, I came up with a few possible solutions. The first one is to use .eql, which stands for "loose equality". This allows us to deeply compare the values of the arrays. Another option is to use .deep.equal, which checks if the operands are equivalent but not necessarily the same object. Alternatively, you can also check the .members in the array instead. And lastly, you can convert the array to a string and then compare.

Now, if you're interested in exploring these solutions further, I highly recommend checking out the references I found helpful. They are the ChaiJS BDD API Arguments Section and the ChaiJS BDD API Members Section.

And that concludes today's episode of Continuous Improvement. I hope you found this discussion insightful and helpful for your own development journey. If you have any topics or issues you'd like me to cover in future episodes, feel free to reach out to me.

Thank you for listening, and until next time, keep improving!

  • in podcast
  • 2 min read

How to Customize Sublime Text's Default Auto-Complete

Welcome back to another episode of Continuous Improvement, the show where we explore ways to enhance our productivity and streamline our workflows. I'm your host, Victor, and today we'll be focusing on a common issue faced by many Sublime Text 3 users.

As someone who uses Sublime Text 3 every day, I can definitely relate to the frustrations we encounter when certain features don't work as expected. One particular annoyance that I've come across is the default auto-complete for if statements. It adds an unnecessary semicolon at the end, causing issues when using tools like JSHint.

But fear not, my fellow developers, for today I bring you a simple solution to this problem. Let's dive right into it!

The first step is to open Sublime Text's preferences. You can do this by navigating to Preferences and selecting Browse Packages. This will open the Sublime Text folder where we'll make the necessary changes.

Once you're in the Sublime Text folder, locate the folder named JavaScript. If you can't find it, don't worry! Simply create a new folder and name it JavaScript.

Now that we have the JavaScript folder open, we need to modify the if.sublime-snippet file. This file controls the auto-completion behavior for if statements.

Open the if.sublime-snippet file, or if it doesn't exist, create a new one with that exact name. This file is written in XML, and we need to make a small adjustment to remove the semicolon.

Let's take a look at the original code snippet. It looks like this:

<snippet>
    <content><![CDATA[if (${1:true}) {${0:$TM_SELECTED_TEXT}}]]></content>
    <tabTrigger>if</tabTrigger>
    <scope>source.js</scope>
    <description>if</description>
</snippet>

As you can see, the issue lies in the unnecessary semicolon at the end:

<content><![CDATA[if (${1:true}) {${0:$TM_SELECTED_TEXT}}]]></content>

To solve this problem, simply remove the semicolon so that the snippet now looks like this:

<snippet>
    <content><![CDATA[if (${1:true}) {${0:$TM_SELECTED_TEXT}}]]></content>
    <tabTrigger>if</tabTrigger>
    <scope>source.js</scope>
    <description>if</description>
</snippet>

By following these simple steps, you'll be able to eliminate the annoying semicolon and improve your coding process. No more manually deleting it every time you write an if statement!

And there you have it, folks! An easy and effective solution to the Sublime Text auto-complete issue. I hope this tip brings you one step closer to an optimized workflow.

As always, remember that continuous improvement is key. If you have any other challenges or suggestions for future episodes, feel free to reach out to me on Twitter @VictorCI.

Thank you for tuning in to Continuous Improvement, the podcast that helps you level up your productivity. Stay tuned for more exciting tips, tricks, and hacks in our upcoming episodes.

Until next time, keep coding, keep improving, and stay productive!

  • in podcast
  • 4 min read

Build an Awesome Chat App in 5 Minutes with Meteor

Welcome back to Continuous Improvement, the podcast where we explore tools and techniques for enhancing our skills and knowledge in the world of software development. I'm your host, Victor. In today's episode, we're going to dive into the world of real-time application development using MeteorJS. So if you've ever wanted to create a chat application, this episode is for you.

Before we get started, make sure to check out the live demo and the source code on GitHub. The live demo is available at hrr2demo.meteor.com, and the source code can be found at github.com/victorleungtw/hrr2demo. Feel free to try the demo and fork the repository so you can follow along with the tutorial.

Alright, let's jump right into it. The first step is to install Meteor on your machine. If you're on macOS or Linux, simply open your terminal and run the command:

curl install.meteor.com | sh

Once Meteor is successfully installed, we can proceed to create our chat application. Open your terminal and run the following command:

meteor create awesomeChatApp

This will create a new Meteor application with the name "awesomeChatApp". Change your directory to the app by running:

cd awesomeChatApp

Great! Now let's try running our app by executing:

meteor

This command will start the Meteor server, and you can see your app in action by opening your browser and visiting localhost:3000.

Now that we have our application set up, let's move on to organizing our code. We're going to create three folders - client, server, and both.

In the client folder, we'll place anything that runs on the client side, which is the user's browser. In the server folder, we'll place anything that runs on the server side. And in the both folder, we'll put code that is used by both the client and server.

Next, we'll create a model to store our chat messages. Inside the both folder, create a file called "collection.js". In this file, we'll define a new Meteor collection called "Messages". Here's the code:

Messages = new Meteor.Collection('messages');

Moving on, let's create the index page where our chat application will be displayed. Inside the client folder, create a file named "index.html". In this file, we'll write our HTML code for the homepage view. Here's an example:

<head>
  <title>chatterbox</title>
</head>
<body>
  {{> loginButtons align="right"}}
  # chatterbox
  {{> input}} {{> messages}}
</body>

As you can see, we're using the Meteor templating system to include other templates such as the "loginButtons", "input", and "messages" templates.

Speaking of the messages template, let's create it now. Inside the client folder, create a folder called "messages". Within that folder, create a file named "messages.html". In this file, we'll define the structure of our chat messages. Here's the code:

<template name="messages">
  {{#each messages}}
    {{name}}:  {{message}}
  {{/each}}
</template>

We also need to create some helper functions to loop through each message in the Messages collection and display them. To do this, create a file named "messages.js" inside the messages folder. Here's an example of the code:

Template.messages.helpers({
  messages: function() {
    return Messages.find({}, { sort: { time: -1 } });
  }
});

Now that our messages template is ready, let's move on to creating the input template. Inside the client folder, create a folder called "input". Within that folder, create a file named "input.html". In this file, we'll define the HTML structure for the chat input box and submit button. Here's an example:

<template name="input">
  <form id="send">
    <input id="message" type="text">
    <input type="submit" value="Submit">
  </form>
</template>

We'll also need to handle the submit event of the form in order to insert a new message into the Messages collection. Create a file named "input.js" inside the input folder. Here's an example of the code:

Template.input.events({
  'submit form': function(event) {
    event.preventDefault();
    var name = Meteor.user() ? Meteor.user().profile.name : 'Anonymous';
    var message = document.getElementById('message');
    if (message.value !== '') {
      Messages.insert({
        name: name,
        message: message.value,
        time: Date.now()
      });
      message.value = '';
    }
  }
});

Now that our chat application is taking shape, let's add a login system using the GitHub authentication method. Meteor makes it easy to add user authentication with its packages. We'll need to add two packages to our application. In your terminal, run the following commands:

meteor add accounts-ui
meteor add accounts-github

With these packages added, the login buttons will automatically appear on our index page, allowing users to authenticate using their GitHub accounts.

Finally, if you want to add some style to your application, create a new folder named "style" inside the client folder. Within the style folder, create a file called "style.css" and add your CSS styles to customize the look and feel of your chat application.

Alright, we've covered a lot in this episode. We've created a chat application using MeteorJS, organized our code into different folders, implemented a messages template to display the chat messages, added an input template with event handlers for submitting new messages, and even integrated a login system using the GitHub authentication method.

If you're ready to take your chat application to the next level, don't forget to deploy it to Meteor's free server. Simply run the command "meteor deploy yourAppName.meteor.com", and your application will be accessible online.

That's it for today's episode of Continuous Improvement. I hope you found this tutorial helpful in your journey towards becoming a better software developer. As always, keep learning and keep improving. This is Victor signing off!