Hoang  Ha

Hoang Ha

1631800835

Single Page Application là gì? Có phải là xu hướng lập trình web trong tương lai?

Tìm hiểu một cách đầy đủ nhất về Single Page Application, tìm hiểu nguyên nhân ra đời, sự khác biệt của web Single Page Application với web truyền thống.

Mình có nghe tới khái niệm Single Page Application và mon men tìm hiểu. Sau khi thực hiện vài project thử nghiệm theo kiểu Single Page Application, mình đã hiểu nó là gì, và theo cảm nhận của mình tại thời điểm đó thì “Single Page Application sẽ là xu hướng lập trình web trong tương lai“. Vậy Single Page Application là gì, nó khác gì với kiểu lập trình web truyền thống, và tính đến nay thì Single Page Application có phải là xu hướng hay không thì các bạn hãy theo dõi trong bài viết này nhé.

Lưu ý: Đây là một bài viết “dài dòng”, vì mình không chỉ muốn bạn biết Single Page Application là gì, mà mình còn muốn bạn hiểu nó, hiểu lý do tại sao nó ra đời cũng như những lưu ý khi lập trình web theo kiểu Single Page Application.

#webdev #spa 

Single Page Application là gì? Có phải là xu hướng lập trình web trong tương lai?
dot NET

dot NET

1631800028

How to Enable Stripe in Blazor Application

Accepting Online Payments With Stripe

Stripe is a great service that makes it easy for developers to accept payments and send payouts globally.

In this episode we’re joined by Stripe Developer Advocate, CJ Avilla, who shows us how to enable Stripe in a Blazor application

[00:00] - Introduction
[00:54] - What is Stripe?
[02:44] - Setting up Stripe.NET 
[14:35] - Understanding price data
[16:30] - Using stripe.js in the frontend 
[20:21] - Learning about checkout sessions

Accepting online payments (Checkout)
https://github.com/cecilphillip/ContosoCraftsStriped 
https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=checkout&lang=dotnet 

#dotnet #stripe #webdev 

How to Enable Stripe in Blazor Application
Code  Camp

Code Camp

1631797214

Gatsby Static Site Generator Tutorial for Bginners - Full Course

