DEV Community: mixbo

Nuxtjs Generate SEO metadata simple

mixbo — Sat, 02 Jan 2021 08:49:05 +0000

when you use nuxtjs to support ssr, you can defined meta info in page vue component. and you should set metadata each page?

No! you can just add nuxt-seo-meta to your project.

i have made this npm to reduce time defined redundancy meta.

in nuxt-seo-meta you just defined you care info and reset all meta info nuxt-seo-meta will auto generate.
include twitter, facebook social meta.

here show the screenshoot for you

use in asyncData

async asyncData({ seoMeta }) {
  seoMeta({
    title: "PageTitle",
    description: "PageDescription",
    url: "PageUrl",
    image: 'SocialShareImage.png'
  })
}

use in head

head({$seoMeta}){
  return {
   meta: $seoMeta({...options}, false)
  }
}

you can find more info here

Seven problems nuxtjs resloved

mixbo — Sun, 02 Aug 2020 14:21:46 +0000

Have you thinks about nuxtjs resloved what problems ? we know that nuxtjs are awsome farmwork to write less and do more things automaic.

Likes you can create file in pages directory nuxtjs will generate router for you. also you can create file in store directory nuxtjs will create namespace store for you when you use vuex.

Easy to use and organization you code logic in nuxtjs also best developer experience. i have got seven point the nuxtjs resloved for us from official webstie.

Building from scratch is difficult ?

Nuxtjs help us intelligent vuex, vue-router, vue-meta you just need run command npx create-nuxt-app <project-name> the full project necessary file and config will create for you.

No standard folder structure ?

Write project with vuejs and whitout farmwork not easy if you want to use vuex ,vue-router, vue-meta etc. organization the file structure by self is repetitived and cumbersome. Nuxtjs can reslove it you can create file in pages directory will genreate route automaic. create file in store will create vuex store with namespace for you.

Routing config can get lengthy ?

Use vue-router you can custom you route one by one, it's ok when you project are small or simple. when you have big project and more and more page should defined in router. have you thinks use script to generate route config? Nuxtjs resloved this problem, all you need is just create page you want in Nuxtjs pages directory.

No strandard way to configure ?

All configure file and configuration will defined and config in nuxt.config.js all you need care about just one file. all intelligent module will worker.

Not SEO firendly ?

Nuxtjs use vue-meta generate SEO content info, you just need config less and more things Nuxtjs will do.

Vue apps can load slowly ?

If you use Nuxtjs with universal mode you can prerender page content with html, so that your user can fetch the page content quickly. which mean's you can use universal mode to open SSR mechanism

Difficult to change behavior ?

You can extend Nuxtjs farmwork functaion with nuxt modules , modules can write hight level funcation to you use nuxtjs core.

Hopt it can help you :)

How to preview image before upload to server

mixbo — Sat, 25 Jul 2020 15:03:09 +0000

Recently my team have case to upload image to server i just want to show progress to user image upload status. if show the user which image file upload is more graceful. so i just preview image and show the progress same time.

Look at the screenshoot. before the image show the upload icons. direction current image uploading to server. i thinks it's more simple and useful.

// html code
<input id="input_file" type="file" multiple @change="fileChange" />

// here file agrument from html input file tag
covertInputImageToDataURL(file) {
  return new Promise((resolve, reject) => {
    const fr = new FileReader()
    fr.onload = () => {
      resolve(fr.result)
    }
    fr.readAsDataURL(file)
  })
}

// event listener to input file tag 
const files = []
fileChange() {
  const newFiles = document.getElementById('input_file')

  // covert all file to dataURL
  for (let i = 0; i < newFiles.length; i++) {
    const file = newFiles.item(i)
    const fileID = randomString() // random file id 
    const dataURL = await this.covertInputImageToDataURL(file)
        files[fileID] = { file, dataURL }
  }
}

Here is Vue.js Template Define

// use files 
<div v-for="key in Object.keys(files)" :key="key" >
  <img :src="files[key]['dataURL']" :alt="key" />
</div>

So far we just listener input file tag file change event and covert files to dataURL. when we set img src attribute with dataURL the image will shown by the tag. we can know which image uploading.

Help it can help you :)

How to caculate emoji length?

mixbo — Mon, 20 Jul 2020 12:20:16 +0000

In Javascript we just call length on String object will return the length you want to get.

But when you get emoji length from javascript become more trouble let show you what i found.

"ihavecoke".length // 9

"😁".length // 2

As you can see, when you call length on 'ihavecoke' you got length 9 it's ture and make sense.

The line number 3 you just got length 2. what ? a emoji char just 2 length of string?

The "👨‍👨‍👧‍👦".length more strange that return 11 why ? emoji char not return 2 always?

So how to caculate emoji length to 1 length? you can use lodash method toArray it's simple and useful

_.toArray("😁").length // 1

_.toArray("👨‍👨‍👧‍👦").length // 1

_.toArray("ihavecoke 🤩").length // 11

So we got the 1 length emoji lols

Hope it can help you :)

write more flexbox code to query document element.

mixbo — Sun, 12 Jul 2020 02:37:03 +0000

Sometimes you need check if HTML element present in document, special your dom load from remote server and dynamic add to document.

If you code query DOM when document loaded, firt time the DOM maybe present you can queried it.

But if your DOM load from server, you query code clound not found it anymore. becuase you query code execute before **DOM **add to document

How reslove it? show me code to you

const awaitSomethingReady = (condition, maxCount = 500) => {
  return new Promise((resolve, reject) => {
    let getTestIntervalId = null
    const maxCheckCount = maxCount || 500
    let currentCheckCount = 0
    getTestIntervalId = setInterval(() => {
      currentCheckCount += 1
      if (maxCheckCount === currentCheckCount) {
        clearInterval(getTestIntervalId)
        reject()
      }
      if (condition()) {
        clearInterval(getTestIntervalId)
        resolve()
      }
    }, 50)
  })
}

I just want to check if div with calss toolbar present so use awaitSomethingReady

awaitSomethingReady(document.querySelector(".toolbar")).then(()=>{
  console.log("found toolbar")
}).catch(()=>{
  console.log("will found toolbar continue ...")
})

That all you will write more flexible code

another way to quickly use npm live-query

Hope it can help you

What problems did active_support concerns solve?

mixbo — Thu, 02 Jul 2020 15:15:00 +0000

In the Rails project some of the most commonly used methods are extracted and generally placed in the corresponding concerns directory. generally different concern files are stored in these directories. a file is a module for example:

module UserPlan
  extend ActiveSupport::Concern
  included do 
    belongs_to :plan
  end
  class_method do 
    def cached_all_plan 
      #bala bala
    end
  end
end

Note that the module extend ActiveSupport::Concern is used in this module. we will explore its benefits and why this module exists.

Let's start with the following example:

module Foo
  def self.included(base)
    base.class_eval do
      def self.method1
        ...
      end
    end
  end
end

module Bar
  def self.included(base)
    base.method1
  end
end

class Host
  include Foo # The Foo module was introduced because the Bar module depends on it
  include Bar # Bar reference is to call its method1 method
end

If you want to use the method1 method in the Host class, you must refer to the Bar module but the Bar module depends on the Foo module.

Did you find any problems? the Host class does not care about the Foo module but in order to call the method1 method when the Bar is included. you have to Introduce the Foo module.

There is an improved code along the above logic:

module Bar
  include Foo
  def self.included(base)
    base.method1
  end
end
class Host
  include Bar
end

The Host only cares about the reference of Bar so the Foo module is put in the Bar. It seems that there is no problem but when you implement the running code, you will find that the code cannot run.

In the included hook method of the Bar module the base object points to the Host and the include Foo in Bar will put method1 on the instance object of Bar. when the instance object of the Host calls method1, it will throw a method not found exception

How to do it?

require 'active_support/concern'
module Foo
  extend ActiveSupport::Concern
  included do
    def self.method1
      ...
    end
  end
end

module Bar
  extend ActiveSupport::Concern
  include Foo

  included do
    self.method1
  end
end

class Host
  include Bar 
end

By referring to ActiveSupport::Concern to solve the problem of interdependence between modules and modules.

The comparison found that the code is much simpler and the call is also very convenient. the readability of the code has also become very good and very clear. now ActiveSupport::Concern is quite widely used and many good gems will be used. after all It was put in the ActiveSupport Gem.

Hope it can help you :)

HTTP version evolution 3

mixbo — Wed, 01 Jul 2020 12:31:53 +0000

I have record article about HTTP/1 和 HTTP/2 at HTTP version evolution HTTP version evolution 2 this article i will share my note with HTTP evolution 3

TCP header block

Although HTTP/2 solves the queue-blocking problem at the application level, the queue-blocking problem caused by the loss of a single packet in TCP is called queue-blocking over TCP.

Test data shows that HTTP/1.1 transport efficiency is better than HTTP/2 when the system reaches a 2% packet loss rate.

The delay in establishing a TCP connection

Network delay is also called Round Trip Time. We refer to the total round-trip time between sending a packet from the browser to the server and returning the packet from the server to the browser as RTT, which is an important indicator of network performance.

When establishing a TCP connection, three handshakes with the server are required to confirm the connection, which means that 1.5 RTT is consumed before data can be transmitted.
TLS connections are made. there are two versions of TLS -- TLS1.2 and TLS1.3

We need to spend 3-4 RTTS before transmitting the data

TCP protocol ossification

Include router, firewall, NAT, switch and so on. they often rely on little-updated software that USES a lot of TCP features that are set up and rarely updated.

QUIC protocol

Based on UDP it realizes the functions of multiple data streams and transmission reliability similar to TCP. We call this set of functions QUIC protocol

Realize functions like TCP flow control and transmission reliability
Integrated TLS encryption function
Implemented the multiplexing function in *HTTP/2 *
Implemented a quick handshake function

HTTP/3

Neither the server nor the browser provides complete support for HTTP/3
There are also very big problems in deploying HTTP/3 because the system kernel's optimization of UDP is far from TCP optimization, this is also an important reason that hinders QUIC
The problem of the rigidity of the middle equipment. the optimization of UDP by these devices is much lower than TCP. according to statistics, when using QUIC protocol there is about 3% to 7% packet loss rate.

Hope it can help you :)

HTTP version evolution 2

mixbo — Tue, 30 Jun 2020 15:20:45 +0000

I have record article about HTTP beginning at HTTP version evolution. this article i will share my note with HTTP evolution 2

What are the problems with HTTP/1.1

HTTP 1 features

Added persistent connections
The browser maintains up to 6 TCP persistent connections simultaneously for each domain name
Using CDN to realize the domain name fragmentation mechanism

HTTP problems

The problems is utilization of bandwidth is not ideal

Bandwidth refers to the maximum number of bytes that can be sent or received per second.

the maximum number of bytes that can be sent per second is called upstream bandwidth

the maximum number of bytes that can be received per second is downstream bandwidth

The reason why HTTP/1.1 is not ideal for bandwidth utilization is because it is difficult for HTTP/1.1 to use up bandwidth for the following three reasons

*TCP * slow start
Simultaneously open multiple TCP connections, then these connections will compete for fixed bandwidth
The problem of HTTP/1.1 queue blocking.

HTTP 2.0

To solve the above problem the idea of HTTP/2 is that a domain name uses only one long TCP connection to transmit data, and realizes parallel requests for resources,it can send requests to the server at any time without waiting for the completion of other requests.

Multiplexing implementation

The introduction of the binary framing layer realizes the multiplexing technology of HTTP

First the browser prepares the request data, including the request line, request header, and other information. If it is the **POST **method then there must be a request body.
After the data is processed by the binary frame layer, it will be converted into frames with request ID numbers, and these frames will be sent to the server through the protocol stack. After receiving all the frames, the server will merge all the frames with the same ID into a complete request message.
The server then processes the request and sends the processed response line, response header, and response body to the binary framing layer, respectively.
Similarly the binary framing layer converts these response data into frames with request ID numbers and sends them to the browser through the protocol stack.
After receiving the response frame, the browser will submit the frame data to the corresponding request according to the ID number.

