#vue.js options api vs function api

[mitu444]

*Website Design and Development 2024

*Website Design and Development 2024

Web Design

**1. User Experience (UX) Design:

Research & Analysis: Understanding user needs, behaviors, and pain points.

Information Architecture: Organizing content and navigation to ensure a logical flow.

Wireframing: Creating basic layouts to map out functionality and structure.

Prototyping: Developing interactive models to visualize the user journey.

**2. User Interface (UI) Design:

Visual Design: Crafting the look and feel of the website, including color schemes, typography, and imagery.

Responsive Design: Ensuring the site is accessible and functional on various devices and screen sizes.

Accessibility: Designing to meet accessibility standards (e.g., WCAG) for users with disabilities.

Brand Integration: Reflecting the client’s brand identity through design elements.

**3. Design Tools and Software:

Sketch: For wireframing and high-fidelity designs.

Adobe XD/Figma: For prototyping and collaboration.

Photoshop/Illustrator: For creating and editing visual assets.

Web Development

**1. Front-End Development:

HTML: Structuring the content of web pages.

CSS: Styling the content to match design specifications.

JavaScript: Adding interactivity and dynamic features (e.g., sliders, form validations).

Front-End Frameworks: Utilizing tools like React, Angular, or Vue.js for more complex functionality.

**2. Back-End Development:

Server-Side Languages: Using languages like PHP, Python, Ruby, or Node.js to handle server logic and database interactions.

Databases: Managing data with systems like MySQL, PostgreSQL, or MongoDB.

APIs: Creating and consuming APIs to enable integration with other services and platforms.

Authentication & Authorization: Managing user accounts and access levels.

**3. Content Management Systems (CMS):

WordPress: Popular for its ease of use and extensive plugin ecosystem.

Joomla/Drupal: Other options with robust features for more complex sites.

Headless CMS: For more flexibility in delivering content across different platforms.

**4. Development Tools and Environments:

Code Editors: Using tools like VS Code or Sublime Text for writing code.

Version Control: Managing code changes with systems like Git and platforms like GitHub or GitLab.

Local Development Environments: Tools like XAMPP or Docker for local testing and development.

Integration of Design and Development

**1. Design Handoff:

Documentation: Providing developers with design specifications, assets, and guidelines.

Collaboration Tools: Using platforms like Zeplin or Figma to facilitate design handoff and ensure alignment.

**2. Responsive and Adaptive Design:

Media Queries: Implementing CSS techniques to ensure the site adapts to different devices and screen sizes.

Flexible Grid Layouts: Designing layouts that scale and adjust fluidly.

**3. Testing and Quality Assurance:

Cross-Browser Testing: Ensuring compatibility across different web browsers.

User Testing: Gathering feedback from real users to refine and improve the design.

Performance Testing: Checking load times and optimizing site speed.

**4. Deployment and Maintenance:

Hosting: Choosing and setting up web hosting services.

Deployment: Moving the website from a development environment to a live server.

Ongoing Maintenance: Regularly updating and maintaining the site to ensure security and functionality.

**5. SEO and Analytics:

On-Page SEO: Implementing best practices for search engine optimization.

Analytics Integration: Setting up tools like Google Analytics to track and analyze website performance.

[scopethings-blog]

Scope Computers

Web development Training

(Admission Open)

New Batch Start 15.05.2024

A comprehensive web development course typically covers a wide range of topics, skills, and technologies necessary to build modern websites and web applications. Here's a detailed description of what might be included in such a course:

### Introduction to Web Development

- Overview of web development concepts, history, and industry trends

- Understanding the client-server model and how the web works

- Introduction to basic web technologies: HTML, CSS, JavaScript

### Frontend Development

1. **HTML (Hypertext Markup Language)**

- Basics of HTML: structure, elements, attributes

- Semantic HTML for better accessibility and SEO

- Forms and input elements

- HTML5 features and APIs

2. **CSS (Cascading Style Sheets)**

- Styling HTML elements: selectors, properties, values

- CSS layout techniques: flexbox, grid, positioning

- Responsive web design and media queries

- CSS preprocessors like Sass or LESS

- Introduction to CSS frameworks like Bootstrap or Foundation

3. **JavaScript**

- Fundamentals of JavaScript: variables, data types, operators, control structures

- Functions and scope

- DOM manipulation and event handling

- Asynchronous JavaScript and promises

- Introduction to ES6+ features

- Working with JSON and AJAX

### Backend Development

1. **Server-side Languages**

- Introduction to server-side programming languages like Node.js, Python (Django/Flask), Ruby (Rails), PHP, etc.

- Setting up a development environment

- Basic syntax, data types, and control structures

2. **Database Management**

- Relational databases (SQL) vs. NoSQL databases

- Working with databases using SQL (e.g., MySQL, PostgreSQL) or NoSQL (e.g., MongoDB)

- CRUD operations (Create, Read, Update, Delete)

- Database normalization and optimization techniques

3. **Web Frameworks and APIs**

- Introduction to web frameworks for backend development (e.g., Express.js for Node.js, Django for Python)

- RESTful API design principles

- Authentication and authorization

- Handling HTTP requests and responses

### Full Stack Development

- Integrating frontend and backend components to build full-fledged web applications

- Project-based learning: building real-world web applications from scratch

- Version control with Git and GitHub

### Additional Topics

- Web security best practices: XSS, CSRF, SQL injection, etc.

- Performance optimization techniques

- Deployment and hosting options for web applications (e.g., Heroku, AWS, Netlify)

- Continuous integration and deployment (CI/CD) pipelines

- Web accessibility standards and guidelines

- Basics of SEO (Search Engine Optimization)

### Elective/Specialization Tracks (Optional)

- Mobile web development

- Single-page application (SPA) development with frameworks like React, Angular, or Vue.js

- E-commerce website development

- Progressive web apps (PWAs)

- Web design principles and UI/UX fundamentals

### Conclusion

- Final project/portfolio development

- Career guidance, job search strategies, and interview preparation

This course structure aims to provide students with a well-rounded understanding of both frontend and backend web development, along with essential skills in design, deployment, and project management necessary to succeed in the field.

[nileshitsolution]

Web App Design and Development for nileshitsolution

nileshitsolution

In today's digital era, web app design and development have become crucial for businesses aiming to establish a strong online presence. This comprehensive guide will delve into various aspects of web app design and development, including UI/UX design, front-end development, website design, software development, and popular platforms like WordPress, Shopify, WooCommerce, Wix, and Square Space. Whether you're a business owner or a budding developer, this article will provide valuable insights into creating exceptional web applications that captivate users and drive success.

Web App Design 

Web app design involves creating visually appealing interfaces for web applications that deliver exceptional user experiences. It combines aesthetics with functionality to ensure users can navigate seamlessly through the application and accomplish their desired tasks.

UI/UX Design 

UI/UX design plays a pivotal role in web app development. A well-designed user interface enhances usability and guides users to perform desired actions, while a positive user experience leads to increased engagement and customer satisfaction.

Front-End Development

Front-end development focuses on implementing the visual and interactive elements of a web application. It involves using HTML, CSS, and JavaScript to bring the UI design to life and ensure smooth user interactions.

Web App Development 

Web app development relies on various technologies and frameworks such as Angular, React, and Vue.js. These technologies enable developers to build dynamic and responsive web applications that cater to diverse user needs.

Website Design

Website design is an integral part of web app development, as it sets the foundation for an intuitive and engaging user experience. A well-designed website incorporates attractive visuals, clear navigation, and concise content to captivate visitors and drive conversions.

Web App Design and Development

To ensure the success of web app design and development, it is important to follow industry best practices. These include conducting thorough user research, utilizing wireframes and prototypes, performing usability testing, and continuously iterating to improve the application's usability.

Software Development for Web Applications 

Software development for web applications involves writing code and implementing features to create robust and scalable applications. It encompasses back-end development, database management, and integrating third-party APIs to enhance functionality.

Desktop Application vs. Web Application 

Desktop applications and web applications serve different purposes. While desktop applications provide offline access and advanced features, web applications offer cross-platform compatibility and easy accessibility from any device with an internet connection.

WordPress Development

WordPress is a popular content management system (CMS) used for web development. It offers a wide range of themes, plugins, and customization options, making it an ideal choice for building dynamic and interactive websites.

Shopify Development

Shopify is a leading e-commerce platform that simplifies online store creation and management. It provides a comprehensive set of tools for inventory management, payment processing, and order fulfillment, making it an excellent choice for businesses looking to establish an online retail presence.