Learn how to use Gatsby (Version 3) in this full course for beginners. Gatsby is a static site generator that makes it quick to develop websites. You will learn how to create a recipes site.

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro 
⌨️ (0:00:56) Gatsby Info 
⌨️ (0:02:46) Course Structure 
⌨️ (0:03:28) Course Requirements 
⌨️ (0:05:09) Vs Code 
⌨️ (0:06:02) Module Intro 
⌨️ (0:07:29) Install Gatsby-Cli 
⌨️ (0:09:29) Setup New Gatsby Project 
⌨️ (0:15:07) Folder Structure 
⌨️ (0:29:42) First Page 
⌨️ (0:38:26) Error Page 
⌨️ (0:41:01) Nested Structure 
⌨️ (0:44:41) Links 
⌨️ (0:51:21) Navbar 
⌨️ (0:56:26) Layout Component 
⌨️ (1:05:44) CSS Module Intro
⌨️ (1:06:47) Inline CSS
⌨️ (1:08:27) Global CSS
⌨️ (1:14:01) CSS Naming Issues
⌨️ (1:17:50) CSS Modules
⌨️ (1:28:04) Styled-Components
⌨️ (1:40:51) House Cleaning
⌨️ (1:48:33) Styles
⌨️ (1:53:05) Footer
⌨️ (1:56:31) Error Page
⌨️ (1:57:38) Contact Page
⌨️ (2:03:45) Assets And Icons
⌨️ (2:10:56) Navbar Setup
⌨️ (2:20:11) Navbar Logic
⌨️ (2:24:51) Gatsby Image Info
⌨️ (2:28:30) Sandbox Setup
⌨️ (2:34:36) Install Plugin
⌨️ (2:38:15) Static Image Setup
⌨️ (2:45:41) Shared Props And Options
⌨️ (2:50:20) Options Example
⌨️ (2:58:10) All Layouts
⌨️ (3:04:29) Height
⌨️ (3:09:04) About Page
⌨️ (3:18:56) Hero Page
⌨️ (3:25:19) Gatsby And GraphQL Intro
⌨️ (3:28:39) Gatsby DataLayer In A Nutshell
⌨️ (3:30:20) GraphiQL Interface
⌨️ (3:36:35) SiteMetadata
⌨️ (3:42:14) First Query
⌨️ (3:51:27) Explorer
⌨️ (3:53:52) Static Query Vs Page Query
⌨️ (3:55:18) UseStaticQuery Hook - Code Exporter
⌨️ (4:01:34) UseStaticQuery, GraphQL - From Scratch
⌨️ (4:12:05) Field Alias
⌨️ (4:15:06) Query Keyword, Name And Gatsby Clean
⌨️ (4:18:19) Page Query
⌨️ (4:25:20) Install SOURCE-FILESYSTEM Plugin
⌨️ (4:35:33) AllFile Field
⌨️ (4:41:50) Query Arguments
⌨️ (4:50:03) Static Path Fix
⌨️ (4:51:26) File - Field
⌨️ (4:54:48) SourceInstanceName - Argument
⌨️ (4:56:56) Gallery Setup
⌨️ (5:00:47) GatsbyImageData - Field
⌨️ (5:08:56) Render Gallery
⌨️ (5:20:41) GetImage - Helper Function
⌨️ (5:25:23) Local VS External Data
⌨️ (5:26:50) Headless CMS
⌨️ (5:28:49) Contentful
⌨️ (5:29:37) Setup Contentful Account
⌨️ (5:33:14) Content-Type
⌨️ (5:40:07) Content
⌨️ (5:47:36) Connect Gatsby - Contentful
⌨️ (5:52:36) ENV Variables
⌨️ (5:58:48) AllContentfulRecipe - Field
⌨️ (6:05:57) AllRecipes Component
⌨️ (6:15:00) RecipesList Component
⌨️ (6:26:59) Featured Recipes
⌨️ (6:37:50) Utils Setup
⌨️ (6:42:47) Helper Function
⌨️ (6:50:27) TagsList
⌨️ (6:54:14) Tags Page
⌨️ (7:00:22) Recipe Template Page Setup
⌨️ (7:04:57) Recipe Template Page Walkthrough
⌨️ (7:14:00) Slugify
⌨️ (7:18:15) Query Variables
⌨️ (7:27:05) Recipe Template Query
⌨️ (7:34:27) Recipe Template Return
⌨️ (7:46:45) GATSBY-NODE.JS Setup
⌨️ (7:50:43) Create Tag Pages Programmatically
⌨️ (8:08:36) Tag Template Return
⌨️ (8:20:07) Possible Bug Fix
⌨️ (8:26:53) Fonts
⌨️ (8:32:40) Contact Form
⌨️ (8:37:16) FAVICON
⌨️ (8:39:23) SEO Setup
⌨️ (8:45:40) SEO - Props
⌨️ (8:51:34) SEO - Complete
⌨️ (9:01:05) Netlify Info
⌨️ (9:01:58) Netlify - Drag And Drop
⌨️ (9:05:32) Continuous Deployment
⌨️ (9:14:44) Webhooks

💻 Code: https://github.com/john-smilga/gatsby-v3-tutorial-recipes

#gatsby #webdev 

Gatsby Static Site Generator Tutorial for Bginners - Full Course

What Is ViteJS?

Vite ⚡

Next Generation Frontend Tooling

  • 💡 Instant Server Start
  • ⚡️ Lightning Fast HMR
  • 🛠️ Rich Features
  • 📦 Optimized Build
  • 🔩 Universal Plugin Interface
  • 🔑 Fully Typed APIs

Vite (French word for "fast", pronounced /vit/) is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:

A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).

A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

Read the Docs to Learn More.