Other features

You can set the priority of the request, when sending the request mark the priority of the request
Server push you can directly push the data to the browser in advance
Header compression, which compresses the request header and response header

Hope it can help you :)

HTTP version evolution

mixbo — Mon, 29 Jun 2020 12:28:01 +0000

The HTTP protocol is the communication language between the browser and the server, the latest version has reached HTTP 3.0.

I have read some articles and made some records of the evolution of the HTTP version. here I will share some key points for you

First version HTTP/0.9

First verssion HTTP mainly used for academic communication. used to transfer HTML hypertext content between networks, using a request-response model. a request is sent from the client and the server returns data.

In general the demand at that time was very simple, it was used to transmit small HTML files.

Has three characteristics:

There is only one request line. and there is no HTTP request header and request body
The server did not return header information
The content of the returned file is transmitted as a stream of ASCII characters

HTTP/1.0

Supporting multiple types of file downloads is a core requirement of HTTP/1.0. including JavaScript, CSS, pictures, audio, video etc.

HTTP/1.0 negotiates and communicates through request headers and response headers. requesting file types and returning file types. E.g

// request
accept: text/html
accept-encoding: gzip, deflate, br
accept-Charset: ISO-8859-1,utf-8
accept-language: zh-CN,zh

// response
content-encoding: br
content-type: text/html; charset=UTF-8

HTTP/1.1

HTTP/1.1 has made a lot of updates on the basis of HTTP/1.0 including

Improve the persistent connection. multiple HTTP requests can be transmitted on a TCP connection. as long as the browser or server does not explicitly disconnect, the TCP connection will be maintained.
Immature HTTP pipeline to solve the problem of queue blocking by pipeline technology.
Provide virtual host support, the Host field is added to the request header to indicate the current domain name address, so that the server can do different processing according to different Host values.
Provides perfect support for dynamically generated content, introducing chunk transfer mechanism. the server will divide the data into several data blocks of any size, each data block will be attached with the length of the last data block, and finally use a zero-length block as a sign of sending data
Client cookies security mechanism

Continue to share tomorrow， Hope it can help you :)

Confusion of new managers.

mixbo — Sun, 28 Jun 2020 13:30:59 +0000

I recently read an article about management and made some notes to share with you

As a new manager the following four types of statements are the most common

A last resort I can’t do technology for a lifetime
- many seniors have transferred to management, and I have to change.
Success in the eyes of others
- If you can be a company executive, others will think of me as an excellent and successful person.
Not disappointing the expectations of the organization
- The superior said that I am suitable for management, and I cannot live up to his expectations for me.
Subjective daydreaming about management
- You don’t need to do everything by yourself, just arrange for the subordinates to do it, it should be easier.

No matter which of the above four categories, it is difficult for you to go a long way in management. because the above four types of statements all belong to the category of "external drive".

It is time to consider your own internal motivation and real demands, three important questions to help you make a judgment.

Do you agree with the value of management?
- I think management work is not as valuable as technical work, and solving problems through technical means is the coolest thing.
- Even if many people think you are suitable for management, if you do not think management is valuable, you will not be happy to do it for a long time.
Are you passionate about management and enjoying these jobs?
- Do you enjoy being responsible for the coordination and promotion of a large project? will its successful launch give you a strong sense of accomplishment?
- Have you ever thought about what kind of processes and mechanisms can deal with the omissions in team work?
Do you value growth in management?
- Every manager starts from the technical backbone or business backbone. Prior to this, there was not much learning and accumulation of management, which means that you have good management plasticity, and it also means that you have too much

Things need learning and training.

There is a lot of awareness and ability to expand management

Greater responsibility.
A more stereoscopic perspective
A more flexible way of thinking.

Seems to be challenges and requirements, so what can I get?

First of all when you reach a larger platform, your ability and vision will be greatly improved
Secondly not only become stronger you also have a team, you can handle bigger and more complicated things and make greater achievements.
This will give you a stronger sense of accomplishment.
Your influence has increased significantly
Your abilities, achievements, and influence have been comprehensively improved, and you have received more spiritual and material rewards.

