Adnane Belmadiaf's blog.
I was performing some Python migrations of a Django web app that used to work, and since I switched to Windows 11 on my work machine, the static files were not being served with the correct mimetype application/javascript but rather text/plain . After some digging into the web app code, I found that the assets were being served using the serve function from django.views.static . Upon checking the…
Wow, it’s been awhile. I didn’t really intend to stop posting for five years now, but that’s always how it goes. Between day-to-day concerns and work, we sometimes get lost. So, I’m getting this post out of the way and can return to posting again. I have made a lot of changes to this blog, the main change is the switch of the SSG engine to 11ty combined with Github pages and Github actions. I…
Since the first solution helped many moroccan developers, i am going to update it to use some new ES6 features like Async and Arrows . The first thing you need to do is create a simple map Google Maps JavaScript API : < script type = "text/javascript" > init = ( ) => { const mapOptions = { zoom : 5 , center : new google . maps . LatLng ( 29.54619 , - 7.36133 ) , mapTypeId : google . maps .…
A few months ago, i did bought a chinese version of NodeMCU named LOLin V3, it's not version of 3 of NodeMCU, it's using CH340G chip which is the TTL to USB converter made by a chinese manufacture instead of the FTDI. After using for few times, it's stopped working. Install the esptool We need to download and install the esptool that will help us the new flash the new firmware $ git clone…
Slack is a great platform for team communication, it is a collection of chat rooms, both public and private. It helps confine all your team communications to one place. Slack also provides an API to let you interacte with it, so i have to decided to write a simple app using Flask to integrate Slack with Launchpad using its new webhooks feature. Deploying to Heroku You can check the full steps in…
Migrating accounts can be a hard task if you are hosting your mails in a shared hosting. Imapsync is a one way synchronisation tool which can migrate mails from one account in a server to another account in another server with a simple command. Installing Imapsync You need to manually install imapsync by grabbing the code from the github repo $ git clone https://github.com/imapsync/imapsync.git…
I was approached by Daniel Chapman to help with the new message view in Dekko(Ubuntu Touch email client) which uses Oxide Webview to render the message details. Dekko is using the new Ubuntu SDK 1.1 which is not present in the LTS version 14.04, we have tried to make it run but it was impossible. Setup LXC To have a clear idea on how LXC works and how to setup your environment make sure you check…
Everyone needs to pay attention when using Morocco Map, specially if it doesn't include the Sahara, so here i'll explain how to fix the borders in Google Maps. The first thing you need to do is to create a simple map : < script type = "text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false" > < / script > < script type = "text/javascript" > var map ; var morocco = new google .…
Last month i started taking up fishing as a hobby, it's a wonderful outdoor pastime and a great way to relax and unwind. One of the best things about fishing is that you don't need expensive equipment, i did bought some amateur fishing gear(from Avito) to start with(3 rods 5m, 270 & 240cm). Until now i haven't caught any fish yet, i learned a lot since i started practicing and i am still trying to…
Last week i was trying to make my Raspberry Pi work again, and while reinstalling and upgrading Raspbian OS packages i run into an issue where a perl warning is displayed. The warning message apprears during the installation packages(invoking Perl) and it's due to missing locales being set not : [ .. . ] perl: warning: Setting locale failed. perl: warning: Please check that your locale settings:…
The HTML5 built-in video support has come to a state where it starts to be adopted by the big players on a large scale(Youtube, Netflix). In this article i'll provide some details of HTML5 video element so you can start using it. here is a basic declaration of HTML5 video player : < video src = " videofile.ogg " > Sorry, your browser doesn't support embedded videos, but don't worry, you can < a…
Next November I'll be speaking at JMaghreb conference, i'll be giving a talk about the Ubuntu Touch platform and the Ubuntu development story, together with a live coding session and a Q&A round at the end. In this session i'll be covering : System architecture Security model QML/HTML5 SDK Platform APIs(udm, push notifications, webview, etc...) Writing & testing apps on the device & the emulator…
Last week while i was attending the Canonical Client Sprint in Malta, i start looking into re-lifting some components like the CheckBox/Switch and the Slider, so in this post i'll explain how i did implement the new the Slider. The first thing that needs be done is to remove the default styles using -webkit-appearance: none . input[type=range] { -webkit-appearance : none ; } Now we can start…
Last week i was invited by Canonical to their Client Sprint in Malta among five others community Core Apps developers : Andrew Hayzen and Victor Thompson : Music App developers Riccardo Padovani : Calculator/Reminders App developer Kunal Parmarl : Calendar App developer Nekhelesh Ramananthan : Clock App developer There have been a lot of discussions about new designs(specially the new header and…
Oxide is a Qt5/QML binding based on the Chromium Content API, it's intended to replace qtwebkit for the touch browser, webapps and the UbuntuWebView. So what does Oxide provide for developers ? It does provide a good chunk a usefull functions : Basic navigation Incognito mode Multiple browser contexts User scripts Message API Dialog support Accelerated compositing WebView Before you start make…
There are a few different techniques to vertically centre objects with CSS, in this post i’ll show you four ways to do it. display: table-cell The first trick is by using display: table for the parent of the element you want to center, then your element will behave like a table cell by using display: table-cell . line-height This technique only works if you have a single line text, by setting the…
As you may know HTML5 apps are first class citizens on Ubuntu, to acheive that the Ubuntu plateform provides a set of APIs and UI elements like the QML SDK, in this post i'll provide some updates on the HTML5 UI elements. Ubuntu Shape The actual implementation is using an image as background with the pseudo class :after which is very limited the design team have suggested that we used a simple CSS…
Media Capture is one of the most interesting features in HTML5, especially for mobile devices, it allows you to access the camera and the microphone of the device. HTML Media Capture simply extends the <input> element with a capture attribute. The capture attribute is a boolean attribute that, if specified, indicates that the capture of media directly from the device's environment using a media…
Android 4.4 KitKat now supports screen recording, it's only accessible via an ADB command on unrooted devices a. This featues is really a great way to create walkthroughs, tutorials for apps and also perfect for reporting bugs. To start using it you need to install ADB, you can use the phablet-team PPA if you are using Ubuntu which has the tools and dependencies for 12.04, 12.10, 13.04 and 13.10…
Google is always trying to make the web experience very easy including the online shopping experience, filling out the 21 pieces of data can be a painful task and specialy on mobile devices. Studies have shown that most of the consumers will leave the website or the mobile app without complete checkout because they have to fill the checkout form which detailed & very long. In 2011 Google launched…
The JavaScript console is a powerful tool that allows developers debug their code using functions provided by the Console API and a shell prompt where they can enter commands and interact with the document object. Filters There are different buttons allowing you to filter the display of messages logged to the console: All — Shows all console output. Errors — Only show output from console.error()…
The Welcome Screen infographic is one of the key components for the customization of the user experience on Ubuntu Touch , beautiful visualisations of data from multiple sources, the UserMetrics is the responsible component for updating the infographic using QML. To use the UserMetrics QML module you need to install qtdeclarative5-usermetrics0.1 package on the desktop : $ sudo apt-get install…
If you are writing Web Apps for Ubuntu Touch , you might want to test them directly on the phone using the Ubuntu browser, this can be done by remotely debugging web pages using the built-in DevTools, which allow you to inspect, debug, and analyze the on-device experience with the full suite of tools you're used to. The phablet-team PPA has the tools and dependencies for 12.04, 12.10, 13.04 and…
With the launch of Ubuntu Touch v1.0, the OS now ships its own QtWebKit based browser which will be replaced by Oxide a Chromium-powered webview by 14.04. There has been a lot of discussions arround the user-agent because many large sites(Facebook, Google, Twitter, Yahoo etc..) are sniffing the UA(for iPhone or Android tokens) to serve the mobile version of the site. Adding an Android or iPhone…
Last week i discovered a HTML5 game called ' X-Type ', which is basically a free dual stick shooter with endless boss battles. Unfortunately this game does only work on iOS and Android and it does use the UA sniffing mechanism to serve both desktop and mobile versions, and using the Ubuntu Touch user-agent it will only serve the desktop version which will not work on the phone. First using the Qt…
I started feeling the need of automating my developement environments when i started contributing to several django projects run by the community, each project uses a different django version and several dependencies, thoses dependencies can be found or not on the Ubuntu version i use for my daily work. Vagrant is a great tool for those situations, it allow you to create and manage custom virtual…
Web Components enables frontend developers to create custom and reusable HTML tags, it's the latest bleeding-edge web technologies being developed, the project is led by the Chrome dev team and aims to solve a simple problem: Building Web applications is more complicated than it used to be. Worse, it's more complicated than it should be. HTML Templates A template provides a method for declaring…
DevTools is a powerful tool than can made developing WebApp easier, it has a lot of features some of them are still experimental and you need to enable them in the about://flags . Breakpoints Breakpoint are related to the JavaScript code, it let's you halt the JavaScript code execution and inspect the current environment. You can set them by simply going the "Source" tab, then select the JS file…
Persona is a decentralized login system made by Mozilla that aims to eliminate site-specific passwords so you can log in with your existing email accounts without having to type in a password. Installation Mozilla provides a library called django-browserid that integrates Persona authentication into Django, so you can simply added to to your requirements.txt or just install via pip : $ sudo pip…
My experience with Ubuntu started in 2007 when i was doing the internship of my second year in Computer Engineering, the first week was really boring, the second week and while i was trying to fix the DVD driver, i opened the drawer then i found a Green CD of "OpenSUSE", i booted with the live CD, the OS was a bit complicated and not easy to play with. I started googling for other Gnu/Linux…
Stylus is an expressive, dynamic, robust CSS pre-processor built on top of Node.js. LESS and Sass are both great, they try to stay as close as the original CSS syntax as possible to minimize the impact of having to learn a new language, but for me someone who cares about simplicity and readability, the syntax becomes an important part of the language or the framework. Installation Ubuntu $ sudo…
User testing is an important aspect of the development process of any web project, that's why headless browsers can be great for automating and testing web pages programmatically, PhantomJS is one of many headless browsers basicaly a WebKit browser with JavaScript API, which means that the rendered web pages are never actually displayed, just because it is a browser but without a GUI. Installation…
Each HTML element is represented as a rectangular box, it consists of margins, borders, padding, and the actual content. The default CSS box model used to calculate widths and heights of elements, the width/height of an element gives the width/height of the content of the box, excluding padding and border. and they are calculated like this: Width = width + padding-left + padding-right +…
position: sticky is a new CSS property that has [landed][0] in Webkit last year which will allow elements to stick to the viewport edge as you scroll past, unfortunately this hasn't been standardized yet but discussions are still going on. How does it work ? By simply adding position: sticky , you can tell an element to be position: relative until the user scrolls the item (or its parent) to be…
Grunt.js is a powerful task-based command line tool written in JavaScript on top of Node.js, and there are a number of grunt plugins that make it easy to set up common tasks, most common ones are concatenating files, linting, testing and minification. Installation Ubuntu $ sudo add-apt-repository ppa:chris-lea/node.js $ sudo apt-get update $ sudo apt-get install nodejs $ sudo npm install -g…
Last Wednesday i got my Pocket TV or PTV from infinitec , a small pocket-sized dongle that connects to the HDMI port of any regular TV and converts it into a powerful Android Smart TV, it can also be controlled by Android mobile devices using the Google TV Remote app or using there own remote app which is still in beta. Features 1 GHz ARM Cortex A9 Processor Mali-400MP Graphics Processor 1 GB RAM…
CSS3 is one of the coolest new web technologies available to front-end developers right now, overtime we have seen so many features that generally were implemented via JavaScript , can now be acheived with a few lines of CSS. So in this post i will explain to you five features that will save you time and energy. Flexible boxes The CSS3 Flexible Box, better known as Flexbox enables you to create…
In my last post , i have talked about HTML5 APIs, so thought it will also interesting to write about some new old JavaScript APIs. Since CSS has been improving over the time and today you can achieve what was only done with Javascript with CSS only, on the other side Javascript have to improve and follow the evolution, so today Javascript can do a lot of things, like accessing hardware(camera,…
Sublime Text 2 is a lightweight, cross platform, blazing fast text editor with chrome-like tabs and split window layouts, it works for both web development and software development. Sublime Text has got a wide range of open source plugins with a massive community of plugin developers. For my frontend development workflow i use some plugins with a specific user settings and sure the wonderfull Soda…
HTML5 has been around for a while now, it introduces lots of new and exciting new JavaScript and HTML APIs for both mobile and desktop, so in this post you will discover some HTML5 features that will enhance your web apps and will save you a lot of time. DNS Prefetching DNS hostname resolution is one of the issues that can make any website slow. Modern browsers start to be very smart when it comes…
Hello World! I’ve been wanting a to start my own blog for a while now. Time and other constraints have been preventing me, but I finally sat down over the last week-end and hacked together what you actually see. It’s all handwritten in markdown , generated by mynt , and powered by Github pages , with commenting by Disqus . I have decided to license the content of this website under a Creative…