Migrating from 1.x

Check out the Migration Guide if you are upgrading from 1.x.

Packages

PackageVersion (click for changelogs)
vitevite version
@vitejs/plugin-vueplugin-vue version
@vitejs/plugin-vue-jsxplugin-vue-jsx version
@vitejs/plugin-react-refreshplugin-react-refresh version
@vitejs/plugin-legacyplugin-legacy version
create-vitecreate-vite version

Download Details:
Author: vitejs
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/vitejs/vite 
License: MIT

#vue #vite #webdev 

What Is ViteJS?
Zara  Bryant

Zara Bryant

1631780964

Getting started with Svelte

Svelte is a front-end JavaScript framework designed to feel like writing standard JavaScript, HTML and CSS. This allows you to quickly start creating components without the necessary boilerplate code other frameworks may require. This week John Papa joins us to walk us through the core concepts of the framework. He'll explain why we should consider using Svelte and highlight some of its best features.

#svelte #javascript #webdev 

Getting started with Svelte
Dylan  Iqbal

Dylan Iqbal

1631777859

Using GoGJ to Build a Interactive Diagrams

In depth introduction to building diagrams with GoJS

GoJS is a JavaScript library for building interactive diagrams. This tutorial covers the essentails of using GoJS by building an org chart diagram from scratch.

Kinds of Diagrams

A diagram is any visual representation of a structure, or a process, or simply data with relationships. They are used to convey the meaning in an intuitive way. Diagrams and graphs are diverse: there are strongly-linked graphs like flowcharts, family trees, genograms, organizational charts, decision trees, and so on. Diagrams may also be visual representations of real-world objects such as shelves (planograms) or shop floors, or room layouts. They can also display kanbans and work-item graphs, graphs atop maps, or more abstract data representations such as plots for statistical visualizations.

Table of Contents

  • Kinds of Diagrams
  • Creating a Diagram
  • Diagrams and Models
  • Styling Nodes
  • Kinds of Models
  • Diagram Layouts: Who's the boss?
  • Link Templates

Diagrams are commonly graph-like in nature, containing Nodes and Links, organized manually or by Layouts and Groups (which may also act as sub-graphs). These concepts are all classes in GoJS, and come with a host of convenience methods for traversing and organizing your diagram structures, allowing users to manipulate those structures, and enforcing interactivity rules.

GoJS makes it easy to form representations from model data, and allows users to interact with them. GoJS adds keyboard, mouse, and touch support, the ability to create, link and edit data, move and rotate objects, copy and paste, save and load, undo and redo, and whatever else your users may need. GoJS allows you to create any kind of diagram, from flowcharts to floorplans.

Some diagrams built with GoJS, taken from the GoJS Samples

Creating a Diagram

You can download the latest version of GoJS here.

If you use Node.js you could download the latest GoJS with npm, npm install gojs, and reference GoJS in the package:

<script src="node_modules/gojs/release/go-debug.js"></script>

For getting-started convenience you could link straight to the GoJS provided by CDNJS, but this is likely to be out of date and I recommend always using the latest version of GoJS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.6.7/go-debug.js"></script>

GoJS diagrams are contained in an HTML <div> element in your page that you give an explicit size:

<!-- The DIV for a Diagram needs an explicit size or else we will not see anything.
     In this case we also add a background color so we can see the area. -->
<div id="myDiagramDiv" style="width:400px; height:150px; background-color: #DAE4E4;"></div>

Pass the <div>'s id to GoJS to make a Diagram:

    var $ = go.GraphObject.make; // We use $ for conciseness, but you can use anything, $, GO, MAKE, etc
    var myDiagram = $(go.Diagram, "myDiagramDiv");

This produces an empty diagram, so not much to look at yet:

See the Pen pymgLO by Simon Sarris (@simonsarris) on CodePen.

