Balancing on a pivot with Flexbox

Balancing on a pivot with Flexbox

Let me show you a way I recently discovered to center a bunch of elements around what I call the pivot. I promise you that funky HTML is out of the question and you won’t need to know any bleeding-edge CSS to get the job done.

I’m big on word games, so I recently re-imagined the main menu of my website as a nod to crossword puzzles, with my name as the vertical word, and the main sections of my website across the horizontals.

Here’s how the design looks with the names of some colors instead:

And here’s a sample of the HTML that drives this puzzle:

<div class="puzzle">
  <div class="word">
    <span class="letter">i</span>
    <span class="letter">n</span>
    <span class="letter">d</span>
    <span class="letter">i</span>
    <span class="letter pivot">g</span>
    <span class="letter">o</span>
  <!-- MORE WORDS -->

In this example, the letter g is the pivot. See how it’s not at the halfway mark? That’s the beauty of this challenge.

We could apply an offset to each word using hard-coded CSS or inline custom properties and walk away. It certainly gets an award for being the most obvious way to solve the problem, but there’s a downside — in addition to the .pivot class, we’d have to specify an offset for every word. The voice in my head tells me that’s adding unnecessary redundancy, is less flexible, and requires extra baggage we don’t need every time we add or change a word.

Let’s take a step back instead and see how the puzzle looks without any balancing:

Imagine for a moment that we use display: none to hide all of the letters before the pivot; now all we can see are the pivots and everything after them:

With no further changes, our pivots would already be aligned. But we’ve lost the start of our words, and when we reintroduce the hidden parts, each word gets pushed out to the right and everything is out of whack again.

If we were to hide the trailing letters instead, we’d still be left with misaligned pivots:

All of this back-and-forth seems a bit pointless, but it reveals a symmetry to my problem. If we were to use a right-to-left (RTL) reading scheme, we’d have the opposite problem — we’d be able to solve the right side but the left would be all wrong.

Wouldn’t it be great if there was a way to have both sides line up at the same time?

As a matter of fact, there is.

Given we already have half a solution, let’s borrow a concept from algorithmics called divide and conquer. The general idea is that we can break a problem down into parts, and that by finding a solution for the parts, we’ll find a solution for the whole.

In that case, let’s break our problem down into the positioning of two parts. First is the “head” or everything before the pivot.

Next is the “tail” which is the pivot plus everything after it.

The flex display type will help us here; if you’re not familiar with it, flex is a framework for positioning elements in one-dimension. The trick here is to take advantage of the left and right ends of our container to enforce alignment. To make it work, we’ll swap the head and tail parts by using a smaller order  property value on the tail than the head. The order property is used by flex to determine the sequence of elements in a flexible layout. Smaller numbers are placed earlier in the flow.

To distinguish the head and tail elements without any extra HTML, we can apply styles to the head part to all of the letters, after which we’ll make use of the cascading nature of CSS to override the pivot and everything after it using the subsequent-sibling selector .pivot ~ .letter.

Here’s how things look now:

Okay, so now the head is sitting flush up against the end of the tail. Hang on, don’t go kicking up a stink about it! We can fix this by applying margin: auto to the right of the last element in the tail. That just so happens to also be the last letter in the word which is not sitting somewhere in the middle. The addition of an auto margin serves to push the head away from the tail and all the way over to the right-hand side of our container.

Now we have something that looks like this:

The only thing left is stitch our pieces back together in the right order. This is easy enough to do if we apply position: relative to all of our letters and then chuck a left: 50% on the tail and a right: 50% on our head items.

Here’s a generalized version of the code we just used. As you can see, it’s just 15 lines of simple CSS:

