Petite-vue

https://habr.com/ru/post/593877/?utm_campaign=593877&utm_source=habrahabr&utm_medium=rss
Привет, эта статья - "перевод документации и часто используемых примеров" для petite-vue + ещё немного приколов и одна интересная практика (с которой не всё так очевидно, как могло бы казаться).Зачем нужен petite-vue?Petite-vue это 6ти килобайтное подмножество Vue, основной задачей которого, по словам Эвана, является Progressive Enchancement. Выучить очередной фреймворк

Leave tracker for a website: how to catch the moment your customer is leaving

https://rolique.medium.com/leave-tracker-for-a-website-how-to-catch-the-moment-your-customer-is-leaving-3cbf9ed2865c?source=rss------vuejs-5
In this article, we’ll speak about tracking moments when users try to leave a website. I’ll describe in detail how we determine the time…Continue reading on Medium »

A Concise Startup List for Your Next Project

https://dev.to/tavishigupta/a-concise-startup-list-for-your-next-project-1k45
After searching for a concise starter list for a new project of mine (below if you’re interested), I decided to put a quick one together for the skimmers like me.




Context

My app is in the travel space and the first few steps for me were to create a logo, brand & a landing page. (I already knew what I wanted to create, so these were the first steps of execution to feel a little established)



Basic Setup


Purchase domain (Google Domains, GoDaddy, etc.)
Set up email for the domain (I’m using Gmail)
Set up Google Drive to store documents
Set up Notion for note-taking & planning
Socials (can do more or less):

Twitter
Instagram
TikTok






Code Setup


Set up GitHub:

Create an organization
Create repos for different purposes (or monolith) in the organization


Create Cloud Account (I’m using Firebase [it’s easy], you can use AWS, Azure, etc.)
Set up Figma for all the designs

Fullstory for screen-capture-esque analytics (I personally really love this so far, way easier than Amplitude, which is what I’ve used in the past)




Logo & Branding



Logo: paid a friend who designs logos (we did 3 drafts + final deliverables)

Branding colours: I asked 20-odd friends a simple question related to the brand (i.e. When you think of stress free travel, what 2–3 colours come to mind?) & picked 2 of the top complementing colors




Landing Page (Waitlist)

I will be posting another article with the scaffolding of my landing page


Frontend: Vue3 + Tailwind (Any framework works)

Backend: Firebase Functions + MailchimpAPI for email campaigns (stick to using this one, none of the other packages have worked for me, so I made a simple call to the Mailchimp endpoints as mentioned in the docs)

Waitlist: WaitlistAPI / alternative Firestore methods (I created a Firestore collection & added each user’s information as a document, I use a referral email field to see who to give access to first)




A little about my app — Tern:




travelwithtern.com

Managing & organizing travel plans is very hard, especially when traveling in a group. Tern is a chatbot that can help make group decisions on AirBnB’s/hotels just by adding it to your group chats (via a phone number):

It will consolidate all AirBnB/hotel options mentioned in the group chat (you can ask Tern for all the options by texting ‘tern show options’ in the group chat)
It will nudge people to like/comment on AirBnB’s
It will notify the group if an AirBnB/hotel has been booked & is no more an option to pick from
On the Tern web app, there will be a ‘focus mode’ to gamify sorting through all the options
It will do all this and much more, just through texting :)

Easy, efficient, your ‘Type A’ friend of the group!



PS: If anyone wants to talk about Tern or anything else, please feel free to DM me on LinkedIn or Twitter, or email me at [email protected]

How To Hire Dedicated Full Stack Developers for Your Project?

https://etelligens.medium.com/how-to-hire-dedicated-full-stack-developers-for-your-project-2cc43ead1258?source=rss------vuejs-5
Full-stack developers are people who handle both the front-end and back-end development. One must be an expert in several languages to…Continue reading on Medium »

Vue2 the Vue3 way: Why a new Framework?

https://medium.com/zeals-tech-blog/vue2-the-vue3-way-why-a-new-framework-5ec49e8c6525?source=rss------vuejs-5
Concerns when selecting a new framework and why Vue?Continue reading on The Zeals Tech Blog »

A Practical Guide to Harlem

