Principle of Least Surprise 😳

Principle Statement :

In interface design, always do the least surprising thing. 😨

Description :

Never surprise the user. ❌

An interface should behave exactly as the user thinks it behaves. ✅

What surprises the user depends on the kind of interface and the type of user. 🖥

The central idea of PLS is to think about how the user would want to use the interface. 🤳🏻

Principle of least astonishment is when you, as an API designer, prevent your users from saying WAT. 😱

🔸🔹🔸🔹

Examples :

1️⃣ Consider an elevator with a button next to it that says "call". ☎️

When you press the button, the payphone phone rings (rather than calling the elevator to that floor). ❌

The correct design would be to put the call button next to the phone rather than the elevator. ⛓


2️⃣ Think of a web page that has popup window that shows a windows style error with an 'ok' button on it. 🆗

People click the 'ok' button thinking it is for the operating system and instead go to another web page. 🌐

This astonishes the user. 😦


3️⃣ The name of a function should reflect what it does. Otherwise, a user of the function will be unpleasantly surprised❗️

Bad :

int multiply(int a, int b)
{
   return a + b;
}

Better :

int multiply(int a, int b)
{
   return a * b;
}

🔹🔸🔹🔸

When it comes to an API ... 👾

• Think about a toString() method that instead of printing out the fields returns back "to be implemented". 🤥

• An equals() method that works on hidden information. 👁

• Sometimes people try to implement a sorted list class by changing the add method to call sort() on the array afterwards. 🗂

This astonishing because the add method is supposed to append to the list. 🗳

This is especially astonishing when one gets back a List object with no knowledge that somewhere deep inside, someone violated the interface contract. 🤔

Having a method that does one distinct thing contributes to reduction of astonishment. ✅

https://t.me/pgimg/115

〰〰〰〰〰〰
#Principle #PLS
@ProgrammingTip

Nivo ✨

Provides supercharged React components to easily build dataviz apps, it's built on top of d3. ⚛️

Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts. 💎

Features :
🔸 Highly customizable
🔹 Motion/transitions
🔸 Component playground
🔹 Exhaustive documentation
🔸 Isomorphic rendering
🔹 SVG charts
🔸 HTML charts
🔹 Canvas charts
🔸 Server side rendering API
🔹 Gradients
🔸 Responsive charts

https://t.me/pgimg/116

[ Source ] : github.com/plouc/nivo

[ Document & Website ] : nivo.rocks

〰〰〰〰〰〰
#React #Chart #Calendar
#Treemap #JavaScript

@ProgrammingTip

Use DbContextPooling to Improve the Performance : .NET Core 2.1 Feature 💎

If you are familiar with .NET Core, then you might be knowing AddDbContext method. 🧐

This method is used to inject dependency of DbContext into your controller and it should be written in the Startup.cs class. 💉

So in case of AddDbContext, a new instance will be created for each request and would get disposed once the work is done. ♻️

New contexts are getting created for each request. ⏳

That is still fine but if there are more than 1k requests – 1k times object will be created and disposed, unless you have made it a Singleton. ☝🏻

Creating and disposing of so many objects may impact the performance. ❌

How DbContextPooling can help❓

https://t.me/pgimg/117

[ Article ] : http://bit.do/dbpol

〰〰〰〰〰〰
#AspMvc #Core
@ProgrammingTip

Using MariaDB with ASP.NET Core 2.0 🌊

What is MariaDB❓

MariaDB is a community-developed fork of the MySQL relational database management system intended to remain free under the GNU GPL. 🐧

Development is led by some of the original developers of MySQL, who forked it due to concerns over its acquisition by Oracle Corporation. 💎

Basically it is a fork of MySQL which is guaranteed to stay open source, and as noted it is supposed to be a drop-in replacement for MySQL. ✨

So let’s put this to the test with a simple ASP.NET Core application. 🔥

https://t.me/pgimg/118

[ Article ] : bit.do/mariad

〰〰〰〰〰〰
#AspMvc #Core #MariaDB #MySql
@ProgrammingTip

