#Nuxt JS Development Services

[jurysoft-raas]

Top 10 Skills to Look for When Hiring a Nuxt.js Developer

In the competitive landscape of web development, hiring the right Nuxt.js developer can significantly impact the success of your project. Nuxt.js, a powerful framework built on Vue.js, enables server-side rendering, static site generation, and a robust ecosystem for modern web development. Here at Jurysoft, we specialize in providing top-tier Nuxt.js developers as a resource service to help you achieve your business goals. To ensure you find the best talent, here are the top 10 skills to look for when hiring a Nuxt js developer.

1. Proficient in JavaScript

JavaScript is the cornerstone of all web development, and Nuxt.js is no exception. A proficient Nuxt.js developer must have:

Strong Fundamentals: Understanding of core JavaScript concepts like closures, prototypes, and asynchronous programming.

Modern JavaScript (ES6+): Familiarity with ES6+ features such as arrow functions, destructuring, template literals, and modules. This knowledge ensures the developer can write clean, efficient, and modern code.

2. Expertise in Vue.js

Nuxt.js is built on Vue.js, making Vue expertise indispensable. Essential Vue.js skills include:

Component-Based Architecture: Ability to create, manage, and reuse components efficiently.

Vue Directives and Filters: Knowledge of built-in and custom directives to manipulate the DOM.

Vue Router: Experience with routing, including nested routes, route guards, and dynamic routes.

Vuex: Proficiency in state management using Vuex, understanding mutations, actions, getters, and modules.

3. Experience with Nuxt.js

While understanding Vue.js is crucial, specific experience with Nuxt.js is equally important. Key areas include:

File-Based Routing: Mastery of Nuxt.js's file-based routing system for intuitive and organized code.

Middleware: Understanding of middleware to manage authentication, logging, and other logic.

Nuxt.js Lifecycle: Knowledge of the Nuxt.js lifecycle, including hooks like asyncData, fetch, middleware, and plugins.

4. Server-Side Rendering (SSR) Knowledge

SSR can greatly improve the performance and SEO of your web application. A proficient Nuxt.js developer should:

Understand SSR Benefits: Know the advantages of SSR, such as faster page loads and better SEO.

Implement SSR: Experience in setting up and optimizing SSR in Nuxt.js applications.

Handle SSR Challenges: Ability to manage SSR-specific issues like state hydration and request handling.

5. Static Site Generation (SSG)

Nuxt.js’s ability to generate static sites is a major advantage. Key skills include:

Configuring SSG: Experience in configuring Nuxt.js to generate static sites, including handling dynamic routes.

Deployment Knowledge: Understanding deployment processes for static sites, whether on Netlify, Vercel, or other platforms.

Performance Optimization: Skills in optimizing static site performance, ensuring fast load times and a great user experience.

6. Familiarity with Vuex for State Management

State management is critical for complex applications. A skilled developer should:

Vuex Integration: Seamlessly integrate Vuex with Nuxt.js applications.

Modular State Management: Ability to design a modular and maintainable state architecture.

Handling Side Effects: Proficiency in handling side effects using actions and mutations in Vuex.

7. API Integration Skills

Nuxt.js developers often need to interact with various APIs. Essential skills include:

Making API Requests: Proficiency in making API calls using Axios or Fetch API.

Asynchronous Data Handling: Ability to manage asynchronous data fetching and ensure data integrity.

Error Handling: Skills in handling errors gracefully and providing meaningful feedback to users.

8. Component-Based Architecture

Nuxt.js promotes a component-based architecture. Key skills include:

Reusable Components: Ability to design and build reusable components that enhance maintainability.

Component Communication: Understanding of component communication patterns, including props, events, and scoped slots.

Performance Considerations: Awareness of performance implications and optimization techniques for components.

9. Understanding of Modern Build Tools

Knowledge of modern build tools is crucial for efficient development. A skilled developer should:

Webpack and Babel: Proficiency in configuring and optimizing Webpack and Babel for Nuxt.js projects.

Package Management: Experience with npm or yarn for managing project dependencies.

Build Optimization: Skills in optimizing build processes to enhance performance and reduce load times.

10. Testing and Debugging Proficiency

Quality assurance is a critical aspect of development. Key skills include:

Testing Frameworks: Experience with testing frameworks like Jest and testing tools like Cypress.

Unit and Integration Testing: Ability to write unit and integration tests to ensure code reliability.

Debugging Skills: Proficiency in debugging tools and techniques to troubleshoot and resolve issues efficiently.

Conclusion

Hiring a Nuxt.js developer with the right mix of skills can greatly impact your project's success. At Jurysoft, we provide highly skilled Nuxt.js developers who are proficient in these essential areas. By prioritizing these top 10 skills, you can ensure that your projects are built with high-quality code, optimized for performance, and provide a seamless user experience. Whether you’re developing complex web applications or static sites, a skilled Nuxt.js developer is invaluable in achieving your goals. Take the time to evaluate candidates carefully, and you’ll find the talent that will drive your projects forward.

[itservicesindia]

IT Services India is one of the best Nuxt js development company in the USA. Web Development, Web Design all types of services at the best rates.

[codebriefly]

New Post has been published on https://codebriefly.com/how-to-create-aws-iam-user-with-programmatic-access/

How to Create AWS IAM User with Programmatic Access

In this article, we will discuss “How to create AWS IAM user with programmatic access”. Programmatic Access user is required if we want to control AWS services from the command line interface (AWS CLI) or working with the SDK. AWS provides SDK for different languages such as PHP, Python, NodeJs and etc. When we create a programmatic access user, then AWS provides the AWS Access Key and AWS Secret Access Key. These are used by AWS CLI tools to authenticate to AWS and execute your commands. Similarly, for AWS official SDK use the same to authenticate AWS.

If you don’t have an AWS account, go ahead and create an AWS account. AWS provides most of the services under free tier plan, you can check here for more.

Steps to create AWS IAM user with programmatic access

Go to AWS Identity and Access Management (IAM) console, and from the left side menu click on the users. After that click on “Add User”.

  Create a new “User name” and allow “Programmatic access”, and click on “Next: Permissions”.

  Select “Attach existing policies directly” and in the search box write SNS, allow “AmazonSNSFullAccess” and click “Next:Tags”. Here, you can add policy as per your requirement

  Although this part this is optional for the simply I just keep it simple. You can skip this point or create a tag as shown in the following screenshot.

  Reviews the IAM user settings and permissions then click on “Crete user”.

  Congratulate you successfully create AWS Access key and Secret access key. Download the key file and open the file in your favorite text editor. Keep them secret and safe.

  Note that If you lose or forget your secret key, you cannot retrieve it. Instead, create a new access key and make the old key inactive.

Conclusion

I hope you enjoyed this article. Thank you for going through this post, hope this will helps you in your development. I will be glad if you can share this post on social network. Feel free to share your suggestions and queries in the comments area. I will share more on AWS services in my coming articles 🙂

You may like:

How Laravel Traits are Different from the Helpers in PHP

Significant Tips for Development of a Large Nuxt Js Web App

How to Handle Content Scraping with Pagination in Laravel

[tak4hir0]

キーポイント WebAssembly has perhaps been the most talked about trend on the web since our last report. Applications for WebAssembly have moved beyond the browser via WASI, and WebAssembly reached a stable 1.0 W3C Recommendation in late 2019. We have thus promoted WebAssembly to Early Adopters status. The annual ECMAScript release, ES2020, is approaching with the greatest number of new language features since ES2015, including optional chaining, BigInt, globalThis, nullish coalescing, and dynamic import. All of these features are considered stable with at least two working browser implementations. Web components have moved from early adopter to early majority status. Web components have reached mainstream maturity and are now supported natively in Chrome, Firefox, Safari, and other browsers based on these browser engines such as Edge and Brave TypeScript has graduated to late majority status. TypeScript is by far the most widely adopted JavaScript variant, has made substantial progress over the past few years, and a majority of JavaScript frameworks now leverage its tooling and infrastructure. The JavaScript client-side framework and library space is constantly changing, and while React, Vue.js, and Angular have dominated in recent years, a new wave of leaner frameworks and application compilers may change the status quo over the next few years. 原文(投稿日：2020/03/12)へのリンク InfoQでは、定期的にトピックグラフを更新して、さまざまなトピックがテクノロジー採用曲線のどこにあると考えるかを示しています。その際、ネットワーク内や会合、会議、アナリストイベントなどで聞いた実践状況、新たなアイデアや事柄を考察します。また、サイトのトラフィックパターンやQConや他の業界カンファレンスなどのセッションへの出��者数も考慮します。 トピックがグラフの右側にある場合は、おそらくInfoQの既存のコンテンツを多く見つけるでしょう。 – InfoQは新しいうちにそれをカバーしています。また、イノベーターとアーリーアダプタが学んだ教訓は、個人、チーム、組織がこれらのアイデアや実践を採用するときに、ガイドとして利用できます。 曲線の左側のトピックは、イノベーターやアーリーアダプタが使用している現在存在感を増しているトピックであり、InfoQのレポートやコンテンツは、これらのアイデアを読者に届けることに重点を置いており、読者は、今、これらのアイデアを探求すべきか、それともその展開を待つべきかをご自身で判断していただけるようになっています。 レポートは、InfoQ編集チームが現在JavaScript/Web開発スペース内でのテクノロジーの採用と存在感を増しているトレンドをどのように見ているかの概要を提供します。これは、アクティブなソフトウェアエンジニア自身である編集者との広範な内部ディスカッション、外部のパブリックサーベイ結果のレビュー、内部またはプライベートのサーベイおよび分析結果のレビュー、およびWebコンポーネントなどの主要なテクノロジーのブラウザのサポートレベルの確認から形成された意見です。 今月はJavaScriptとWeb開発に注目します。急速に変化するこの業界では、年に1回以上の更新が必要です。これは、2018年の第4四半期にグラフを最後に確認したときのグラフです。 Web Development 2018 Q4 GraphJavaScriptとWebエコシステムがどれほど成長したかを考えると、1つのグラフにすべての領域を表示することはもはや現実的ではありません。その結果、分析を11の主要分野に分割しました。 Web開発 言語 / 標準 / パターン Web開発 クライアントサイドフレームワーク / ライブラリ Webエンジニアのためのサーバサイドプラットフォーム / フレームワーク / データ / API Webエンジニアのためのクラウド パッケージ管理 / バンドル / 最適化 Web開発のテストと自動化 Webエンジニアのためのモバイル / デスクトップ環境とフレームワーク WebエンジニアのためのIoT / ブロックチェーン / 機械学習 WebエンジニアのためのVisualization / XR CSS Web開発 コードエディタとIDE Web開発は私たちにとって常に興味深いものであり、新しいJavaScriptプロジェクトがほぼ毎日開始されています。どれに焦点を当て、どれを無視するかを決定することは、特に困難です。開発者は、日々の開発作業で現在使用していない場合でも、興味深いアプローチから学び、インスピレーションを得ることができます。 Web開発 言語 / 標準 / パターン Language/Standards/Patterns 2020 Q1イノベーター(Innovators) ECMAScriptの年次リリースであるES2020は、オプションのチェーン、BigInt、globalThis、nullish coalescing、動的インポートなど、ES2015以降で最も多くの新しい言語機能に近づいています。これらの機能はすべて、少なくとも2つの有効なブラウザ実装で安定していると見なされます。 PureScriptはTypeScriptの代替言語を提供します。最近のJavaScript 2019の調査では高得点を記録しましたが、近い将来にイノベーターのステータスを超えて進むかどうかについては議論があります。 アーリーアダプタ(Early Adopters) アーリーアダプタを見て、JavaScriptの静的型チェッカーであるFlowと、JavaScriptベースのWebアプリを生成するためのJavaScriptの代替言語であるElmとReasonを引き続き追跡します。TypeScriptの台頭により、Flowの関心と開発は衰えたように見えますが、変化に備えて追跡しています。 前回のレポート以来、WebAssemblyはおそらくWebで最も話題になったトレンドでした。WebAssemblyのアプリケーションはWASIを介してブラウザを超え、WebAssemblyは2019年後半に安定した1.0 W3C勧告に達しました。これにより、WebAssemblyをアーリーアダプタのステータスに昇格させました。 従来のW3Cプロセスに加えて、Web Incubator CG (WICG)は、幅広い新機能と可能な標準を提案し続けています。また、Web Audioは、Webプラットフォームをさまざまなオーディオアプリケーションで実行可能にするために、引き続き注目を集めています。 アーリーマジョリティ(Early Majority) 関数型およびリアクティブプログラミングパターンは、JavaScriptアプリケーションを最も効率的に構築する方法に関する議論を支配し続けています。Vue.jsの創設者であるEvan You氏は、プロジェクトがTypeScriptに切り替えられたとしても、「皮肉にもTypeScriptはクラスを使用するよりもクラスを回避するのに役立つと思います。Vue3は、クラスの使用が0の100％TSコードベースです。」 Webコンポーネントはアーリーアダプタからアーリーマジョリティステータスに移行しました。Webコンポーネントは成熟した主流になり、ネイティブにサポートされるChrome、Firefox、Safari、およびEdgeやBraveのようなこれらのブラウザエンジンに基づくブラウザでサポートされました。多数のフレームワークとライブラリも、Angular、Dojo、Ionic、Stencil、Svelte、Vue.jsなどがWebコンポーネントをネイティブにサポートしています。 ES2019とAMPの2つのアイテムをアーリーマジョリティカテゴリに直接追加しました。 ES2019は、#smooshgate論争、Object.fromEntries、および文字列とオプションのキャッチバインディングに対するいくつかの小さな改善の後に、flatとflatMapメソッドを配列に追加しました。この比較的小さな新しい機能セットは、JavaScript開発者のアーリーマジョリティによって現在使用されています。 AMPは、Webの高速化を目指す代替手段であり、OpenJS Foundationに参加しました。InfoQはこれまでこれを採用することに抵抗し、既存のオープンWeb標準を使用することを好みましたが、AMPは引き続きメディアやニュースWebサイト全体で採用を続けています。 レイトマジョリティ(Late Majority) JavaScriptエコシステムが成熟するにつれ、置き換えられたサインを示さないレイトマジョリティカテゴリーの基盤テクノロジーがあり、ほとんどすべてのJavaScript開発者によって使用されています。 HTML5とES6/2015 - ES2018はレイトマジョリティです。今日、ほぼすべてのWebアプリケーションがこれらの機能を最小ベースラインとして使用しているためです。 TypeScriptもレイトマジョリティステータスに卒業しています。TypeScriptは、これまでで最も広く採用されているJavaScriptバリアントであり、過去数年間で大幅な進歩を遂げており、JavaScriptフレームワークの大部分は現在、そのツールとインフラストラクチャを利用しています。TypeScript自体は、最近のGitHub Octoverseレポートによると、上位10言語の1つであり、JSの現状調査では、TypeScriptが最も広く使用されているJavaScriptバリアントとしてリストされており、調査対象の50％以上がTypeScriptを使用しており、 JavaScriptのスーパーセットについて好意的な意見があります。 ラガード(Laggards) 私たちは、多くのアプリケーションでまだ使用されているが、新しい開発の取り組みには大きな関心を寄せていない、ラガードでレポートを締めくくります。ES5とHTML4に取って代わったのは新しいバージョンですが、ES5とHTML4の基礎となる機能は、JavaScriptとHTMLの最新バージョンに見られる多数の機能で構成されています。 Web開発 クライアントサイドフレームワーク / ライブラリ JavaScriptのクライアントサイドフレームワークとライブラリは常に変化しており、近年はReact、Vue、Angularが主流を占めていますが、よりスリムなフレームワークとアプリケーションコンパイラの新たな波が今後数年間で現状を変える可能性があります。 Client-side frameworks/libraries 2020 Q1イノベーター(Innovators) Vue.js 3はこのレポートの時点では出荷されていませんが、TypeScriptを使用してリライトされるVueは非常に期待されます。 アーリーアダプタ(Early Adopters) Dojoは引き続き、無駄のないTypeScriptファーストのフレームワークを提供するための道を歩んでいます。Dojoは、リアクティブWebアプリケーションを構築する上で非常に現代的な効率的な手法を提供し、TypeScriptと開発者の人間工学を強く取り入れています。DojoはOpenJS Foundationの一部です。 Emberは先頃、新しいコンポーネントモデルとリアクティブシステムを提供するEmber Octaneを発表しました。 LitElementはPolymerの後継で、軽量のWebコンポーネントを作成するためのJavaScriptライブラリを提供します。 Aureliaは引き続き忠実なファンを獲得しており、コンポーネントベースのアプリケーションを構築するための環境を作成するための作業を続けています。 Markoは、元々eBayで開始された別のOpenJS Foundationプロジェクトで、リアクティブUIコンポーネントの作成に重点を置いています。 TencentによるOmiは、Webコンポーネント、JSX、および統合ライブラリへのその他のコンポーネントアプローチをサポートするクロスフレームワークコンポーネント作成ライブラリです。 アーリーマジョリティ(Early Majority) アーリーマジョリティカテゴリで3つのプロジェクトがデビューします。 IonicのStencilは、最も人気のあるWebコンポーネント作成フレームワークになり、多くのフレームワークで使用するコンポーネントを作成するためのフレームワークであるOmiに似ています。 Svelteは、HTMLとの連携と、Disappearingフレームワークへのアプローチにより、Reactに代わる人気の高いものになっています。 Preactは、ReactライブラリへのAPIパリティ付きのReactの4 KB未満のgzip圧縮された代替手段です。 レイトマジョリティ(Late Majority) Angularはこのレポートの時点でリリース候補のステータスにあり、レイトマジョリティステータスに移行し、ついに待望のIvyレンダリングエンジンのアップデートが出荷されました。 Vue.js 2はまた、レイトマジョリティステータスに移行し、現在最も広く使用されているJavaScriptフレームワークの1つです。 Reactは依然として最も人気のあるJavaScriptレンダリングライブラリであり、前回のHooksのレポート以降、更新されています。 RxJSは引き続き人気のあるリアクティブ拡張ライブラリであり、Angularエコシステムで広く使用されています。 OpenJS Foundationの一部であるMomentは、日付と時刻の問題を管理するために最も広く使用されているライブラリです。 Lodash（OpenJS Foundation）などのライブラリーの必要性は減り始めていますが、JavaScriptを操作するために広く使用されているライブラリーです。Core-jsは、最新のJavaScriptを操作するために広く使用されているライブラリでもあります。 ラガード(Laggards) Dojo 1.xとAngular 1.xはまだ広くデプロイされていますがメンテナンスモードです。jQueryは、いくつかの改善点はありますが、ほとんどが新しいHTMLおよびJavaScript機能、またはより本格的なフレームワークに置き換えられています。 Webエンジニアのためのサーバサイドプラットフォーム / フレームワーク / データ / API JavaScriptのサーバサイドエコシステムは、最近多くの関心を集めています。重要な革新の1つは、サーバサイドレンダリング、静的な事前レンダリング、ビルド時のレンダリングに移行し、現在のアプリケーションで使用されているリアクティブプログラミングモデルを変更することなく、クライアントサイドのJavaScriptワークロードを削減することです。 サーバサイドとAPIとクライアントサイドの違いは曖昧であるため、このカテゴリには、静的な生成、データ、状態管理、およびクライアントサイドとサーバサイドの間で共有されることが多いAPIアプローチも含まれます。 Server-side platforms/frameworks/data/APIs 2020 Q1イノベーター(Innovators) Denoは1.0リリース近くです。元のNode.js作成者であるRyan Dahl氏によって作成されたDenoは、Node.jsに代わるTypeScriptの作成に努めています。 Dojoは、ビルド時レンダリングアプローチを追加しました。これにより、アプリケーションのビルド時にNode.js機能を利用できるようになり、静的なサイト生成のためのさまざまな機能が可能になります。他のソリューションと比較して、Dojoのアプローチはコンポーネントレベルで機能し、主要なパターンと機能のブロックを備えた非常に再利用可能なアプローチを提供します。さらに、Dojoストアは、一般的な状態管理パターンのサポートが組み込まれた、予測可能で一貫性のある状態コンテナを提供します。 Hasuraは、GraphQLサーバを作成するためのいくつかのオープンソースオプションの1つです。State of JS 2019 Rising Starsレポートによると、2019年にはHasuraへの関心が大幅に高まりました。 アーリーアダプタ(Early Adopters) 最初にExpressを作成したチームによって開発されたNode.jsフレームワークであるKoaへの関心は、引き続き関心を集めています。 Nuxtは、サーバ側レンダリング、静的サイト生成、または単一ページアプリを提供するVue.jsフレームワークです。 StrapiとStoryblokは、オープンソースのヘッドレスコンテンツ管理システムです。組織が今日のリアクティブ、コンポーネントベースのアーキテクチャで最新のコンテンツ管理オプションを提供しようと努めているため、この分野は大きな関心を集めています。 ApolloはGraphQLの人気のあるオプションであり、もともとMeteorフレームワークから登場しました。 アーリーマジョリティ(Early Majority) Nest.jsはTypeScriptで作成されたNode.jsフレームワークで、フルスタックのTypeScript開発を可能にするためのさまざまなオ��ションと機能により、人気が急速に高まっています。 Next.jsは、Reactアプリケーションのサーバサイドフレームワークであり、サーバサイドレンダリング、静的サイト生成などをサポートしています。 GatsbyはGraphQLを活用してさまざまなソースからデータを取得し、Reactベースのアプリケーションに効率的なレンダリングオプションを提供します。 FastifyはOpenJS Foundationプロジェクトであり、高性能のNode.js WebフレームワークとしてExpressに代わる新しい選択肢です。 MobXは、採用され続けているReduxの代替の状態管理です。 レイトマジョリティ(Late Majority) Node.jsはサーバサイドでJavaScriptを実行するためにこれまでで最も広く使用されているアプローチであり、Electronのような環境でWebテクノロジーを使用してデスクトップアプリケーションを作成するための基盤でもあります。Node.jsはOpenJS Foundationの一部です。 Expressは現在でも最も広く使用されているNode.js Webフレームワークであり、OpenJS Foundationプロジェクトでもあります。 RESTは依然としてAPIを作成するために最も広く使用されているアプローチですが、GraphQLは、すべてのAPIエンドポイントを事前に定義する代わりに、クエリベースの代替手段として大きく採用されています。組織がAPIへのアプローチでRESTとGraphQLを一緒に活用することも一般的です。 Reduxは、JavaScriptアプリケーションの状態管理に最も広く使用されているアプローチですが、小規模または単純なアプリケーションではあまり使用されていません。 Webエンジニアのためのクラウド Webエンジニアがクラウドベースのアプリケーションを作成および展開するのに役立つ幅広いソリューションが登場しました。 Cloudイノベーター(Innovators) Architectは、サーバレス JavaScript、Python、Rubyアプリケーションの作成をサポートするOpenJS Foundationプロジェクトです。 アーリーアダプタ(Early Adopters) AWS Amplifyは、AWSでモバイルおよびウェブアプリケーションを構築するための開発プラットフォームを提供します。 Netlifyは、Webアプリケーションを迅速に展開するための一般的な選択肢の1つです。 Azure SDK for JavaScriptは、その柔軟なIoTおよびCognitive Services APIにより、主に人気が高まっています。 アーリーマジョリティ(Early Majority) AWS Lambdaは、サーバレスJavaScript関数を実行することで人気が高まり続けています。 Zeit Nowは、静的およびJAMstackデプロイメント、サーバレス機能、およびグローバルCDNとして、Webアプリケーションをデプロイする一般的な方法です。 Google Cloud Functionsは、サーバレスJavaScript関数を実行するためのGoogleクラウドアプローチを提供します。 Googleのもう1つのサービスであるFirebaseは、クラウドベースのモバイルおよびWebインフラストラクチャを提供します。 パッケージ管理 / バンドル / 最適化 バンドル、パッケージ管理、および全体的なアプリケーションの最適化は、JavaScriptおよびWebアプリケーション開発における重要なトピックであり続けます。 Package management/bundling/optimizing 2020 Q1イノベーター(Innovators) pikaは、ESモジュールでサポートされている環境で構築およびデプロイされるJavaScript用のツールを提供することに焦点を当てています。 Entropicは、単一のフェデレーションレジストリではなく、より分散されたパッケージ登録アプローチを備えたnpmの初期段階の代替手段です。 アーリーアダプタ(Early Adopters) Parcelは、ますます人気のあるWebアプリケーションバンドルです。このレポートの時点で、Parcel 2はリリースの準備がほぼ整っています。 webhintは、アクセシビリティ、速度、およびブラウザー間の互換性を改善するためのリンティングツールを補完するOpenJS Foundationプロジェクトです。 アーリーマジョリティ(Early Majority) Prettierは、JavaScript開発でのコードのフォーマットに関するほとんどの議論を終わらせた独断的なコードフォーマッタです。 ESLintは、JavaScriptアプリケーションのエラーとアンチパターンを見つけるための豊富なアプローチを提供する別のOpenJS Foundationプロジェクトです。スタンドアロン製品としてのTSLintは非推奨となり、ESLintの拡張機能になりました。 Esprimaは、抽象構文ツリーの操作を支援するために広く使用されているECMAScriptパーサであり、OpenJS Foundationの一部でもあります。 Yarnは、npmパッケージレジストリを利用するnpmの代替���ッケージマネージャです。 Rollupは、Svelteと同じチームメンバによって作成されたESモジュールバンドルです。Rollupはライブラリとモジュールに広く使用されているのに対し、webpackはアプリケーションに一般的に使用されています。 レイトマジョリティ(Late Majority) NPMは、JavaScriptの事実上のパッケージマネージャーおよびレジストリです。npmは2019年にさまざまな論争に直面し、エコシステムは近い将来代替案を探す可能性があります。 webpackは、JavaScriptエコシステムで最も広く使用されているモジュールバンドルおよびコードオプティマイザです。 BabelはJavaScriptトランスパイラを提供し、開発者は開発で新しい言語機能を使用できますが、本番環境では古いバリアントにデプロイできます。Babelは最近、TypeScriptトランスパイレーションも追加しましたが、型チェックを提供しないため、用途が限られています。 Lighthouseは、Googleがアプリケーションコードの品質とパフォーマンスを向上させるために作成した、広く使用されている自動化ツールです。 Web開発のテストと自動化 JavaScriptでテストを作成および実行するための多くのオプションがあります。簡潔にするために、Chai、Sinon、Jasmine、QUnit、Cucumber、および非常に便利で人気のあるテスト機能を提供する他の同様のライブラリの分析を除外しましたが、これらのライブラリおよび他の多くのテストソリューションの進歩を引き続き追跡しています。 Testing and automation 2020 Q1イノベーター(Innovators) Playwrightは、ブラウザの自動化とテストのためのPuppeteerに新しくリリースされた代替手段です。Puppeteerとは異なり、Playwrightはすべての最新のブラウザーレンダリング環境を対象としています。 機械学習ベースのテストは、テストの生成を自動化する新しい分野です。Applitools、SauceLabs、Testim、Sealights、Test.AI、Mabl、ReTest、ReportPortalなど、この問題を解決しようとする企業があり不足しているわけではありません。この分野には明確な正解はありませんが、近い将来に変わると予想されます。Visual AIテストは、従来のビジュアル回帰テストの代替としても登場しています。 アーリーアダプタ(Early Adopters) Appiumは、Seleniumから登場したW3C WebDriverプロトコルを使用した、ネイティブ、ハイブリッド、モバイルのWebアプリ用のテスト自動化フレームワークです。AppiumはOpenJS Foundationプロジェクトです。 Internは、ユニット、機能 (WebDriverを介して、またはPuppeteerやPlayrightのような他の環境で) 、統合、パフォーマンス、およびその他の種類のテスト用にTypeScriptで作成されたOpenJS Foundationプロジェクトです。 Avaは、Node.jsアプリケーションの人気のあるテストランナーです。 WebdriverIOはOpenJS Foundationプロジェクトであり、WebDriverプロトコルに基づく機能および統合テスト環境を提供します。 アーリーマジョリティ(Early Majority) Cypressは、最近FirefoxとEdgeのサポートを追加したChromiumベースのブラウザ内のエンドツーエンドのテストランナーとして急速に人気を博しています。 Storybookは、UIコンポーネントを作成、テスト、共有するためのテストフレームワーク、デザインシステム、開発環境の一部です。 レイトマジョリティ(Late Majority) Jestは、Reactエコシステムによって一般化されたテストフレームワークであり、今日最も広く使用されているテストアサーションライブラリです。 MochaはOpenJS Foundationプロジェクトであり、シンプルで使いやすい単体テストライブラリを提供します。 KarmaとProtractorは、引き続きAngularアプリケーションをテストするための一般的なアプローチです。 Seleniumプロジェクトから生まれたプロトコルであるWebDriverは、ブラウザと対話して完全なテスト自動化を行う最も一般的な方法であり続けます。 PuppeteerはChromiumのみのブラウザオートメーションアプローチであり、Seleniumよりも操作が簡単ですが、機能とサポートされているブラウザーの両方で使用が制限されてい���す。 Webエンジニアのためのモバイル / デスクトップ環境とフレームワーク モバイルおよびデスクトップアプリケーションを構築するためのWebテクノロジーの活用は、人気とオプションの両方で増え続けています。 Mobile/desktop environments and frameworks 2020 Q1イノベーター(Innovators) Ionic CapacitorはCordovaに代わるもので、ハイブリッドアプリケーションの作成でWebテクノロジーとネイティブテクノロジーを活用するタイミングをより細かく制御できます。 アーリーアダプタ(Early Adopters) NativeScriptは、AngularおよびVue.jsアプリケーション用のWebテクノロジーを使用したネイティブアプリケーションのコンパイルを提供します。 アーリーマジョリティ(Early Majority) Ionic 4+は、アプリケーションを構築するためのフレームワークとコンポーネントライブラリを提供します。当初はAngularフレームワークとして開始されましたが、Ionicはフレームワークにとらわれず、Reactおよびその他のフレームワークをサポートしています。 React Nativeを使用すると、開発者はReactアプリケーションにあるWebテクノロジーとパターンを利用してネイティブアプリケーションを作成できます。React Nativeと他の同様のソリューションは、いくつかのシナリオではうまく機能するが、使いこなすのが難しいため、これまでさまざまなレビューが寄せられています。 Electronは、ChromiumとNode.jsを埋め込むことにより、Webテクノロジーを使用してデスクトップアプリケーションを作成するためのOpenJS Foundationプロジェクトです。日常的に使用するSlackなどの多くのアプリケーションは、Electronを活用しています。 レイトマジョリティ(Late Majority) Cordovaは、ハイブリッドモバイルアプリケーションを作成するために広く使用されている環境ですが、近い将来、ラガードになるリスクがあります。 WebエンジニアのためのIoT / ブロックチェーン / 機械学習 IoT、ブロックチェーン、機械学習などの新興分野でのWebテクノロジーのオプションは増え続けています。 IoT/Blockchain/Machine learning 2020 Q1イノベーター(Innovators) ml.jsは、JavaScript開発者に幅広い機械学習ツールを提供します。brain.jsは、JavaScriptでGPU高速化ニューラルネットワークをサポートします。TensorFlow.jsはJavaScript開発者にとって最も広く使用されている機械学習の基盤ですが、これら2つのライブラリは有望な代替手段を提供します。 Neurosityには、現代の思考コンピューティングおよび脳波測定デバイスであるNotionの開発者プレビューがあります。Neurosityを他と違うのは、JavaScriptのAPIです。 アーリーアダプタ(Early Adopters) ModdableとJerryScriptは、IoTプロジェクト用の軽量ECMAScriptエンジンです。JerryScriptはOpenJS Foundationプロジェクトです。 OpenJS Foundationの一部であるNode-Redは、よくあるIoTでのイベント駆動型アプリケーションに低コードプログラミングを提供します。 johnny-fiveは、Bocoupによって開始された人気のあるJavaScriptロボットとIoTプラットフォームです。 interledger.jsは、InterledgerプロトコルのJavaScript実装です。これは、元帳、ブロックチェーン、および暗号通貨の実装にとらわれない標準のセットです。このプロジェクトはOpen JS Foundationの一部です。 アーリーマジョリティ(Early Majority) TensorFlow.jsはGoogleによって開始され、現在機械学習で最も広く使用されているJavaScriptパッケージです。 WebエンジニアのためのVisualization / XR 拡張現実、仮想現実と複合現実の使用がJavaScriptで人気を集めています。 d3とThree.jsを超えた、データの視覚化、グラフ化、および視覚化とレンダリングへの他のアプローチは、多くのプロジェクトにわたって高度に断片化されています。 Visualization/XR 2020 Q1アーリーアダプタ(Early Adopters) React 360は、Reactと同様のアプローチで開発者に複合現実体験を提供します。 WebXR 1.0勧告は最近拡張され、拡張現実標準を定義する作業が残っています。 BablyonJSは、JavaScriptおよびTypeScript開発者向けの没入型ゲームを作成するための3D視覚化およびAPIを提供します。 アーリーマジョリティ(Early Majority) Three.jsは、ブラウザでの3D描画のためのWebGL上の低レベルAPIです。 A-Frameは最近、WebXR勧告の予備サポートとともに1.0リリースに達しました。A-Frameは、Three.jsまたはネイティブWebXR機能をラップするDOMベースのアプローチを提供します。 pixi.jsは、ゲーム開発用のプリミティブを提供する別のWebGL抽象化フレームワークです。 レイトマジョリティ(Late Majority) d3は、現在広く使用されているデータ視覚化ライブラリです。 CSS CSSとデザインは、過去数年にわたって大幅な革新を遂げており、5〜10年前に作成されたCSSにはほとんど認識されない多くの方法があります。 CSS 2020 Q1イノベーター(Innovators) Algorithmic CSSは、組み込みCSSアルゴリズムを利用して構成可能なレイアウトを構築する新しいアプローチです。 アーリーアダプタ(Early Adopters) CSS Houdiniは、CSSオブジェクトモデル（CSSOM）を介したブラウザのレンダリングエンジンのスタイリングおよびレイアウトプロセスにフックすることでCSSを拡張し、CSSエンジンにアクセスする新たに登場したアプローチです。 Typed CSSは、コンポーネント開発における効率的かつ正確なスタイル設定のために、CSSモジュールにTypeScriptの安全性を提供するためにDojo他が活用するアプローチです。 Ant Designは、最新のコンポーネントの使用と開発に利用できるいくつかの一般的な設計システムの1つです。 TailwindCSSはPostCSSを利用して、低レベルのCSSフレームワークを提供します。 アーリーマジョリティ(Early Majority) Design Systemsは、組織とプロジェクトがデザイン標準とコンポーネントライブラリを共有および統合して、一貫性を維持し、再利用を促進する非常に人気のある方法になりつつあります。 CSS Gridsは、Webサイトやアプリケーションのグリッドレイアウトを管理するために広く採用されているCSS機能になりつつあります。 PostCSSはCSSプリプロセッサの代替であり、新しいCSS構文をプロダクション環境で必要な環境でサポートされている構文に変換する際にBabelのように機能します。 CSS-in-JSは、コンポーネント内でCSSをインラインでオーサリングするために、主にReactエコシステム内で人気を得ているパターンです。より優れたCSS-in-JS実装では、インラインCSSを個別のCSSファイルに変換して、プロダクション環境でのレンダリングを高速化します。 Material Designは最初の大きなオープンソースの設計仕様とシステムであり、多くのフレームワークやプロジェクトで高い人気を維持しています。 Linariaは、CSS-in-JSで広く採用されているアプローチの1つです。 レイトマジョリティ(Late Majority) レスポンシブデザインは、携帯電話、タブレット、デスクトップコンピュータ全体でアプリケーションを拡張する必要性から生まれたものであり、アプリケーションを設計するための一般的なアプローチであり続けています。レスポンシブデザインは世界をよりベクトル主導型にすることを奨励しており、世界の大多数の企業が過去10年間にロゴとデザイン標準を更新して、ソフトウェアアプリケーションだけでなく、現実の世界での使用にも対応するレスポンシブ原則をサポートしています。 CSS Flexboxは、アプリケーションレイアウトに広く使用されているモデルです。 SASSは、引き続き最も広く使用されているCSSプリプロセッサです。 Web開発コードエディタとIDE JavaScriptとWeb開発用のIDEとコードエディタは、柔軟性と機能が向上し続けています。WebベースのIDEも、従来の機能とコラボレーション機能の両方でますます強力になっています。 Code editors and IDEs 2020 Q1アーリーアダプタ(Early Adopters) StackBlitzは、ブラウザでいくつかのクラウドホスト型IDEの1つであり、数年前までデスクトップIDEでのみ可能であった幅広い機能を提供します。 アーリーマジョリティ(Early Majority) CodeSandboxは、最も広く使用されているクラウドホスト型IDEであり、ブラウザではVS Codeと呼ばれることがよくあります。 レイトマジョリティ(Late Majority) VS Codeは、その起源がMicrosoftであったために無視されてきたプロジェクトから、JavaScriptとTypeScriptエコシステムで最も広く使用されているIDEに数年で移行しました。 WebStormは、Webアプリケーションを作成するために最も広く使用されている商用デスクトップIDEです。WebStormはIntelliJと同じプロジェクトファミリーに属し、JavaからJavaScriptの世界��入ったエンジニアはIntelliJをよく使用します。 vimとemacsは引き続き人気のあるコードエディタですが、それぞれを一連の拡張機能とツールを備えたIDEに変換できます。ほとんどのvimとemacsのファンは、親しみやすさと効率性で長年の生産性の向上を築いており、別のエディタに切り替えることはほとんどありません。 MicrosoftによるGitHubの買収により、AtomはVSCodeに統合されると予想されていましたが、今のところ、それらは別個のプロジェクトのままです。AtomとVS Codeのどちらも、デスクトップ環境にElectronを活用しています。 Sublime Textは依然として多くの人が使用しているエディターですが、その人気はAtomの最初の登場、そして最近ではVS Codeの登場とともに衰え続けています。 結論 JavaScriptとWebエコシステムは成長しており、変化の速度に追いつくことは難しいかもしれませんが、このドメイン内の多くの基本的な部分が安定し、イノベーションの追加領域を生み出していると信じています。InfoQのチームは、JavaScriptとWebランドスケープの専門的な記事を提供するためにあり、私たちはフィードバック、コメント、および外部の記事の貢献を歓迎します。

