This is an introduction to Node.js that is a server to run JavaScript apps. After a brief history, I will create a simple web application.
Introduction to Node.js
Read More
Category: JavaScript
New MarkdownEditor components for JavaScript and Blazor
Today, after 2 years, I released a new Markdown Editor components for JavaScript and Blazor. The full source code is available on GitHub.
Dynamically add JavaScript from Blazor components
In this new post, I show you the code to dynamically add JavaScript from a Blazor components coming from the component itself or another URL
How to add notifications to your PWA
In this post, I explain and give you the code of how to add notifications to your PWA (Progressive Web Application).
The Service Worker Lifecycle with PWA
The Service Worker Lifecycle with PWA can be one of those states: parsed, installing, installed, activating, activated, and redundant
Intro to PWAs and Service Workers
This post is an intro to PWAs and Service Workers. Progressive Web Apps, aka PWAs, are becoming more and more popular everyday
TypeScript: JavaScript made Easier and Simpler
TypeScript is a language that is strongly typed and object-oriented. TypeScript is a combination of JavaScript and Type Annotations
Web Browsers still allow drive-by-downloads in 2020
It’s 2020, and numerous browsers still allow drive-by-downloads from what is meant to be secure contexts such as sandboxed iframes. For those unfamiliar with the term, a drive-by-download is when a user visits a site, and a file download is initiated without the user’s interaction. This technique can be used to distribute unwanted software and malicious programs in the hopes that users will accidentally or mistakenly execute the downloads and get infected. New research from ad security firm Confiant shows that secure contexts such as sandboxed iframes can be abused to allow drive-by-downloads…
First example with ReactJs
ReactJs time! To start with my first example in ReactJs, I’m using Codepen. Create a new pen. In Settings, under JavaScript select Babel as JavaScript Preprocessor. Then in Add External Scripts/Pens search for React. Add react and react-dom. See the Pen React Starter by Enrico (@erossini) on CodePen.
First AngularJs example
If you are looking around for a new job as .NET developer, all companies are asking you AngularJs. Then I’m starting to learn it and I share with you the secret of this framework. I’m assuming you are a .NET developer like me and you want to learn AngularJs and then I won’t explain you the basis of HTML. Open Visual Studio and create a new solution with ASP.NET Empty web Site. Now you have your project. Add from NuGet AngularJS.Core. Done. We start now with a little complicate example.…
C# and HTML5: drag and Drop elements
HTML5 API includes Drag and Drop (DnD) native functionality. The event listener methods for all the drag and drop events accept Event object which has a readonly attribute called dataTransfer. The event.dataTransfer returns DataTransfer object associated with the event This is the list of events fired during the different stages: Event Description dragstart Fires when the user starts dragging of the object. dragenter Fired when the mouse is first moved over the target element while a drag is occuring. A listener for this event should indicate whether a drop is…
Integration with C# and ReactJS
The goal for this project is to show a list of books with ReactJS from a WebAPI written in C#. You can download this project from Github. New project Start by creating a new ASP.NET MVC 4 project: 1. File → New → Project 2. Select ".NET Framework 4" and Templates → Visual C# → Web → ASP.NET MVC 4 Web Application. Call it "CSReact" 3. In the "New ASP.NET MVC 5 (or 4) Project" dialog, select the MVC (or empty) template. Install ReactJS.NET We need to install ReactJS.NET to…
ReactJS: component Lifecycle and Rendering
These are the functions that will be, or can be, included in your specification object when you’re creating a component. Part of these specification functions are lifecycle functions, which when encountered, will show the details as to when they execute during the life of a component. Function invocation order during the initial render of a React component Component lifecycle that happens when the state changes on a component Lifecycle of a component when it has altered props render Every React component must have a render function. This render function will…
Creating a URL shortener using ASP.NET WepAPI and MVC
In this tutorial, I use several techniques and tools. I use Microsoft Visual Studio 2015 and the latest version of all components. ASP.NET MVC: Microsoft’s modern web application framework. As the name says, it pushes you to use the MVC (model view controller) software design principle. ASP.NET Web API: Web API and MVC are used together in many applications. With MVC, the HTML of the web pages are rendered on the server, and with Web API you can, like the name says, create an API. Web API also uses the…
Automatic Table of Contents
Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically on-the-fly with JavaScript. This is true for several reasons: It’s easier – write the JavaScript once and it can create the Table on Contents on every page you need it. It’s more reliable – the…
Write C#. Run JavaScript.
Open Source C# to JavaScript Compiler and Frameworks. Run Your App On Any Device Using JavaScript. Use Bridge.NET to build platform independent applications for mobile, web and desktop. Run on iOS, Windows, Mac, Linux and billions of other devices with JavaScript support. Compile your C# code into native JavaScript and deploy on Billions of devices. Try it on bridge.net or fork it on GitHub
Track events for Google Analytics and Piwik
After my post of yesterday, I’ve worked for creating a script to integrate Google Analytics (new version with analytics.js) and Piwik (Piwik is the leading open-source analytics platform similar to Google Analytics. You can download it from its site or directly in your IIS with WebMatrix). With this code you have only one function to call in every part of your page. Automatically the function detects download, email, phone number, external links and tracks them. You can insert in an anchor a code like: <a href=”https://puresourcecode.com/” onclick=”TrackEvent(‘Link to my site’, ‘PSC’,…
Crypt and decrypt your email with JavaScript
If you want to publish an email on your site but you want to protect it, I have a simple solution HTML <!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title></title> <script src="crypto.js"></script> <script src="uncrypto.js"></script> </head> <body> <h1>JavaScript eMail Encrypter</h1> <p>You can encrypt mailto: links on a website, so that spiders can’t detect them, with a simple javascript.</p> <p>Example: <a href="javascript:linkTo_UnCryptMailto(‘nbjmup;spttjojAftjb/dp’);">rossini [at] esia [dot] co</a></p> <form> <div> <div class="container"> <div class="desc">enter your eMail address:</div> <div><input type="text" name="emailField" size="40" maxlength="255" /></div> </div> <div class="container"> <div class="desc"><input type="button" name="ecrypt" value="Crypt eMail Address" onclick="CryptMailto()" /></div>…
Classical Inheritance in JavaScript
JavaScript is a class-free, object-oriented language, and as such, it uses prototypal inheritance instead of classical inheritance. This can be puzzling to programmers trained in conventional object-oriented languages like C++ and Java. JavaScript’s prototypal inheritance has more expressive power than classical inheritance, as we will see presently. Java JavaScript Strongly-typed Loosely-typed Static Dynamic Classical Prototypal Classes Functions Constructors Functions Methods Functions But first, why do we care about inheritance at all? There are primarily two reasons. The first is type convenience. We want the language system to automatically cast references…
Using the UpdateProgress to lock down controls in the browser
If it takes awhile for the server to process the postback (e.g. complex rules or badly written code ), the user may not realize that the server is processing the request. This can lead to all kinds of issues with users that are not savvy or familiar with web applications (multiple clicks, moving off the page, etc.). Consequently, I want to tell the user that the server is processing the request and disable the controls on the page. Let’s break this down into two steps: show a message, and disable…
Chart.js Asp.net : Create Pie chart with database jQuery Ajax C#
This article explains using Chart.js in Asp.net C# Web Application we can create a pie chart with database MS SQL server connectivity via jQuery ajax call. You can also have a look on related article, . Now in this post here we create a pie chart by using chart.js library and bind data from our database MS Sqlserver, with jQuery ajax calling. Here we are creating a pie chart, which shows data from the database (Ms SQL server). In my database, I have a table which stores data (website traffic…
Use a reuseIdentifier Where Appropriate
A common mistake in app development is not setting the correct reuseIdentifier for UITableViewCells, for UICollectionViewCells, or even UITableViewHeaderFooterViews. For maximum performance, a table view’€™s data source should generally reuse UITableViewCell objects when it assigns cells to rows in tableView:cellForRowAtIndexPath:. A table view maintains a queue or list of UITableViewCell objects that the data source has marked for reuse.What happens if you don’t use a reuseIdentifier? If you don’t, your table view will configure a brand-new cell each time a row is displayed. This is an expensive operation and will…