Friday, 4 October 2019

React Learning Resources

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.

Sample projects

"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"

Build a Tic Tac Toe App with TypeScript, React and Mocha
"Learn how to compose a tic-tac-toe app with React and TypeScript components."

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"

How to Build a Productivity Application in React: Part 1
"Building a functional to-do list"

Authentication with React

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 Best Practices and Tips

React Best Practices: Maintaining Large Scale Projects
“The real cost of software is maintenance over time because change is inevitable”

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."

React Courses


React resources on YouTube 




Native Mobile Apps

Creating an Audio Player in React Native
"In this tutorial, you are going to build a functioning interface for an audio player in React Native"

How to use Ionic and React to build a Mobile App
"In this post, we’ll show you how to get started using Ionic with React by building a simple demo app from scratch."

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."

Books







2 comments:
Ярлыки: , , , ,

Wednesday, 25 September 2019

Vue.JS Learning Resources

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.

Sample projects


"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."

"Building a Pomodoro Timer with Vue.js. How I learned a lot trying to make a timer for a challenge and then determined to make a full featured one."

"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."

Authentication with Vue.js


"We will build a simple project that handles authentication and prepare basic scaffolding to use when building the rest of the app."

How to setup JWT authentication with ASP.NET Core 2, Vue.Js, and Facebook OAuth. 

"Create a simple VueJS frontend app running on a Vert.x backend, providing login with Google OAuth2 from scratch"

"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"


Vue.JS Best Practices and Tips


"In this article, I’d like to share a few common issues that you may have to deal with when working with Vue.js."

"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..."

How to avoid SOLID principles violations in Vue. JS application
"In this article I’d like to discuss how can we avoid SOLID principles violation in our Vue.JS project."

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."

Creating Vue.js Client Side – Two-way binding and v-model directive (Create and Update Components)
"We are still missing the create and update components and in this article, we are going to implement these missing parts. With this post, we are going to finalize our application development process."

I created the exact same app in React and Vue. Here are the differences.
"Having used Vue at work, I had a fairly solid understanding of it. I was, however, curious to know what the grass was like on the other side of the fence — the grass in this scenario being React."

How I built a web app with Vue, Vuetify and Axios
"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"

The difference between COMPUTED and METHODS in Vue.js
"Now it’s some months that I’m using Vue.js and something that made me confused for the first few weeks was the difference between computed and methods."

Top 10 most popular Vue.js tutorials
"I’ve created a list of the 10 most popular Vue.js tutorials based on the page views."

How to Add Internationalization to a Vue App
"¡Hola. Bonjour. Ciao. 你好. Here is how you add internationalization to Vue."

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 implement and use Google reCaptcha with Vue.js and .Net
"This article will cover how to implement google reCaptcha v2 using Vue.js and .Net."

A few handy Vue.js tricks
"1, 2, 3, 4, 5, 6 Handy Tips"

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.Js Courses

Vue.Js resources on YouTube 

Native Mobile Apps


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"

How to Test Your Vue Project with Jest and Nightwatch
"Testing is a vital part of the development cycle and a part of life for programmers and developers. ..."

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."

Books


"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."



No comments:
Ярлыки: , , , ,

Thursday, 5 September 2019

Wanna learn Algorithms and Data Structures? Here are the links...

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.

What is a list of data structures that a competitive programmer must know?

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#

Data Structures and Algorithms in JavaScript - Full Course for Beginners

The title says for itself. This is a two hour long YouTube video with code resources listed in description.

Data Structures and Algorithms in C#

Examples shown in .Net Core and .Net Standard framework with Unit Tests.

Learning Resources for Algorithms & Data Structures

This is a collection of online resources for these who wants more.

10 Data Structure & Algorithms Books Every Programmer Should Read

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.


No comments:
Ярлыки: , , ,

Wednesday, 7 August 2019

Uploading files to Google Cloud Compute Engine VM

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.

gsutil cp [filename] gs://[DESTINATION_BUCKET_NAME]/

To download file from Storage Bucket run

gsutil cp gs://[BUCKET_NAME]/[filename] [SAVE_TO_LOCATION_PATH]

References


No comments:
Ярлыки: ,

Friday, 19 July 2019

Sample .Net Core Service Hosting

Windows Service, Linux daemon, Google Cloud Compute Engine

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.

1. Create sample_service_hosting .Net Core console project

>mkdir sample_service_hosting
>cd sample_service_hosting
>dotnet new console
Add the following package references

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.
You notices that we adding appsettings.json file as well. Lets add it to our project.And a SampleService class, which we will extend in the next section. Add SampleService.cs under Services folder.

3. Implement SampleService hosted service


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.
Logger is logging Trace messages and information messages within iteration loop. Add nlog.config to project.

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.

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.

Conclusion


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. 

References:



No comments:
Ярлыки: , , , , ,

Wednesday, 10 July 2019

Integrating NLog with Stackdriver for error reporting on Google Cloud

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.
>dotnet add package nlog
>dotnet add package Google.Cloud.Logging.NLog packages
Create nlog.config file

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.

Add the following code to Main.

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.
>curl -sSO https://dl.google.com/cloudagents/install-logging-agent.sh
>sudo bash install-logging-agent.sh

References:


2 comments:
Ярлыки: , , , , , ,

Thursday, 4 July 2019

Code format and beautifier for code snippets in blogger.com

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.

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.

Example of the sample command box.
C:\run_me.exe
No comments:
Ярлыки:

Wednesday, 26 June 2019

Browser Automation in Google Cloud with Puppeteer Sharp

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.
sudo apt install -y gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
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.

References:


No comments:
Ярлыки: , , , , ,

Wednesday, 2 January 2019

.Net Core console app with NLOG

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.


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.


'nlog.config' file need to be copied to destination directory during project build. To achieve it add the code below to a project file.


Now we need to add actual logging code to a program. Copy paste the Program class code below.


To build and run our console app run code below or add launch.json config to Visual Studio Code.

$dotnet build
$dotnet run

You should see the following output and log file created in the same directory as our console app.

2018/06/19 18:48:13.130|TRACE|Loggin trace. |nlog_console.Program|

References:


3 comments:
Ярлыки: , , ,
Subscribe to: Posts (Atom)