JavaScript Archives - PureSourceCode

Introduction to Node.js

Enrico Rossini — Sat, 12 Oct 2024 16:16:51 +0000

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.

The post Introduction to Node.js appeared first on PureSourceCode.

New MarkdownEditor components for JavaScript and Blazor

Enrico — Mon, 01 Jul 2024 16:48:11 +0000

Today, after 2 years, I released a new Markdown Editor components for JavaScript and Blazor. The full source code is available on GitHub.

The post New MarkdownEditor components for JavaScript and Blazor appeared first on PureSourceCode.

Dynamically add JavaScript from Blazor components

Enrico — Tue, 25 Jan 2022 20:44:06 +0000

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

The post Dynamically add JavaScript from Blazor components appeared first on PureSourceCode.

How to add notifications to your PWA

Enrico — Tue, 01 Dec 2020 16:27:46 +0000

In this post, I explain and give you the code of how to add notifications to your PWA (Progressive Web Application).

The post How to add notifications to your PWA appeared first on PureSourceCode.

The Service Worker Lifecycle with PWA

Enrico — Tue, 01 Dec 2020 12:25:11 +0000

The Service Worker Lifecycle with PWA can be one of those states: parsed, installing, installed, activating, activated, and redundant

The post The Service Worker Lifecycle with PWA appeared first on PureSourceCode.

Intro to PWAs and Service Workers

Enrico — Tue, 01 Dec 2020 10:56:14 +0000

This post is an intro to PWAs and Service Workers. Progressive Web Apps, aka PWAs, are becoming more and more popular everyday

The post Intro to PWAs and Service Workers appeared first on PureSourceCode.

TypeScript: JavaScript made Easier and Simpler

Enrico — Sat, 06 Jun 2020 13:40:32 +0000

TypeScript is a language that is strongly typed and object-oriented. TypeScript is a combination of JavaScript and Type Annotations

The post TypeScript: JavaScript made Easier and Simpler appeared first on PureSourceCode.

Web Browsers still allow drive-by-downloads in 2020

Enrico — Tue, 02 Jun 2020 06:56:24 +0000

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…

The post Web Browsers still allow drive-by-downloads in 2020 appeared first on PureSourceCode.

First example with ReactJs

Enrico — Wed, 31 Jul 2019 10:30:16 +0000

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.

The post First example with ReactJs appeared first on PureSourceCode.

First AngularJs example

Enrico — Wed, 24 Jan 2018 22:13:36 +0000

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

The post First AngularJs example appeared first on PureSourceCode.

C# and HTML5: drag and Drop elements

Enrico — Mon, 28 Mar 2016 22:19:05 +0000

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…

The post C# and HTML5: drag and Drop elements appeared first on PureSourceCode.

Integration with C# and ReactJS

Enrico — Wed, 09 Mar 2016 00:09:41 +0000

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…

The post Integration with C# and ReactJS appeared first on PureSourceCode.

ReactJS: component Lifecycle and Rendering

Enrico — Wed, 09 Mar 2016 00:04:45 +0000

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…

The post ReactJS: component Lifecycle and Rendering appeared first on PureSourceCode.

Creating a URL shortener using ASP.NET WepAPI and MVC

Enrico — Thu, 28 Jan 2016 12:28:00 +0000

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…

The post Creating a URL shortener using ASP.NET WepAPI and MVC appeared first on PureSourceCode.

Automatic Table of Contents

Enrico — Thu, 10 Dec 2015 11:46:41 +0000

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…

The post Automatic Table of Contents appeared first on PureSourceCode.

Write C#. Run JavaScript.

Enrico — Tue, 20 Oct 2015 12:23:22 +0000

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

The post Write C#. Run JavaScript. appeared first on PureSourceCode.

Track events for Google Analytics and Piwik

Enrico — Fri, 04 Sep 2015 13:55:00 +0000

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="proxy.php?url=https://puresourcecode.com/" onclick="TrackEvent('Link to my site', 'PSC',…

The post Track events for Google Analytics and Piwik appeared first on PureSourceCode.

Crypt and decrypt your email with JavaScript

Enrico — Thu, 30 Jul 2015 09:23:09 +0000

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

The post Crypt and decrypt your email with JavaScript appeared first on PureSourceCode.

Classical Inheritance in JavaScript

Enrico — Wed, 22 Jul 2015 11:38:00 +0000

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…

The post Classical Inheritance in JavaScript appeared first on PureSourceCode.

Using the UpdateProgress to lock down controls in the browser

Enrico — Thu, 25 Jun 2015 12:31:09 +0000

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…

The post Using the UpdateProgress to lock down controls in the browser appeared first on PureSourceCode.

Chart.js Asp.net : Create Pie chart with database jQuery Ajax C#

Enrico — Wed, 22 Apr 2015 18:04:00 +0000

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…

The post Chart.js Asp.net : Create Pie chart with database jQuery Ajax C# appeared first on PureSourceCode.

Use a reuseIdentifier Where Appropriate

Enrico — Sat, 26 Apr 2014 13:31:00 +0000

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…

The post Use a reuseIdentifier Where Appropriate appeared first on PureSourceCode.