https://medium.com/@martinsOnuoha/a-practical-guide-to-harlem-5611c4fa0a13?source=rss------vuejs-5
Harlem — A simple alternative to Vuex for Vue 3Continue reading on Medium »

How to install font awesome icons to Nuxt Js - V2

https://dev.to/doctorbash/how-to-install-font-awesome-icons-to-nuxt-js-v2-59f2
Hi Developers
** Step 1.**
Install these packages.



yarn add @nuxtjs/fontawesome -D


then add free sets of icons



yarn add @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons -D


Step 2.
Add font awesome to nuxt.config.js file



// nuxt.config.js
buildModules: [
'@nuxtjs/fontawesome',
],


Step 3.
Add this configuration



fontawesome: {
component: 'Fa',
suffix: false,
icons: {
solid: true,
brands: true,
},
},


Step 4
How to use them in .vue file



<fa :icon="['fas', 'adjust']" />


...

Check the video link -> Install Font awesome icons to Nuxt 2

Bye bye Developers

Creating a Vue 3 and TypeScript project using Vite

https://michael-verschoof.medium.com/creating-a-vue-3-and-typescript-project-using-vite-ce312a746fc4?source=rss------vuejs-5
It’s quick and easy!Continue reading on Medium »

Sideproject Update - Fluenticons v2

https://dev.to/fayaz/sideproject-update-fluenticons-v2-np
So, last February I had made a small weekend project and last month I released a version 2 of it.
Fluenticons is an icon viewer for Microsoft fluent icons. It has over 4000+ open beautiful icons which you can use in your projects.
Fluenticons is now sponsored by Iconfinder, sign up and get $10 worth of credits (via the banner in fluenticons).



What's new in v2?


No more hacks, I've used actual SVG's now, so I was able to add some new features like manipulating them.
You can copy snippets for SVGs, Vue component, React Component, HTML Image.
You can download SVGs, PNGs, WEBP, Vue component, React Component now.
Manipulate colors to see how the icon looks.
More performant, loads way too fast now. (Scores 100 on Lighthouse Yay!!). Was surprised to see the site loading in 600ms when I moved from vercel to cloudflare pages.




What's next?


Make an advanced editor like adding frames behind the icons. Inspiration - Bakery & Iconscout's Icon Editor (requires a lot a math, which I am not good at.)
Make a npm package for others to use the components in their own web projects, probably looking a web component, maybe like boxicons.




Tech stack

Nuxt.js

Tailwind Css.

Hosted on cloudflare pages.

Using Vue 3 with JSX and TypeScript

https://medium.com/@mattstypa/using-vue-3-with-jsx-and-typescript-451ce37727dc?source=rss------vuejs-5
This guide will show you how to set up Vue 3 to use JSX components and define props and emits using pure TypeScript.Continue reading on Medium »

Vue2 the Vue3 way: Getting Started

https://medium.com/zeals-tech-blog/vue2-the-vue3-way-getting-started-64101fd4f81a?source=rss------vuejs-5
Hands on how to Scaffold a new project in Vue2, brief introduction to Vue2 concepts and introduction to Vue3 composition-APIContinue reading on The Zeals Tech Blog »

How To Make Parallel API calls in VueJS Applications — Typescript Version

https://medium.com/bb-tutorials-and-thoughts/how-to-make-parallel-api-calls-in-vuejs-applications-typescript-version-c3356814ecbf?source=rss------vuejs-5
A Step by step guide with an example projectContinue reading on Bachina Labs »

Vue.js Development for Your Next Project: Find Top Reasons

https://medium.com/@ishita.177/vue-js-development-for-your-next-project-find-top-reasons-e02d066d9f0f?source=rss------vuejs-5
Suppose you are a developer. You are also looking for a framework to work on. Now, the framework needs to be very progressive for you to…Continue reading on Medium »

Vite.js Nedir?

https://medium.com/berkut-teknoloji/vite-js-nedir-86a0f184915b?source=rss------vuejs-5
Evan You (Vue.js’i yazan) tarafından oluşturulan Vite, frontend geliştirme deneyimini önemli ölçüde iyileştiren bir derleme aracıdır. Vite…Continue reading on Berkut Teknoloji »

