-
Responsive breakpoints - screen sizes
Responsive breakpoints Mobile First? (min vs max) First thing to decide is in which direction you want your media queries to work. By this I mean whether you want to set max-width or min-width breakpoints. You can of course use a mixture of both, but here we’re all about making...
-
How to use mixin in Sass
Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A...
-
Why use Question mark and Exclamation mark in TypeScript
Question mark ？ Using TypeScript, 3 places where the question mark operator appears. Conditional Operator (Ternary Operator) // Conditional Operator 三元运算符 // 当 isNumber(input) 为 True 是返回 ? : 之间的部分； isNumber(input) 为 False 时 // 返回 : ; 之间的部分 const a = isNumber(input) ? input : String(input); Optional Parameter //...
-
Flexbox markdown
A Complete Guide to Flexbox The flex property is a sub-property of the Flexible Box Layout module. The flex property is a shorthand for setting: flex-grow flex-shrink flex-basis The second and third parameters (flex-shrink and flex-basis) are optional. The flex: 1 rule is supposed to compute to this: flex-grow: 1...
-
Difference between Width:100% and width:100vw?
vw and vh stand for viewport width and viewport height respectively. The difference between using width: 100vw instead of width: 100% is that while 100% will make the element fit all the space available, the viewport width has a specific measure, in this case the width of the available screen,...
-
ELK Stack Architecture
What is the ELK Stack? The ELK stack is a group of Open Source products designed for log’s monitoring,management and analytics.You can use the ELK Stack to manage all of your log data and analyze everything in real-time. It is a collection of three open-source products — Elasticsearch, Logstash, and...
-
MySQL all in one
Export from Xmind in chinese, I will continue to update later. 数据库安装 window系统安装 - 下载5.7 免安装版 - https://dev.mysql.com/downloads/mysql/5.7.html#downloads - 解压并创建my.ini在根目录 - 编写my.ini内容 [client] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] #设置3306端口 port = 3306 # 设置mysql的安装目录 这块换成自己解压的路径 basedir=D:\softnew\MYSQL\mysql-5.7.20-winx64 # 允许最大连接数 max_connections=200 # 服务端使用的字符集默认为8比特编码的latin1字符集 character-set-server=utf8 # 创建新表时将使用的默认存储引擎 default-storage-engine=INNODB Linux系统安装 数据库操作 创建数据库 CREATE DATABASE db_name...
-
Getting Started Vue.js with the Simple Examples
Installation The easiest way to try out Vue.js Direct <script> Include, you can create an index.html file and include Vue with: <!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> or: <!-- production version, optimized for size and speed --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> Don’t use the minified version during development....
-
JavaScript Collections Interview Questions
目录 JavaScript 面试知识点总结 目录 1. 介绍 js 的基本数据类型。 2. JavaScript 有几种类型的值？你能画一下他们的内存图吗？ 3. 什么是堆？什么是栈？它们之间有什么区别和联系？ 4. 内部属性 [[Class]] 是什么？ 5. 介绍 js 有哪些内置对象？ 6. undefined 与 undeclared 的区别？ 7. null 和 undefined 的区别？ 8. 如何获取安全的 undefined 值？ 9. 说几条写 JavaScript 的基本规范？ 10. JavaScript 原型，原型链？ 有什么特点？ 11. js 获取原型的方法？ 12. 在 js 中不同进制数字的表示方式...
-
HTML Collections Interview Questions
目录 HTML 面试知识点总结 目录 1. DOCTYPE 的作用是什么？ 2. 标准模式与兼容模式各有什么区别？ 3. HTML5 为什么只需要写 <!DOCTYPE HTML>，而不需要引入 DTD？ 4. SGML 、 HTML 、XML 和 XHTML 的区别？ 5. DTD 介绍 6. 行内元素定义 7. 块级元素定义 8. 行内元素与块级元素的区别？ 9. HTML5 元素的分类 10. 空元素定义 11. link 标签定义 12. 页面导入样式时，使用 link 和 @import 有什么区别？ 13. 你对浏览器的理解？ 14. 介绍一下你对浏览器内核的理解？...
-
CSS Collections Interview Questions
目录 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 选择符有哪些？ 3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 4.伪类与伪元素的区别 5.CSS 中哪些属性可以继承？ 6.CSS 优先级算法如何计算？ 7.关于伪类 LVHA 的解释? 8.CSS3 新增伪类有那些？ 9.如何居中 div？ 10.display 有哪些值？说明他们的作用。 11.position 的值 relative 和 absolute 定位原点是？ 12.CSS3 有哪些新特性？（根据项目回答） 13.请解释一下 CSS3 的 Flex box（弹性盒布局模型），以及适用场景？ 14.用纯 CSS 创建一个三角形的原理是什么？ 15.一个满屏品字布局如何设计? 16.CSS 多列等高如何实现？ 17.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？...
-
What is Nginx?
Introduction Nginx (pronounced “engine X”), is a web server that can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache.The software was created by Igor Sysoev and publicly released in 2004. Nginx is free and open-source software. A large fraction of web servers use NGINX,...
-
PostLogoutRedirectUri always null in identity Server 4 with Angular OIDC client
Problem The LogoutId always was NULL in identity Server 4 when the Angular OIDC client redirect to logout. Remove the post_logout_redirect_uri setting var config = { authority: 'http://localhost:4242/', client_id: 'spa-client', redirect_uri: `http://localhost:4200/oidc-login-redirect.html`, scope: 'openid projects-api profile', response_type: 'id_token token', //*------REMOVE THIS, OTHERWISE THE LOGOUTID ALWAYS NULL -------*/ // post_logout_redirect_uri: `${Constants.clientRoot}`,...
-
Prepare Your identityserver For Chrome's SameSite Cookie
The class to add to your project using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Http; using System; namespace Microsoft.Extensions.DependencyInjection { public static class SameSiteCookiesServiceCollectionExtensions { /// <summary> /// -1 defines the unspecified value, which tells ASPNET Core to NOT /// send the SameSite attribute. With ASPNET Core 3.1 the /// <seealso cref="SameSiteMode" /> enum...
-
VS Code Zoom In / Out
Introduction Change the font size with keyboard shortcuts. Shortcuts VS Code - User Appearance View -> Appearance -> Zoom In / Out Shortcuts: Zoom In: Ctrl + = Zoom Out: Ctrl + - Reset to default: Ctrl + NumPad0 Persisted Zoom Level When you adjust the zoom level with the...
-
How to deply the Angular + .Net Core WebAPI using an Azure DevOps CI pipeline?
Instruction How to create and deply the Angular + .Net Core WebAPI as an Azure App Service using an Azure DevOps CI pipeline? Prerequisites Azure Account Source code pushed to your GitHub repository Ready-to-deploy ASP.NET Core application configured similarly to this case I found many examples for the same folder...
-
How to remove the node_modules folder quickly
Use rimraf You could use rimraf: npm install -g rimraf rimraf C:\code\yeoman-foo(folder path) Error If there is error like this : cannot be loaded because running scripts is disabled on this system. F or more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170. This could be due to the current user having an...
-
Jekyll Deploy Action
It’s really convenient to build and deploy the Jekyll site to Github Pages. ⭐ Usage At First, you should add a github workflow file (e.g. .github/workflows/build-jekyll.yml) in your repository’s master branch as below: name: Build and Deploy to Github Pages on: push: branches: - master # Here source code branch...
-
How to create your blog for free using Jekyll + Github pages
Create your blog locally Install all prerequisites. 1> Open terminal 2> Before installing jekyll, we need to ensure the correct version of ruby . (Ruby version must be 2.5 or higher) .Check your Ruby version using ruby -v 3> Check your Gems version using gem -v Install the jekyll and...
-
Git Cheat Sheet
GIT Basic git log Display the entire commit history using the default format.For customization see additional options git log -[limit] Limit number of commits by [limit]. E.g. ”git log -5” will limit to 5 commits. git log –follow [file] Lists version history for a file, including renames git diff Show...
-
Deployment for Angular + Asp.net core with Sqlite
1.Build the project Run ng build to build the client project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build. 2.Create the apps on Azure. Deploy the dist folder to the web app. Make sure put the web.config file under thewwwroot/...
-
Angular Apps Deployment to GitHub Pages
Deploy Using ng deploy Angular Cli Version should be 8+. The simplest way to deploy to Github Pages is to take advantage of the ng deploy Angular CLI command that automates the deployment process. When you runng deploy, it executes a builder that performs the deployment for you. The builder...
-
How to download the latest build artifacts from Azure DevOps?
In the Pipelines when one selects a successful run and drills down to Agent job X and selects that agent, it can be found in the log information of that agent. In the agent Job Information, one can get a link to the download location where items can be downloaded...
-
How to create and deploy express web app on azure in few steps
Steps You can create a new simple(nodejs + express) app and deploy to azure: Step 1 install express npm install express-generator -g Step 2 create an express sample application: express newappname Step 3 cd newappname change directory: > cd newapp install dependencies: > npm install run the app locally: >...
-
How to use Angular pipes
Build in Pipes Async Pipe Currency Pipe Date Pipe Slice Pipe Decimal Pipe Json Pipe Percent Pipe LowerCase Pipe UpperCase Pipe Async Pipe The Async pipe is considered the best practice when you are getting data in the form of observables. The async pipe subscribes to an Observable/Promise automatically and...
-
Entity Framework Core Database First
Instruction It is possible to reverse engineer an existing database into a DbContext and classes, and it is known as Database First approach. Prerequisites NuGet Package Microsoft.EntityFrameworkCore.SqlServer NuGet Package Microsoft.EntityFrameworkCore.Tools Your sql server DB and Tables Scaffolding with OutputDir(-O) The entity classes and a DbContext class are scaffolded into the...
-
How to use Swashbuckle in ASP.NET Core
Package installation -Right-click the project in Solution Explorer > Manage NuGet Packages -Set the Package source to “nuget.org” -Ensure the “Include prerelease” option is enabled -Enter “Swashbuckle.AspNetCore” in the search box -Select the latest “Swashbuckle.AspNetCore” package from the Browse tab and click Install Configuration In the Startup.ConfigureServices method: public void...
-
TypeScript Notes-Basic Types
TypeScript is a strict syntactical superset of JavaScript and adds optional static typing to the language. It is designed for development of large applications and transcompiles to JavaScript. Basic Types Boolean let isDone: boolean = false; Number let n: number = 6; let hex: number = 0xf00d; let binary: number...
-
Sql Notes
Create a Table ------SQL Server：---- select * into temp_Org_employee from org_employee ------excel import:---- SELECT * INTO #temp FROM OPENROWSET('Microsoft.ACE.OLEDB.12.0', 'Excel 12.0 Xml;HDR=YES;Database=C:\temp\******.xlsx','SELECT * FROM [sheet1$]'); Always Use insert into table(field1,field2) values(value1,value2) delete from table where ... select * from table where ... select * from table where field like ’%value%’...
-
Angular CLI useful commands
Angular CLI https://cli.angular.io/ Lists available commands and their short descriptions. ng -h Installing the CLI npm install -g @angular/cli ng -v check the version you can create a new Angular project with the following CLI command: ng new my-angular-app Serve an Application With the CLI we can also easily serve...
-
What is JSON Patch
JSON Patch JSON Patch is a web standard format for describing changes in a JSON document. It is meant to be used together with HTTP Patch which allows for the modification of existing HTTP resources. The JSON Patch media type is application/json-patch+json. There is a standard defined in RFC 6902...
-
Summary of HTTP Methods for RESTful APIs
POST Create 201 (Created), ‘Location’ header with link to /users/{id} containing new ID. Avoid using POST on single resource GET Read 200 (OK), list of users. Use pagination, sorting and filtering to navigate big lists. 200 (OK), single user. 404 (Not Found), if ID not found or invalid. PUT Update/Replace...
-
Nodepad++ tips
New line "\n"(mostly) or "\r" or "\r\n" Scenario： 1、in a long SQL query 2、edit the same thing for the multiple lines in the markdown Eg : in the Nodepad – edit sth at the last of the line. xxx xxx xxx Change to ：xxx,xxx,xxx, or xxx,<Br> xxx,<Br> xxx,<Br> Search "\r\n"...
-
Boxing and Unboxing in C#
Data Types C# has three kinds of data types, value types , reference types and pointer types. Value type stores the value itself, whereas the reference type stores the address of the value where it is stored. Some predefined data types such as int, float, double, decimal, bool, char, etc....
-
The SOLID Design Principles in C# ASP.NET
Concepts In object-oriented computer programming, SOLID is a mnemonic acronym for five design principles intended to make software designs more understandable, flexible and maintainable. The Law of Demeteris known as the Least Knowledge Principle (LKP), which is also an important design guideline for developing software applications. Single Responsibility Principle A...
-
An exhibit of Markdown
This note demonstrates some of what Markdown is capable of doing. An exhibit of Markdown Note: Feel free to play with this page. Unlike regular notes, this doesn’t automatically save itself. Basic formatting Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is...