This article shows by example how to use go.GraphObject.make to build GoJS objects. For more detail, see Building Objects in GoJS. Using $ as an abbreviation for go.GraphObject.make is handy and we will assume its use from now on. If you use $ for something else in your code, you can always pick a different short variable name, such as $$ or MAKE or GO.

GoJS uses go as the "namespace" in which all GoJS types reside. All code uses of GoJS classes such as Diagram or Node or Panel or Shape or TextBlock will be prefixed with go..

Diagrams and Models

Diagram parts such as Nodes and Links are visualizations of data that is managed by a Model. In GoJS, Models hold the data (arrays of JavaScript objects) that describe Parts, and Diagrams act as views to visualize this data using actual Node and Link objects. Models, not Diagrams, are what you save and load.

Here's an example of a Model and Diagram, followed by the diagram it creates:

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
    });

var myModel = $(go.Model);
// in model data, each node is represented by a JavaScript object:
myModel.nodeDataArray = [
  { key: "Alpha" },
  { key: "Beta" },
  { key: "Gamma" }
];
myDiagram.model = myModel;

See the Pen zqQvvd by Simon Sarris (@simonsarris) on CodePen.

The diagram displays the three nodes that are in the model. Since there was no location information given, GoJS automatically assigns them locations in a grid-like fashion using the default layout. Some interaction is already possible:

  • Click and drag the background to pan the view.
  • Click a node to select it. Click and drag a node to move it around.
  • Click and hold on the background, then start dragging, and a selection box will appear.
  • Use CTRL-C and CTRL-V, or control-drag-and-drop, to make a copy of the selection.
  • Press the Delete key to delete selected nodes.
  • Since the undo manager was enabled, CTRL-Z and CTRL-Y will undo and redo moves and copies and deletions.
  • Read about more Keyboard Commands.

Styling Nodes

Nodes are styled by creating templates consisting of GraphObjects. To create a Node, we have several building block classes at our disposal:

  • Shape, to display a geometry (pre-defined or custom) with colors
  • TextBlock, to display (potentially editable) text
  • Picture, to display images
  • Panel, containers to hold a collection of other objects that can be positioned and sized in different manners according to the type of the Panel (like tables, vertical stacks, and automatically stretching containers)

All of these building blocks are derived from the GraphObject class, so we casually refer to them as GraphObjects or objects or elements.

We want model data properties to affect our Nodes, and this is done by way of data bindings. Data bindings allow us to change the appearance and behavior of GraphObjects in Nodes by automatically setting properties on those GraphObjects to values that are taken from the model data.

The default Node template is simple: A Node which contains one TextBlock. There is a data binding between a TextBlock's text property and the model data's key. In code, the template looks like this:

myDiagram.nodeTemplate =
  $(go.Node,
    $(go.TextBlock,
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text", "key"))
  );

The result is a node that will display the key in the model data object, as we saw with the diagram above.

Nesting can be arbitrarily deep, and every class has its own unique set of properties to explore. More generally, the skeleton of a Node template will look something like this:

myDiagram.nodeTemplate =
  $(go.Node, "Vertical" // second argument of a Node/Panel can be a Panel type
    { /* set Node properties here */ },
    // example Node binding sets Node.location to the value of Node.data.loc
    new go.Binding("location", "loc"),

    // GraphObjects contained within the Node
    // this Shape will be vertically above the TextBlock
    $(go.Shape,
      "RoundedRectangle", // string argument can name a predefined figure
      { /* set Shape properties here */ },
      // example Shape binding sets Shape.figure to the value of Node.data.fig
      new go.Binding("figure", "fig")),

    $(go.TextBlock,
      "default text",  // string argument can be initial text string
      { /* set TextBlock properties here */ },
      // example TextBlock binding sets TextBlock.text to the value of Node.data.key
      new go.Binding("text", "key"))
  );

Now let's make a simple template commonly seen in organizational diagrams — an image next to a name. Consider the following Node template:

  • A Node of "Horizontal" Panel type, meaning that its elements will be laid out horizontally side-by-side. It has two elements:
    • A Picture for the portrait, with the image source data bound
    • A TextBlock for the name, with the text data bound
var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
    });

