rj california

We don't have a real AI, yet.

2023-05-04T11:55:00.003-06:00

Okay, listen up folks. Let's get one thing straight: what we have today is not real AI.

ChatGPT, Bard, etc. are just generative models that are trained on massive amounts of data in an attempt to compress it down into a trained model which it can run to try and regenerate answers based on the data it was trained from. The problem is, the model doesn't actually have any core understanding of the material it ingests--it's like a baby that can infer what things should look like and make things up along the way to fill in the blanks. Researchers call this "hallucinating." So, when you ask a chatbot like ChatGPT a question, it may confidently give you incorrect information.

But that's not the only problem. The data it's trained on is only as good as the people who wrote the code it's ingesting. And because training the model requires billions and billions of code snippets to train on and learn as data points, the only way we can conceivably feed it that volume of code is to download it en-masse from the internet. And none of that code is reviewed and checked for bugs or security flaws before the model is fed it. Garbage in, garbage out, folks.

And don't even get me started on how infuriating it is that we've taken to calling this "AI." It's a stupid techbro marketing stunt that has stuck, and now we all have to call it AI. But only those of us with the right tech background to know better will understand just how misleading that label is. As a result, tech companies can "build" models based on bad code to get funding from VCs that get attracted to this siren call.

So, imagine an internet full of chatbots all set up by techbros and lazy hacks trying to cash in on the sudden easy ability to generate 'content' that can get past regular spam filters. They're pulling this stuff down from the internet en masse to train their buggy models, then submitting it back to places that are indexed online where the next set of buggy models can ingest it. It's an infinite beautiful river full of shit, folks. And because the models learn based on statistical trends and averages over a large set of data, this huge flood of new "AI" generated data is now the norm, and as such it takes precedence over human-generated data.

That's what's happening now, and it's happening because everyone wants to make bank. It doesn't matter if they understand, or care to understand, how this thing works, as long as it can make enough money for a new home is Aspen they will continue to promote this as a "revolutionary tech".

So, folks, be careful out there. Don't believe everything you read. And for the love of all that is good and holy, stop calling this garbage "AI."

Generate PDF fast and easy in Laravel 10 with TCPDF

2023-04-30T07:50:00.000-06:00

PDF documents are a popular format for presenting information on the web. They're easy to create and distribute, and they can be viewed on almost any device. If you're working with Laravel 9 and you need to generate PDF documents, you have a few options available to you. One popular choice is the elibyy/tcpdf-laravel library, which provides a wrapper around the TCPDF library for PHP.

When it comes to generating PDF documents in Laravel, there are a few libraries to choose from. One of the most popular is domPDF, which is a PHP library that can convert HTML content into PDF documents. While domPDF can be a great choice for some projects, it has some quirks that can cause headaches for developers. For example, it can be slow to render large PDF documents, and it can be difficult to customize the output.

That's where elibyy/tcpdf-laravel comes in. This library provides a wrapper around the TCPDF library, which is a powerful PHP library for generating PDF documents. Here are some of the benefits of using elibyy/tcpdf-laravel for your PDF generation needs:

Easy Integration
One of the biggest advantages of using elibyy/tcpdf-laravel is how easy it is to integrate into your Laravel project. You can simply install the package using Composer, and then start using it in your code. This means you can get up and running quickly, without having to spend a lot of time configuring and setting up the library.

Customizable
TCPDF is a very powerful library that provides a lot of functionality for creating PDF documents. The elibyy/tcpdf-laravel package makes it easy to customize the output by allowing you to pass in options and configurations specific to TCPDF. This means you can fine-tune the output to meet your specific needs, without having to write a lot of custom code.

Better Performance
Another benefit of using elibyy/tcpdf-laravel is that it's built on top of the TCPDF library, which is known for its fast rendering speeds. This means that creating PDF documents with this package can be faster than other PDF libraries. This can be particularly important if you're generating large PDF documents, which can take a long time to render with other libraries.

Active Development
The elibyy/tcpdf-laravel package is actively maintained, which means that it's more likely to be updated with new features and bug fixes. This can help ensure that your PDF creation needs are met and that your project stays up-to-date with the latest technology. It also means that if you run into issues with the library, you're more likely to get help resolving them.

Wide Range of Functionalities
TCPDF is a powerful library that supports a wide range of features such as custom fonts, tables, images, HTML content, barcodes, encryption, and more. The elibyy/tcpdf-laravel library makes it easy to use all these features from within your Laravel application. This means you can create PDF documents that are rich in features and customized to meet your needs.

In conclusion, if you need to generate PDF documents in Laravel 9, the elibyy/tcpdf-laravel library is a great choice. It's easy to integrate, customizable, performs well, actively maintained, and supports a wide range of functionalities. While there are other libraries available, elibyy/tcpdf-laravel provides a powerful and flexible solution for your PDF generation needs.

Debugging an obscure ML kit bug in Kotlin

2023-03-22T07:44:00.001-06:00

So, you're a developer, huh? You know your stuff, you're pretty confident in your abilities. But what happens when you're asked to help a Kotlin developer? You've never used the language before, but you're feeling adventurous. You're ready to jump in and help out, no problem.

Well, that's exactly what happened to me. I was asked to help a Kotlin developer with their app. I had no experience with Kotlin, but I figured, how hard could it be? Famous last words.

I was already familiar with the app since I designed it with Figma. It is pretty simple: Scan a barcode or QR code, using the ML Kit's barcode scanning API. One of the advantages of using the kit is that it will work on ALL Android devices. It was doing its job, but all of the sudden it stopped working. The console only showed a "failed to load scan" error. Trying to pin point the bug, I was told it happened after switching the gmail account from one to another. That didn't make any sense, since the app doesn't use any Google service to work. We compiled the app in another device, it worked. However, after switching the Gmail account to another one, it stopped working.

Even after restarting the device, removing all traces of the app, it just did not work. Even the ChatGPT didn't have a clue about the situation. Being the good bug hunter that I am, I asked the kotlin developer why he used the ML kit instead of, I dunno using Flutter to create a kick-ass app.

He stated that "it is compatible with all devices, in fact at compilation it dowload the kit to use the latest version".That's when it hit me. It wasn't Android Studio downloading the kit, it was the Google Play Services app of the phone downloading it. I realized that it could be a cache problem or some obscure bug that was messing up either the version of the ML kit or the app permissions. The fix? Just clear the Google Play Services cache and data. I did that on both devices, and problem solved! No more issues even while switching Google accounts.

Is it bug in the official Google ML Kit barcode scanner library or the Google Play Services? Come on, Google. You're Google. You're supposed to be the gold standard. This shouldn't be happening, and yet, here we are. That's one of the reasons I keep using Flutter to develop Android apps.

OpenCart Theme Development: My first opensource theme

2022-01-18T09:00:00.001-06:00

I ported the Argon Design System template to OpenCart. It is my first opensource theme, and it was quite the experience.