Famous Front End Development Tools to Go for in 2022

https://dev.to/rlogical/famous-front-end-development-tools-to-go-for-in-2022-5eoh
List out here Top 6 Front End Development Tools to Go For in 2022
1.Ionic 2
Ionic 2 is not just a great mobile app development but tool but also best for front-end development. Using this, developers can create native and optimized applications for websites. It is free and has robust community support along with StackOverflow and Slack. The tools follow the concept of writing once and run everywhere as a single codebase can run on multiple platforms. It provides built-in notifications and has larger plugins availability.
2.Angular.JS
It is a product of Google and is known as a top front-end development tool. It is an open-source framework that offers data binding, plain JavaScript, controller features. With Angular.JS, amazing web app development services can be provided with reusable components, localization, and directives. Moreover, it also offers built-in testability. The framework is quite easy to use and maintain.
3. Vue.js
This JavaScript library is used to build web interfaces. Currently, the front-end development tool has around 26.6K rating on Github and has left several other tools behind. If you hire front-end developer that uses Vue.js, you can get lightweight, high-quality, and efficient web apps. The best part about Vue is that it is free from pedigree and has less baggage. With Vue.js, it is easier to improve over the errors. Despite being one of the newer development tools, it is becoming widely popular.
4. Chrome DevTools
The DevTools of Google Chrome provides excellent viewing functionality and changes the style and DOM of the page. Through these tools, one can execute and debug JavaScript, see messages, edit web pages immediately, and find out the problems faster. Moreover, the tools help put style into the HTML elements and check network activity. It optimizes speed and assesses runtime performance.
5. Webstorm
It supports smart coding for JavaScript and helps developers code more efficiently when working on big projects. Webstorm has an in-built Node.js app debugger and is highly customizable with various coding styles. With the unified interface, it is working with multiple systems of version control. It can integrate with popular command-line tools to develop web apps.
6. Grunt
A grunt is a free tool that can perform repetitive tasks like minification, unit testing, compilation, etc. It offers several plugins and can allow you to automate everything with fewer efforts. Using this, one can create own plugin as well.
Get to explore more Front-End Development tools here: https://www.rlogical.com/blog/12-front-end-development-tools-2022-for-front-end-developer/

Прогрессивный Petite-vue

https://habr.com/ru/post/594837/?utm_campaign=594837&utm_source=habrahabr&utm_medium=rss
Привет 👋, это статья про progressive enchancement с помощью petite-vue. Тут я расскажу про его прикольные фичи (как отдельного инструмента, так и в составе Vue).В процессе я сделаю прогрессивный сайт, который подгружает React приложение в неблокирующем режиме, при этом позволяет сохранять интерактивность в процессе загрузки.В общем (и целом), всё круто 👍 Прогрессировать

VueJS api request Vuex yoki Component

https://medium.com/@fnematov/vuejs-api-request-vuex-yoki-component-7a0ed5fd3388?source=rss------vuejs-5
Vue framework bilan ishlashni boshlaganingizda har hil video darsliklarni ko’rasiz, har hil qo’llanmalarni o’qib ko’rasiz. Ularning…Continue reading on Medium »

Debugging Apollo Cache

https://sdusteric.medium.com/debugging-apollo-cache-4dae0ec139b1?source=rss------vuejs-5
So you have implemented your API in GraphQL and deployed your Apollo server production. Congratulations! To make it production-ready and…Continue reading on Medium »

How do I write tests for my JS app

https://sdusteric.medium.com/how-do-i-write-tests-for-my-js-app-4f8fe33660ff?source=rss------vuejs-5
Test is a word that a lot of software engineers say but don’t really do.Continue reading on Medium »

How to write tests for Vue

https://sdusteric.medium.com/how-to-write-tests-for-vue-2a4084441e8a?source=rss------vuejs-5
Let us continue the trend of making sure our applications still work and continue working for the rest of 2021. Last week we talked about…Continue reading on Medium »

Why do we need to write tests

https://sdusteric.medium.com/why-do-we-need-to-write-tests-6ff8ae01b0f6?source=rss------vuejs-5
I have written 2 posts on writing unit tests in JavaScript to kickstart 2021.Continue reading on Medium »