// define a Node template
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    // the entire node will have an orange background
    { background: "#DD4814" },
    $(go.Picture,
      // Pictures are best off having an explicit width and height.
      // Adding a red background ensures something is visible when there is no source set
      { margin: 10, width: 50, height: 50, background: "red" },
      // Picture.source is data bound to the "source" attribute of the model data
      new go.Binding("source")),
    $(go.TextBlock,
      "Default Text",  // the initial value for TextBlock.text
      // some room around the text, a larger font, and a white stroke:
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      // TextBlock.text is data bound to the "name" attribute of the model data
      new go.Binding("text", "name"))
  );

var model = $(go.Model);
// each node data object holds whatever properties it needs,
// for this app we add the "name" and "source" properties
model.nodeDataArray =
[
  { name: "Don Meow", source: "cat1.png" },
  { name: "Toulouse", source: "cat2.png" },
  { name: "Roquefort",  source: "cat3.png" },
  { } // we left this last node data empty!
];
myDiagram.model = model;

This produces the diagram:

See the Pen jqobMq by Simon Sarris (@simonsarris) on CodePen.

A good Node template will help users visually parse data, even when some of that data is missing. We may want to show some "default" state when not all information is present, for instance when an image does not load or when a name is not known. The "empty" node data in this example is used to show that well-designed node templates can work perfectly well without any of the properties on the bound data.

Kinds of Models

Perhaps we want to show more than just nodes. By adding some Links to show the relationship between individual nodes and a Layout to automatically position the nodes, we can show that Don Meow is really the leader of a cat cartel.

In order to get links into our diagram, the basic Model is not going to cut it. We are going to have to pick one of the other two models in GoJS, both of which support Links. These are GraphLinksModel and TreeModel. (Read more about models here.)

In GraphLinksModel, we have model.linkDataArray in addition to the model.nodeDataArray. It holds an array of JavaScript objects, each describing a link by specifying the "to" and "from" node keys. Here's an example where node A links to node B and where node B links to node C:

var model = $(go.GraphLinksModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B" },
  { key: "C" }
];
model.linkDataArray =
[
  { from: "A", to: "B" },
  { from: "B", to: "C" }
];
myDiagram.model = model;

A GraphLinksModel allows you to have any number of links between nodes, going in any direction. There could be ten links running from A to B, and three more running the opposite way, from B to A.

A TreeModel works a little differently. Instead of maintaining a separate array of link data, the links in a tree model are created by specifying a "parent" for a node data. Links are then created from this association. Here's the same example done as a TreeModel, with node A linking to node B and node B linking to node C:

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B", parent: "A" },
  { key: "C", parent: "B" }
];
myDiagram.model = model;

TreeModel is simpler than GraphLinksModel, but it cannot make arbitrary link relationships, such as multiple links between the same two nodes, or a node having multiple parents. Our organizational diagram is a simple hierarchical tree-like structure, so we can use the simpler TreeModel.

First, we will complete the data by adding a few more nodes, using a TreeModel, and specifying key and parent fields in the data.

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#DD4814" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

var model = $(go.TreeModel);
model.nodeDataArray =
[ // the "key" and "parent" property names are required,
  // but you can add whatever data properties you need for your app
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Roquefort",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Toulouse",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Peppo", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Berlioz", source: "cat6.png" }
];
myDiagram.model = model;

See the Pen JXqYRL by Simon Sarris (@simonsarris) on CodePen.

Diagram Layouts: Who's the boss?

As you can see the TreeModel automatically creates the necessary Links to associate the Nodes, but with the default layout, it's hard to tell whose tree parent is who.

Diagrams have a default layout which takes all nodes that do not have a location and gives them locations, arranging them in a grid. We could explicitly give each of our nodes a location to sort out this organizational mess, but in our case, the easier solution is to use a layout that gives us good locations automatically.