WooCommerce, Wix, and Square Space

WooCommerce, Wix, and Square Space are popular platforms for building websites and online stores. WooCommerce is a plugin for WordPress that enables e-commerce functionality, while Wix and Square Space offer intuitive website builders with built-in e-commerce capabilities. Choosing the right platform depends on specific business requirements and technical expertise.

Web App Design and Development

The field of web app design and development is constantly evolving. The future holds exciting advancements such as augmented reality (AR) and virtual reality (VR) integration, voice user interfaces (VUIs), and further improvements in mobile responsiveness and performance.

Conclusion

Web app design and development encompass various disciplines, including UI/UX design, front-end development, and software development. By following best practices, leveraging the right technologies, and focusing on user experience, businesses can create exceptional web applications that drive engagement and success in the digital landscape.

FAQs (H2)

How long does it take to develop a web application?

The development timeline varies based on the complexity and scope of the web application. Simple applications may take a few weeks, while more complex ones can take several months or longer.

What is the role of a UI/UX designer in web app development?

A UI/UX designer is responsible for creating visually appealing and user-friendly interfaces, ensuring a seamless and enjoyable user experience.

Can I use WordPress for e-commerce websites?

Yes, WordPress offers WooCommerce, a powerful plugin that enables e-commerce functionality, making it a popular choice for online stores.

What is the difference between front-end and back-end development?

Front-end development focuses on the user interface and user experience, while back-end development deals with the server-side logic and database management.

How important is mobile responsiveness in web app design?

Mobile responsiveness is crucial as more users access the internet through mobile devices. Ensuring your web application adapts to different screen sizes enhances the user experience and expands your potential audience.

visit url : http://nileshitsolution.com/

[laravelvuejs]

VUE.JS 3 COMPOSITION API FETCH WITH EXAMPLE - VueJs

VUE.JS 3 COMPOSITION API FETCH WITH EXAMPLE – VueJs

VUE.JS 3 COMPOSITION API FETCH WITH EXAMPLE – VueJs

[ad_1]

Vue.js Hooks are awesome. Let’s take a look at adding a useFetch function for the Vue 3 Composition API. #vuejs #vuejscomposition #vuejshooks

👉 Check out my last video on Vue Composition https://youtu.be/zPViRHZfKv4

📚 Sign up and get notified about my new Vue 3 course! — https://www.vuecourse.tech/

👉Make sure to check out self-taught or…

[t-baba]

Angular 10, data grids, randomness, and checking some boxes

#494 — June 26, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Lessons Learned Refactoring Optional Chaining Into a Large Codebase — Lea Verou, creator of Mavo, decided to refactor Mavo to use optional chaining (?.) and here’s some of what she discovered along the way. (As an aside, Lea was the subject of a neat 10 minute programming documentary recently – worth a watch!)

Lea Verou

A Little Bit of Plain JavaScript Can Do A Lot — For anyone more than happy to dive in and write JavaScript without dragging in an entire framework and tooling to manage it, there will be no surprises here, but this is a nice reminder otherwise. Do you always need a 'framework'? No.

Julia Evans

Creating a Voting App with Firestore and Wijmo — Learn how to build a realtime voting app quickly and easily with the Firestore database and Wijmo components. The app uses OAuth for authentication and allows users to submit and vote for ideas.

Wijmo by GrapeCity sponsor

Angular 10 Released — A major release for the popular Google-led framework, though smaller in scope than usual as Angular 9 only came out in February ;-) 10 gains a new date range picker, optional stricter settings, and an upgrade to TypeScript 3.9.

Stephen Fluin (Google)

What's Coming in TypeScript 4? — The first beta of TypeScript 4 is due any moment with a final release due in August. New bits and pieces include variadic tuple types, labelled tuples, short-cut assignment operators (e.g. ||=) and more.

Tim Perry

⚡️ Quick bytes:

Chrome 85's DevTools have gained better support for working with styles created by CSSOM APIs (such as by CSS-in-JS frameworks). There's also syntax autocompletion for optional chaining and highlighting for private fields.

There's nothing to see just yet, but NativeScript is coming to Ionic.

The creator of AlpineJS has written about how he's passed $100K/yr in income using GitHub Sponsors.

Did you know there's a Slack theme for VS Code? 😆

▶️ The JS Party podcast crew discusses how their use of JavaScript syntax evolves (or not) over time.

engineeringblogs.xyz is a new aggregator site (by us!) that brings together what 507 (so far) product and software engineering blogs are talking about. Worth a skim.

💻 Jobs

JavaScript Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

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

Vettery

📚 Tutorials, Opinions and Stories

ECMAScript Proposal: Private Static Methods and Accessors in Classes — Dr. Axel takes a look at another forthcoming language feature (in this case being at stage 3 and already supported by Babel and elsewhere).

Dr. Axel Rauschmayer

npm v7 Series: Why Keep package-lock.json? — If npm v7 is going to support yarn.lock files, then why keep package-lock.json around as well? Isaac goes into some depth as to how yarn.lock works and why it doesn’t quite suit every npm use case.

Isaac Z. Schlueter

How to Dynamically Get All CSS Custom Properties on a Page — Some fun DOM and stylesheet wrangling on display here.

Tyler Gaw

Stream Chat API & JavaScript SDK for Custom Chat Apps — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

Getting Started with Oak for Building HTTP Services in Deno — A comprehensive Oak with Deno tutorial for beginners (which, I guess, we all are when it comes to Deno). Oak is essentially the most popular option for building HTTP-based apps in Deno right now.

Robin Wieruch

Understanding Generators in JavaScript — Generator functions can be paused and resumed and yield multiple values over time and were introduced in ES6/ES2015.

Tania Rascia

Build a CRUD App with Vue.js, Spring Boot, and Kotlin — It’s a fact of life that not everyone is building apps with JavaScript at every level of the stack. Sometimes.. people use Java too 🤫

Andrew Hughes

▶  Creating a Basic Implemention of 'Subway Surfers' — No modules, webpack or such-like here.. just exploring the joy of throwing a game mechanic together quickly using rough and ready JavaScript. Love it.

Shawn Beaton

Rubber Duck Debugging for JavaScript Developers — When you’re stuck with something, why not talk to a rubber duck?

Valeri Karpov

🔧 Code & Tools

Tabulator 4.7: An Interactive Table and Data Grid Library — Supports all major browsers and can be used with Angular, Vue, and React if you wish. 4.7 is a substantial release. Among other things is a new layout mode that resizes the table container to fit the data (example).

Oli Folkerd

Tragopan: A Minimal Dependency-Free Pan/Zoom Library — Try it out here. Claims to work faster due to use of native browser scrolling for panning (left/right/up/down) and transform/scale for zooming.

team.video

Builds Run Faster on Buildkite 🏃‍♀️ — Build times <5 mins at any scale. Self-hosted agents work with all languages, source control tools & platforms.

Buildkite sponsor

React Query 2: Hooks for Fetching, Caching and Updating Async Data — React Query is well worth checking out and has extensive documentation and even its own devtools. Main repo.

Tanner Linsley

Rando.js: A Helper for Making Randomness Easier — The rando function lets you get random integers in a range, floats in a range, pick between multiple items, return a random element from an array, and more. There’s also randosequence for a more shuffle-like experience.

nastyox

jinabox.js: A Customizable Omnibox for AI Powered Searching — Designed to be used with a Jina back-end. It’s all open source, but will take some digging around to understand fully.

Jina AI

MongoDB Is Easy. Now Make It Powerful. Free Download for 30 Days.

Studio 3T sponsor

IntersectionObserver Visualizer — If you’re new to using the IntersectionObserver API, this useful interactive demo might help you comprehend it a little better.

michelle barker

Polly.js 5.0: Record, Replay, and Stub HTTP Interactions

Netflix

Vest: Effortless Validations Inspired by Testing Frameworks — If you’re used to unit testing, the syntax used here will be familiar.

Evyatar

👻 Scary Item of the Week

Checkboxland: Render 'Anything' as HTML Checkboxes — This frivolous experiment is equal parts terrifying and impressive. It’s a JS library that displays animations, text, and arbitrary data using nothing but HTML checkboxes and, to be fair, they’ve presented it really well!

Bryan Braun

by via JavaScript Weekly https://ift.tt/3g53MDU

[myrtlecornish]

From React to Vue: Re-Vue-sable Components

From React to Vue: Re-Vue-sable Components