Hope it can help you :)

javascript optional chaining

mixbo — Sat, 27 Jun 2020 09:55:27 +0000

You may write code in javascript like this:

if (foo && foo.bar && foo.bar.baz) {
    foo.bar.baz();
}

We want to call baz() but first need check if foo , foo.bar, foo.bar.baz present. i think this is a little bit more prolixity.

Now you can write code like

foo?.bar?.baz()

That all, just need use ?. operator, this called optional chainning. you need do something in babel config

// babel.config.js
module.exports = {
  env: {
        .....
      plugins: ['@babel/plugin-proposal-optional-chaining']
    }
  }
}

More optional Channing example:

Dealing with optional callbacks or event handlers

function doSomething(onContent, onError) {
  try {
   // ... do something with the data
  }
  catch (err) {
    onError?.(err.message); // no exception if onError is undefined
  }
}

Optional chaining with expressions

let nestedProp = obj?.['prop' + 'Name'];

Array item access with optional chaining

let arrayItem = arr?.[42];

You can found more api optional chainning

Hope it can help you :)

The difference between Ruby alias and alias_method

mixbo — Fri, 26 Jun 2020 14:37:09 +0000

In some open source ruby projects you may see similar alias and alias_method methods. what are the specific use of these two methods? how are these two methods different? let's look at the following code:

#alias
class User
  def full_name
    puts "Mixbo"
  end
  alias name full_name
end
User.new.name #=>Mixbo

#alias_method
class User
  def full_name
    puts "Mixbo"
  end
  alias_method :name, :full_name
end
User.new.name #=> Mixbo

The above examples all output the "Mixbo" string before renaming the full_name in the User class. from this example alone we can't see the difference between the two methods continue:

#alias_method
class User
  def full_name
    puts "Super Mixbo"
  end
  def self.rename
    alias_method :name, :full_name #==> Note that alias_method is used here
  end
end

class Mixbo < User
  def full_name
    puts "Mixbooooo"
  end
  rename
end
Mixbo.new.full_name #=> "Mixbooooo"


#alias
class User
  def full_name
    puts "Super Mixbo"
  end
  def self.rename
    alias :name :full_name #==> Note that alias is used here
  end
end

class Mixbo < User
  def full_name
    puts "Mixbooooo"
  end
  rename
end
Mixbo.new.name #=> 'Super Mixbo'

From the above example we can see that when there is an inheritance relationship between classes. alias will not affect its subclasses. related alias_method will find the closest method of the same name in its subclass to operate (for example, full_name above)

So `alias` and `alias_method`

Can give an alias to a method
alias is generally valid when the source code is interpreted by the compiler
alias_method is generally valid when the code is running

Generally I use alias_method a little more.

Hope it can help you :)

DEV Community: mixbo

Nuxtjs Generate SEO metadata simple

Seven problems nuxtjs resloved

Building from scratch is difficult ?

No standard folder structure ?

Routing config can get lengthy ?

No strandard way to configure ?

Not SEO firendly ?

Vue apps can load slowly ?

Difficult to change behavior ?

How to preview image before upload to server

How to caculate emoji length?

write more flexbox code to query document element.

What problems did active_support concerns solve?

HTTP version evolution 3

TCP header block

The delay in establishing a TCP connection

TCP protocol ossification

QUIC protocol

HTTP/3

HTTP version evolution 2

What are the problems with HTTP/1.1

HTTP 1 features

HTTP problems

HTTP 2.0

Multiplexing implementation

The introduction of the binary framing layer realizes the multiplexing technology of HTTP

Other features

HTTP version evolution

First version HTTP/0.9

HTTP/1.0

HTTP/1.1

Confusion of new managers.

As a new manager the following four types of statements are the most common

It is time to consider your own internal motivation and real demands, three important questions to help you make a judgment.

Things need learning and training.

Seems to be challenges and requirements, so what can I get?

javascript optional chaining

More optional Channing example:

Dealing with optional callbacks or event handlers

Optional chaining with expressions

Array item access with optional chaining

The difference between Ruby alias and alias_method

So alias and alias_method

So `alias` and `alias_method`