OpenCart 3 ditched the old .tpl template system and switched to Twig, one of the best PHP template engines available so far. However, for some reason the development of a theme is little bit more difficult, because you have to create files for your theme everywhere. I understand the reasoning for the way themes work right now, but the developer experience is awful.

Practically you have to download your theme to your computer to properly create your git repository, and it has to be done for each theme or extension that you develop. It is impossible to develop two themes and keep track of the changes with Git, due to the nature of OpenCart. You can even take a look of how difficult the theme development is here: https://forum.opencart.com/viewtopic.php?t=217095

At least with WordPress, you have just one folder in which you work on, and push your changes easily from there. There's no YAML, or XML theme configuration file, you just have to deal with the way things are.

If you want to take a look at the theme, I named "Sellr Theme", and you can find it here:

GitHub Repository: https://github.com/rjcalifornia/seller_theme

I quit elgg, and you should too!

2021-07-01T15:13:00.002-06:00

After spending almost a decade doing themes and plugins for elgg, the time has come to pull the plug. Elgg is dead because so many breaking changes from one version to another, it becomes harder and harder to maintain. For example, updating a 2.x theme is a pain. So many libraries being deprecated, and there isn't a proper guide on how to make a theme or upgrade an existing one. Just take a look at the "2.x to 3.x Upgrade Guide", it is a nightmare:

http://learn.elgg.org/en/stable/appendix/upgrade-notes/2.x-to-3.0.html

The elgg development team doesn't offer a way to migrate your code. Let's look at the elgg_load_library, there isn't an alternative for that. Even the elgg community is not willing to give a proper migration guide:

https://elgg.org/discussion/view/2937076/elgg-register-lib

As much as I want to upgrade my latest plugins and themes, the lack of proper development documentation has forced me to completely abandon elgg. Not only that, there are no new plugins being created, just the same users upgrading their old plugins. Elgg has stagnated and it is dead. If you think of using elgg for a project or startup think again, you will face issues that no one knows or is willing to help you.

It was a nice ride, not going to lie. It is a shame to witness the death of a beloved framework.

Aqueduct for Dart is dead: Now what?

2021-04-02T22:26:00.019-06:00

The company/developers behind the server side framework Aqueduct just announced the project is now closed. What happened? Why was the project shut down? What to do now?

We are all aware of Google's Graveyard, and that's one of the main reasons major corporations are not switching to Flutter yet. Google's attention span for any new project is short, and Google either kills the project or releases a major version that breaks any backward compatibility. Aqueduct was affected by constant Dart updates, which are not bad but keeping up with so many updates will make a project very costly to maintain for an organization.

What to do now? If you are a good boss/project manager, you will rebuild your REST API services with either Symfony or Laravel. Yeah, you can call me "old fashioned" or "stuck in the 90s", but I'm not the one rushing to find a replacement of a critical backend system developed with Aqueduct. Right now, there are some developers that are trying to maintain it as a new project (ViaDuct/Conduit), but as you should already know by now, there isn't an organization behind them, no real leadership, and worst of all no real development roadmap.

What's the lesson here? Choose your framework very wisely. Read forums, users comments, and project managers please: Listen to your own developers.

Updated Gentelella Admin Dashboard for Flutter

2021-03-16T08:35:00.005-06:00

On a previous post, I created an administration dashboard with Flutter using the Gentelella Admin Template as inspiration for the design. However, it wasn't responsive and the routing was badly made. In order to fix those things, instead of creating things from scratch, I grabbed the following code:

https://github.com/MaikuB/responsive_navigationdrawer_demo

I'm just going to explain the few modifications that I did, since the original author of the project explains everything in his blog:

https://dexterx.dev/creating-a-responsive-flutter-application-with-a-navigation-drawer/

After downloading the project, I made some slight color and font modifications:

In the app_drawer.dart, I changed the custom drawer header that it had, with the one from the previous version of the gentelella theme:

I also wrapped the Drawer inside a Container because I needed to change from the original color to one that matched the Gentelella theme:

In each page, a content box was added, replacing the Text() widget from the original project, so that you can start building your own app with this template. This content box is the same from the previous Gentelella project:

I created a copy of one of the pages, and renamed to "forms_page.dart". It has a stateful Widget, and also several forms fields, including a datepicker. Since this page is going to have text fields, the keyboard needs to go away when the user taps anywhere on the page. So, let's wrap the SingleChildScrollView in a GestureDetector, and call the FocusScope.of method to hide the soft keyboard:

Inside the content box, I added a two textfields: One for the first name, and another one for the last name:

Now onto the datepicker, I used a simple approach nothing fancy since I just want to let the user pick his birthday. Create a DateTime variable, a function to show the datepicker (with initial and last date), and added a text controller to set the date picked:

Then, since I wanted to keep the "Gentelella" look, I wrapped a TextField inside a Gesture Detector to display the DatePicker when the user taps on the field:

And that's it! Our form is ready to be used!

This concludes the Updated Gentelella Admin Dashboard for Flutter.

Get the code here: https://github.com/rjcalifornia/flutter_gentelella

Demo: http://development.milocker.com/gentelella/

(Just click on the sign in button)

Symfony Tutorial: FOSUserBundle Command Line Tools

2020-09-25T22:02:00.003-06:00

For some reason, Symfony removed the FOSUserBundle Command Line Tools from its site. If you are like me that has several projects depending of that bundle, you don't have the time to migrate from it, and someone needs to deploy those projects as soon as possible, you might be caught off guard. That's why I'm creating this post, as a copy for those who might need it.

Create a User

You can use the fos:user:create command to create a new user for your application. The command takes three arguments, the username, email, and password for the user you are creating.

For example if you wanted to create a user with username testuser, with email test@example.com and password p@ssword, you would run the command as follows.

If any of the required arguments are not passed to the command, an interactive prompt will ask you to enter them. For example, if you ran the command as follows, then you would be prompted to enter the email and password for the user you want to create.

There are two options that you can pass to the command as well. They are --super-admin and --inactive.

Specifying the --super-admin option will flag the user as a super admin when the user is created. A super admin has access to any part of your application. An example is provided below:

If you specify the --inactive option, then the user that you create will no be able to login until he is activated.

Activate a User

Activate a UserThe fos:user:activate command activates an inactive user. The only argument that the command requires is the username of the user who should be activated. If no username is specified then an interactive prompt will ask you to enter one. An example of using this command is listed below.

Converting JSON response into correct encoding in Flutter/Dart

2020-06-29T11:22:00.003-06:00

It was surprising not finding clear instructions on how to properly display special characters from a JSON response, in Flutter. That's why I'm posting this short article, for future reference.

I had some words with accents such as "café", or "mañana" in my JSON response. Turns out that when Flutter "gets" the response, it uses the default encoding to displays characters. Even if your JSON has the charset in its header, Flutter will fallback to its default encoding, which doesn't support special characters. So how to properly display characters? Well, get the body bytes, decode it to UTF8, and then convert it. to use it in any way you want. Like this:

Simple as that. This works in Flutter Web, and I really hope it works on Mobile. I haven't tried it.