[t-baba]

Preact X, Node-RED 1.0, and TypeScript 3.7 beta

#457 — October 4, 2019

Read on the Web

JavaScript Weekly

Preact X: A Fast, 3KB React Alternative — Two years in the making, the latest version of Preact, a popular lightweight React-compatible alternative, is here. Support for hooks, ‘fragment’ components, and improved error handling are all here. For more info, check out the What’s new in Preact X guide.

Preact

The Differences Between the Same App Created in React and Vue — An interesting side by side comparison of the same app built by the same developer in both React and Vue.js. If you’ve seen this post before, it’s just been rewritten and updated to use React hooks.

Sunil Sandhu

🔒 Build an Encrypted File Transfer in 15 Minutes — Tanker.io helps you secure data exchanges in your apps. Encrypt, upload and share files in one API call, in the browser. No key management, zero crypto skills required.

Tanker sponsor

Creating Custom JavaScript Syntax with Babel — Wow, this is cool. An introduction to forking Babel and creating your own custom JavaScript syntax.

Tan Li Hau

Evaluating JavaScript Code via import() — import lets us dynamically load modules but can also work as a sort of alternative to eval.. an interesting trick here.

Dr. Axel Rauschmayer

Node-RED 1.0 Released — Node RED is a flow-based, visual programming tool (aimed primarily at hardware automation) that’s built on top of Node.js. Despite only reaching 1.0 now, it’s a mature project used in numerous real world IoT projects.

