In the time of information overload and rapid technology advancement it is really hard to follow and try out all the interesting projects, articles and samples. I have compiled a list of resources for React Java Script framework that I am interested to try and review and share. I will split resources by topics.
"Build your first React website using Create React App."
Building a React Universal Blog App: A Step-by-Step Guide "...In this step-by-step tutorial, I’ll show you how to build a React Universal Blog App that will first render markup on the server side to make our content available to search engines. Then, it will let the browser take over in a single page application that is both fast and responsive..."
Build a movie search app using React Hooks "Build a movie search app using React Hooks React hooks is finally . And I know there has been a whole lot of excitement around the possibilities that this new set of APIs present"
How to create a simple blog with Node & React "In this article you will learn how to create a personal blog using React & Node. You will also learn how to config your own Webpack, Redux, React-Router and start your node server from scratch. This tutorial does **not contain authentication process"
Secure Your React and Redux App with JWT Authentication "Learn how to add JWT authentication to your React and Redux app. Use Redux middleware to make secure calls to an API. ... Since we are using JWTs, we just need to remove the token // from localStorage"
React Redux Tutorial – Efficient Management of States in React "React is one of the most popular JavaScript libraries which is used for front-end development. It has made our application development easier and faster by providing the component based approach..."
High Performance React Progressive Web Apps "Creating a fast web application involves many cycles of measuring where time is wasted, understanding why it’s happening, and applying potential solutions."
Top 5 Open-Source Apps in React Native You Must Know "In this article, we are taking a look at a few open-source React Native projects, which we recommend you to check out when starting your next mobile app."
Mimic WhatsApp stories using React Native and Firestore "Stories are now a trending feature of most social media applications, including WhatsApp, Snapchat, Instagram, and others. This feature gives us another avenue to share media in the form of images, videos, and text to your contacts or friends, and let you know who viewed your story."
Testing React Apps
How to Test a simple React component "In the first part of this series, we will learn how to test components with local state by testing the changes reflected in our UI."
In the time of information overload and rapid technology advancement it is really hard to follow and try out all the interesting projects, articles and samples. I have compiled a list of resource for Vue JS framework that I am interested to try and review and share. I will split resources by topics.
"This tutorial will help you build a realtime commenting system with Laravel, Vue.js and Pusher. We’ll create a basic landing page, a comments feed, and a submission form where users can submit comments that will be added to the page and viewable instantly. This tutorial is the Laravel version of this one, and when setting up Vuex and Vue.js you can refer to the same sections in that tutorial."
"Recently, me and my friend built a location-based chatroom called — Near (https://near.idgo.me). People can talk with each other nearby in a web app. We would like to share what we did and how to make it. Please feel free to give us feedback by replying this article."
"I love lists. I keep everything I need to do (too many things, usually) in a big to-do list, and the list helps keep me sane throughout the day. It’s like having a second brain!"
How To Create a Real Time To Do List App with Vue, Vuex & Firebase Tutorial "Hello! In this tutorial, we’ll be using Firebase and Vue to create a very simple project that will update your Firestore and your VueJS project in real time. We’re going to be creating a simple to do list before we get started – you need to have NodeJS & NPM installed."
How to Drag and Drop File Uploads with Vue.js and Axios "In this tutorial we are going to combine all of these tricks to make the ultimate file uploader with VueJS and Axios. We will allow users to select any amount of files, remove the ones they don’t, show a preview, and show a status bar for uploading the files."
"In authenticated frontend apps, we often want to change what's visible to the user depending on their assigned role. For example, a guest user might be able to see a post, but only a registered user or an admin sees a button to edit that post."
User Registration and Login with Vue.js and Vuex "In this tutorial we'll go through an example of how to build a simple user registration and login system using Vue.js and Vuex + Webpack 4.16"
"As you write applications with Vue and take advantage of its support for components, you will need to decide how to manage the state of your application..."
"In this post, we will look at how to use render functions to unleash the power of JavaScript by using templates in Vue."
Working with Dynamic Components in Vue.js "To understand what is a dynamic component, let's consider an example. Suppose we are developing a commenting platform where user can come and post a comment on the article. Posting of comment for the logged-in and logged-out user is different..."
Vue.js Series "Welcome to the Vue.js Series. In this blog series, we are going to go through a detailed example of how to use Vue.js to create a fully functional client application that consumes the .NET Core 2.0 Web API server."
"In this article, we will be building a Vue.js Application supported by Vuetify and Axios. The aim of this article is to implement a movie application which will be calling on an API"
Five tools to speed the development of your Vue.js applications. "Not long ago Vue.js passed React in GitHub stars. Although a somewhat shallow metric to measure, no doubt that this is only an indicator of the great success and popularity Vue.js is gathering in the community in 2018.As we use more great frameworks like Vue to build new applications."
Optimize the Performance of a Vue App "Single-page applications sometimes cop a little flack for their slow initial load. This is because traditionally, the server will send a large bundle of JavaScript to the client, which must be downloaded and parsed before anything is displayed on the screen. As you can imagine, as your app grows in size, this can become more and more problematic."
An introduction to dynamic list rendering in Vue.js "An introduction to dynamic list rendering in Vue.js. List rendering is one of the most commonly used practices in front-end web development. Dynamic list rendering is often used to present a series of similarly grouped information in a concise and friendly format to the user"
Using Renderless Components in Vue.js "Most Vue apps need asynchronous HTTP requests and there are many ways to realize them: in the mounted() lifecycle hook, in a method triggered by a button, within the store (when using vuex) or in the asyncData() and fetch() methods (with Nuxt)."
Lazy Loading Individual Vue Components and Prefetching "The purpose of lazy loading is to postpone downloading parts of your application that are not needed by the user on the initial page load which ends up in much better loading time."
How to implement client-side pagination in Vue.js "In this post, you'll see a simple example of how to implement client-side pagination in Vue.js" Dockerizing a Vue Application "This tutorial looks at how to Dockerize a Vue app, built with the Vue CLI, using Docker along with Docker Compose and Docker Machine for both development and production. We’ll specifically focus on"
Creating Custom Directives in Vue.js "Creating Custom Directives in Vue.js. Directives are special attributes with the `v-` prefix. A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes."
How To Use Google Maps With Vue.js Apps "Building a Vue.js address book app with maps to display a contact’s location" Getting Started with Vuetify 2.0 "With the release of Vuetify 2.0, now is the perfect time to start learning how to use this popular component framework." Vuetify.js - Vue Material Design Component Framework "Vuetify is a progressive framework that attempts to push web development to the next level." Building Frontend Using Vuetify "In this article, you will learn how you can quickly build an attractive and interactive frontend very quickly using Vuetify." Simple Vue.js Form Validation with Vuelidate "Thanks to Vue's reactivity model, it's really easy to roll your own form validations. This can be done with a simple method call on the form submit, or a computed property evaluating input data on each change." Deploying a Vue.js app to Netlify "Setting up a Continuous Integration pipeline from _A to Z_ that: runs tests, builds the app and deploys it to Netlify. Let’s do it!" What is Template in Vue.js "...We have learnt in the earlier chapters, how to get an output in the form of text content on the screen. In this chapter, we will learn how to get an output in the form of HTML template on the screen..." How to use Web-Components in Vue "Learn how to seamlessly integrate and use Web Components in VueJS, including custom properties and events"
How to Create an Interactive YouTube Video Selection in Vue.js "In this post I want to share my observations during my implementation of an **interactive** YouTube Video selection in Vue. Maybe this can save you some time, if you plan to do the same."
Vue Native "Vue Native is a framework to build cross platform native mobile apps using JavaScript"
NativeScript and Vue.js "Vue.js is a lightweight framework for building engaging user interfaces. NativeScript powers cross-platform (truly native) mobile apps, using the web skills you already know. Combined they are a fantastic pair for developing immersive mobile experiences."
Testing Vue.Js Apps
Vue Test Utils "Vue Test Utils is the official unit testing utility library for Vue.js."
Testing Vue with Jest "In this article to show how to setup Jest in an Vue.js application. This will guide you through everything in a blank Vue.js template to test components and more"
Unit Testing in Vue: What to Test? "Every developer knows that they should be writing tests, but in reality, many of us don’t do it at all or we aren’t doing enough of it. The problem isn’t the lack of tools, it’s that we don’t have a clear understanding of what these tools are meant to do."
"Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing framework for building dynamic JavaScript applications. You will work with the power of the Model-View-Controller (MVC) pattern on the client, creating a strong foundation for complex and rich web apps."
I came across several requests asking what resources can be used to learn Algorithms and Data Structures. This topic teach at formal Computer Science courses and may be presented in different languages. For these who want to learn in their own time and at own pace I give links below.
This is a comprehensive list of Data Structures and Algorithms used in Competitive Programming with tutorials, implementations and problems presented in C, C++, Java, Python and C#
Taken right from the page: A collection of awesome Algorithms books which should find a place in every programmer’s book self. Includes language specific books in Java, Python, and JavaScript for easy learning.
If you happen to use above resources and find them helpful or know other sources please let me know in the comments below. I wish you good luck in grasping the most common and vast topic of computing.
I recently created sample_service_hosting project that I was planning to deploy to Google Cloud Compute Engine VM running Debian Linux. See blog post "Sample .Net Core Service Hosting". Now I will look into ways to upload files to VM.
I will describe here a couple of ways to upload files to VM.
1. Upload file using browser window 'Upload file' menu
I normally use 'Browser Window' to access command line on Linux VM. It has menu option 'Upload file', which will upload selected file to your user home directory. Unfortunately, it is very slow way of getting file to VM.
2. Upload file using 'Storage Buckets'
Storage Buckets are the basic containers that hold your data. Everything that you store in Cloud Storage must be contained in a bucket. You can use buckets to organize your data and control access to your data. To upload file to Storage Bucket we will use gsutil tool.
Today I am going to look at implementing .Net Core Generic Service Host and host it in .Net Core app to run as daemon under Linux. We will use Google.Cloud.Logging.NLog library to integrate NLog with Stackdriver. See "Integrating NLog with Stackdriver for error reporting on Google Cloud" for more details. App will be deployed on Google Cloud Compute Engine VM running Linux and will run as daemon service. In this sample service I will run a thread that will post an information message to Google Logging Interface. The sample code for this project is hosted on github.
We will create sample_service_hosting .Net core console project, which will implement our SampleService that will post messages to Google Logging Interface.
>mkdir sample_service_hosting
>cd sample_service_hosting
>dotnet new console
Add the following package references
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
NLog, NLog.Extensions.Hosting and Google.Cloud.Logging.NLog are also added for a final stage of the project to support logging messages to Google Cloud Log Viewer.
2. Implement HostBuilder configuration
Now we are going to implement HostBuilder, which will run our Generic Host with RunAsync call. I normally create it in the separate CreateHostBuilder function. It will return null if for some reason we failed to create our generic host and in Main we will need to check for returned result.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
You notices that we adding appsettings.json file as well. Lets add it to our project.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
And a SampleService class, which we will extend in the next section. Add SampleService.cs under Services folder.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In this section we are going to inject nlog into our generic host builder and extend our SampleService host to log message every 10 seconds. We already configured HostBuilder to inject logger in ConfigureLogging section. We need to add .UseNLog() call just after var builder = new HostBuilder() in CreateHostBuilder function. In the SampleService class we will use CancellationTokenSource to cancel our service and stop Run thread when IsCancellationRequested is true. Run function will be called asynchronously and pointer to Task object is saved.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Logger is logging Trace messages and information messages within iteration loop. Add nlog.config to project.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4. Enabling gradual stop of the service on SIGTERM signal
We can deploy this sample_service_hosting app to Linux VM and make it run as a daemon, but with its current implementation it will not properly respond to SIGTERM sent from Linux host to gradually stop and clean up used resources. For this we are going to use injected IApplicationLifetime object and register events ApplicationStarted, ApplicationStopping and ApplicationStoped.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5. NLog.config - Add support for Stackdriver logging
At the start we already added reference to Google.Cloud.Logging.NLog package. Now we need to update nlog.config file to include assembly Google.Cloud.Logging.NLog and GoogleStackdriver target to log to Google Logging Interface.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Our sample_service_hosting app is done. Check the final version of this project on github. I am not going to cover here setup of this app as a daemon on Linux VM Google Cloud Compute Engine. This will be a topic of separate blog post. Stay tuned.
In this post I will create a .net core console app, which will be hosted on Google Cloud Compute Engine VM running Debian Linux console only OS. For this we are going to use Google.Cloud.Logging.NLog .NET client library to integrate Google Stackdriver Logging with NLog. The sample code for this app is hosted on github repository.
Lets create our .Net Core console app project
>mkdir nlog_with_stackdriver
>cd nlog_with_stackdriver
>dotnet new console
Run 'dotnet build' and 'dotnet run' to see if our new project builds and runs successfully.
Now we need to add NLog and Google.Cloud.Logging.NLog packages.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Important to note the use of assembly Google.Cloud.Logging.NLog and in asyncStackDriver target I used logId as "Default". LogId can be set to be the name of the console app or the project.
In the project file include ItemGroup to copy nlog.config file to output directory during build and publish.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
At the end of the program before closing it is important to Flush resources and Shutdown the logger. Windows 10 gives limited time for application to close and under linux as well as Windows important to clear and close external resources used. In our case we are using Google Cloud Logging Agent.
Now our sample app is competed and ready to deploy to Google Cloud Computer Engine VM. Looks like it should just magically work. We do not need provide any authentication with Google Cloud, nor we do not need to specify project ID in nlog.config. When running from within Compute Engine VM Google.Cloud.Logging.NLog will detect all needed settings and just run. But here is a catch...
We need to install Google Cloud Logging Agent on our Debian virtual machine.
In almost all my blog posts I show code snippets or command line examples. To make code examples more readable they need to have code highlighting. One very nice and easy option that I liked for code highlighting is to use github gists. On my github I created one multi-file gist. To include only one file from multi-file gist use code sample below. Replace name before js with one provided by gist’s tag. Replace FileName with name of the file in the gist.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The sample of commands I like to show in the sample box that is not prettifying the text. Use the sample code below to wrap the sample command between “pre” tags.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Recently I was working on creating web browser automation tool that needed to be hosted on Google Cloud Compute Engine. Currently it is a .Net Core console app that uses Puppeteer Sharp library to run chrome headless browser. Compute Engine is a VM with Debian Linux OS with no graphical interface.
After deploying .Net console app to Debian OS and running it I got the error ‘libX11-xcb.so.1: cannot open shared object file: No such file or directory’. To fix it install the following packages.
The initial error went away, but I was presented with the message that chrome needs to run outside sandbox by specifying '--no-sandbox' in the arguments list. Google Cloud Compute Engine VM can run Headless Chrome only by disabling the sandbox.
For more detailed information about issues and solutions discussed check out references below.
In this post I am going to create simple minimalistic dotnet core console application and integrate it with nlog.
Let's create a folder for our project. I am going to name it nlog_console.
$mkdir nlog_console
$cd nlog_console
Now we create dotnet core console app project and if you have Visual Studio Code installed run the second command below.
$dotnet new console
$code . &
Now lets add nlog package to a project.
$dotnet add package nlog
This will add the following code to our project file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Nlog framework requires configuration file 'nlog.config' to specify logger tagerts and rules. We can copy paste the sample nlog.config file from this github page or use one below.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'nlog.config' file need to be copied to destination directory during project build. To achieve it add the code below to a project file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Now we need to add actual logging code to a program. Copy paste the Program class code below.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters