Website development *
Making the Web Better
Frontend Weekly Digest (25 – 31 Mar 2019)
Details
Probably, there was just a cat picture, then they thought up eyes movement and developer implemented the idea.Now user visits the page and checks out the effect. It’s cool and pleasant small feature, it catches, then user discusses it with colleagues or friends and even repeats the feature. It could be this easy, if not:
Frontend Weekly Digest (4 – 10 Mar 2019)
Frontend Weekly Digest (4 – 10 Feb 2019)
SAPUI5 for dummies part 2: A complete step-by-step exercise
Introduction & Recap
In the previous blog post, we started designing our application rendering a table with some Business Partner. We learned what OData protocol is, how to read an OData XML manifest, how to bind data to a Table and how to customize columns layout based on different screen resolution.
What will be covered on this exercise
With Part 2 of this series of blog posts, we will learn how to interact with data in our Tables and List. We will learn how to filter and sort data in a smart way.
- Create JSONModel to handle local data
- Set a default sizeLimit to our JSONModel
- FilterBar: UI control that displays filters in a user-friendly manner to populate values for a query
- Use XML Fragments to create a View Settings Dialog to handle sort and group data
- Filter and Sort data
- Add an Info Toolbar to our table to display useful information
[SAP] SAPUI5 for dummies part 1: A complete step-by-step exercise
Introduction & Recap
In the previous blog post, we have created a new SAPUI5 application on our SAP SCP WebIDE Full stack and we have configured it to use the destination to the SAP Netweaver Gateway Demo ES5.
What will be covered on this exercise
- What is an XML Metadata Manifest and what’s inside it?
- How to use our OData Model and bind it into our application
- Use a
sap.m.Table
with items and property binding - Use
sap.ui.model.type.DateTime
to format JavaScript Date - How to style columns to act differently on mobile/tablet/desktop devices
Really typing Vue
inb4: This is not another "setting up" a new project with Vue and TypeScript tutorial. Let's do some deep dive into more complex topics!
typescript
is awesome. Vue
is awesome. No doubt, that a lot of people try to bundle them together. But, due to different reasons, it is hard to really type your Vue
app. Let's find out what are the problems and what can be done to solve them (or at least minimize the impact).
Frontend Weekly Digest (10 – 16 June 2019)
Protocol for communication between iframe and the main window
From time to time, developers need to establish communication between several browser tabs to be able to send messages from one tab to another and receive responses. We have also faced this need at some point.
Some solutions already exist (like, for instance, BroadcastChannel API). However, its browser support leaves a lot to be desired, so we decided to use our own library. When the library was ready, that functionality was no longer required. Nevertheless, another task emerged: communication between an iframe and the main window.
On closer examination, it turned out that two-thirds of the library would not have to be changed — only some code refactoring was necessary. The library is a communication PROTOCOL that can work with text data. It can be applied in all cases in which text is transferred, such as iframes, window.open, worker, browser tabs or WebSocket.
How it works
Currently, the protocol has two functions: sending messages and subscription to events. Any message in the protocol is a data object. For us, the main field in that object is type, which tells us what kind of message it is. The type field is an enum with the following values:
Web and Azure Tool Updates in Visual Studio 2019
Hopefully by now you’ve seen that Visual Studio 2019 is now generally available. As you would expect, we’ve added improvements for web and Azure development. As a starting point, Visual Studio 2019 comes with a new experience for getting started with your code and we updated the experience for creating ASP.NET and ASP.NET Core projects to match:
If you are publishing your application to Azure, you can now configure Azure App Service to use Azure Storage and Azure SQL Database instances, right from the publish profile summary page, without leaving Visual Studio. This means that for any existing web application running in App Service, you can add SQL and Storage, it is no longer limited to creation time only.
Web application firewalls
Web application firewall
Web application firewalls (WAFs) are a type of intrusion detection and prevention system and might be either a hardware or software solution. It is specifically designed to inspect HTTP(s) and analyse the GET and POST requests using the appalling detection logic explained below. Web application firewall software is generally available as a web server plugin.
WAF has become extremely popular and various companies offer a variety of solutions in different price categories, from small businesses to large corporations. Modern WAF is popular because it has a wide range of covered tasks, so web application developers can rely on it for various security issues, but with the assumption that this solution cannot guarantee absolute protection. A basic WAF workflow is shown below.
Its main function is the detection and blocking of queries in which, according to WAF analysis, there are some anomalies, or an attacking vector is traced. Such an analysis should not make it difficult for legitimate users to interact with a web application, but, at the same time, it must accurately and timely detect any attempted attack. In order to implement this functionality, WAF developers usually use regular expressions, tokens, behavioural analysis, reputation analysis and machine learning, and, often, all these technologies are used together.
In addition, WAF can also provide other functionality: protection from DDoS, blocking of IP-addresses of attackers, tracking of suspicious IP-addresses, adding an HTTP-only flag to the cookie, or adding the functionality of CSRF-tokens. Each WAF is individual and has a unique internal arrangement, but there are some typical methods used for analysis.
Frontend Weekly Digest (25 Feb – 3 Mar 2019)
Let's help QueryProvider deal with interpolated strings
Specifics of QueryProvider
QueryProvider can’t deal with this:
var result = _context.Humans
.Select(x => $"Name: {x.Name} Age: {x.Age}")
.Where(x => x != "")
.ToList();
It can’t deal with any sentence using an interpolated string, but it’ll easily deal with this:
var result = _context.Humans
.Select(x => "Name " + x.Name + " Age " + x.Age)
.Where(x => x != "")
.ToList();
The most painful thing is to fix bugs after turning on ClientEvaluation (exception for client-side calculation), since all Automapper profiles should be strictly analyzed for interpolation. Let’s find out what’s what and propose our solution to the problem.
Frontend Weekly Digest (29 Apr – 5 May 2019)
Frontend Weekly Digest (8 – 14 Apr 2019)
SAPUI5 for dummies part 4: A complete step-by-step exercise
Introduction & Recap
In the previous blog post, we learned how to move our current application into a Master-Detail app displaying Business Partner as a list (master) and its detail information with Sale Orders inside the detail page (detail).
What will be covered on this exercise
With Part 4 of this series of blog posts, we will learn how to create a second drill-down page with information about the Sale Order detail and display a table of Sale Order items.
The most important part of this exercise is to understand how to Delete (part of the CRUD operations) a Sale Order Item of a Sale Order.
- ODataModel: we have already used it to display server-side information about our Business Partner, Order Sale. Now we’re going to use it to display Sale Order Item and delete them from the set. For this purpose, we’re going to use the remove method
This is our main task in this exercise but it’s not the only thing we’ve done in the code. Here’s a list of the things you have to do to get to the final result:
- Add a new route and target in the manifest.json to navigate to the BusinessPartnerSeleOrderItem page
- Listen on the Sale Order click event and navigate to the SaleOrder detail (where we will display sale order detail and sale order items)
- Add a FilterBar to filter the Sale Order Item’s table
- Add a ViewSettingsDialog to sort/group Sale Order Items
- Expand the ToProduct navigation property of a SaleOrderItem entity to display Product information into table’s rows