This concludes converting JSON response into correct encoding in Flutter/Dart. Any questions, feel free to drop a comment below.

Create a Responsive Admin Template for Flutter

2020-02-02T11:01:00.001-06:00

Flutter is an open-source UI software development kit created by Google that lets you create Android/iOS apps, as well as Web applications. If you want to create a web application, Flutter already offers some starter apps, however its source code is not actually easy to follow for beginners. Well, I wanted to use the Responsive Layout Starter app, but to use it I had to major code refactoring, which was a letdown. That's why I decided to create a Responsive Admin Template for Flutter

Overview

The design selected for the template is the Gentelella Admin Dashboard Template by ColorlibHQ:

I settled for this design because is the one I always use for my Symfony projects for its clean design, and also because I already made a port for the elgg framework. Yeah, I really like this design.

Getting Started:

1. Start Visual Studio Code. Go to menu “View -> Command Palette” and select the “Flutter: New Project” option:

2. Open the main.dart file, remove everything and use this code:
3.Create a folder apps and make a home.dart file:

4. Open the home.dart file. We will define the AppBar background color, the text color, and also we will be defining the home content, which will see soon:
5. Now, create a widgets folder, an inside it create two more folders: screens and ui:

6. Inside the ui folder, create a dashboard.dart file. Create a stateful widget, and create two variables:

_currentPage: An int variable that will hold the page index
_pages: List widget variable which will hold the pages of the app (Homepage() and ReceiptForm())

7. To accomplish the same look as the Gentelella Admin Template, the first thing that we need to work on is how to display both the sidebar and content in the same line. For that, we are going to return a row, and inside the row we will be having as Children a Container class (for the sidebar) and a Expanded Class (for the AppBar and the page content):
8. Inside the Container class, we will add the Drawer because we need to define the sidebar color and also the width. The drawer will contain the DrawerHeader with the user information, and also a ListTile with links to each page that our app will have, which will set/change the index of the _currentPage variable:
9. The Expanded Class will have the AppBar with some action icons, and also the body of the page, which will change every time you click on a menu link:
10. Now, in the screens folder, create two files: add_users.dart and also principal.dart which will be the pages of our web app. Both are very simple, with the main difference the body of each one will hold its content inside a SingleChildScrollView class:

11. And that's it! We just created a responsive admin dashboard for Flutter:

Grab the source code here: Gentelella Flutter

You can also see it in action here: Flutter Responsive Demo

Elgg Community Theme Proposal

2020-01-30T07:40:00.000-06:00

Current elgg homepage

The elgg community site needs a new design urgently. As you can see in the image above, current design is not attracting new users, and it is giving the vibe that the project is abandoned.

I already suggested on github to redesign the landing page of the elgg community site. However, I realized that not only the landing needs to be changed, but also the entire community site. So instead of just complaining, submitting issues to github or opening a discussion post in the elgg Feedback and Planning Group, I decided to start working on a proposal for the new design. I didn't want to reinventing the wheel, I used two opensource projects and integrated it with elgg. Without further due, here's the proposal:

Landing Main Banner

Landing Guide Section

Landing Resources Section

Activity Page

Profile Page

Both designs (landing page and community) are from BootstrapDash, both are under the MIT license, which means that they can be used for the elgg community.

Star Admin Template Source Code

BD Landing Page Source Code

It is still missing some features, elements, and it still has some designs from the Aalborg theme, which I used as foundation to built this theme. I don't know if this theme will be picked up or even considered, however I increased my skills with elgg, so I've got that goin' for me, which is nice.

Star Admin for elgg Source Code

Create a Simple Stepper with Flutter

2020-01-29T19:31:00.001-06:00

Icons made by monkik, Pixelmeetup, and Freepik from www.flaticon.com

1. Start Visual Studio Code. Go to menu “View -> Command Palette” and select the “Flutter: New Project” option:

2. As usual the "Counter App Example" will be created. In this occasion I will work here. Locate the body, and remove the content inside the Column's Children:

3. Let's start creating the Stepper by adding the Stepper class. Add the type and also the steps:

4. Pretty simple, am I right? If you try to run the app right now you will get an error, because our Stepper doesn't have steps:

5. Let's add our first step. Inside the steps: [] list, we will add a simple TextFormField, in which we will allow the user to add any text, set a step state, give it a title (required), and also allow the autocorrect feature:

6. You can run the app now. Go ahead, fire up the emulator and run without debugging:

7. Neat isn't it? However, the field is not explicit enough for the user. To solve that, let's add some input decoration, to show a placeholder, a field hint and also an icon to make it prettier:

Check out the complete step with decoration included:

8. Run the app to see the changes:

9. Let's create an Amount step, which will look exactly like the previous one, except for the title:

10. Now we have two steps but cannot move forward because that functionality has not been coded yet. First, declare a int variable called currStep:

11. Now, let's go back to the Stepper, and right below the Stepper Type, add the following code that will set the current step, and also change the step index so that you can move between steps:

12. Add functionality to the "Cancel" button, and also allow the user to show the step when it is tapped:

14. Finally, add a button that will send the form information to the server:

15. And that's it! You just created a Simple Stepper with Flutter:

16. As you noticed, this Stepper doesn't have any type of validation, and doesn't save the data entered. This is intentional since it would be hard just to cram everything up in one post, and instead I explained how to create one without any complicated functionality so that you can understand how to create a Stepper. Next article I will add validation, and how to send the information to the server.

Get the code here: Simple Stepper with Flutter

Keto: Week 1

2020-01-26T22:43:00.000-06:00

Icons made by photo3idea_studio from www.flaticon.com

As I stated the last week, I will be updating each week with weight information, ways to deal with anxiety, and how much money I will be saving by not dinning out.

Let's start by saying that I dinned out, however as hard as it was, I ordered keto-friendly food. The things I ate at restaurants were:

Dish ordered	Quantity	Price
Chicken soup	1	USD $3.55
Fried Mozzarella fingers	1	USD $4.50
Sliced hot dogs with tomato sauce	1	USD $1.50
Fried tamal	1	USD $0.75
Vegan enchiladas	1	USD $4.50

Total: USD $14.80

And for beverages I always had coffee. Black coffee without sugar. I'm getting used to not using sugar but it is hard. Also, of all of the things I ate, the less keto was the tamal, but it was deep fried so I guess that was a 50/50?

I had to replenish some things in my fridge. This is what I had to buy again:

Item Name	Quantity	Item Price
Broccoli	1	USD $1.22
Bacon	1	USD $1.37
Breakfast sausage	1	USD $1.92
Eggs (15 pack)	1	USD $2.60
Organic Dark Chocolate (for beverages)	1	USD $0.90

Total: USD $8.01

Now, for fighting my hunger anxiety (snacks), I bought the following items

Item Name	Quantity	Item Price
Platano with salt	2	USD $1.26
Party Dip of Loroco	1	USD $1.43
Dijon Mustard	1	USD $1.95
GNC MP Combat Crunch Bars (Coconut and Chocolate)	1	USD $35.99
Bananas	12	USD $1.00
Tangerines	12	USD $1.00