We want to show a hierarchy, and are already using a TreeModel, so the most natural layout choice is TreeLayout. TreeLayout defaults to flowing from left to right, so to get it to flow from top to bottom (as is common in organizational diagrams), we will set the angle property to 90.

Using layouts in GoJS is usually simple. Each kind of layout has a number of properties that affect the results. There are samples for each layout (like TreeLayout Demo) that showcase its properties.

// define a TreeLayout that flows from top to bottom
myDiagram.layout =
  $(go.TreeLayout,
    { angle: 90, layerSpacing: 35 });

GoJS has several other layouts, which you can read about here.

Adding the layout to the diagram and model so far, we can see our results:

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
      layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                { angle: 90, layerSpacing: 35 })
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#DD4814" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Roquefort",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Toulouse",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Peppo", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Berlioz", source: "cat6.png" }
];
myDiagram.model = model;

See the Pen GZapjL by Simon Sarris (@simonsarris) on CodePen.

Our diagram is starting to look like a proper organization, but we could do better with the links.

Link Templates

We can create new Link template that will better suit our wide, boxy nodes. A Link is a different kind of Part, and there are some special considerations. The main element of a Link is the Link's shape, and this Shape will have its geometry computed dynamically by GoJS. For the sake of simplicity, our link is going to consist of just this shape, with its stroke a little thicker than normal and its color set to dark gray instead of black. Unlike the default link template we will not have an arrowhead, because hte visual layout of the graph already implies a direction. And we will change the Link routing property from Normal to Orthogonal, and give it a corner value so that right-angle turns are rounded.

// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
  $(go.Link,
    // default routing is go.Link.Normal
    // default corner is 0
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape, { strokeWidth: 3, stroke: "#555" }) // the link shape

    // if we wanted an arrowhead we would also add another Shape with toArrow defined:
    // $(go.Shape, { toArrow: "Standard", stroke: null }
    );

Combining our Link template with our Node template, TreeModel, and TreeLayout, we finally have a full organization diagram. The finished code and diagram are as follows:

var $ = go.GraphObject.make;

var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
      layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                { angle: 90, layerSpacing: 35 })
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#DD4814" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shape

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Roquefort",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Toulouse",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Peppo", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Berlioz", source: "cat6.png" }
];
myDiagram.model = model;

See the Pen pymjNE by Simon Sarris (@simonsarris) on CodePen.

Now that you are familiar with some of the basics of GoJS, consider viewing the samples to see some of the diagrams possible with GoJS, or read the technical introduction to get an in-depth look at the components of GoJS.

Original article at https://scotch.io

#javascript #typescript #gojs #webdev #html

Using GoGJ to Build a Interactive Diagrams

A JavaScript and TypeScript Library for Building Interactive Charts

GoJS, a JavaScript Library for HTML Diagrams

GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs.

See GoJS Samples

Get Started with GoJS

GoJS is a flexible library that can be used to create a number of different kinds of interactive diagrams, including data visualizations, drawing tools, and graph editors. There are samples for flowchart, org chart, business process BPMN, swimlanes, timelines, state charts, kanban, network, mindmap, sankey, family trees and genogram charts, fishbone diagrams, floor plans, UML, decision trees, pert charts, Gantt, and hundreds more. GoJS includes a number of built in layouts including tree layout, force directed, radial, and layered digraph layout, and a number of custom layout examples.

GoJS is rendered with an HTML Canvas element (with export to SVG or image formats). GoJS can run in a web browser, or server side in Node or Puppeteer. GoJS Diagrams are backed by Models, with saving and loading typically via JSON.

Read more about GoJS at gojs.net

This repository contains both the library and the sources for all samples, extensions, and documentation. You can use the GitHub repository to quickly search through all of the sources.

Minimal Sample

Graphs are constructed by creating one or more templates, with desired properties data-bound, and adding model data.

<script src="go.js"></script>

<script id="code">
  function init() {
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    var myDiagram =
      $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
        { // enable undo & redo
          "undoManager.isEnabled": true
        });

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape will go around the TextBlock
        $(go.Shape, "RoundedRectangle",
          { strokeWidth: 0, fill: "white" },  // default fill is white
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },  // some room around the text
          // TextBlock.text is bound to Node.data.key
          new go.Binding("text", "key"))
      );

    // but use the default Link template, by not setting Diagram.linkTemplate

    // create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" },
      { key: "Gamma", color: "lightgreen" },
      { key: "Delta", color: "pink" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Beta", to: "Beta" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);
  }
</script>

The above diagram and model code creates the following graph. The user can now click on nodes or links to select them, copy-and-paste them, drag them, delete them, scroll, pan, and zoom, with a mouse or with fingers.

Click the image to see the interactive GoJS Diagram

Support

Northwoods Software offers a month of free developer-to-developer support for GoJS to help you get started on your project.

Read and search the official GoJS forum for any topics related to your questions.

Posting in the forum is the fastest and most effective way of obtaining support for any GoJS related inquiries. Please register for support at Northwoods Software's registration form before posting in the forum.

For any nontechnical questions about GoJS, such as about sales or licensing, please visit Northwoods Software's contact form.

Download Details:
Author: NorthwoodsSoftware
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/NorthwoodsSoftware/GoJS 
License:  The GoJS software license.

#gojs #javascript #webdev #tupescript #html

A JavaScript and TypeScript Library for Building Interactive Charts
Joel  Hawkins

Joel Hawkins

1631776938

Building Simple and Complex Flowcharts with GoJS

Explore GoJS, a JavaScript chart library for creating interactive diagrams and flowcharts, by creating a complex tree chart.

If you’ve worked with charting libraries before, you might be familiar with a few popular ones like D3.js, Chart.js, or ApexCharts. These libraries allow us to programmatically draw basic charts like bar charts, line charts, and histograms, as well as advanced charts like scatter plots. However, a common function that these libraries lack or provide minimal support for is creating flowcharts.

In this tutorial, we’ll explore GoJS, a JavaScript library for building interactive charts, by creating simple and complex flowcharts. Let’s get started!

#javascript #gojs #webdev 

Building Simple and Complex Flowcharts with GoJS

A Simple-Login Page Created using VueJS 2

Simple Login

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Download Details:
Author: amiria703
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/amiria703/simple-login 
License: WTFPL

#vue #vuejs #webdev 

A Simple-Login Page Created using VueJS 2

How to Build and Structure a NodeJS Application using MVC

Learn about the Model-View-Controller architectural pattern and build and structure an application in Node.js using MVC.

Developers follow many conventions when programming that may or may not be hard rules, but are often the building blocks of great development projects. These conventions are used so frequently and adopted so widely because they are proven to work.

In this tutorial, we’ll learn about the popular architectural pattern Model-View-Controller (MVC) followed by building and structuring an application in Node.js using MVC.

Tutorial prerequisites

To follow this tutorial, you will need the following:

  • Node.js
  • A MongoDB Atlas account to create our app’s database
  • Yarn if you are not using npm with Node.js
  • A text editor, such as Visual Studio Code

#node #nodejs #webdev 

How to Build and Structure a NodeJS Application using MVC

What's New in Laravel v8.61

The Laravel team released 8.61 with a delete or fail() model method, a value or fail model method, assert if a model exists in a test and the latest changes in the v8.x branch.

Delete or Fail Model Method

Claas Augner contributed a deleteOrFail() method that makes it more convenient to handle model delete errors and less verbose than checking the return value of delete():

1try {2    $model->deleteOrFail();3} catch (\Throwable $e) {4    // ...5}

Assert If a Model Exists Test Method

@RVxLab contributed a assertModelExists() testing method to test whether a model exists in the database. Taylor Otwell also added a assertModelMissing method:

 1$product = Product::find(1); 2  3// ... 4$this->assertDatabaseHas('products', [ 5    'id' => $product->getKey(), 6]); 7  8$this->assertModelExists($product); 9 10$this->assertModelMissing($product);

Value or Fail Model Method

In the only new feature of Laravel 8.60, @Italo contributed a valueOrFail() method, which gets a single column's value from the first result of a query or throws an exception:

1// Before:2$votes = User::where('name', 'John')->firstOrFail('votes')->votes;3 4// Now:5$votes = User::where('name', 'John')->valueOrFail('votes');

Allows Tests to Utilize the Null Logger

Tim MacDonald contributed a new update where tests can utilize the null logger. Check out Pull Request #38785 for more details on the situation and updates made.

Create a Policy While Creating a Model

Tim Fevens contributed a --policy flag, which is also included with the --all flag as well:

1php artisan make:model --policy Post

Release Notes

You can see the complete list of new features and updates below and the diff between 8.59.0 and 8.61.0 on GitHub. The following release notes are directly from the changelog:

v8.61.0

Added

  • Added possibility compare custom date/immutable_date using date comparison (#38720)
  • Added policy option to make:model (#38725
  • Allow tests to utilise the null logger (#38785)
  • Added deleteOrFail to Model (#38784)
  • Added assertExists testing method (#38766)
  • Added forwardDecoratedCallTo to Illuminate/Database/Eloquent/Relations/Relation (#38800)
  • Adding support for using a different Redis DB in a Sentinel setup (#38764)

Changed

  • Return on null in Illuminate/Queue/Queue::getJobBackoff() (27bcf13)
  • Provide psr/simple-cache-implementation (#38767)
  • Use lowercase for hmac hash algorithm (#38787)

v8.60.0

Added

  • Added the valueOfFail() Eloquent builder method (#38707)

Reverted

#laravel #php #webdev 

What's New in Laravel v8.61

Build Fast & Secure Web Apps with WebAssembly

With the advent of WebAssembly, your browser is now more powerful than ever before. Not only does WASM enable high performance code execution, but hidden in the guts of your browser it unlocks a fully functional development OS that boots in seconds and allows you to develop and debug powerful web apps.

#webassembly #wasm #webdev 

Build Fast & Secure Web Apps with WebAssembly
Brooke  Giles

Brooke Giles

1631753368

Getting Started With React.js

React is the most popular JavaScript library out there. It does have a learning curve though. So why is it so loved? Let’s take a look at React and use it to build our sites and apps.

What You’ll Learn
- How to use React
- Why you would want to use React
- How to start building React apps

#react #javascript #webdev 

Getting Started With React.js
Zak Dyer

Zak Dyer

1631752219

Building a Next.js Disney Clone with GraphCMS and GraphQL

Learn how to use GraphQL and GraphCMS by building a Next.js Disney+ Clone! In this 2hr tutorial I show you how to use a Headless CMS in order to build a working streaming app. You must sign up here to follow along with the tutorial: https://go.graphcms.com/ania

00:00 Introduction
01:37 Setting up GraphCMS
25:35 writing GQL queries and mutations
32:54 Starting a Next.js App
37:34 Getting data into our App
50:54 Creating individual movie pages
58:18 Creating Components
01:46:45 Writing mutations in the App
01:57:00 Final styling

Final code: https://github.com/kubowania/disney-clone-graphcms 

#nextjs #graphql #graphcmc #webdev 

 

Building a Next.js Disney Clone with GraphCMS and GraphQL

6 Best Node.js Scheduling Libraries

Discover the best scheduler for your Node.js apps with this in-depth guide to the most popular, performant packages available today.

In this article, I will take you through the most popular job schedulers for Node.js to highlight their key features, differences, and similarities.

In this section, we will look at the most common job schedulers for the Node runtime environment. These include Agenda, Node-schedule, Node-cron, Bree, Cron, and Bull.

  1. Agenda
  2. Node-schedule
  3. Node-cron
  4. Bree
  5. Cron
  6. Bull

#node #nodejs #webdev 

6 Best Node.js Scheduling Libraries