For many developers, the most beloved part of any modern front-end framework is the ability to create clear and modular components. React took off like a storm by celebrating its “Just JavaScript” roots, bringing with it a simple but robust API for composing components together into advanced user interfaces. Today, React is not the only option for this style of development. Whereas React delegates design patterns to the developer, Vue.js comes prepackaged with a suite of APIs for creating powerful, reusable components. By leveraging these APIs, any developer can produce a robust Vue.js application.

Vue.js 2.x has two primary approaches for introducing reusability beyond components: mixins and slots. There are a few other options with their own use cases, such as custom directives and JSX inside render functions, but we’ll focus on mixins and slots, as they’ll be applicable to a majority of use cases.

If you’d like to play with any of the examples below, check out my CodeSandbox!

If the <template> keyword is new to you, it essentially takes the place of React’s render function. Check out single file components in Vue.js for some more details.

Mixins

One of the most immediate reuse concerns with components is that different components will often require identical blocks of code. Utility and helper functions can offload a good part of that, but there comes a point where code is reliant on component lifecycle or properties, and copying code really is the most valid solution. Mixins are a programmatic way of doing just that, spreading one block of component-aware code across multiple components. Any option that a component may have, so too can a mixin, be it a method, a computed property, or even a data object. Keeping a functional code block in one place brings some other advantages, such as potentially reducing developer overhead and refactor complexity.

HelloWorldMixin.js

// Mixins are just JavaScript objects const HelloWorldMixin = { computed: { helloWorld() { return 'Hello from Vue.js!'; }, }, }; export default HelloWorldMixin;

HelloWorld.vue

<template> <div> <!-- Hello from Vue.js! --> <p></p> </div> </template> <script> import HelloWorldMixin from 'path/to/HelloWorldMixin.js'; export default { mixins: [HelloWorldMixin] }; </script>

Pure vs. Impure Mixins

There are a couple approaches to mixins. One option is to use them almost as a form of abstract class. For instance, you can create methods that require some property on the component but leave it up to the component to determine how that property is computed. The approach I tend to prefer, however, is creating a pure mixin, one where any required dependencies are kept within the mixin. This kind of encapsulation transforms a mixin into a plug-and-play piece of code. Keeping that code isolated can also be handy when writing tests. Properly testing a mixin often requires creating mock components, and a pure mixin’s detachment from the component means you can test without relying on component internals.

