First widget using Vue

Well, here is it, my first example of a widget using Vue as Frontend framework like I promised on my last post.

The main idea of this widget is to make a panel(Bootstrap’s panel) that shows user’s avatar, numbers of followers and a list of options that a user can use on hypothetical app.

With Vue I going to manipulate dynamically:

  • Username
  • Avatar image
  • Option labels
  • Button’s label to change the language

The app also it will listen the event when the button of language is pressed using the v-on attribute on the a element.

What I’m using of Vue on this example

  • Double mustache to display dynamic data
  • Model’s data and method
  • Event handling using v-on

The code is really easy to read, maybe there is a better way to make this widget but remember, I’m still learning Vue, so any comment is welcome.

 

Advertisements

Vue.js fever

I’ve worked on the Backend-side almost all the time on my time as developer mostly with PHP, also I’ve knowledge of HTML, Javascript, CSS, JSON, and JQuery for mention some, I’ve made also templates for WordPress or simple websites, but I’ve noticed that the world of the Frontend development has evolved a lot, things like Node, NPM, Bower, Grunt, Gulp, React, Angular and many other technologies that have been around helping to make more easy the web development and powerful apps. I didn’t pay too much attention to all those technologies because like I mentioned previously I’ve been developing on the side-server.

Of course, I’ve read a little about new Frontend technologies in articles or tweets of people that I follow but never I sat on my computer and play with them making simple programs or examples. That made me to ignore how the web has evolved, see that the websites or apps now are not just apps that send POST data to a server to be processed and return a response page like a HTML, XML or JSON using PHP or other language like ASP, Ruby, Java, etc, now the websites are reactive or responds to events generated by the users and is not necessary to send data how I’ve described previously to get data from the server. Now the web applications can change or load data using technologies like AJAX that allows to make requests to the server and change the content on our page.

This new way of developing made me investigate more about these technologies and see how they work, but what drives me to update my knowledge and get in into these new technologies really?

Well, few months ago I had an interview for a new job and they sent to me a technical test that basically consisted on create widgets, I could use any framework in the test so I chose Bootstrap and JQuery(I don’t have great skill with JQuery but I did my best). I think that the result of the test was good because later I had an interview via Skype to respond some technical questions using a shared editor like Codepen. Pitifully I didn’t get the job, but that takes me to investigate why they sent to me a test to make widgets and I discovered that I could solve the test more easily using React for example.

So I decided to read and investigate a little bit about React and make some simple examples. React it looks a very powerful framework and with the support of Facebook it looks to have a great community behind it, but for me it is to complex to use or to configure for a simple app, without mention that you have to learn a syntax called JSX to get the best of the framework. so discard the idea of using React, I just wanted to make simple examples and see quick results.

I’ve made some examples with Angular once but didn’t get my attention, I read that there is a new version but I haven’t check it.

I use Laravel as framework on the server-side and few weeks ago I read on Twitter that Laravel has made a partnership with Vue.js as framework of Javascript and I thought: Well, Laravel is a great framework and easy to use, that partnership with that Javascript framework took my attention… Why not give it a chance, even more if it is a new framework.

For the backend developers that don’t have used a Frontend framework before but they have knowledge of Javascript Vue is really easy to use and is not necessary to learn other syntax like JSX of React for example. Vue s easy to use because you only have to:

  • Link the js library on your html document
  • Create a Vue Model
  • Set an id for the HTML tag that will use the Vue Model
  • Display the data of your model o call the methods on it

Simple example of a Vue app:

On the next couple of weeks I’ve the intention to publish basic examples using Vue, the first examples will be the widgets that I had to do on the interview mentioned on the third paragraph to start with simple examples.

More info about Vue

Is the Web dead?

Here’s I share a nice speech of Christian Heilmann on Twitter on TED where he speaks about the App World vs the Web World, where I’m totally agreed with him.

I’ve always prefer the web apps over apps, I share his idea about the liberty that the apps limit the liberty of an user to do things. When you use an app you are limited the the features developed for the developer of the app, you can’t copy a text, block ads, share translate something, download your data, apps are just a hype how he says.

A web site or web app can be share, you can’t comment, publish something, make that disable people get access to the info using html5 properties.

 

Bug in Whatsapp calls

Some weeks ago I was using Whatsapp calls and I notice that when you having a normal call (service provider) and you receive a Whatsapp call you can’t hold the previous call, you just have to answer or decline the Whatsapp call. The interface of Whatsapp overlaps the Android interface.

I hope Whatsapp will find this kind of bug very soon, now that Whatsapp calls is turning a very important tool.

How to update media URL(GUID) on WordPress database?

I’m finishing a new project using WordPress this month and I’m already testing on the production web server, but not always all things goes well when we deploy our project on server, right?

Things misconfigured like database or URLs to images and js can make that our recently site uploaded doesn’t work properly.

I have uploaded my custom theme and database from my local environment to the server, I updated the site URL in the WordPress database with the domain name of my project, then I check the site on the production server to see if all it’s ok, and yes, all looks well.

What’s my problem?

Then I go to test again in another computer, all looks ok but with an exception, the media uploaded through the WordPress admin on my localhost it does not appear.

I had though  that changing the URL in the option table in WordPress it’s all I need to make it run the site on the server, but not. So I needed to do a SQL sentence to update all the URLs of the media files in the database to the domain of the project.

Searching in Google in I found the post “13 Useful WordPress SQL Queries You Wish You Knew Earlier“, where they explains how to update the media URL for any file uploaded using the Worpdress admin.

To update the URL of the media uploaded locally to the new URL we need is change the GUID of each media with a query on our WordPress database.

Example:

UPDATE wp_posts SET guid = REPLACE (guid, 'http://www.oldsiteurl.com', 'http://www.newsiteurl.com');

 

 

Tips for Elementary

Hi guys from elementary OS, great OS, I always use it as primary OS for home and work.
Here a couple of things that I just have watch because I have been using my computer using the keyboard on display to type my password in  the login:

  • When you are in the login and use the keyboard on the screen option, the keyboard on screen disappears if my credentials are OK. Then I have to navigate again menus until I found the option to display the keyboard again. And idea is always keep the keyboard if I am using the Accessibility option when I logged in
  • Each time that I use Music I want to see the last Album that I was listen to when I close the player.  Open the player and see how I leave it, with Genere, Artist and Album where I left, even the song.

This is just a observation, this is not a complaint about your OS, these are couple of things that I have observed because I had to use the OS in way totally different how i have been using it.

Ahora en Ingles

Estoy aprendiendo Ingles, así que por ello comenzare a publicar los tips de este espacio en ese idioma, tanto para continuar con mi aprendizaje y llegar a una audencia un poco mas amplia.

No se molesten por los que quieren un contenido en Español pero es la evolución bebe.