Nick O'Leary

Quick bytes:

Meteor, the JavaScript app platform, has been acquired by Tiny, the owners of Dribbble and Designer News.

TypeScript 3.7 beta is here. It implements a much demanded feature: optional chaining.

💻 Jobs

JavaScript Developer at X-Team (Remote) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers.

X-Team

Your Princess (or Prince!) IS in this Castle: Node Developer (London) — This role is for a senior JS/Node/React dev who can’t wait to tackle more architectural responsibility at a large, well-known company with a passion for saving folks money.

CareersJS

Find A Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📘 Articles & Tutorials

How to Build Cross-Platform, Native Desktop Apps with NodeGUI — A beginner’s guide to NodeGUI, a tool for building native desktop applications with JavaScript and CSS styling in a more lightweight way than using Electron.

James Hibbard

How V8 Is Improving V8 Regular Expressions — This is very technical, JavaScript engine-y sorta stuff, but basically the V8 team show off their technique for speeding up how regexes are interpreted.

Patrick Thier and Ana Peško (V8)

Free Webinar on User Journey Testing with Scott Davis from ThoughtWorks

Gauge sponsor

How to Build a Progressive Web App (PWA) with only Vanilla JS — Bring a native-like experience to your webapps with this grab bag of techniques including styling, fonts, Service Workers, and creating a manifest file.

Sayan Mondal

Don't Use Variables Without Knowing About the 'Temporal Dead Zone' — In short, don’t use anything before declaring it.

Dmitri Pavlutin

Don't Sync State, Derive It — Avoid synchronization bugs and hidden complexity by deriving (or calculating) state in React apps on the fly rather than keeping numerous copies of state around your app.

Kent C Dodds

▶  Let's Build a 16-Bit Virtual Machine in JavaScript — This is a ‘rabbithole which goes really deep’ warns Francis, but you’ll learn a lot of interesting things along the way.

Low Level JavaScript

BLOG: JavaScript Project Configuration — Check out our full list of JavaScript blog posts.

Big Nerd Ranch sponsor

'How I Stopped Worrying and Learned to Love the JavaScript Ecosystem' — Sometimes you have to take a step back and think about what really matters.

Flavio Copes

🔧 Code & Tools

Carbon: Create Beautiful Images of Your Source Code — We’re huge fans of seeing code snippets shared on social media and while images do have accessibility issues, they remain a rapid-fire way to get code into a tweet or Instagram image and Carbon excels at the task.

Carbon

SweetAlert2: Responsive, Customizable and Accessible Popup Boxes — An attractive and accessible (WAI-ARIA) replacement for native popup boxes with zero dependencies.