const ImpureMixin = { computed: { helloImpurity() { // There is no guarantee that the component will have this key return `I sure hope my component has ${this.importantProperty}`; }, }, }l const PureMixin = { data() { return { // Instead, include any expected keys within the mixin importantProperty: 'the required value!', }; }, computed: { helloPurity() { // Now we can expect our mixin to work in its default form return `I know my component will have ${this.importantProperty}`; }, }, };

Mixin Override

Vue.js combines mixin options with the component options in the order they appear in the mixins array. While great for composing functionality, this can lead to one common oversight. Conflicting mixin values will be overwritten by whichever is further downstream. In addition, the component will win any conflicts with a mixin.

AllMixins.js

const FirstMixin = { computed: { hello() { return 'Hello from the first mixin'; }, goodbye() { return 'Goodbye from the first mixin'; }, }, }; const SecondMixin = { computed: { hello() { return 'Hello from the second mixin'; }, }, }; export default { FirstMixin, SecondMixin };

CollidingMixins.vue

<template> <div> <!-- Hello from the second mixin --> <p></p> <!-- Goodbye from the component --> <p></p> </div> </template> <script> import { FirstMixin, SecondMixin } from 'path/to/AllMixins.js'; export default { // FirstMixin's `hello` property is overridden by `SecondMixin` mixins: [FirstMixin, SecondMixin], computed: { // Component takes precedence goodbye() { return 'Goodbye from the component'; }, }, }; </script>

Slots

While mixins are great at sharing behavior, they’re not well-suited for two other common features of reusable components: markup and styling. While mixins can technically include a template option, combining markup is finicky, so Vue.js will simply replace it on collision. That’s where slots come in. React developers may recognize the slot API as akin to the children props pattern, and practically, they’d be right. Components with a slot invert control back to the parent component for rendering children.

Below, the components with slots will be called providers, and the components using providers will be called consumers.

Cardify.vue (provider)

<template> <div class="card__container"> <slot></slot> </div> </template>

Using Cardify.vue (consumer)

<template> <cardify> <!-- Any child elements will be injected into the slot --> <p>Hello world!</p> </cardify> </template>

Many reusable providers follow this pattern, housing specific logic and markup internally, but deferring to the consumer for what actually appears. One classic example is a generic card component that handles styling and some logic regarding selection, while leaving the actual content to the consumer. Vue.js slots come with a few other tools, such as support for default content, but two features in particular really expand their flexibility: named slots and scoped slots.

Named slots

Adding the name attribute to a slot grants some additional control for rendering the slot. The provider is able to modify the named slot without directly affecting the consumer’s implementation, while the consumer is able to specify which slots it wants to use. As an example, imagine you have a component that exposes a series of named slots for rendering inputs. The consumer component could take advantage of those names to control the order of those inputs in the source markup, avoiding a lot of in-line template logic and duplicated markup. That flexibility goes the other way as well, allowing the provider to change how they wrap specific slots without requiring change by the consumer. This specificity does come at a cost, however: the named slot will no longer blindly render children. Either the consumer must name their desired slots, or the provider must include a default slot.

CardifyWithName.vue

<template> <div class="card__container"> <slot name="header"></slot> <slot name="content"></slot> </div> </template>

Using CardifyWithName.vue

<template> <cardify-with-name> <!-- Name the slots to be used --> <p slot="header">Hello world!</p> <p slot="content">Check out my fancy named slots</p> <!-- Will not appear! --> <p>Where am I?</p> </cardify-with-name> </template>

Scoped slots

Another pattern commonly used in React is the render props pattern. At first glance, slots have one significant downside when compared to JSX. Render functions frequently reference child properties, as the child is the one invoking the function, typically with its props and/or state. Templates, and by extension slots, are scoped at compilation, and trying to reference child properties in-line will result in failure. Vue.js does support JSX, but it also has a template-based solution in scoped slots, an equally flexible alternative.

CardifyWithScope.vue

<template> <div class="card__container"> <!-- Give props to slots like any other component --> <slot :title="title"></slot> </div> </template> <script> export default { data() { return { title: 'Inside of CardifyWithScope!' }; }, }; </script>

Using CardifyWithScope.vue

<template> <cardify-with-scope> <p>Hello world!</p> <!-- Give the slot scope a name --> <p slot-scope="insideComponent"> <!-- All props given to the slot are now available --> </p> </cardify-with-scope> </template>

By adding scope to a slot, we are able to create valid declarations in the consumer, while relying on the provider to hand it the actual data. Once the scope is declared, it can be referenced within the slot’s scope. To really drive home how closely this mirrors render props, slot scopes even support in-line destructuring (and defaulting, should you need).

Using CardifyWithScope.vue

<template> <cardify-with-scope> <p>Hello world!</p> <!-- Just like JSX --> <p slot-scope="{ title }"> </p> </cardify-with-scope> </template>

Summary

One of the greatest strengths of Vue.js is how much it works to reduce developer workload. React is awesome because of how generic its API is, but Vue.js leverages its more opinionated environment to provide you a simpler workflow from top to bottom. Single-file components, plugins, and a fantastic CLI provide seamless project initialization, while mixins and slots provide convenient APIs for modularizing your UI into flexible components. An ever growing number of web developers have been considering Vue.js, and many of us at Big Nerd Ranch are fans. If you’ve got any questions about Vue.js, or maybe you have even better ideas than the above, post a comment!

From React to Vue: Re-Vue-sable Components published first on https://johnellrod.weebly.com/

[mbaljeetsingh]

My Favorite Front-End Development Extensions for Visual Studio Code

Visual Studio Code is one of the newest kids on the IDE “block” and it’s making a lot of noise. It’s taken a little while to gain traction, perhaps because it’s one of Microsoft’s few open source products, but it’s taken the open source community by storm. Developers who once swore their allegiance to Sublime Text 3 and Atom are slowly being converted by the power and simplicity of VS Code–not to mention its incredible library of extensions.

I began my own coding life on Sublime Text 3, moved to Atom, then PHPStorm, then after my subscription expired with JetBrains I thought I’d give VS Code a try. It continues to make my life easier and by doing so, makes me a better developer.

This introduction will take you from zero to hero, getting you up and running with VS Code, focusing specifically on my favorite front-end development extensions, making sure that every aspect of your workflow is covered.

Assumptions

I’m going to assume a few points for this article:

Your front-end development stack is not opinionated. I’m going to assume that at some point you will have the need for jQuery, ES6, React, Vue, PostCSS, or whatever floats your boat.

You’re using Git for version control.

You already have Node and NPM installed and setup correctly.

Some of the extensions listed below require some configuration outside of VS Code, I’ll let you know what does and doesn’t, but if you need any help, feel free to ask!

Installing

First things first, if you don’t already have VS Code installed, head over to Visual Studio Code’s website. VS Code is cross-platform so our configurations will work on Windows, Mac and Linux.

VS Code is also available as a Homebrew Cask package on Mac: brew cask install visual-studio-code

A step that I find a lot of tutorials often leave out is the ability to execute VS Code from the terminal. There are a few ways of doing this. If you already have a .bash_profile setup you can add this:

export PATH="$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"

Or, for a more cross platform approach, hit the Command Palette shortcut: Shift + Command + P and type the word shell - this will give you an option called: Install code command in PATH - hit enter and you’re done. Now, you can launch files and folders anywhere from the terminal by typing: code path/to/file/or/dir

Linting

Lint your code–it’s the best way to stop errors before they cause you any undue stress!

ESLint

If you’re running the latest version of ECMA Script, then ESLint is for you. This extension integrates the ESLint pattern recognizer straight into VS Code and aids you with common mistakes that developers make with the new syntax. It does require that you have the NPM ESLint package installed either locally in your project or globally.

SASS Lint

For those of you who enjoy writing more programmatic Sass, Sass Lint provides you with an easy to use set of configurations for writing standards-compliant Sass.

JSHint

JS Hint is another great JavaScript Linter that aids you with logic, syntax and more, depending on your configuration.

TSLint

If you’re a TypeScript fan, then the TSLint extension is your best friend. With TypeScript being a precompiled language, you have full control over what the compiler lints for you as well as auto formatting options.

These extensions all offer Git friendly ways of managing custom / shared configurations between developers on your team namely in .eslintrc and .sass-lint.yml  or .jshintrc

I’ve purposely left our HTML Linters here. Whereas I’ll use an extension like Beautify for formatting and tabbing my HTML according to an .editorconfig I find that HTML Linters perform quite poorly. They don’t consider semantics and tend to do a bad job of helping you with accessibility concerns. As the meaning of HTML can be relatively ambiguous, it’s better to use a set of tools that do smaller jobs. 

To extend the HTML functionality in VS Code I use the following:

AutoClose Tag

It could use a bit of improvement, but I always liked Sublime Text 3’s auto closing tag functionality. The above mentioned extension will help you out with this in VS Code.

AutoRename Tag

This is another useful HTML extension which allows users to click inside an HTML element and rename it, while simultaneously renaming the closing tag.

Automation

I moved away from Grunt sometime ago, but coincidentally there don’t seem to be any Grunt extensions on the marketplace, at least not with enough traction to make much of an impact. The extensions below are mainly focused on Gulp and Webpack as they seem to be leading the race in the task management world right now.

Gulp Snippets

This extension allows you to use the Command Palette in VS Code for easily injecting useful Gulp configurations into your Gulpfile.js; a must have if you’re still a little shaky about setting up Gulp.

Webpack

Setting up Webpack can be one of the scariest tasks a developer has to commit to. The Webpack extension for VS Code takes the fear out of it by providing you with a minimal webpack.config.js to start your project. If you’re a progress person, and you don’t like being left in the dark while your Terminal thinks about things, then the Webpack Progress extension is for you. It provides a nice progress bar for when Webpack is doing its thing.

Git

One of the most powerful extensions for version control in VS Code is:  

Git Lens

For newcomers and advanced users alike, Git Lens is powerhouse. It makes an easy job of making Git and its many intricacies more manageable and visual. I’ve enjoyed using it so much that other than using the Terminal to add, commit, branch and push, I’ve completely scrapped Git GUI’s.  

Almost every setting is customizable. Git Lens provides real-time feedback of Git data while you’re coding. Want to know who wrote that function that isn’t working? Want to see how much the code has changed over the last few commits? Not sure how to handle a merge conflict in a file that you never wrote, or have little context of? Git Lens handles this all for you. 

Language Support and Intellisense

Where as other IDEs have full on support for the majority of languages, VS Code leaves it up to you for the most part. As and when you require it, you can add Language Support for whatever technology you’re dealing with, out-of-the-box HTML and CSS, as well as JavaScript are provided, but if you have need for Python it’s just a click away. In my workflow I use Python every so often, but Node was a big thing for me. 

Intellisense essentially takes care of completions. You can hit tab or hover over a file path, for instance, and VS Code will do the hard work for you. 

Babel ES6 / ES7

If you’re one of those people that loves using new technologies in your workflow and you’re crazy about the new edition of JavaScript then the Babel ES6 / ES7 linter is for you. 

File System Path

This is a brilliant extension that autocompletes / suggests file paths while you’re typing. If you come from a PHPStorm background, you’ll know the feeling!

NPM

A great extension when using require() or import {} in Node.js, this extension autocompletes file paths to Node Modules.

CSS Class Names

This is a very useful extension for auto completing CSS class names defined in your linked CSS files. If you’re a Bootstrap, Foundation or just a framework fan in general, this will save you a lot of time!

SCSS

For the precompiled CSS fans, this extension makes intellisense possible for imports, mixins, includes and functions in SCSS.

PostCSS

If you’ve yet to come across PostCSS then you’re missing out. It’s an advanced and extremely forward thinking set of plugins for CSS that makes CSS a lot more powerful. I use two PostCSS extensions: Syntax and Sorting; one enables syntax support for new CSS Level 4 modules like nesting and the other allows me to sort CSS properties alphabetically.

Vue

While not really Intellisense alone this is a great extension for Vue.js development. It’s an all-in-one solution for adding linting, intellisense, and formatting to Vue.js development and already includes some of the extensions I've mentioned above.

React / React Native

This is a full solution for developing React Native applications. By default, VSCode has a ton of support built in for React.

Accessibility and Health

You spend a lot of time in front of your IDE, so making sure it’s easy on the eyes and legible is just as important as any other aspect I’ve mentioned.

VS Code Icons

First, get some folder/file icons so that you can easily distinguish the files you’re using.

Cobalt 2 Theme from Wes Bos

Cobalt 2 is not too dark, not too light, and has great contrast for an editor theme. It also has a corresponding colour setup for ZSH Terminals.

Dash

If you haven’t heard of Dash, it should be your new best friend. Dash is an API documentation app for Mac, but this extension plugs right into VS Code. By clicking any method, it will open up Dash to the respective page. The same plugin supports Zeal which is a Windows and Linux alternative.

Formatting

Beautify

As I mentioned earlier, the Beautify extension is a great tool if you’re adamant about code formatting and editor standardization. It also allows you to set a .jsbeautifyrc file which you can commit to Git repos for collaboration. Beautify can also be used as a replacement for .editorconfig if you don’t support it. Beautify formats JS, CSS, Sass, JSON and HTML.

EditorConfig

More and more IDEs are providing support for EditorConfig, which allows you to include an .editorconfig in your project repos. This gives your fellow developers IDEs and linters to read from one file to standardize tabbing and spacing as well as line ending across projects.

Prettier

For a more robust solution, try out Prettier. Prettier follows the same configuration paradigm as ESLint, providing you with a .prettierrc file which an be committed to repositories. It will also read from the .editorconfig file if it exists. In fact you can get rid of ESLint and Sass Lint and use Prettier as your one stop solution. It has its own extensions for EsLint, StyleLint and more.

Terminal

I recently moved over to ZSH which has completely transformed my terminal experience. Whilst not being a direct extension of VS Code, it can be integrated through the Terminal pane. I had to do quite a bit of configuration to get it working on Mac, especially with colors and themes. 

ZSH features functionality like tab completion for directories, files, Git branches and more. You can read more about setting up ZSH on the Github repo or leave me a message in the comments below if you’d like to learn more.

Debugging

Visual Studio Code comes with Debugging JavaScript right out of the box. You can take it a step further using the following extensions:

Debugger for Chrome

This extension allows a direct sync between the VS Code Debugger and Chrome Developer Tools allowing you to set breakpoints and jump straight into the code.

Conclusion

That about wraps up my extensions setup for Visual Studio Code–which are your personal favorites? Before I go though, don’t forget that coding should be fun; you may need some tunes to help you along. The Spotify extension adds a tiny inline media player to the VS Code UI.

More Visual Studio Code on Tuts+

Visual Studio

Visual Studio Code: My New Favorite Code Editor

Adi Purdila

Visual Studio Code

Essential Extensions for Visual Studio Code

Craig Campbell

via Envato Tuts+ Code http://ift.tt/2oeCvWZ

[paulcook2-blog]

Vue.js vs. React: Understanding both the JavaScript Libraries

React is a very popular choice when it comes to choosing a JavaScript framework, even though it isn’t, due to its solid ecosystem. Both Vue.js and React are JavaScript libraries and you can create frameworks around them by using tools from their ecosystems respectively.

In this post, you would have a basic understanding on how Vue.js and React are used by a JavaScript development agency:

Building tools for React and Vue.js based apps

Earlier while building an app on the client-side you needed an index.html file along with a style. css file. You can then link the index.html file with jQuery library in order to make the functionality work.

Now with Vue.js and React libraries, you can link these libraries to the index.html file of your apps and build them quite similar to jQuery. However, ecosystems of both these JavaScript libraries possess special tools can simplify the app development process and make your life easier.

React and Vue – Command line interfaces

You can bind templates with component data as Vue provides you with directives. React, on the other hand, would push you to write a bit more code in order to bind values in components to the values in templates.

Moreover, Vue can also pass data from a parent component, just like React does, to a child component with a props object to facilitate communication between components.

Furthermore, Vue allows you to write your styles in the same file as logic and markup. But React needs you to add other libraries.

React and Vue – Management state

Both these JavaScript libraries use props, event handlers, and state; however they are not quite efficient in handling data flow. To fill this state handler gap, React brings along Flex and Vue brings Vuex.

Flex comprises of four basic components namely actions, dispatcher, store and view. This one way data flow implemented by Flex is quite famous.

Vuex, the tailored state management library for Vue is inspired by React’s Vue.

Vue and React – Connecting to the backend

For a single page application, communication with backend is a very crucial part of app development. For that you would need HTTP libraries and both React and Vue offer plenty of options for that.

In both cases you can use many libraries for making asynchronous API calls. Redux-thunk, redux-promise and Axios are HTTP libraries popularly used with React whereas,  vue-resource is often used with Vue. Axios can also be used with Vue as a replacement of vue-resource.

Wrapping up

Vue vs. React battle is ongoing and who wins the race is decided by the needs of the applications to be developed. React appears a bit more difficult than Vue and the latter offers every single that an SPA needs.

Now which one is your pick? Please leave your comments below to begin a conversation.

[t-baba]

The Top 10 SitePoint Guides & Tutorials of 2019

In 2019, we published hundreds of new guides, tutorials, and articles. Whether we showed you how to use new technologies and tools, or published career advice from people at the top of their game, our aim was always to help you level up as a web developer.

Though tech moves fast, all of those articles are still relevant now in the start of 2020. To celebrate a year concluded, we wanted to take a look at the 10 pieces our readers enjoyed and shared the most in 2019. Hopefully, there's something here that's useful to you going into this new year.

What Is Functional Programming?

As a programmer, you probably want to write elegant, maintainable, scalable, predictable code. The principles of functional programming, or FP, can significantly aid in these goals. Ali Spittel walks you through these principles, using JavaScript to demonstrate them.

➤ Read What Is Functional Programming?

10 Must-have VS Code Extensions for JavaScript Developers

Visual Studio Code is undoubtedly the most popular lightweight code editor today. It does borrow heavily from other popular code editors, mostly Sublime Text and Atom. However, its success mainly comes from its ability to provide better performance and stability. In addition, it also provides much-needed features like IntelliSense, which were only available in full-sized IDEs like Eclipse or Visual Studio 2017.

The power of VS Code no doubt comes from the marketplace. Thanks to the wonderful open-source community, the editor is now capable of supporting almost every programming language, framework, and development technology. Support for a library or framework comes in various ways, which mainly includes snippets, syntax highlighting, Emmet and IntelliSense features for that specific technology.

➤ Read 10 Must-have VS Code Extensions for JavaScript Developers

Why the Highest Paid Developers "Fight" Their Co-workers

Most employees want to keep their jobs and their clients. They don’t have the leverage or control they want over their own careers. They need their job. In fact, most people are terrified of losing their jobs.

Research shows the fear of losing your job creates job dissatisfaction and a lack of commitment at work. This, in turn, affects job performance, negatively increasing the likelihood that you will lose your job. It’s a vicious cycle that seems to repeat itself over and over.

But there’s something worse than the fear of a job loss.

➤ Read Why the Highest Paid Developers "Fight" Their Co-workers

How to Tell If Vue.js Is the Right Framework for Your Next Project

Vue.js grew from a one-man project to a JavaScript framework everyone’s talking about. You’ve heard about it from your front-end colleagues and during conferences. You’ve probably read multiple comparisons between Vue, React, and Angular. And you’ve probably also noticed that Vue outranks React in terms of GitHub stars.

All that’s made you wonder whether Vue.js is the right framework for your next project? Well, let’s explore the possibilities and limitations of Vue to give you a high-level look at the framework and make your decision a little easier.

➤ Read How to Tell If Vue.js Is the Right Framework for Your Next Project

JavaScript Web Workers: A Beginner's Guide

Today’s mobile devices normally come with 8+ CPU cores, or 12+ GPU cores. Desktop and server CPUs have up to 16 cores, 32 threads, or more. In this environment, having a dominant programming or scripting environment that is single-threaded is a bottleneck.

JavaScript is single-threaded. This means that by design, JavaScript engines — originally browsers — have one main thread of execution, and, to put it simply, process or function B cannot be executed until process or function A is finished. A web page’s UI is unresponsive to any other JavaScript processing while it is occupied with executing something — this is known as DOM blocking.

The solution: web workers.

➤ Read JavaScript Web Workers: A Beginner's Guide

React vs Angular: An In-depth Comparison

Should I choose Angular or React? Each framework has a lot to offer and it’s not easy to choose between them. Whether you’re a newcomer trying to figure out where to start, a freelancer picking a framework for your next project, or an enterprise-grade architect planning a strategic vision for your company, you’re likely to benefit from having an educated view on this topic.

➤ Read React vs Angular: An In-depth Comparison

Fetching Data from a Third-party API with Vue.js and Axios

More often than not, when building your JavaScript application, you’ll want to fetch data from a remote source or consume an API. I recently looked into some publicly available APIs and found that there’s lots of cool stuff that can be done with data from these sources.

With Vue.js, you can literally build an app around one of these services and start serving content to users in minutes.

I’ll demonstrate how to build a simple news app that will show the top news articles of the day allow users to filter by their category of interest, fetching data from the New York Times API.

➤ Read Fetching Data from a Third-party API with Vue.js and Axios

How to Install Docker on Windows 10 Home

If you’ve ever tried to install Docker for Windows, you’ve probably come to realize that the installer won’t run on Windows 10 Home. Only Windows Pro, Enterprise or Education support Docker. Upgrading your Windows license is pricey, and also pointless since you can still run Linux Containers on Windows without relying on Hyper-V technology, a requirement for Docker for Windows.

In this tutorial, I’ll show you how to quickly setup a Linux VM on Windows Home running Docker Engine with the help of Docker Machine.

➤ Read How to Install Docker on Windows 10 Home

How to Use Windows Subsystem for Linux 2 and Windows Terminal

In this article, you’ll learn how you can use Windows Subsystem for Linux 2 to set up and run a local Linux shell interface in Windows without using a virtual machine. This not like using terminals such as Git Bash or cmder that have a subset of UNIX tools added to $PATH. This is actually like running a full Linux kernel on Windows that can execute native Linux applications. That’s pretty awesome, isn’t it?

➤ Read How to Use Windows Subsystem for Linux 2 and Windows Terminal

How to Migrate to Gulp.js 4.0

Despite competition from webpack and Parcel, Gulp.js remains one of the most popular JavaScript task runners. Gulp.js is configured using code which makes it a versatile, general-purpose option. As well as the usual transpiling, bundling and live reloading, Gulp.js could analyze a database, render a static site, push a Git commit, and post a Slack message with a single command.

➤ Read How to Migrate to Gulp.js 4.0

Happy New Year from SitePoint

We hope you all had a restful break and have come back recharged and ready to tackle your goals for this new year. We'll continue to collaborate with working developers to help you improve your skills this year, and we'll explore new areas that we hope you'll find both useful and exciting. And we'll continue our work on leveling SitePoint Premium up into a next-generation learning platform and comprehensive reference library. Happy New Year from SitePoint!

The post The Top 10 SitePoint Guides & Tutorials of 2019 appeared first on SitePoint.

by Joel Falconer via SitePoint https://ift.tt/2QXWTt4

[t-baba]

V8 v8, the State of JS survey results, and CDNJS lives

#468 — December 20, 2019

Read on the Web

If you're subscribed to any of our other newsletters, you'll have seen we're doing 2019 roundups this week.. but not in JavaScript Weekly! :-) Our 2019 JavaScript roundup will be here on January 3, but today is a normal issue. Happy holidays!

JavaScript Weekly

Tesseract.js 2.0: Pure JavaScript OCR for 100 Languages — A pure JavaScript port of the popular C++ Tesseract library commonly used for visual text recognition purposes by other systems. The homepage has a neat demo where you can drop on images of your own and see how they get processed. v2.0 is now out and here's why the creator has been working on it.

Jerome Wu

V8 Release v8.0 — Yes, that’s v8 of v8 – not confusing at all 😂 Nonetheless, it’s a key step forward for the most widely deployed JavaScript engine, and introduces optional chaining, nullish coalescing, and some significant performance improvements. It’ll be landing in a Chrome and Node near you soon.

Leszek Swirski

Learn the Full Stack with Jem Young, Senior Software Engineer at Netflix — Become a more well rounded engineer by understanding what is happening on the server-side.

Frontend Masters sponsor

Results from the 'State of JavaScript' 2019 Survey — While the methodology is far from perfect (for example, Angular and Angular.js seem to get lumped together as the same thing), this is nonetheless the biggest JavaScript-specific survey. There’s a lot to dig through, so you may prefer The Changelog's 7 insights from the State of JS 2019 roundup post that looks at the most striking results.

Sacha Greif, Raphaël Benitte and Amelia Wattenberger

An Update on CDNJS — CDNJS is a popular content distribution network for JavaScript files but just a couple of months ago its continued development was in doubt. In this significant update we learn more about how CDNJS works and how Cloudflare want to take it forward (and they need our help).

Zack Bloom

Mastering console.log Like A Pro — This isn’t exactly new ground, but if you’re a heavy console.log user, this article deftly covers a variety of extra console methods to keep on your radar.

Harsh Makadia

⚡️ Quick Releases

Node.js 13.5.0

Material UI 4.8 — Popular React components system.

Relay 8.0 — GraphQL client and integration for React apps.

sql.js 1.1 — SQLite, but compiled to JavaScript.

Cash 5.0 — jQuery-style DOM manipulation for modern browsers.

💻 Jobs

Backend Engineering Position 🤘 in Beautiful Norway 🎉 — Passion for JavaScript, GraphQL, Scalability and Performance? Want to move to Norway? Join our fast growing e-commerce service Crystallize.

Crystallize

Find a Job Through Vettery — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.

Vettery

Technical Content Producer (Interim) at Ably (London, Remote OK) — Ably builds tools and cloud infrastructure for the realtime internet. They need a developer/tech writer on a temporary basis to coordinate, outsource, and review the creation of technical content for a developer audience.

Ably

📘 Articles & Tutorials

What's Coming in Angular 9.0.0 and Ivy Improvements — Angular 9.0 was due to be released this year but is being held back until next year to give the team a break. Nonetheless, it’s going to pack in some key improvements.

Mike Hartington

An Introduction to Controlling the Raspberry Pi 4's GPIO Pins from Node — If you’ve got a Raspberry Pi sat around (I have a few!) and you’re looking to have a play over the holiday season, you could start here.

Uday Hiwarale

Migrating a Distributed System from JavaScript to TypeScript — Learn how to migrate a globally-distributed system written in JavaScript over to TypeScript.

Ably sponsor

Understanding Decorators in JavaScript — Decorators are a first-class concept in some languages that can be used to quickly modify functions or classes by way of a simple directive. The idea is still merely a proposal for JavaScript, but it’s possible to adapt some of the ideas now with Babel.

Mike Green

A Case for Using void in Modern JavaScript? — Some interesting points here. I doubt they’ll take off, but I like the examples.

slikts

Writing JavaScript With Only Six Characters — A fun article like this tends to do the rounds each year and it never ceases to delight me at how quirky JavaScript can be.

Erik Wendel

Const Assertions in Literal Expressions in TypeScript

Marius Schulz

What’s New in Preact X? — Preact is a lightweight React alternative with React API compatibility.

Ogundipe Samuel

Sentiment Analysis of Your Year with TensorFlow.js — Perform sentiment analysis with TensorFlow in JavaScript to determine the positivity of text messages received via Twilio.

Lizzie Siegle

BDD vs Executable Specifications

Gauge sponsor

▶  The Design Principles of Vue 3.0 — A 50 minute talk from the creator of Vue.js, Evan You, on the principles behind the changes coming in Vue 3.0.

Evan You

10 Useful Angular Features You’ve Probably Never Used — Assuming you actually use Angular in the first place, naturally.

Chidume Nnamdi

Why Svelte Won’t 'Kill' React

Kit Isaev

🔧 Code & Tools

A-Frame 1.0 Released: Framework for Building VR Experiences — A-Frame handles the 3D and WebVR boilerplate required to get running across numerous platforms quickly. Version 1 boasts full WebXR support.

A-Frame Team

Introducing Scully: The Angular Static Site Generator — The Angular community now has their very own static site generator.

Netlify

Polly.js 3.0: Record, Replay, and Stub HTTP Interactions — A library from Netflix for recording, replaying and stubbing HTTP interactions via native browser APIs. GitHub repo.

Netflix

▶  From NodeConf EU: What's Being Built and Where Node.js Is Heading

Heroku sponsor

Sarus: A Client-Side Library for WebSockets — Helps you handle situations where connections unexpectedly close.

Anephenix

Alpine.js: A Minimal Framework for Composing Behavior in Your Markup — “Think of it like Tailwind for JavaScript.”

Alpine.js

vue2-datepicker: A Date / DateTime Picker Component for Vue

xiemengxiong

If you're celebrating, we hope you have a happy holiday season and we'll see you in the new year on January 3, 2020.

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

[t-baba]

Using native modules in production today

#451 — August 23, 2019

Read on the Web

JavaScript Weekly

Using Native JavaScript Modules in Production Today — “now, thanks to some recent advances in bundler technology, it’s possible to deploy your production code as ES2015 modules—with both static and dynamic imports—and get better performance than all non-module options currently available.”

Philip Walton

Web Template Studio 2.0: Generate New Apps from VS Code Wizard-Style — Web Template Studio is an extension, from Microsoft, for Visual Studio Code that simplifies creating new full-stack apps in a ‘wizard’-esque style. It now supports Angular, Vue, and React.

Lea Akkari (Microsoft)

Free Webinar: Design Patterns for Microservice Architecture — If you're planning to design microservice architecture, make sure to learn the best design patterns first. We'll talk about API Gateway, BFF, Monorepo, gRPC and more. Everything based on real-life examples from successful SOA projects.

The Software House sponsor

▶  The State of JavaScript Frameworks in August 2019 — Every six months, Tracy Lee sits down with several representatives of different frameworks to get a brief update on how they’re doing. This hour long episode features Evan You (Vue.js), Minko Gechev (Angular), Michael Dawson (Node.js), Jen Weber (Cardstack), Manu Mtz.-Almeida (Ionic) and Marvin Hagemeister (Preact).

Tracy Lee

JavaScript to Know for React — Examples of which JavaScript features in particular you should be familiar with when learning and using React.

Kent C Dodds

date-fns 2.0: It's Like lodash But For Dates — A date utility library that provides an extensive and consistent API for manipulating dates, whether in the browser or in Node. After tree-shaking and minification, date-fns can be much more compact than moment.js. Homepage.

date-fns

Node v12.9.0 (Current) Released, Now on V8 7.6 — The upgrade to V8 7.6 opens up some new opportunities like Promise.allSettled(), JSON.parse and frozen/sealed array perf improvements, and BigInt now has a toLocaleString method for localized formatting of large numbers.

Node.js Foundation

💻 Jobs

Frontend Engineer at Scalable Capital (Munich) — Passionate about React and GraphQL? Join our Team of JavaScript Developers and shape the future of FinTech.

Scalable Capital GmbH

Have You Thought About Being a Web Developer in Robotics? — A unique opportunity to work on a high-powered engineering web application for a computer vision system combining 3D graphics and an intuitive user experience.

Veo Robotics

Get Hired Based on Your Skills Not Your CV — We’ll introduce you to over 1,500+ companies who’ll compete to hire you. You’re always hidden from your current employer and we’re trusted by over 100k developers.

hackajob

📘 Tutorials

An Introduction to Memoization in JavaScript — ‘Memoization’ is when you cache return values of functions based upon the arguments provided. Here’s an example of creating a separate function that can do this for existing functions.

Nick Scialli

Why is ('b'+'a'+ + 'a' + 'a').toLowerCase() 'banana'? — One of those fun little JavaScript “wat” moments.

Stack Overflow

The State of JavaScript: 2019 and Beyond. Get the Whitepaper — Read about the latest developments and trends in the JavaScript ecosystem, and how things will change in 2019 and beyond.

Progress Kendo UI sponsor

All The New ES2019 Tips and Tricks — An accessible, example-heavy roundup of new ES2019 features.

Laurie Barth

Exploring the Two-Sum Interview Question in JavaScript — There are two solutions, the straightforward ‘brute force’ way, and a more efficient solution that can demonstrate strong CS fundamentals..

Nick Scialli

Using Generators for Deep Recursion

Jason H Priestly

7 Ways to Make Your Angular App More Accessible

Chris Ward

▶  Is Modern JavaScript Tooling Too Complicated? — A podcast where two developers debate a point with two other developers, each group taking one side of the debate. Is modern JS tooling too complicated? Discuss!

JS Party podcast

🔧 Code and Tools

NodeGUI: A New Way to Build Native Desktop Apps with JavaScript — An interesting new alternative to something like Electron as it’s based around Qt, the cross platform widget toolkit, rather than a browser engine.

Atul R

Chart.xkcd: xkcd, Hand-Drawn-Style Charts — If you like your lines wiggly and rough, this might be for you. It tries to mimic the style of the fantastic xkcd comic.

Tim Qian

Browser Automation Experience Made Reliable and Less Flaky — Taiko is a free/open source browser automation tool that addresses the last mile to reliable testing.

ThoughtWorks - Taiko sponsor

FilePond: A Flexible File Uploader with a Smooth UI — It’s vanilla JavaScript but has adapters to make it easier to use with React, Vue, Angular, or even jQuery. v4.5 has just dropped. GitHub repo.

Rik Schennink

v8n: A 'Fluent Validation' Library — Chain together rules to make validations, e.g. v8n().some.not.uppercase().test("Hello");

Bruno C. Couto

file-type: Detect The File Type of a Buffer/Uint8Array — For example, give it the raw data from a PNG file, and it’ll tell you it’s a PNG file.

Sindre Sorhus

pagemap: A 'Mini Map' for Your Pages — A neat little idea that’s particularly useful on long pages. This adds a clickable/navigable overview of an entire page to the top right corner. Here’s the associated repo.

Lars Jung

Automated Code Reviews for 27 Languages, Directly from Your Workflow

Codacy sponsor

⚡️ Quick Releases

ESLint 2.6.1

d3 5.10 & 5.11 — the JavaScript data visualization library.

vue-cli 3.11

AVA 2.3 — popular test runner for Node.

The Lounge 3.2 — a JavaScript-powered IRC client.

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

[t-baba]

What's new in JavaScript as of right now

#436 — May 10, 2019

Read on the Web

🔥 At the risk of sounding like I'm begging, be sure to at least skim all the way through this issue as it's a really good one. Seriously, we had to pass on so many things to make way for all we have today.

JavaScript Weekly

▶  What’s New in JavaScript — At this week’s Google I/O ’19, Mathias Bynens and Sathya Gunasekaran of the V8 team gave a fantastic 30 minute ‘state of the union’ talk on the state of JavaScript as a language and what new features are being baked in.

Google I/O

Comlink 4.0: It Makes Web Workers Enjoyable — Web Workers provide a way to run JavaScript out of the main thread and in the background, and they’re supported in every browser. Google’s Comlink takes away all the headaches of using them and makes it easy. Basically, you need this.

Google Chrome Labs

Best Experience with React, Angular & Vue.js in WebStorm — With smart code completion, dozens of refactorings, and support for popular frameworks, all working out of the box, WebStorm is an IDE that makes development easier and more enjoyable. Try the new WebStorm 2019.1.

JetBrains sponsor

▶  Angular Fans! Here's All The Talks from ng-conf 2019 — There’s a lot to go through here, but this is truly a one-stop shop for up to date Angular talks. Highlights include the keynote talk, how enterprises are using Angular, John Papa delivering a batch of Angular tips, and a complete workshop on using ngRx for state management. If you prefer a write-up of what's going on in the Angular world, Sam Julien has written up the state of Angular at ng-conf 2019.

Nitay Neeman

⏩ IN BRIEF:

Microsoft has launched React Native for Windows, bringing the once native mobile development framework to Windows 10 desktop, Xbox, and tablet ecosystems too.

Googlebot has gotten an upgrade which means it can now crawl and run all your latest ES6 JavaScript, handle Web Components, and more.

A DoS vulnerability has been found in the popular Axios HTTP library where a malicious server operator could gum down your client-side code.

The latest version of GraalVM, a JVM-related VM from Oracle, includes a "JavaScript engine compliant with the latest ECMAScript 2019 standard" which provides a migration path for anyone using Rhino or Nashorn.

To celebrate Minecraft's 10th birthday, Mojang have rebuilt Minecraft Classic in JavaScript and made it free to play. The source shows they've used Babylon.js for the 3D.

💻 Jobs

Senior Web Engineer - Onefootball (Berlin, Germany) — Join our team of engineers to make our user experience on the web as great as on our mobile apps.

Onefootball

Front-end Engineer — Goldstar is looking for Front-end Engineers with React expereince onsite in Portland, Oregon and Pasadena, California.

Goldstar

Find a JavaScript Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials, Opinions, and Videos

A Guide to Setting Up Vim for JavaScript Development — VS Code might be the most heavily used editor in our space now, but Vim has a lot going for it and this is a thorough look at setting it up for JavaScript development.

Ayo Isaiah

Array.from Has A Second Argument — Array.from creates a new array from array-like or iterable objects, but it can also take a second argument that’s a map function between the old value to the new.

Stefan Judis

The Developer’s Guide to Not Losing the Metrics You Need — Gathering and storing metrics is a part of production. When adverse events occur, you need to have the metrics available to debug the problems.

InfluxData sponsor

Building a JavaScript Guitar Pedalboard — This is really fun! You can play with the pedalboard for yourself (no guitar needed, there’s a musical sample available) or just learn how the whole thing was set up.

Trys Mudford

▶  Watch Me Build a Trading Bot — Siraj is one of the more engaging developers on YouTube and here he shows off the development of a currency trading bot using a variety of JavaScript related technologies.

Siraj Raval

A Guide to Node.js Logging — Learn how to improve logging in your library or app from using console.log to dedicated libraries like Roarr and Pino.

Dominik Kundel node

Structuring Vuex Modules for Relationships, Speed and Flexibility — Vuex is a state management approach for Vue.js apps.

Greg Bate

▶  A Hands-On Introduction to React Hooks — A 30 minute introduction and demonstration of hooks directly from Facebook’s F8 conference and given by an experienced developer on the Instagram Web team who’s using React every day. (P.S. This week’s React newsletter was really good!)

Kathryn Middleton

🔧 Code and Tools

Tippy.js: A Highly Customizable Tooltip and Popover Library — 10 out of 10 for the cute logo. Lots of neat demos with code examples here too.

atomiks

Cash: A Tiny jQuery Alternative for Modern Browsers — If you just can’t give up those tasty jQuery DOM methods but you want something that’s as small as possible.. this is an option at just 4KB. v4.0.0 just dropped.

Ken Wheeler

A Much Faster Way to Debug Code Than with Breakpoints or console.log — Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive.

Wallaby.js sponsor

autoComplete.js: A Simple Pure Vanilla Auto Completion Library — Version 5 has just been released with improved support for large datasets and the ability to debounce API calls.

Tarek

CSS Only Chat: A 'Truly Monstrous' Async Web Chat using No Frontend JS — This is firmly in the “don’t do this, but it’s good to know this is possible” stable of experiments. Background images loaded via pseudo-selectors are the vector here.

Kevin Kuchta

Hybrids: A UI Library for Creating Web Components from Pure Objects and Functions

Dominik Lubański

Get the Fastest Website Deployments. Get Started Free

Buddy sponsor

dinoql: Make GraphQL-Style Queries Upon Local JavaScript Objects — This is a neat idea worth exploring further.

Victor Igor

535 Ways to Reload The Page with JavaScript — You’re not going to find these useful but I found the scale amusing 🤷‍♂️

Stoyan Stefanov

by via JavaScript Weekly http://bit.ly/2VqM5bT

[t-baba]

The Front-End Performance Checklist

#355 — August 29, 2018

Read on the Web

Frontend Focus

The Front-End Performance Checklist — An extensive list of things you should check or at least be aware of as a front-end developer trying to make your sites work as fast as possible.

David Dias

Using Feature Detection to Write CSS with Cross-Browser Support — If you’ve been subscribed for a while, you’ll have seen all manner of CSS modules - both established and experimental - mentioned here. Here’s how to use the modules you want in a progressively enhanced way across browsers by using feature detection.

Schalk Venter

monday.com - Collaborate, Plan, Track & Manage All in One Tool — What’s it all about? Well, monday.com is about managing your workload professionally, planning ahead visually and communicating with the team. Once these points are set, have your champagne to celebrate the success of your team brand.

monday.com sponsor

Best Practices for Mobile Form Design — A key goal as a Web developer is to make the process of filling out a form as easy as possible. This article shares a lot of practical techniques for designing effective mobile forms.

Smashing Magazine

▶  Solving Container Queries Today — Media queries let you define CSS to take effect upon certain viewport conditions, but container queries that work at the level of containing elements would also be useful. Official support isn’t there yet but there are workarounds offering similar functionality.

Greg Whitworth

Babel 7 Released: The JavaScript Transpiler — We’re going to focus on this more in this week’s JavaScript Weekly on Friday.

Henry Zhu

Super-Powered Grid Components with CSS Custom Properties — A walkthrough of building a text and image component that uses CSS Grid along with CSS variables for placement.

Michelle Barker

💻 Jobs

Senior Front End Engineer at External Data Systems, Netflix — Help build a world class user interface for the platform that collects data to drive business insights for our teams.

Netflix

Find A FrontEnd Job Through Vettery — Create a profile to connect with inspiring companies seeking FrontEnd devs.

Vettery

📘 Tutorials

Using CSS Clip Path to Create Interactive Effects, Part II — A follow up to a January article on creating collage-style Web effects with CSS which leans on SVG to make things work in current browsers.

Mikael Ainalem

Create a Serverless Powered API in 10 Minutes — Use Cloudflare Workers to create and deploy a serverless API to 150+ data centers.

Cloudflare sponsor

Getting Started with Service Workers — A basic introduction to using Service Workers in the context of a Progressive Web App.

Flavio Copes

Inspect and Style an Element in DevTools that Normally Disappears when Inactive

Elijah Manor

A Native Lazy Load for the Web Platform — A new Chrome feature, ‘Blink LazyLoad’, was designed to dramatically improve performance by deferring the load of below-the-fold images and third-party IFRAMEs.

Ben Schwarz

Service Worker Caching Strategies Based on Request Types

Thomas Steiner

::before vs :before — Pseudo elements vs pseudo selectors.

Chris Coyier

Extending the Browser with WebAssembly — WebAssembly opens up more options to extend the browser with new features. This article shows how to port the AV1 video decoder and play AV1 video in any modern browser.

Alex Danilo (Google Developers)

Don't Miss SIGNAL: Twilio Customer & Developer Conference - Oct 17 & 18

twilio sponsor

🔧 Code and Tools

SVG Icon Transition Generator Tool — Upload two SVG icons of the same size and get a new SVG which transitions between them on click or hover.

Nucleo

Puppeteer Recorder: A Chrome Extension That Turns Browser Interactions into Puppeteer Scripts

Checkly

F2: A Flexible Charting Library Aimed at Mobile Devices — An HTML5 canvas-based charting library aimed specifically at mobile use cases.

Sima

size-plugin: Track Compressed Webpack Asset Sizes Over Time

Google Chrome Labs

Ghost 2.0: The JavaScript Blogging Platform — A popular Node.js and JavaScript-based blogging platform - a good alternative to WordPress.

John O'Nolan

goodshare.js: A Vue.js Component for Social Sharing Buttons — Full example here.

Vic Shóstak

LazyestLoad.js: Load Images Only When In (and Remain In) the Viewport

Paul Browne

Developer Tools for Every Customer Session – New in FullStory

Fullstory sponsor

The 'Carlton Dance' in Pure CSS — If you remember The Fresh Prince of Bel Air you won’t have forgotten this.

CodePen

by via Frontend Focus https://ift.tt/2Ns9S2V

[t-baba]

Introducing Axios, a Popular, Promise-based HTTP Client

Axios is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node.js.

Making HTTP requests to fetch or save data is one of the most common tasks a client-side JavaScript application will need to do. Third-party libraries — especially jQuery — have long been a popular way to interact with the more verbose browser APIs, and abstract away any cross-browser differences.

As people move away from jQuery in favor of improved native DOM APIs, or front-end UI libraries like React and Vue.js, including it purely for its $.ajax functionality makes less sense.

Let's take a look at how to get started using Axios in your code, and see some of the features that contribute to its popularity among JavaScript developers.

Axios vs Fetch

As you’re probably aware, modern browsers ship with the newer Fetch API built in, so why not just use that? There are several differences between the two that many feel gives Axios the edge.

One such difference is in how the two libraries treat HTTP error codes. When using Fetch, if the server returns a 4xx or 5xx series error, your catch() callback won't be triggered and it is down to the developer to check the response status code to determine if the request was successful. Axios, on the other hand, will reject the request promise if one of these status codes is returned.

Another small difference, which often trips up developers new to the API, is that Fetch doesn’t automatically send cookies back to the server when making a request. It's necessary to explicitly pass an option for them to be included. Axios has your back here.

One difference that may end up being a show-stopper for some is progress updates on uploads/downloads. As Axios is built on top of the older XHR API, you’re able to register callback functions for onUploadProgress and onDownloadProgress to display the percentage complete in your app's UI. Currently, Fetch has no support for doing this.

Lastly, Axios can be used in both the browser and Node.js. This facilitates sharing JavaScript code between the browser and the back end or doing server-side rendering of your front-end apps.

Note: there are versions of the Fetch API available for Node but, in my opinion, the other features Axios provides give it the edge.

Installing

As you might expect, the most common way to install Axios is via the npm package manager:

npm i axios

and include it in your code where needed:

// ES2015 style import import axios from 'axios'; // Node.js style require const axios = require('axios');

If you're not using some kind of module bundler (e.g. webpack), then you can always pull in the library from a CDN in the traditional way:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Browser support

Axios works in all modern web browsers, and Internet Explorer 8+.

Making Requests

Similar to jQuery's $.ajax function, you can make any kind of HTTP request by passing an options object to Axios:

axios({ method: 'post', url: '/login', data: { user: 'brunos', lastName: 'ilovenodejs' } });

Here, we're telling Axios which HTTP method we'd like to use (e.g. GET/POST/DELETE etc.) and which URL the request should be made to.

We're also providing some data to be sent along with the request in the form of a simple JavaScript object of key/value pairs. By default, Axios will serialize this as JSON and send it as the request body.

Request Options

There are a whole bunch of additional options you can pass when making a request, but here are the most common ones:

baseUrl: if you specify a base URL, it'll be prepended to any relative URL you use.

headers: an object of key/value pairs to be sent as headers.

params: an object of key/value pairs that will be serialized and appended to the URL as a query string.

responseType: if you're expecting a response in a format other than JSON, you can set this property to arraybuffer, blob, document, text, or stream.

auth: passing an object with username and password fields will use these credentials for HTTP Basic auth on the request.

Convenience methods

Also like jQuery, there are shortcut methods for performing different types of request.

The get, delete, head and options methods all take two arguments: a URL, and an optional config object.

axios.get('/products/5');

The post, put, and patch methods take a data object as their second argument, and an optional config object as the third:

axios.post( '/products', { name: 'Waffle Iron', price: 21.50 }, { options } );

The post Introducing Axios, a Popular, Promise-based HTTP Client appeared first on SitePoint.

by Nilson Jacques via SitePoint https://ift.tt/2y1c4v0