Total: USD $42.63

I bought some snack bars from GNC, because I get some hunger attacks and I will any food (keto or not). It is kinda expensive but I wanted to give it a try, since I already had the lame GNC card. I already ate two of them (one saturday and one sunday), and it ended my hunger attacks, so it kinda works I guess?

As for checking my weight, it is still too early to see any weight change, so I'm postponing that until next week,

Pixlr: The best free online image editor

2020-01-19T13:24:00.000-06:00

Pixlr is labeled as the photo editor for everything, and it is true. It is not just an editor that lets you "cut and paste". It actually brings the majority of features you find in major commercial and opensource image editor for free and without leaving eating up disk space in your computer.

Most of the reviews you see around, are just bloggers that do a one-time review and then forget about the software or site. This is not the case. Ever since I started writing articles here in Blogger again, I wanted every article to have a nice image, an attractive image. Since I have little money to spend on a regular image editor, I decided to search for a free one. Gimp was out of the question, since it looks dated, and other commercial alternatives are extremely expensive. I was in a very bad situation because majority of online editors were basic (yeah I know free), but I needed a powerful free image editor just for blogs. Then I found Pixlr, and it was fast, loaded with a wide variety of image manipulation tools, with a modern look and feel, and best of all: Free.

One of the best feature it has is the ability to add image as layers, something that you cannot find in the majority of online image editors. Besides that, it allows you to save images in full quality, in any resolution for free. Check it out:

Pixlr Editor Home Screen

Editing an image with multiple layers

Since it has been a wonderful experience using Pixlr Editor, I will be getting the Pro version, which charges on a monthly basis and it is affordable.

Keto: Week 0

2020-01-19T12:59:00.000-06:00

Icons made by Freepik from www.flaticon.com

After the holidays, I gained a lot of weight. I went from 225 to 250. Yeah I ate a lot of junk food, including a lot of bread and desserts. Now I'm paying the consequences and I decided to start the Keto diet again. In this post I will share how I started Keto

Before going grocery shopping, I had to do some research about Keto. I went to one of the best places to find out information about: The Keto Subreddit. There's a lot of information there, the community is welcoming, and you can ask anything keto-related there. I would like to point out that they RECOMMEND to see a nutritionist before starting Keto. I also RECOMMEND to visit a nutritionist first before doing a drastic diet change like this one.

That being said, I started again the One-Week Meal Plan, which helped me lose around 30 pounds before, but because I love to eat pupusas, I gained them again. Anyways, this morning I went grocery shopping to get all the things I need for the diet. Since I live in El Salvador, I decided to not only write this post, but also share a table of everything I bought, so that if you ever decide to try the One-Week Meal Plan, you know how much money you have to pay for everything.

Item Name	Quantity	Item Price
Bacon	1	USD $1.55
12 pack of Buffalo Chicken Chunks	1	USD $3.66
Container of Beef	1	USD $2.84
Bag of Frozen Vegetables	1	USD $13.31
Onion	1	USD $0.69
Green Pepper	2	USD $0.78
Container of Broccoli	1	USD $0.99
Napkins	1	USD $0.50
Salted Peanuts Bags	3	USD $2.10
Small plastic bags for food	1	USD $2.44
Dozen of eggs	1	USD $2.90

Total: USD $32.06

I included napkins and the plastic bags because I didn't have any of those. I strongly suggest to get the normal 2 lb clear plastic bags which costs around USD $0.60

By the way, I got the salted peanut bags (Diana brand) because it is very cheap. I suggest to rinse them to get rid of all the salt.

This is it for week 1. As of right now my weight is 250 pounds. I will be updating each week with weight information, ways to deal with anxiety, and how much money I will be saving by not dinning out.

Create a QR based Identification Scanner App with Flutter

2020-01-08T22:52:00.000-06:00

Icons made by phatplus, Vectors Market and Nikita Golubev from www.flaticon.com

On previous posts, I demonstrated how to display a dynamic list view from a JSON, and also how to create a QR code scanner. Those posts might seem as something easy to do, but I had main goal in mind. Initially what I had in mind was to create an QR-based user identification scanner app, and instead of just jumping into that, I decided to create two separate posts first, showing how to make basic things. Previously
I had the idea and the code ready to create the app, but I didn't have a nice design. If you see my previous posts, it is pretty clear that all the apps lack design. Luckily there are some people on Reddit that posts Flutter UI tutorials, which help me to save time and money. For this app, I used one of cybdom flutter designs: Flight Ticket App (my favorite btw) because looks and feels like a native app. Let's get started!

1. First, let's clone the Flight App UI project
2. Open the project with Visual Studio Code
3. Inside lib, create a models folder, and inside it, create a users.dart file:

4. Create the UsersModel, which will help us to find the user when we scan a QR code. Add the id, name, and userName, email and phone. Also add a Map from Json:

5. Create an api folder, and inside it create a active_users_api.dart file. Here we are going to get our users from an API:

6. Now, add the HTTP and QRscan library to your pubspec.yaml file:

7. Go to the folder "lib -> ui -> screens" and open the home.dart file:

8. Import the following libraries/packages:

9. Create an activeUsers variable, which will have our UserModels as list. Also, add a timer variable (for updating the list), an active variable, a barcode variable (to store the value of the QR code):

10. Create a future asynchronous function, that will get the json and will convert it to an iterable list, then as a map and finally it will pass it to the model to make it a list:

11. Load the active users by calling the _getFromApi function when the widget is created, and also load the timer. We will load users every 5 seconds (you can change that) by calling the _getFromApi function:

12. Create a future asynchronous function called _scanFromCamera, where you will await the response from the scanner and then set the value for the barcode variable:

14. For the purposes of this example, instead of sending the result of the scan to the backend, I will iterate through the users obtained from the API in Flutter, and search the user by ID with a for loop, and when the user has been found, it will push the result to the DetailScreen widget:

15. Open the details.dart file. Replace everything in that file with the code below, in which we change how the information is displayed, and some colors as well:

16. Finally, open the passangercontainer.dart file, and replace everything there with the code below:

17. And that's it! You can run the app and scan QR codes:

18. As you can see, there are few explanations about the code and that's because it is mostly copy and paste from previous posts I linked at the beginning of this post. As you can see, Flutter is extremely flexible. I could just grab a Flutter design from github and integrate already working code in just few steps.

You can grab the full code for this app here: Card Scanner App UI

Also, you can view the article about the original design here: Flight Ticket App

This concludes the Create a QR based Identification Scanner App with Flutter tutorial. If you have questions, drop a comment below!

Easy QR Code Scanner with Flutter

2019-12-16T08:28:00.002-06:00

Icons made by Freepik, Smashicons, and Vectors Market from www.flaticon.com

For a long time, I thought that reading a simple QR code was a complex task, but it actually isn't. If you are just starting developing apps for Android and iOS, you might face a requirement to add a QR scan code feature in your app. That's why in this post I will give you a step-by-step guide on how to create a QR code scanner with Flutter