18 Interesting Things from jQuery ✨

jQuery is one of the most popular JavaScript libraries in use today. 💎

It is the library that is beloved by most of the web developers for scripting. 👾

In this article I'm going to share you some of the interesting things from that library. 🔥

https://t.me/pgimg/119

[ Article ] : bit.do/jqint

〰〰〰〰〰〰
#JavaScript #jQuery
@ProgrammingTip

Blazor 🔥

An experimental .NET web framework using C#/Razor and HTML that runs in the browser via WebAssembly that is supported by Microsoft. 💎

Blazor is a .NET web framework that runs in any browser. 🌐

Blazor uses only the latest web standards. No plugins or transpilation needed. ✅

It runs in the browser on a real .NET runtime (Mono) implemented in WebAssembly that executes normal .NET assemblies. ⚡️

It works in older browsers too by falling back to an asm.js based .NET runtime. 👴🏿

Blazor will have all the features of a modern web framework, including ✨ :
• Components
• Routing
• Layouts
• Forms and validation
• Dependency injection
• JavaScript interop
• Live reloading
• Server-side rendering
• Full .NET debugging


https://t.me/pgimg/120

[ Github ] : bit.do/blazor
[ Learn ] : learn-blazor.com
[ Flight Finder ] : bit.do/ffinder
[ Sample CRUD ] : bit.do/bzcrud

〰〰〰〰〰〰
#Blazor #AspMvc #Core
@ProgammingTip

Avoid Lazy Loading Entities in ASP.NET Applications 🙅🏻‍♂️

Lazy Loading is an Entity Framework feature that lets you worry less about the specific amount of data you need to fetch with a given query. 😌

Instead, you write simple queries, and Entity Framework will load the minimal amount of data (which is a good thing), and then will only fetch additional data on an as-needed basis. ✅

That is, rather than eager loading all of the related data a given entity might have, lazy loading is a technique that has EF perform the minimal amount of work needed up front, and then only performs additional work if it turns out to be necessary. ⚠️

This sounds like a great feature, but you should turn it off in your ASP.NET web apps. 🚫

This article explains why you should do this. 🧐


https://t.me/pgimg/121

[ Article ] : bit.do/lazyy

〰〰〰〰〰〰
#AspMvc #LazyLoading
@ProgrammingTip

Ngrok 🔥

Ngrok allows you to expose a web server running on your local machine to the internet. 🌐

Just tell ngrok what port your web server is listening on :👂🏻

ngrok http [port] -host-header="localhost:[port]"

Result ✅ :

Tunnel Status : online
Version : 2.0/2.0
Web Interface : 127.0.0.1:4040
Forwarding : http://92832de0.ngrok.io
Forwarding : https://92832de0.ngrok.io

You can now access your website from ✨ :
http://92832de0.ngrok.io

When you start ngrok, it will display a UI in your terminal with the public URL of your tunnel and other status and metrics information about connections made over your tunnel 🛠.


Inspecting Your Traffic 📊

Ngrok provides a real-time web UI where you can introspect all of the HTTP traffic running over your tunnels. 👀

After you've started ngrok, just open http://localhost:4040 in a web browser to inspect request details. 🌀


https://t.me/pgimg/122

[ Docs ] : ngrok.com/docs

〰〰〰〰〰〰
#Ngrok #Testing
@ProgrammingTip

A shorter and URL friendly GUID ✨

This a small helper class in C#. 👾

The class encodes a GUID into a 22 character long string and decodes the string back to the original GUID again. ✅

It takes a standard GUID like this 🔬 :

c9a646d3-9c61-4cb7-bfcd-ee2522c8f633

And converts it into this smaller string 💎 :

00amyWGct0y_ze4lIsj2Mw

It basically just converts a GUID into a base64 string and shortens it a bit. ⚡️


https://t.me/pgimg/123

[ Article ] : bit.do/guids

〰〰〰〰〰〰
#CSharp #GUID
@ProgrammingTip

