Vue.js Digest 🇷🇺 🇺🇸
39 subscribers
389 photos
745 links
Дайджест новостей из мира vuejs
Download Telegram
Is anyone building microfrontends with different UI libraries?

https://dev.to/keonik/is-anyone-building-microfrontends-with-different-ui-libraries-3iee
I have a scenario where a subset of developers enjoy building with Vue and another subset of devs enjoy React. I’m curious to know if anyone is leveraging the micro front end design pattern with different frameworks/libraries.
Tailwind for Vue 3 (vite)

https://medium.com/geekculture/tailwind-for-vue-3-vite-382c3d34ec0a?source=rss------vuejs-5
INTRODUCTIONContinue reading on Geek Culture »
The practice of making your applications usable

https://shmargadt.iss.onedium.com/the-practice-of-making-your-applications-usable-353b3e19c293?source=rss------vuejs-5
Two months ago, my wife invite me to a “blind date”. It took place in a “blind restaurant” where the waitresses are blind, and the guests…Continue reading on Medium »
Ciberseguridad en tiempos de CoVid-19

https://dev.to/pydominator/ciberseguridad-en-tiempos-de-covid-19-2481
Para nadie es un secreto que el covid modifico nuestra realidad al punto de que las personas que antes se mostraban "amenazadas" por la tecnologia hoy la ocupan como metodo de vida, un claro ejemplo de esto son los doctores y personal de salud en general, personas cuyo interes tecnologico era infimo pero que por razones que ya todos conocemos la vida les enseño que la tecnologia es mas un aliado que un enemigo, claro esta bien manejada.
Sin embargo esta oliada sin igual desde los tiempos del nacimiento del internet de noobs ha traido en si una masiva cantidad de fallos que antiguamente considerabamos sin importancia pero que ha razon de la migracion masiva de personas al internet hemos descubierto que si gozan de una importancia y no precisamente menor.
Los Hackers generalmente pasabamos nuestros dias resolviendo problemas relativamente ficticios en blogs y de mas redes de comunicacion para satisfacer un poco nuestra hambre y sed por conocer nuevos retos reales, sin embargo desde el inicio de la pandemia hemos visto un incremento en los casos de estafa virtual o Physhing bastante preocupante cosas como "La estafa del discord nitro" o como me gusta llamarla la estafa de los jovenes gamers facilistas es una estafa que basicamente busca la obtencion masiva de datos privilegiados de forma gratis y "segura" por un medio no tan conocido, como estos ahi una enorme lista de casos de physhing reportados solo en diciembre del 2021 pero bueno eso lo dejare para otro post
sin mas me despido y como siempre digo good luck have fun
How To Make Parallel API calls in VueJS Applications

https://medium.com/bb-tutorials-and-thoughts/how-to-make-parallel-api-calls-in-vuejs-applications-78426ee7f6da?source=rss------vuejs-5
A Step by step guide with an example projectContinue reading on Bachina Labs »
Where does Nuxt.js fit in Web Development?

https://medium.com/habilelabs/where-does-nuxt-js-fit-in-web-development-d625b52d48b0?source=rss------vuejs-5
By Payal MittalContinue reading on Minds Verse »
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/