1. Start Visual Studio Code. Go to menu “View -> Command Palette” and select the “Flutter: New Project” option:

2. Create a folder called widgets inside the lib folder and create an scan_qr.dart file. This is where we are going to work:

3. Also, create a folder apps, and inside it create a main_app.dart file:

4. Remove anything from the main.dart file, import the main_app.dart file and call your main app:

import 'package:flutter/material.dart';
import 'package:qr_reader_test/apps/main_app.dart';
void main() => runApp(ScanApp());

5. Open the main_app.dart and add a stateless widget that will return our main widget app:

import 'package:flutter/material.dart';
import 'package:qr_reader_test/widgets/scan_qr.dart';

class ScanApp extends StatelessWidget{

@override
Widget build(BuildContext context) {

return MaterialApp(

title: 'My App',
debugShowCheckedModeBanner: false,
theme: ThemeData(
fontFamily: 'Quicksand',
primarySwatch: Colors.purple,
),
home: ScannerApp(),

);
}
}

6. Open the scan_qr.dart widget and create the ScannerApp Stateful widget. Copy the following code to create our widget skeleton:

import 'package:flutter/material.dart';

void main() {
runApp(ScannerApp());
}

class ScannerApp extends StatefulWidget {
@override
_ScannerAppState createState() => _ScannerAppState();
}

class _ScannerAppState extends State<ScannerApp> {

@override
initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Our Custom QR Scanner'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[

],
),
),
),
);
}
}

7. In order to scan QR codes, import the qrscan plugin to your flutter project. Open the pubspec.yaml file, and add it as a dependency:

qrscan: ^0.2.17

8. Go back to the scan_qr.dart widget. Import the qrscan plugin as scanner, and in addition to that, import the async and typed_data libraries:

9.test

import 'package:qrscan/qrscan.dart' as scanner;
import 'dart:async';
import 'dart:typed_data';

10. Create two variables

String barcode = '';
Uint8List bytes = Uint8List(200);

11. Create a future asynchronous function called _scanFromCamera, where you will await the response from the scanner and then set the value for the barcode variable:

Future _scanFromCamera() async {
String barcode = await scanner.scan();
setState(() => this.barcode = barcode);

}

12. Let's go back to the widget, and create a RaisedButton that on pressed will call the _scanFromCamera function, and will read the content of the QR code:

SizedBox(

width: 200,
height: 200,

child: Image.memory(bytes),

Text('Result of reading QR: $barcode'),
RaisedButton(
onPressed: _scanFromCamera,
child: Text("Scan QR Code")
),

SizedBox(

height: 128,

14. And that's it! You can scan QR codes with Flutter!

15. If you have questions or suggestions, drop a comment below!

Get the source code here: https://github.com/rjcalifornia/qr_reader_test

Create an Auto-Updating Dynamic Listview with Flutter

2019-12-12T04:04:00.000-06:00

Icons made by Vectors Market and Freepik from www.flaticon.com

List are important when creating real world apps, since you will be required to show data in real time in a user friendly way. That's why in this article I will give you a step-by-step guide on how to Create an Auto-Updating Dynamic Listview with Flutter

1. Start Visual Studio Code. Go to menu “View -> Command Palette” and select the “Flutter: New Project” option:

2. Create a folder called widgets inside the lib folder and create an active_users.dart file. This is where we are going to work:

3. Also, create a folder apps, and inside it create a main_app.dart file:

4. Remove anything from the main.dart file, import the main_app.dart file and call your main app:

import 'package:flutter/material.dart';

import 'package:json_auto_refresh/apps/main_app.dart';

void main() => runApp(UsersApp());

5. This is great! Our Flutter Web App is coming to life! It might look like a lot of files/steps but this will be a structure of our app. Open the main_app.dart and add a stateless widget that will return our main widget app:

import 'package:flutter/material.dart';

import 'package:json_auto_refresh/widgets/active_users.dart';

class UsersApp extends StatelessWidget{

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'My Active Users Widget',

debugShowCheckedModeBanner: false,

theme: ThemeData(

fontFamily: 'Quicksand',

primarySwatch: Colors.purple,

home: ActiveUsersList(),

);

}

6. Open the web_upload.dart widget and create the ActiveUsersList Stateful widget. Copy the following code, and as you can see, we are returning a SafeArea with a body:

import 'package:flutter/material.dart';

class ActiveUsersList extends StatefulWidget {

@override

createState() => _ActiveUsersListState();

}

class _ActiveUsersListState extends State {

@override

Widget build(BuildContext context) {

// TODO: implement build

return SafeArea(

child: Scaffold(

appBar: AppBar(

title: Text('Active users list'),

body: Container(

child: Padding(

padding: const EdgeInsets.only(top: 16.0, left: 28),

child: new Container(

width: 350,

child: Column(

children: [

]

)

);

} }

7. Sweet! Let’s see it working in the web browser:

8. Inside lib, create a models folder, and inside it, create a users.dart file:

9. Let’s create our UsersModel, which will help us build and use the active users list. Add the id, name, and userName and also a Map from Json:

class UsersModel {

int id;
String name;
String userName;

UsersModel(
this.id,

this.name,

this.userName,

);

UsersModel.fromJson(Map json)

json['id'],

name=json['name'],

userName = json['username'];

  Map toJson() {

return {

'id': id,

'name': name,

'username': userName,

};

}

}

10. Import the user model:

import 'package:json_auto_refresh/models/users.dart';

11. Create an activeUsers variable, which will have our UserModels as list:

var activeUsers = new List<UsersModel>();

12. Before getting our users from an API, we must set up how are we getting the API first! In order to get the data from the API, add the HTTP package to your pubspec.yaml as a dependency:

http: ^0.12.0+2

14. Create an api folder, and inside it create a active_users_api.dart file:

15. Open the active_users_api.dart file, and import the async and http libraries:

import 'dart:async';

import 'package:http/http.dart' as http;

16. Create a const api_v1 variable which will hold the API URL:

const api_v1 = "http://apiexample.com";

17. Create a UserList class, and add a future function to get the Json list from the API:

class UsersList {

static Future getActiveUsers() {

var urlUsrList = api_v1 + "/users";

return http.get(urlUsrList);

}

18. Go back to the active_users.dart widget, and import the async and convert libraries:

import 'dart:async';

import 'dart:convert';

19. And create a future asynchronous function, that will get the json and will convert it to an iterable list, then as a map and finally it will pass it to the model to make it a list:

Future _getFromApi() async{

UsersList.getActiveUsers().then((response) {

setState(() {

Iterable list = json.decode(response.body);

activeUsers = list.map((model) => UsersModel.fromJson(model)).toList();

});

}

20. Let’s load the active users by calling the _getFromApi function when the widget is created:

initState() {

super.initState();

_getFromApi();

}

21. Go back to our widget, and let’s create a Listview builder. Inside an Expanded class, add an itembuilder and iterate over each element like this:

Expanded(

child: ListView.builder(

itemCount: activeUsers.length,

itemBuilder: (BuildContext context, i) {

return Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: <Widget>[

SizedBox(height: 5),

Text(

"id: ${activeUsers[i].id}",

maxLines: 3,

overflow: TextOverflow.ellipsis,

SizedBox(height: 5),

Text(

"Name: ${activeUsers[i].name}",

maxLines: 3,

overflow: TextOverflow.ellipsis,

SizedBox(height: 5),

Text(

"Username: ${activeUsers[i].userName}",

maxLines: 3,

overflow: TextOverflow.ellipsis,

SizedBox(height: 15),

]);

If you notice, I add a SizedBox between each element, for visual purposes. Besides that, I do not need to convert the items to string, I just display them like this:

${activeUsers[i].name}

22. Finally, since we want the list to auto refresh, let’s add a Timer variable and a counter:

Timer timer;

int counter = 0;

23. Again, let’s load the timer before the widget is created. We will load users every 5 seconds (you can change that) by calling the _getFromApi function:

initState() {

super.initState();

_getFromApi();

timer = Timer.periodic(Duration(seconds: 5), (Timer t) => _getFromApi());

}

24. You can run it in the emulator or as a Web App with Chrome:

25. And that's it! You just created an auto-updating dynamic Listview with Flutter! If you have questions or suggestions, drop a comment!

You can get the source code here: https://github.com/rjcalifornia/json_auto_refresh

Building a Video and Image Gallery with elgg

2019-12-04T21:18:00.002-06:00

Icons made by Kiranshastry from www.flaticon.com

On a previous post, I suggested to consider elgg framework for your projects, and described what you could build with it. However, I did not post any code or examples on the things you can build with elgg. In this article I will give you a step-by-step guide on how to build a video and image gallery with elgg

1. First, you must install elgg 2.3.x in your server. You can read about how to install elgg here. (If you prefer to do a manual installation, you can download elgg here)

2. Once you have elgg up and running, you have to install the following plugins:

Tidypics for elgg 2.3

Nubeso Player

3. If you need help installing an elgg plugin, read this article

4. Log into elgg with your administrator account and open the Administration Dashboard. Then go to menu "Configure -> Plugins":

5. Activate both Tidypics and Nubesoplayer plugins:

6. Now let's upload some pictures. First, go back to the main site, and in the navigation menu click on Photos:

7. Click on Create New Album to either select an existing album or create a new one. For the purposes of this guide, I will create a new album:

8. Enter the title, descriptions, tags, and access for the new album:

9. The album has been created! Now, let's add some pictures by clicking on Upload photos to this album:

10. One of the main advantages of Tidypics is that it comes with an excellent tool to upload pictures, similar to what Flickr has. You can just drag and drop pictures and upload up to 10 photos at a time (that can be changed in the plugin's settings page):

11. After uploading the pictures, you can optionally add titles, tags, and descriptions to each picture:

12. As you can see, now we have an album with some pictures in it:

13. Let's add a video now! To upload videos, we will use the core Files plugin, which activates on install. To upload a video, in the navigation menu, click on Files:

14. In the upload for, choose a file, enter a title, description and tags. Click on save to upload the file:

15. After uploading the file, you will be redirected to a list with all the files uploaded:

16. Now you have a Video and Photo gallery!

17. It doesn't look appealing right? Even though the site "works", it actually looks like a project from late 2008, and such design will drive visitors away. However, no need to worry about that, since I developed a theme specifically for a site like this one. I integrated the TailWind CSS framework to port the GhostWind CSS template and I made it a theme for elgg. Get it from here:

Download here: https://github.com/rjcalifornia/ghost-theme

18. Install the theme as described in step 3, and then go to menu "Configure -> Plugins" and activate the theme:

19. And that's it! Now the site has a modern, clean, and responsive design:

20. And that's it, you just created a video and image gallery with elgg!

You can get the source code for the theme here: Ghost Theme for elgg

Upload files to server with Flutter Web

2019-12-04T19:11:00.003-06:00

Icons made by DinosoftLabs from www.flaticon.com

For the last couple of weeks, I've been looking for a way to upload files with Flutter Web. I even opened two Github issues. I searched in StackOverflow and I only found examples with the dart:io library, which is not compatible with Flutter Web. Finally I found a way to send my files to an API, and it seemed to me that it wouldn't be bad to share my solution with others, just in case. That's why in this article I will give you a step-by-step guide on how to Upload Files to a server with Flutter Web

1. Start Visual Studio Code. Go to menu “View -> Command Palette” and select the “Flutter: New Project” option:

2. Create a folder called widgets inside the lib folder and create a web_upload.dart file. This is where we are going to work:

3. Also, create a folder apps, and inside it create a main_app.dart file:

4. Remove anything from the main.dart file, import the main_app.dart file and call your main app:

import 'package:flutter/material.dart';

import 'package:web_upload/apps/main_app.dart';

void main() => runApp(UploadApp());

import 'package:flutter/material.dart';

import 'package:web_upload/widgets/web_upload.dart';

class UploadApp extends StatelessWidget{

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'My App',

debugShowCheckedModeBanner: false,

theme: ThemeData(

fontFamily: 'Quicksand',

primarySwatch: Colors.purple,

home: FileUploadApp(),

);

}

6. Open the web_upload.dart widget and create the FileUploadApp Stateful widget (a form will be in it). Copy the following code, and as you can see, we are returning a SafeArea with a Form in the body:

import 'package:flutter/material.dart';

class FileUploadApp extends StatefulWidget {

@override

createState() => _FileUploadAppState();

}

class _FileUploadAppState extends State {

@override

Widget build(BuildContext context) {

// TODO: implement build

return SafeArea(

child: Scaffold(

appBar: AppBar(

title: Text('A Flutter Web file picker'),

body: Container(

child: new Form(

child: Padding(

padding: const EdgeInsets.only(top: 16.0, left: 28),

child: new Container(

width: 350,

child: Column(

children: [

]

)

);

} }

7. Sweet! Let’s see it working in the web browser:

8. Inside our widget, create a better widget structure by adding a column, and inside it a Widget, which will hold the upload button:

Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

])

9. Add a material button, which will be used to open up a dialog to select a file:

MaterialButton(

color: Colors.pink,

elevation: 8,

highlightElevation: 2,

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(8)),

textColor: Colors.white,

child: Text('Select a file'),

onPressed: () {},

10. In order to be able to select a file in Flutter Web, import the HTML library, Async library, Convert library and also the Typed Data library:

import 'dart:html' as html;

import 'dart:typed_data';

import 'dart:async';

import 'dart:convert';

import 'package:http_parser/http_parser.dart';

11. Create an async function startWebFilePicker and call the File Upload Input Element:

startWebFilePicker() async {

html.InputElement uploadInput = html.FileUploadInputElement();

uploadInput.multiple = true;

uploadInput.draggable = true;

uploadInput.click();

}

12. Go back to the material button created in step 9, and in the onPressed event, call the startWebFilePicker function:

onPressed: () {

startWebFilePicker();

14. If you start the Web App right now, and click on the select file button, a file picker dialog will open:

15.So far, what we have done will only open the dialog but will not select the file. Let’s create a List variable that will hold the file as indexable collection of objects with a length, and also a fixed-length list variable:

List<int> _selectedFile;
Uint8List _bytesData;

16. Now, go back to the startWebFilePicker async function, and add an onChange listener in which we will get the file content as data URL:

uploadInput.onChange.listen((e) {

final files = uploadInput.files;

final file = files[0];

final reader = new html.FileReader();

});

17. Create a _handleResult function which will be called in the startWebFilePicker’s onChange listener so that it can convert the file as set is as bytes data:

void _handleResult(Object result) {

setState(() {

_bytesData = Base64Decoder().convert(result.toString().split(",").last);

_selectedFile = _bytesData;

});

}

Note: With this method, to convert from Base64 to byte data, you MUST use .tostring().split(",").last otherwise you WILL NOT be able to send the file.

18. Inside the startWebFilePicker function, add a reader to load the file and call the data handler (our _handleResult function):

reader.onLoadEnd.listen((e) {

_handleResult(reader.result);

});

reader.readAsDataUrl(file);

19. The file selection is now ready. Let’s prepare our app to send the file to the server. First, prepare the form by creating a global form key:

GlobalKey _formKey = new GlobalKey();

20. In the form, add the global key to the form and also set the autovalidation to true:

child: new Form(

autovalidate: true,

key: _formKey,

21. Below the Upload button, add a Divider and another button that will call a function to send the file to the server on its onPressed event:

Divider(color: Colors.teal,),

RaisedButton(

color: Colors.purple,

elevation: 8.0,

textColor: Colors.white,

onPressed: () {

makeRequest();

child: Text('Send file to server'),

22. Create a future async function called makeRequest (added to the send button in step 21):

Future makeRequest() async {

}

22. Before getting into the makeRequest function, you have to use the HTTP library. Open your pubspecs.yaml file and add it as a dependency:

http: ^0.12.0+2

23. Import the library in the web_upload.dart:

import 'package:http/http.dart' as http;

24. Now, in the makeRequest function, set your API url in a variable:

var url = Uri.parse("http://192.168.23.10/upload_api/web/app_dev.php/api/save-file/");

25. Create a request variable which will have the MultiPart Request:

var request = new http.MultipartRequest("POST", url);

26. Alright, this part is tricky since there almost no documentation about how to handle files with Flutter Web. In step 17 the file was converted from base64 to a stream of bytes, and this was done because this is the only way right now to upload files. To send the file you need to use request.files.add and also use the HTTP library from step 22 like this:

request.files.add(await http.MultipartFile.fromBytes(

'file', _selectedFile,

contentType: new MediaType('application', 'octet-stream'),

filename: "file_up"));

http.MultipartFile.fromBytes

No, you cannot use dart:io, and you cannot use .fromPath

You must specify the content type. You could either detect the mime type of the file or just do it the KISS way like I did above

Note: I’m using a hard-coded word as the filename, you can extract the name in the startWebFilePicker function

27. Finally send the form and wait for a response:

request.send().then((response) {

print("test");

print(response.statusCode);

if (response.statusCode == 200) print("Uploaded!");

});

28. Finally, add a simple dialog to let the user know the file was uploaded:

showDialog(

barrierDismissible: false,

context: context,

child: new AlertDialog(

title: new Text("Details"),

//content: new Text("Hello World"),

content: new SingleChildScrollView(

child: new ListBody(

children: [

new Text("Upload successfull"),

actions: [

new FlatButton(

child: new Text('Aceptar'),

onPressed: () {

Navigator.pushAndRemoveUntil(

context,

MaterialPageRoute(builder: (context) => UploadApp()),

(Route<dynamic> route) => false,

);

));

29. That’s it! You now can upload files using Flutter Web!

You can get the source code here: https://github.com/rjcalifornia/web_upload

If you want to know how the files are being handled in the backend, I used Symfony and MySQL.

Get the source code for the API here: https://github.com/rjcalifornia/file-upload-api

Create a dependent drop down field in Flutter

2019-11-24T10:58:00.001-06:00

Icons made by Pixel perfect from www.flaticon.com

Although the Flutter documentation is extremely helpful, it is still lacking some key tutorials about some things that might look simple, however are critical in real world applications, specially in the corporate field. There are some tutorials that cover this topic, however none of them are easy to follow for newbies. In this article I will give you a step-by-step guide on how to create a dependent drop down field in Flutter

1. Start Visual Studio Code. Go to menu “View -> Command Palette” and select the “Flutter: New Project” option:

2. Create a folder called widgets inside the lib folder and create a drop_down.dart file. This is where we are going to work:

3. Also, create a folder apps, and inside it create a main_app.dart file:

4. Remove anything from the main.dart file, import the main_app.dart file and call your main app:

5. So far so good right? It might look like a lot of files/steps but this will be a structure of our app. Open the main_app.dart and add a stateless widget that will return our main widget app:

6. Open the drop_down.dart and create our Main App widget. We will create a form in our widget. Copy the following code, and as you can see we are returning a SafeArea with a Form in the body:
7. Things are going well. You can even start the app right now:

8. Lets add an Padding class, and inside it, create a child with a new Container specifying the width, and another column that will have our widget as children:
9. For purposes of this example, lets add a text field inside the widget:
10. Now, before adding our dropdown fields, we will create our models, that we will need to populate our dependable dropdown fields. I will use in this example the Provinces and States of my home country, so that each time you select a State in the first dropdown field, the second one will only show the Provinces that belongs only to the State selected. Let’s create a Models folder, and inside it a localization_model.dart file:

Open that file, and create three classes:

Localization (Main)
States
Provinces

Let’s build our Provinces Class first, like this:
And then our States Class like this:
You might be wondering why I’m using fromJson, and this is because I will be using a Json file to get all the values. Finally, build the Localization Class like this:
11. Create a folder outside of lib called “json”, there you will save the JSON file (Available in the Github repository). Also add the Assets in the pubspec.yaml

Since you are in the pubspec, add the HTTP library as dependency:
12. Now that we have everything ready (Models and Assets), go back to the drop_down.dart, there you need to import the following libraries and the model class:

14. Create two variables: statesList and provincesList as List variables, and also a tempList where the filtered provinces will be saved temporarily:
Tip: Add the _state and _province variables to save the selected options for each dropdown

15. Create a Future function that will be called when we need to get the contents of the JSON file:
16. Create another Future function that will use the previous function to get the contents of the JSON file, decode it, and make it an iterable list:
17. Override the initState method to initialize the _populateDropdown function:
18. Add a new dropdown field, where we will map the states that we got from the JSON and add each item to the dropdown list:
I am already adding the provinces filter in the onChanged call back, so that each time the user changes state, the correct provinces will be added to the other dropdown.

19. Look how is the app going right now:

20. Now, add the Provinces drop down field, using the tempList to build its items:
And that’s it! You just created a dependable drop down field with Flutter!

Any questions or suggestions, just drop a comment!

You can get the code here: Dependable Drop Down Field with Flutter

Update:
By the way, the code has been updated. The DropDownFormField cannot be used for this specific purpose.

Why you should consider Elgg

2019-10-26T12:53:00.001-06:00

Recently with new technologies such as Node, React, and Flutter have built up a lot of hype in the developers community and outside it as well. Other technologies have been left behind because they are no longer “cool”. One of them is elgg. Why am I talking about elgg? Should small-to-medium businesses consider using elgg for their applications or projects? Let’s take a look.

What is elgg? First off, let’s take a look at the official description of the framework:

Elgg is an award-winning open source social networking engine that provides a robust framework with the core components needed to build a socially aware web application.

Here are some key elements from that description:

“robust framework” : elgg is a modular OOP framework that is driven by DI services, but unlike other alternatives, it features Symfony components, and uses RequireJS to manage and assemble different Javascript files from different modules.

“socially aware web application” : You don’t have to reinvent the wheel, elgg comes with all the elements required for user interaction and user authentication. Thanks to that, you can focus your resources in actually building the features you need for your application.

Elgg isn't only focused on providing social networking elements, it’s focused more on being a better way of building a web application. Other frameworks like WordPress and Joomla, have some inherent security and design issues, a lot of which developers will not have workarounds to solve those issues.

But still, why should you consider Elgg for your next web application?

It gets things done. It might surprise what an almost forgotten social networking framework can do nowadays. Elgg is not "cool"or "shiny". It has been written in PHP, which has a bad connotation by the majority of "hipster" developers. However, it lets you create robust web apps really fast.

Around five months ago I was asked to provide a multimedia publishing platform, able to handle video playback and photo galleries. In a matter of a week I had a fully functional multimedia publishing platform, scalable and able to handle multiple visitors at the same time. Later on I was asked to extend the same platform except this time will be only for pictures. I successfully integrated TailWind CSS and implemented a beautiful and modern design in elgg. Essentially what I needed was install and activate only five plugins and one theme (the theme was custom made by me). That's it just five plugins, no useless dependencies (I'm looking at you is-left package), not even 200 dependencies, just that. And the best thing is that if I'm not available to make changes, you can easily find someone who knows PHP that can keep giving support to both platforms (this is very important, specially for small-to-medium size companies)

Next time you get a request for a web application, consider elgg. You will surprise your boss when you show up with a fully functional demo app in less than a week!

Happy Coding!

Revisiting my Duolingo Experience

2019-07-01T00:08:00.000-06:00

Almost three years ago, I shared my experience using Duolingo in the classroom. Reading again that post, I realized that I shared few details about the implementation of the project. In this post I will give you some tips about how to bring the "Duolingo Challenge" project to your classroom in El Salvador

How to get started?

Before announcing that you want to use Duolingo in your classroom, you have to lay the groundwork. What does that mean? Well, first you must get the English teacher on board, otherwise you will not be able to teach English with Duolingo. After that, you have to sit down and write a project proposal that you must submit to your school's principal for approval. If you want to get an idea of how to write a proposal, you can check mine here. It is not perfect but you can get a general idea of what you need to submit to your principal.

Once you get the approval, you have to plan the logistics to launch the project. That means preparing the IT equipment, creating two Teacher Accounts, and creating the accounts for the students. If the students lack IT knowledge, you must plan ahead and put some time aside to improve their technology skills. It will be a lot of work, but it will be worth it.

After getting everything up and ready, bring the students in and teach them how to use Duolingo. It will be very difficult the first two weeks, but after that it will be a cake walk. Students learn fast, don't underestimate their skills. At the same time, start preparing a separate virtual classroom where you will create online exams to test their newly acquired knowledge. You can use Claroline, Moodle, or you could use mine: PiGo LMS.

Why giving the students online exams if Duolingo already scores their knowledge?

You need to gather data in order to know whether or not Duolingo is working. Even though we already know that Duolingo is somewhat effective, you need to demonstrate the progress of the project. After all, the continuity of any project depends on the results and that's why you must do it with online exams. Talk with the English teacher and ask for help in building the exams. I recommend a 50 questions test each month and one final exam at the end of the project.

Finally, why should do this?

If you are wondering this, you are working in the wrong field. Teachers improve the life of students with knowledge. Everything you teach them, will help them to get a good life, a better life. Of course students will not recognize this effort, and some will not care. However, as the years go by, they will appreciate everything you did for them.

If you wanna read more about my experience with Duolingo in the classroom, you can do that here.

Running Symfony in Orange Pi PC

2018-07-11T23:43:00.000-06:00

I've been trying to find information about running Symfony on small single-board computers, such as OrangePi or Raspberry Pi, because why not? I already have an Orange Pi PC which I use to watch Youtube (Android OS), and I can use it to learn how to set up a web server.

The only information about Symfony and hardware requirements I could find was this one:

https://stackoverflow.com/questions/30553842/systems-hardware-requirements-for-symfony2

That was a good place to start. User Joe Yahchouchi mentioned that an application built with Symfony can run with at least 512 MB of RAM, and at least a Quad core for multiple users. I ordered a case for the Orange Pi, and I bought a cheap 8 GB MicroSDHC (Class 4).

After spending three hours setting everything up, voilà!! Symfony 3.4 was up and running better than I anticipated. I ran both dev and prod enviroment, and it was very fast. The custom application I've been developing for the past six months ran without issues on the Orange Pi, which I did not expect since my local development environment with XAMPP was painfully slow at times.

Later this month I will write a step-by-step guide(both Spanish and English) on how to make an Orange Pi web server to run any Symfony Application. In the meantime, check out some pics I took while testing the web server:

Installing Composer

2018-07-08T11:35:00.000-06:00

When working with Frameworks, it is necessary to learn how to correctly handle the packages you are going to use in your project. In this post I will show you how to install Composer in Windows 7

What is Composer?

Composer is a dependency manager for PHP libraries that can be used for the installation of extensions and libraries required in a project (MediaWiki). For example, if your project needs a library to send emails, simply install it with Composer, and this will be responsible for downloading and installing the library, including any other dependency that allows proper operation.

Benefits of using Composer

The dependencies required by a package that is being downloaded are automatically installed by Composer, without you having to intervene in the process
The process to update packages is much easier and faster
Automation of the package installation process

Requirements:
PHP (Using XAMPP)

Getting Started

1. Download the installer for Windows de Composer:
https://getcomposer.org/download/

2. After downloading Composer, install it as Administrator:

3. Select the PHP command line you must use (You must already have installed PHP in your Windows environment):

3. If desired, add a Proxy server:

4. Install Composer:

5.Composer will show an alert about the use of the program. You must log out and restart to be able to use it correctly:

6. And that's it! Now you can use Composer!

Sources:
MediaWiki "Composer / Es." Composer / Es - MediaWiki, 11 Mar. 2016, www.mediawiki.org/wiki/Composer/en.