1. What happens when we combine SSR and responsive design

If we mix SSR with responsive design, there are lots of challenges. Why?

Lack of window object.

On server side, there is no window object. So if we are trying to do conditional rendering according to the width attribute of window , then server won’t generate the related content at all. That can detract some benefit of SSR.

In this article, first I will talk about responsive design and SSR and then several possible solutions which might be suitable to solve the problem in some conditions.


1. Intro

This is a classic attack type and many developers know this concept already and are aware of how to escape them. I still want to write a special story for this topic, including some samples so that we can know how to construct the most popular SQL Injects. So what is SQL Injection?

A SQL injection attack consists of insertion or “injection” of a SQL query via the input data from the client to the application. A successful SQL injection exploit can read sensitive data from the database, modify database data (Insert/Update/Delete), execute administration operations on the database (such as shutdown the DBMS), recover the content of a given file present on the DBMS file system and in some cases issue commands to the operating system. …


When talking about shadowDOM, not everyone has the experience of using it as most of developers are using Light DOM based on Bootstrap, Material UI to composite the whole DOM. Then what is ShadowDOM? Why do we need ShadowDOM?

ShadowDOM: A set of JavaScript APIs for attaching an encapsulated “shadow” DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality.

Why do we need ShadowDOM?:

  • Create reusable custom element

And in this story, I will walk you through a Card Implementation using ShadowDOM and other Web Components (namely Custom Elements and Template/Slot). …


There are many designs which need a component to be sticked to a position, such as good search component:

Image for post
Image for post

How would we do this before?

  • Bind the scroll event

This can be a little tricky and have some negative affect on performance. So how can we do this now? position: sticky !

Sticky: The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. …


This story will show you how to implement a tiny photo collaging page using newly introduced feature drag and drop in HTML5. Several days ago as I was browsing jobs available on LinkedIn, I noticed there is a company which provide online video editing. The smooth effect is awesome. I immediately thought of this drag and drop feature and implemented a simple app and write this article. This story includes following parts:

  • Drag and Drop an existing image

In this story, I will show how to implement masonry using flex and grid:

  • Simple horizontal and vertical masonry

When I think of Masonry, the first image in my mind is the steps road, the trails in the park and the solid ancient wall. However, when we think masonry in web page, yes, Google Images with images comes one by one until they fill up the whole area:

Image for post
Image for post

I’m an engineer, and English is my secondary language. When I encounter these symbols, I always feel frustrated and don’t know how to read them. So I summarized them into this story and wish this can help others.

Numeric Operators

+       plus, positive
- minus, negative
* multiply
× multiply
/ is divided by
÷ is divided by
1/5 one-fifth
2/3 two-thirds
% modulus
= equal
≈ approximately equal
< less (angle bracket)
≤ less than or equal
<= less than or equal
> greater
≥ greater than or equal
>= greater than or equal
√ square root
x^y x to the y, x to the yth power
logb(a) log to the base b of a…

In this story, I will show you how to implement Carousel using simple HTML and Javascript code, along with some CSS animation ( transform and transition, simple ones! ). When we think about Carousel, we can recall the valuable film times in the early 1990s. Such a long time! And if you use Bootstrap, you must have an impression of Carousel component, just an impression. Because if we don’t design front page of websites, we may never have the chance to use it. A classical Carousel looks like this:

Image for post
Image for post

First, lets divide the task and conquer them one by one:

  • Three Parts in the same…


A modal is quite useful to show details and capture users’ input. There’re many libraries like Bootstrap that we can use in production environment easily. But how could we implement one ourselves? In this article, let’s make a simple one and have some fun!

When we think about a modal, there are several key features:

  • A modal should have header, body and footer

When we are using Google and typing part of the keyword to search, Google will guess what we want to search. On one hand, this will bring convenience to customers and improve user experience. On the other hand, Google can present more precise recommandations.

Image for post
Image for post

No matter what advanced algorithm we can use in backend, when it comes to frontend, many existing stable modules can be used to implement autocomplete. But in this article, we will implement one ourselves.

Let’s figure out what our goal is and handle them one by one.

  • A clean input

About

Brian Shen

Full stack engineer, Solution Provider, New Immigrate. LinkedIn: https://www.linkedin.com/in/brian-shen-798251a8

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store