ASP.NET Core 2 & Angular 5 - Full Stack Web Development with .NET Core & Angular 📕

Author : Valerio De Sanctis 🖊

Publisher : Packt 💎

〰〰〰〰〰〰
#Book #AspMvc #Core #Angular
@ProgrammingTip

API Feature Folders ⚡️

In ASP.NET Core (and unlike ASP.NET 5 / Web API 2), Web API controllers are just controllers. 🗂

You don’t need to inherit from a different base type or anything like that. ❌

What’s more, your API controllers should be returning DTOs that are separate from your underlying domain or data model. ↔️

What I’ve found to be a better organization is to do away with the Controllers folder (or keep it around if you’re using view-based controllers) and instead use feature folders for your APIs. 💎

I’m partial to having a root level API folder but if you’d prefer to put your features in the root of the project that would work, too. 👍🏻

Within each feature folder, you include the controller along with any model types it needs to work with, like this 👾 :

https://t.me/pgimg/124

Obviously one benefit of this approach is that it’s more cohesive. ✅

Things that change together are located physically next to one another, and the friction involved in moving between different folders with too many files in them is greatly reduced. ✂️

Another nice thing about this approach is that it just works. Unlike view-based controllers, you don’t need to change anything about how ASP.NET Core is configured to have this organization structure work for you. ✨


[ Article ] : bit.do/apif

〰〰〰〰〰〰
#AspMvc #Core #API
@ProgrammingTip

A Mini-Course on React Native Flexbox ✨

Flexbox solves design issues that are particularly challenging on mobile, and it does so strikingly well — without requiring hacky CSS or Javascript tricks. 🗂

But there’s a learning curve.
The property names all sound incredibly similar and do nothing to indicate what sets them apart. ↔️

On top of that, each property has a set of values that are mostly similar, yet slightly different, from each other. And to compound the confusion, not all properties of the Flexbox standard are included in React Native. 🌀

This can cause surprises when you try to follow regular CSS documentation, only to discover that React Native doesn’t implement a particular feature, such as reverse flex❗️

To help make it easier to internalize the rules of Flexbox, I’ve decided to write the guide that I would have liked to read — with the underlying concepts explained and simple examples along the way. 👾

Doodle along with me and get comfortable solving design scenarios with Flexbox. 💎


https://t.me/pgimg/125

[ Article ] : bit.do/rnat

〰〰〰〰〰〰
#ReactNative #Design
@ProgrammingTip

InversifyJS ⚡️

A powerful and lightweight inversion of control container for JavaScript & Node.js apps powered by TypeScript. 💎


About 👤

InversifyJS is a lightweight (4KB) inversion of control (IoC) container for TypeScript and JavaScript apps. 💉

An IoC container uses a class constructor to identify and inject its dependencies. 🗂

InversifyJS has a friendly API and encourages the usage of the best OOP and IoC practices. ✅


Motivation 💜

JavaScript now supports object oriented (OO) programming with class based inheritance. These features are great but the truth is that they are also dangerous. ☠️

We need a good OO design (SOLID, Composite Reuse, etc.) to protect ourselves from these threats. The problem is that OO design is difficult and that is exactly why we created InversifyJS. ✨

InversifyJS is a tool that helps JavaScript developers write code with good OO design. 💯


Philosophy 🌀

InversifyJS has been developed with 4 main goals 🔝 :

• Allow JavaScript developers to write code that adheres to the SOLID principles. ☝🏻

• Facilitate and encourage the adherence to the best OOP and IoC practices. 🔥

• Add as little runtime overhead as possible. ⏰

• Provide a state of the art development experience. 🌈


https://t.me/pgimg/126

[ Github ] : bit.do/inversify

〰〰〰〰〰〰
#JavaScript #DI #Inversify
@ProgrammingTip

Favor Privileges over Role Checks ⛔️

A very common practice in web applications, especially those written using the ASP.NET built-in Role provider, is to perform role checks throughout the code to determine whether a user should have access to a particular page or control or command. 🔍