.container {
  display: flex;
.item:last-child {
  margin-right: auto;
.item {
  order: 2;
  position: relative;
  right: 50%;
.pivot, .pivot ~ .item {
  order: 1;
  left: 50%;

It’s also feasible to use this approach for vertical layouts by setting the flex-direction to a column value. It should also be said that the same can be achieved by sticking the head and tail elements in their own wrappers — but that would require more markup and verbose CSS while being a lot less flexible. What if, for example, our back-end is already generating an unwrapped list of elements with dynamically generated classes?

Quite serendipitously, this solution also plays well with screen readers. Although we’re ordering the two sections backwards, we’re then shifting them back into place via relative positioning, so the final ordering of elements matches our markup, albeit nicely centered.

Here’s the final example on CodePen:


Developers are better at balancing than acrobats. Don’t believe me? Think about it: many of the common challenges we face require finding a sweet spot between competing requirements ranging from performance and readability, to style and function, and even scalability and simplicity. A balancing act, no doubt.

But the point at which we find balance isn’t always midway between one thing and another. Balance is often found at some inexplicable point in between; or, as we’ve just seen, around an arbitrary HTML element.

So there you have it! Go and tell your friends that you’re the greatest acrobat around.

Source link

How to Build a Single Page Application With React, Redux, Ro...

How to Build a Single Page Application With React, Redux, Ro…

As technology continues to evolve, single page applications (SPA), along with microservice-based backends become more and more popular. Single page application does not require page reloading during use once it has been loaded the first time, which means it’s more user friendly faster than legacy UI made by something like JSP, PHP, ASP, etc.

There are various techniques available that enable the browser to retain a single page even when the application requires server communication. In this article, I’m going to introduce how to make that with React. You need to have a quick look at basic tutorials in regards to npm, react components, babel, webpack. The code is available in Github:

1. Architecture Chart

This is an UI MVC architecture chart. The view is React class component with its own states, constants, actions(events), reducers(event handlers), containers(connect to Redux global store). The model and controller are Redux store, which acts as a global centralized manager, dispatching actions and executing reducers. The state change will in turn result in React components updating.

2. React Components

By leveraging Redux concepts, we can make React components clean and well-organized. As illustrated below, we can see there are actions, constants, containers, reducers, and main class in each component folder.

Application file structure

Let’s take login page as an example.

2.1 Actions

Actions are plain JavaScript objects. Actions must have a type property that indicates the type of action being performed. You send them to the store using store.dispatch(). The functions that dispatch actions are called action creators, such as logOut and logIn. For the logIn function, we leverage redux-thunk middleware to perform asynchronous dispatches. This is really useful when you need to do conditional dispatches.

2.2 Reducers

The reducer is a pure function that takes the previous state and an action, and returns the next state. The concept comes from map-reduce. Redux also provides a combineReducers helper function to merge separate reducing functions from different components into a single reducing function so that we can pass to createStore.

2.3 Containers

Container components are used to connect/subscribe to Redux store, which means it can bind to redux store state change and actions.

2.4 React Components

In this example, we still use React class components, however, since the latest React version has introduced hooks to functional components, it’s no longer recommended to use class components. We can dispatch redux actions just like calling a methods thanks to react-redux connect component (illustrated in 2.3).

3.Redux Store

In the stores.js, we create a global store and register redux middleware, such as logger and thunk.

All React container components need access to the Redux store so they can subscribe to it. It’s recommended to use <Provider> to make the store available to all container components in the application without passing it explicitly. You only need to use it once when you render the root component. Please check index.js to see how to pass the Redux store.

4. Routers

Routers play a key role in single page application. Its most basic responsibility is to dynamically render some UI(partly) when its path matches the current URL. It needs Link tag to work together with html navigation tags.

5. Service Worker

First of all, you may ask why we need a service worker. Suppose you have an e-commerce web site which is a single page application. You navigate to shopping cart from index page, and you won’t have any issues thanks to UI router mechanism. But if you open a new window and paste  URL like “localhost/cart/” to the browser to visit the shopping cart, then it will send the request – “localhost/cart/” to backend to fetch the page. Obviously you will get 404 error. Service worker comes out for this scenario.

In my example, I use webpack sw-precache-webpack-plugin to handle that.

Source link

Why Flutter Is Perfect for Building Start-Up Apps?

Why Flutter Is Perfect for Building Start-Up Apps?

Mobile application development is constantly struggling to fill the gap between Android and iOS platforms. Many seasoned app developers have declared Flutter as the future of mobile app development over React-native in building high-performing, robust mobile applications.

Google introduced cross-platform app development by introducing Flutter in 2018, and its been no looking back for Flutter since then as it is strongly taking over React-native.

What Is Flutter?

According to the official Flutter website:

Flutter is Google’s UI toolkit for building, natively compiled applications for mobile, web, and desktop from a single codebase.

Flutter is an open-source app development framework that provides faster development across all operating systems. It is staying true to its tagline ‘Build beautiful native apps in record time by providing an interactive user interface that allows the developers to design applications according to the requirement of the user.

More than a framework, it is a complete SDK (software development kit) solution that provides everything needed for cross-platform mobile application development.

Flutter uses a single code base for creating Android and iOS apps, making it an ideal choice for startups and businesses that wants to invest in mobile apps. It has a reactive development architecture where UI elements are automatically updated at the time of variables in codes that are updated.

Some of the key features includes the following.

  • Dart based object-oriented language.
  • Hot Reload to get all updates at the right time.
  • An added advantage is a command called “Flutter Doctor” that immediately detects the bugs (saving a lot of fixing time).
  • GPU rendering UI that is beneficial in developing apps rich in graphic designing.
  • Large library of widgets.
  • Native ARM(advanced RISC machines)

Who’s Using Flutter?

companiesFrom startups to Fortune 500 companies, everyone is using Flutter app development for creating beautiful applications for their businesses. Some of them include:

  • Google
  • ebay
  • BMW
  • Square
  • Alibaba
  • Tencent
  • TeachersHub
  • Klaster Me
  • Game of Fifteen
  • RESTler –REST API for client
  • Hamilton Music
  • No Seen For Facebook
  • Reflecty

Why Flutter Is Perfect for Start-Up Apps?

From startups to enterprise app development to minimum viable product development, every developer world over is embracing Flutter with open arms to develop cost-effective, robust and highly scalable  mobile applications for their business ventures.

Mobile application development is expensive, so startup companies with budget constraints can easily expand their access to all popular platforms by using Flutter apps. Flutter SDKs provide unique ways to cut costs in comparison to native android and iOS apps. Mainly, it speeds up the whole development process and reduces the  production cost with an added advantage of building beautiful apps UI with smooth animations.

Due to its advanced technology and design features, Flutter provides the freedom to work in any direction(including network, cameras, storage, geolocation, etc.) making it every developer’s darling technology for building high-performing apps. Also, app developers are getting all the best features under one roof saving a lot of precious time.

Let’s take a look more deeply by understanding the main benefits for startups apps-

1. Supports Cross-Platform App Development

Flutter supports cross-platform app development which assures wider reach, increased probability of downloads, thus providing more users in a limited budget.

Cross-platform development is startups best friend because developers can create a powerful native experience with a single codebase(for both iOS and Android), hence reducing development costs incurred to greater extents. However, in cross-platform apps, UX and UI 

are sometimes compromised.

With Flutter’s ‘code once’ approach, developers can greatly reduce development efforts and provide faster time-to-market.

2. Faster Code Writing Through Hot Reload

Flutter offers a faster and dynamic app development process where the developer can easily make changes in the code and see them directly through its “Hot Reload”  feature.

Simply put, if there is an error during the development process the developers can immediately fix it without any recompilation and redeployment of the code and can continue from where they left. This can make the developers see their changes in real-time and quickly add on the new features, fix bugs and experiment.

Also, Hot Reload provides better collaboration between designers and developers to work in tandem on UI, improve  the design, and immediately check effects.

Hot reload increases the overall productivity of the project and allows experiments within a few seconds without long delays.

3. Integrated With Firebase

Startups don’t need resources or DevOps in deploying backend as Flutter is integrated with Firebase which provides strong cloud storage, real-time database management services, hosting and authentication facilities.

Normally, developers have to create tools to make development smoother but Firebase has a unique collection of common tools to automate the development which makes the development process easier for the developers. Firebase provides a strong backend to work efficiently as it makes the infrastructure serverless, redundant and scalable.

build creative apps

4. MVP Development

Flutter can help startups build an MVP that works on multiple platforms to showcase its full functionality, thus saving valuable time and cost. Through MVPs, startups can assess the real picture before its launch about the response their product is receiving in the market.

As it is startups are running short on budgets, so MVPs can provide a cost-effective development process by evaluating all possible shortcomings based on the feedback received and executing the required changes in time.

5. Less Time to Market

Faster app development is a big challenge for startups. Flutter being an open-source, cross-platform solution with a hot reload feature, can quickly build mobile apps and reach the market in a shorter duration of time.

6. User-Friendly Interface

With Flutter, developers can give an amazing eye-catching UI experience to its users by building a beautiful sleek app.

Flutter comes with customized widgets for both iOS and Android which creates a smoother user experience by providing a native feel to end-users without costing much. Its widget catalog is humongous amongst all cross-platform tools and widgets are used not only for views but also for the entire screen and even the app itself.

Additionally, Flutter has got the material design for Android and iOS widgets or Cupertino for iOS apps to create responsive apps.

Why Should Mobile App Startups Choose Flutter?

Flutter seems to be the perfect answer to all the startup needs with budget constraints looking to expand their reach. This framework gives much-needed boost to your startup by providing speedy and reliable cross-platform app solutions in the following ways-

  •  Startups can relax over budget constraints with Flutter as it is an open-source technology.
  • Minimum risk of application re-engineering because of  the constant evolution of the platform.
  • It can be easily integrated with existing applications.
  • One-stop solution taking all your worries away from development to deployment.
  • Flutter supports the latest reactive framework
  • Flutter libraries enable the developers to localize the application according to geographical location as per the language, text, and preferred layout.
  • Flutter provides an array of rich ready-to-use widgets for startups.
  • Maintenance of the app is much quicker due to the hot reload feature, reducing the risk of losses.
  • Its robust, fast, and easy to learn.
  • It is giving a tough fight to other native applications due to its smooth interface and programming.
  • The best thing about flutter is its better productivity with low costs, making it the perfect choice for startup apps.

What to Look for in Flutter?

Flutter 1.7 was launched in 2019! Flutter is slowly gaining a stronger ground in app development and becoming the developer’s 1st choice in building stable apps  because of its imperative features and benefits. Flutter is strongly backed by huge community support and global leaders, who are constantly evolving the framework for the best and polishing it even more to take it ahead in 2020 and beyond.

The future of flutter seems brighter for SDK in the coming years as it doesn’t have constraints like native as well as also supports the integration of native codebase.

Final Words

Flutter is surely a delight technology for developers to work upon due to its many advantages for business than risks, all set to reach the pinnacle of success in coming few years. If you’re planning to build a startup app for both iOS and android platforms, do consider Flutter app development after weighing its pros and cons as per your business needs and requirements.

It’s a great open-source framework for developing apps that require less investment and provides better productivity in fewer efforts.

Source link


How To Add Tab On Admin Side Using The Plugin In nopCommerce…

In this article, you will see how you can add tabs on a nopCommerce admin side using a plugin. Let’s directly dive into the implementation part because I believe when developers search for this type of article, they are looking for solutions that will help them to learn or troubleshoot issues. The following are the steps to add a tab on the admin side using a plugin in nopCommerce 4.3. 


 First, identify on which admin side page you want to add a tab. In this article, I am adding a tab on the admin order edit page. So, first I need to find the order edit page in the source code to check the WidgetZone of page. In this widget zone, we will return our new tab view page. I am finding a widget zone on ~PresentationNop.WebAreasAdminViewsOrderEdit.cshtml. The Widgetzone’s name is AdminWidgetZones.OrderDetailsBlock


Add ViewComponent and WidgetZone Name

 To add a custom tab on the admin side I am using the existing nopCommerce NivoSlider plugin. First, go to the plugin file PluginsNop.Plugin.Widgets.NivoSliderNivoSliderPlugin.cs. If it’s a new plugin then make sure your plugin inherits IWidgetPlugin. Go to GetWidgetZones() method, and in that add the widget zone which you found on the order edit page; i.e. AdminWidgetZones.OrderDetailsBlock. Now GetWidgetZones() will look as follows:

Now we will add viewcomponentname in GetWidgetViewComponentName in the same file. We add viewcomponent name WidgetsAdminOrderDetails. This viewcomponent calls when we view the admin order edit page. And this view component will return the list of tabs that we want to add. 

Create ViewComponent and TabList and TabContent cshtml file

 Now we will create view component file WidgetsAdminOrderDetailsViewComponent.cs following is code. The file location will be Nop.Plugin.Widgets.NivoSliderComponentsWidgetsAdminOrderDetailsViewComponent.cs

Now we will create AdminOrderTabList.cshtml. In this file, we will provide a list of tabs with their tab content file. We will create this file at the following location: PluginsNop.Plugin.Widgets.NivoSliderViewsWidgetsAdminOrderDetailsAdminOrderTabList.cshtml. I am creating a new folder WidgetAdminOrderDetails under the view folder of the plugin. Following is AdminOrderTabList.cshtml file.

If you want to add multiple tabs in the order edit page, then replicate this code in the same file and provide different cshtml file locations for tab content. [Tips: I copied this content from order/ edit.cshtml file of nopcommerce.]

For tab content we specified /Plugins/Widgets.NivoSlider/Views/WidgetsAdminOrderDetails/_CustomTab.Order.cshtml. So, following is the content of _CustomTab.Order.cshtml file content. 

Now please make sure both .cshtml files are marked as copies as in the below screenshot. If you are using VSCode then you manually need to add this in a plugin.csproject file i.e(PluginsNop.Plugin.Widgets.NivoSliderNop.Plugin.Widgets.NivoSlider.csproj) 


Now build a plugin and check the order edit page ( AdminOrderList -> Click on VIEW button) of nopCommerce. Following is the final result, as you can see the CustomTabTitle tab.

edit order details

Following is a screenshot of the files which I added or changed to implement this functionality. 


Your feedback and suggestions help me to improve this article. In this article, I didn’t explain the code very much because the main purpose of this article is to show complete steps to add custom tabs in admin nopCommerce using the plugin. If you face any problem while you follow this article then please mention it in the comments so I can improve. If you want to see any other articles about nopCommerce then also let me know in the comments.

Thanks in advance for taking the time to read and make suggestions. 

Source link