SweetAlert2

The Most Complete Spreadsheet Solution for JavaScript Apps - SpreadJS — Fast enterprise JavaScript spreadsheet for delivering true Excel-like spreadsheet experiences. Download free eval.

SpreadJS by GrapeCity sponsor

Tribute: A Library for Handling @mentions — If you have text fields, in which other users might be cited, this could be handy. Check out the demo page.

ZURB

Cropper.js: An Image Cropping Control — A mature project but continuing to get frequent releases.

Chen Fengyuan

Revocable Queue: Specialized Async Queue Data Structure — Asynchronously and lazily read/write values to a queue, from which you can also revoke yet-unread values.

Kyle Simpson

⚡️ Quick Releases

React 16.10

Create React App 3.2.0 — The quickest way to get started with React.

Nuxt 2.10 — Framework for building universal Vue apps.

Bluebird 3.7 — Popular promises library.

Greenlet 1.1 — Move async functions into their own threads.

Bowser 2.7 — Browser detection library.

🐦 Over on Twitter...

by via JavaScript Weekly https://ift.tt/2oTj0Gq

[xhostcom]

How To Build Vue Wordpress Rest API Websites

Want to build a Vue JS/Wordpress Rest API backend hybrid, with superfast loading times? Here we take a look at Gridsome static site generator for Vue JS, which is a similar tool to React's Gatsby generator, and build a site using the Vue Wordpress Rest API. The use of Jamstack (Javascript, API’s and Markup) technologies is on the rise nowadays, as they provide a simpler developer experience, better performance and greater scaleability. Most React developers are familiar with the Gatsby site generator, however with Vue JS there are a number of different options. Here we take a look at the Gridsome cli for Vue JS, which has some cool features out of the box, and a lot more that can be added with the use of plugins.

Gridsome for Vue Wordpress

With Gridsome, you get the following out of the box, in a quick two minute install. Local development with hot-reloading - See code changes in real-time. Data source plugins - Connect to any popular Headless CMSs, APIs or Markdown-files. File-based page routing - Quickly create and manage routes with files. Centralized data management - Pull data into a local, unified GraphQL data layer. Vue.js for frontend - A lightweight and approachable front-end framework. Auto-optimized code - Get code-splitting and asset optimization out-of-the-box. Static files generation - Deploy securely to any CDN or static web host. Built-in component that outputs an optimized progressive image - resizes and crops in real-time when developing.

Everything Lives in Github

With a JAMstack project, anyone should be able to do a git clone, install any needed dependencies with a standard procedure (like npm install), and be ready to run the full project locally. No databases to clone, no complex installs. This reduces contributor friction, and also simplifies staging and testing workflows.

Modern Build Tools

Take advantage of the world of modern build tools. It can be a jungle to get oriented in and it’s a fast-moving space, but you’ll want to be able to use tomorrow’s web standards today without waiting for tomorrow’s browsers. And that currently means Babel, PostCSS, Webpack, and friends.

Automated Builds

Because JAMstack markup is prebuilt, content changes won’t go live until you run another build. Automating this process will save you lots of frustration. You can do this yourself with webhooks, or use a publishing platform that includes the service automatically.

Wordpress Rest API

Since the introduction of the Wordpress Rest API , it has opened up a whole new world of possibilities for Viue JS/Wordpress hybrids, utilizing the features above and combining them with the vast infrastructure and support available with Wordpress. Whilst this may not be suitable for many requirements, there are certainly some which will benefit from this approach.

Wordpress Vue Starter Templates

The Gridsome Wordpress setup (there are others) has the features you need to connect to a Wordpress back end to pull in data to display at the Vue front end, typically loading faster than normal and with a lot of other benefits. For anyone interested in building a Vue JS front end and using the Wordpess Rest API Ive created some starter templates using Gridsome which have been enhanced from the standard Gridsome Wordpress starter with some extra bits, to get you up and running fast. Please note I haven't used the g-image here, so remember to change those when inserting your own images. The Wordpress API is https://vuewp.xhostcom.com/ and we use the endpoints from that to test some data. These are already in the config files, but if you have your own Wordpress setup you can obviously use that, just change the url in gridsome.config.js and netlify.toml You will first need NodeJS and NPM installed, and Gridsome using the command npm install --global @gridsome/cli And then clone from Github any of the following starters, which will get you up and running quickly.

Example Code (Bulma CSS)

Example Code (Bulma CSS)

Example Code (Milligram CSS) Here's a blank one with just a nav bar and no CSS or JS

Example Code (No CSS) Once cloned, just run Yarn to grab the dependencies, and gridsome develop command to run the test server. You can of course change the CSS and add your own Javascript as required, but these get you up and running ready to go with the Wordpress Rest API data as is. You can just clear the markup in all the page templates back to the tags and put in your own markup. Creation of extra pages, once added to the menu in /components/header.vue will be routed accordingly with the superfast router, one of the best features I've found, and a breeze compared to others such as Nuxt. So these are just basic starter templates, there's a lot more that can be done using the GraphQL data bindings and other functionality in Gridsome and Wordpress to create your site. Feel free to contribute on Github.

Vue CLI 3 & UIKit

Finally, for those who prefer the official Vue JS CLI, here's one using that, and UIKit CSS/JS Framework, with a mobile nav bar which will blow your socks off! Its NOT configured for the Wordpress Rest API but can be with a little application, or you may want to port the styles using the Gridsome starter above.

Example Code (Vue CLI - UIKit) So, there we have a few Gridsome Vue Wordpess Starters to have a look at, and also a Vue CLI with UIKit starter to play around with and get a feel for the Vue JS Wordpress API setup, although it can get a lot more interesting if we delve deeper in to Gridsomes GraphQL, extra functions and post template features. Feel free to check them all out on Github at Xhostcomweb Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more Read the full article

[holytheoristtastemaker]

Before we start

If you are reading this post you should already know nodejs & npm and have them installed. If not, I recommend you to read its about section before continuing, it will help you understand what it is about. To start using it you just need to follow its installation guide.

Now we're ready to continue!

STEP 1 - Create your package

The first thing we need is to be clear about what name we're going to give our little package. We need to check that no one has used it before, look for it in the search and pray it's not taken yet.

Once you’ve decided the name, we are ready to create the package. You can choose between creating it directly by naming a folder as you chose and run npm init on it, or using the tools of your favorite framework.

In my case, I created a package in Vue.js using Vue CLI. Here's how I did it:

First I install the CLI:

npm install -g @vue/cli

Then I create the project and run it to see everything is working fine:

vue create chosen-name npm run serve

Finally, I create the component and I register it globally

To do it, I create a file ChosenName.vue in the src/components folder and started adding the code.

In order to register it globally, I needed to create an index.js file in the same folder and add the following lines:

import Vue from "vue"; import ChosenName from "./ChosenName.vue"; const Components = { ChosenName }; Object.keys(Components).forEach(name => { Vue.component(name, Components [name]); }); export default Components;

This way, the day we want to extend our package with a new component and make it a library, we will only need to import it into this file.

STEP 2 - Test it locally

Like you, since it was my first time I had no idea how to test my package without publishing it.

Then I discovered npm link, thanks to this post, where it explains how to use this wonderful command and gives you other options in case symlinks don't suit you. I recommend you to take a look and follow the option that best suits your case.

Remember not to publish your package before you have tried it out in the local environment. Keep in mind that if you publish it, you aren’t convinced and you want to unpublish it, you will not be able to publish it again under the same name.

STEP 3 - Upload it to GitHub

We need to have our code visible to people who want to look at it, so we're going to host it on the most popular platform, GitHub.

If you like BitBucket or another platform, you're free to choose the one you like best, but keep in mind that GitHub provides an issues url, which will be useful for reporting possible bugs they might find in your package.

Create your repository on GitHub and run the following commands, changing the repo url by yours.

git init git add . git commit -m "My first npm package version" git remote add origin https://github.com/<user>/<chosen-name> git push origin master

Now we have what we need to complete the files I mention in the next step. Let's see it!

STEP 4 - Prepare package.json, README.md, License and a demo Now let's see how I had to prepare the package.json file so that npm could get all the data it is interested in. Most of the fields will already be filled in, having created our app with vue create, but let's check it. Also, I'll tell you the most important thing when publishing your package, which is to have a good README and a demo ready, where people can be able to understand what your package is about and how to use it in their projects.

How to fill the package.json

Let's divide the file by parts to see in detail what we are interested in. First we will have to fill in the information about the package. We need to add the name we have chosen, the version (we will talk about this in STEP 5), a brief description of what our package does, the keywords by which people will be able to find our package in the npm search engine, and the author, adding our name, email and website, so that they can contact us.

{ "name": "chosen-name", "version": "1.0.0", "description": "My first package on npm.", "keywords": [ "first", "package", "npm" ], "author": "Your Name <youremail@domain.com> (<yourwebsite.com>)", ... }

Once we have the basic information, we have to create a script to create the bundle of our package and specify to npm which files we'll publish and which of them will be the main one. In our case, once we run npm run build-bundle, it generates a dist/ folder with several files, being **.common.js* the one we will load as main.

{ ... "main": "./dist/chosen-name.common.js", "scripts": { "build-bundle": "vue-cli-service build --target lib --name chosen-name ./src/components/index.js", }, "files": [ "dist/*", "src/*", "public/*", "*.json", "*.js" ], ... }

Since we've already created a repository we can now use it so people can report bugs, or simply view our code on GitHub. Just add the urls below to your package.json and change them by your repo. Also, as we want to have a public package we need to set private to false and add the type of License we choose.

{ ... "homepage": "https://github.com/<user>/<chosen-name>", "bugs": { "url": "https://github.com/<user>/<chosen-name>/issues", "email": "<youremail@domain.com>" }, "repository": { "type": "git", "url": "git+https://github.com/<user>/<chosen-name>.git" }, "license": "MIT", "private": false }

README & LICENSE

Although it is a very important part of our package, fortunately both files are very easy to create. To generate our own license, GitHub itself has an option to generate the LICENSE file with the type we choose, in my case I have chosen to use the MIT license, here you can see the generated file. In the case of the README you can be guided by the one I created for my package, where the important parts are:

Title, description and demo Simply add the name and basic description of your package, as in the case of package.json and provide a link to the demo we have created, if applicable.

Installation and use Here you can add the commands that must be run to get your package and a use case or several, depending on what type of project it will be used on.

In my case it was necessary to explain how to use it in Nuxt as well.

Options and slots Here it's interesting to create tables that exemplify what type of data can be entered in our component, as the properties/options are called and what default value they usually have. This is a very simple way to expose the possibilities they have when using your package.

Author and license Mention the license used and the creators of the package.

I added a Set up section too, in case someone wanted to set up my project in their local environment.

How I made my demo

If your package has many use cases, you may want to create a website as a demo. In it, you can show the code needed to generate each use case. A clear example of this type of demos is Slick, by Ken Wheeler, a great job that saves you hours in your developments! But, if, as in my case, your package has a unique or lesser functionality, I recommend you to create a project in Codepen or CodeSandbox, you will be able to see how to implement it and the result at a glance. They make our lives easier!

STEP 5 - Publish your package

We are now ready to publish our first package 😍

Generate your bundles with:

npm run build-bundle

Then, create an account or log in on npmjs. If you prefer to run commands instead, type:

npm adduser /* Sign up */ npm login /* Log in */

Verify your npm user credentials:

npm whoami

For our package we will need a version control, as we see on package.json, what better than using the one recommended by npm. We just need to use the npm version command each time we need to update our package, using the following options:

First release

When we uploaded the first version, package.json need to have the field version as a 1.0.0.

Bug fixes (Patch release)

Increment the third digit: 1.0.1, 1.0.2, …

npm version patch

New features (Minor release)

Increment the middle digit and reset last digit to zero: 1.1.0, 1.2.0, …

npm version minor

Changes that break backward compatibility (Major release)

Increment the first digit and reset middle and last digits to zero: 2.0.0 (v2)

npm version major

And finally, we're ready to run the magic command:

npm publish --access public

Voilà! Our package is already part of npm and now with the command npm install chosen-name we can add our package to all our projects