For instance, you might see something like this ♻️ :

if (User.IsInRole(Roles.Administrators))
{
    SomeSpecialControl.Visible = true;
}

The problems with the maintainability of this approach become apparent after a short while.❗️

For one, any buttons or other controls on the SomeSpecialControl above that post back to the page should also do a role check to ensure the user submitting the postback is in an acceptable role, otherwise a security hole may be present and users outside of these roles may be able to perform privileged actions. ☠️

🔸🔹🔸🔹

Introducing Privileges ✅

Wouldn't it be better to act like this❓

EditorPanel.Visibility = CurrentUser.CanEdit(CurrentArticle);

This is very clear and is at the appropriate level of abstraction. 💎

CanEdit isn’t itself a privilege; we can look at it as a sort of helper method in this case that lets us write clear and concise code. ✨


https://t.me/pgimg/127

[ Full Article ] : bit.do/prauth

〰〰〰〰〰〰
#AspMvc #Authorization
@ProgrammingTip

Real World - Conduit 🌏

"The mother of all demo apps." 🔥

While most "todo" demos provide an excellent cursory glance at a framework's capabilities, they typically don't convey the knowledge & perspective required to actually build real applications with it. ✅

Real World solves this by allowing you to choose any front-end like 🌈 :
• React / Redux / Mobx
• Angular
• Vue
• Elm
• Aurelia
• Clojure

And any back-end like 🌀 :
• ASP.NET Core
• Node / Express
• F#
• Laravel
• Django
• Rails
• Go + Gin
• Rust
• Scala & Play Framework
• Hapi.js

And see how they power a real world, beautifully designed fullstack app called "Conduit". ✨


https://t.me/pgimg/128

[ Projects ] : bit.do/reworld

〰〰〰〰〰〰
#Template #RealWorld
@ProgrammingTip

Carbon✨

Create and share beautiful images of your source code. 🌈

You know all of those code screenshots you see on Twitter❓

Although the code's usually impressive, we saw room for improvement in the aesthetic department. ✅

Carbon is the easiest way to create beautiful images of your source code. 🌌

So what are you waiting for❓
Go impress all of your followers with your newfound design prowess. 🎨

https://t.me/pgimg/129

[ Website ] : carbon.now.sh

〰〰〰〰〰〰
#Code #Scheme
@ProgrammingTip

Real-Time Web Application Development : With ASP.NET Core, SignalR, Docker, and Azure 📕

Author : Rami Vemula 🖊

Publisher : Apress ✨

〰〰〰〰〰
#Book #AspMvc #Core #SignalR #Docker #Azure
@ProgrammingTip

Flexbox Froggy 🐸

Flexbox Froggy is a game for learning CSS flexbox. 👾

Flexbox Froggy takes inspiration from the classic arcade game Frogger, and web literacy games like the brilliant CSS Diner and Erase All Kittens, where you learn about CSS selectors and HTML markup respectively. 🔥


https://t.me/pgimg/130

[ Learn ] : flexboxfroggy.com

〰〰〰〰〰〰
#FlexBox #CSS
@ProgrammingTip

Using Redis Cache in .NET Core 🗂

Redis is a high performance distributed cache. It’s great for storing data that you are going to need again and again in a short period of time when you don’t want to use processing power to “create” that data again. ♻️

Think number crunching or heavy SQL queries for data that doesn’t change often. 🚫


Roll Your Own 👤

First off. You can absolutely roll your own Redis Cache services abstracted by your own interfaces etc. ✅

You may find it a little difficult to find libraries that target .NET Core, but this will change over time. ⏳

In saying that, there is a “.NET Core” way of doing things that is a little different. It does tie you into the framework a little, but it abstracts away the caching completely and let’s Microsoft handle it and that’s what we are going to go over today. 💎


https://t.me/pgimg/131

[ Article ] : bit.do/rcache

〰〰〰〰〰〰
#Redis #AspMvc #Core #Cache
@ProgrammingTip