Posts on Laïla Atrmouh

Migrating from Chakra v2 to Chakra v3

Wed, 25 Mar 2026 10:14:15 +0000

Context

Chakra is a React component library with a strong focus on accessibility.

I’ve been using it since 2022 for Acupio, my side project for managing patients for acupuncturists, which I already talked about here.

All patients followed by a practitioner were displayed on a single page, with the ability to filter by name. When no input was provided, all patients were shown.

I recently passed the 500-patient mark for one practitioner in the app… Performance was starting to become a real concern.

That’s when I discovered a Chakra pagination component, which was perfect for this use case.

Problem: it was only available in Chakra v3. It was definitely time to tackle this upgrade.

What does Chakra v3 bring?

The official migration guide is very comprehensive, a lot has changed.

Improved rendering performance thanks to a new styling system
Better TypeScript type inference
Polymorphism improvements with the asChild pattern

In this article, I’ll focus on what was the most challenging for me: adopting the Compound Pattern.

Paradigm shift – Compound Pattern

Chakra v3 generalizes the use of the Compound Pattern across many components, which forced me to rewrite most of my components.

I was using components like Drawer, Modal, and tables - all of which were impacted by this shift. I had to refactor them accordingly.

Before / after on a table. A Td is becoming a Table.Cell, a Tr is becoming a Table.Row

It’s not that complex, but the impact is on every component of my app. I naturally thought about using AI to help with this boring task. Isn’t that exactly the kind of use case AI is supposed to help with?

Using AI for refactoring

My relationship with AI is… cautious.

Back in 2023, I used ChatGPT like many people - I looked into how it worked, but didn’t go much further in integrating it into my daily workflow.

Refactoring with AI the wrong way: switching between IDE and LLMs

I first tried copy-pasting one of my templates into a Claude conversation and asked it to migrate the component to Chakra v3.

The suggestions didn’t compile, which makes sense since it didn’t have access to my full codebase.

I discussed this on the Ladies of Code Paris Slack, and one of our members (hi Sara!) suggested starting with smaller components instead of full pages.

Since I use an Atomic Design approach, this was easy to apply. It gave me more control over the changes.

It worked better, but constantly switching between my browser (Claude) and my IDE was frustrating. I often forgot to provide necessary files.

Using Cursor agents for refactoring

Agents make those back-and-forths obsolete.

They can directly apply changes within your IDE through a chat interface — even on the free plan.

For example, I had several views with date filters across different pages.

Instead of duplicating that logic, I decided to extract it into a reusable component using a Cursor agent with this prompt:

The advantage of using an agent is that you can review the changes like a pull request from a teammate.

Being precise in your prompt is key. Taking an atomic approach helps avoid overly complex changes that are hard to debug later.

How long does a Chakra v2 to Chakra v3 migration take?

This migration went more smoothly than I expected.

It only took me a few days, whereas I initially thought it would take several weeks.

I even considered switching libraries altogether, given the expected effort.

I only started using AI agents towards the end. In hindsight, I think I could have saved time by using them earlier — starting with the smallest components.

From what I’ve seen on Reddit, many developers have stopped using Chakra because of this major upgrade.

Preparing your migration to Chakra v3

Structuring my project with Atomic Design principles was extremely helpful once again.

I was able to start with the smallest building blocks and gradually move up to larger components and screens.

In the end, the migration only took a few days.

If I had to give advice to someone considering this upgrade:

Review the migration guide to identify removed components and estimate the workload
If possible, don’t do it alone
Use AI agents to assist you : start small, then scale up progressively

Good luck :)

TIL 1

Tue, 26 May 2020 20:14:34 +0200

I redesigned my blog. Again.

I’ve been blogging for 8 years so far and boy, this blog has travelled.

Simple HTML files hosted in a French server (Free) 👵🏼
Wordpress hosted by 1&1
Jekyll hosted on Github Pages
Gatsby hosted on Github Pages

Today, this blog is powered by Hugo and hosted by Netlify. And, of course, even though I played with plenty of cool tools, I didn’t write articles.

Inspired by a popular series of articles in my previous company trouvailles de madmoiZelle, I decided to write an article every month, listing all the discoveries I made. And also some random stuff that makes me laugh online.

Why ?

Easier to find links on my blog than on my twitter feed
Keeps me motivated to write
Helps me improve my english

TIL stands for Things I’ve Learned by the way.

Let’s go !

Front

During the coronavirus confinement, I decided to help the nonprofil Descodeuses as a mentor. I helped women who want to become web developers and it made me do more frontend development than usual, and discover stuff I didn’t know.

IntersectionObserver API provides a way to detect collision of two DOM elements. Its performance is better than having to play with scroll / onResize. Here’s a codepen I played with: https://codepen.io/leiluspocus/pen/oNjExNg.

This demo with Rachelle McAndrews helped me preparing my livecoding about CSS Grids with the members of Descodeuses.

This CSS library can make your HTML document look like a beautiful LateX file https://latex.now.sh/

Some “no-class” CSS frameworks like Water are appearing. Can be useful for MVPs ?

David Walsh made me discover AbortController Interface to cancel fetch requests in Javascript.

Hugo

As I said earlier, I redesigned my blog using Hugo and I love it. The things I enjoy the most:

How fast is the local environement !
Shortcodes you can use in Markdown to integrate tweets, gits, youtube videos…
How easy you can override the theme

DevTools

I feel like I’m always discovering cool stuff on the Chrome Devtools.

Copy/Paste CSS from the DOM element (Elements panel).
#DevTools Tip ⚡️ Copy and extract all the CSS for an element on the page

Right click element > Copy > Copy Styles

Useful as styles can often be scattered across many selectors! ⭐️ pic.twitter.com/YHmdxoj9fh
— Umar Hansa (@umaar) May 21, 2020
View dependencies between requests on Network panel
Tip: In @ChromeDevTools, hold shift while hovering over a request and it will highlight the initiator in green and dependencies in red. pic.twitter.com/Xd9l2BCoC9
— Addy Osmani (@addyosmani) May 13, 2020

Community

Paola made me discover Streamyard, an web app to create livestreams. You can see the result on a meetup with Ladies of Code.

Autres

Yoga With Adrienne Do I really have to introduce her ? I did the “Home” challenge, it helped me get through quarantine. I hope keeping the Yoga pace after confinement.
FlightRadar24 A flight tracker. Pretty impressive during quarantine !

That’s it for May ! Thank you for reading me so far, feel free to share with me your discoveries 🙏

Docker Cheatsheet

Sat, 25 Aug 2018 19:23:42 +0000

Petit article mémo sur Docker

Getting Started

make sure that client can talk to engine + current version docker version

An image is the application we want to run. A container is an instance of the image running as a process.

Containers

docker container run –publish 80:80 nginx Left number == Host port. Make sure it’s not already used (otherwise bind error)

Pull down “nginx” image from Docker Hub
Started a new container accessible from that image.
Opened port 80 on the host IP
Routes that traffic to the container IP port 80.

Option –detach => Run in the background. docker container run –detach –publish 80:80 nginx

List all running containers

docker container ls == docker ps

Nommer un container

docker container run –detach –name LENOM –publish 13370:80 nginx

Voir les derniers logs d’un container

docker container logs nom_container

Voir les processus s’exécutant dans un container

docker container top nom_container

Ce qui se passe quand on run un container

Changing the defaults :

The listening port on the host
Change version of the image
Change CMD executed when the container runs on start

A container is a process running on your host environment system.

Run multiple containers

docker container run –detach –name nginx –publish 80:80 nginx docker container run –detach –name mysql –env MYSQL_RANDOM_ROOT_PASSWORD=yes –publish 3306:3306 mysql docker container run –detach –name httpd –publish 8080:80 httpd

See what’s going on in containers

Process list in one container docker container top container_name

Details of one container config

docker container inspect container_name

Performance stats for all containers

docker container stats container_name

Getting a shell inside container

docker container run -it Start new container interactively T for terminal I to keep the session open

docker container exec -it Run additionnal command in a running container

Alpine is smaller than Ubuntu.

Publishing ports is always in HOST:CONTAINER format.

docker container run nginx use nginx:alpine instead !

Assignment - CLI App Testing

docker container run –rm -it –name centos centos:7 bash curl 7.29

docker container run –rm -it –name ubuntu ubuntu:14.04 bash curl 7.35

docker container run –detach -it –name centos centos:7 bash

Assignment - Round Robin

docker network create round_robin_network

docker container run –detach –network round_robin_network –net-alias search elasticsearch:2

docker container run –rm –net round_robin_network alpine nslookup search

docker container run –rm –net round_robin_network centos curl -s search:9200

Container Images

An image is made of app binaries and dependencies. Metadata about the image data and how to run the image. Not a complete OS. No kernel, kernel modules. Small as one file (app binary) like golang. Big as Ubuntu with apt, apache, PHP and more installed.

Docker Hub

docker pull nginx docker pull nginx:1.10.11 Always use a specific version to prevent software from updating automatically using latest tag. Docker Hub = The apt package system for containers Alpine => Smaller than counterparts OS.

Docker Image Layers

docker history mysql View changes on the image. When we download an image, we start with one layer. In a dockerfile, we can add more stuff using apt-get or env variables : it adds a new layer everytime. Each layer is uniquely identified and only stored once on a host. Save storage space.

#Image Tagging and Pushing to Docker Hub. Images don’t have name. We refer to them using repository, tag. Tag => Pointer to a specific image commit.

Add tag to existing image: docker image tag SOURCE_IMAGE:TAG TARGET_IMAGE:TAG

docker image push bretfisher/nginx.

Dockerfile basics

&& => Make sure these commands are run for one layer. CMD => final command that will be run after container is launched or restarted.

Running Docker Builds

At the top => things that change the least At the bottom => things that change the most

Extending official images

WORKDIR => cd pour se placer dans un répertoire.

Assignment: Build Your Own Image with a Dockerfile

Dockerfile are part process workflow and part art. docker image build -t node-app . docker container run -p 3000:80 –rm node-app

Container Lifetime and Persistent Data

Containers are usually immutable and ephemeral. Temporary and disposable. Volumes need manual deletion.

Use friendly name for volumes to see which volumes is attached to which container. docker container run -d –name mysql -e MYSQL_ALLOW_EMPTY_ROOT_PASSWORD=true -v mysql-database:/var/lib/mysql mysql

If we need to specify the driver, we need to create the volume ahead of container creation.

Partager dossier courant pour live modifs docker container run -d –name nginx -p 80:80 -v $(pwd):/usr/share/nginx/html nginx

Assignment - Named Volumes

docker container run -d –name postgres -v pgsql-data:/var/lib/postgresql/data postgres:9.6.1

docker container logs postgres

docker container stop postgres

docker container run -d –name postgres2 -v pgsql-data:/var/lib/postgresql/data postgres:9.6.2

Assignment - Bind Mounts

Super cool for local development.

docker run -p 80:4000 -v $(pwd):/site bretfisher/jekyll-serve

Docker Compose

Configure relationships between containers Save our docker container run settings in easy-to-read file. Create one-liner developer environment startups.

We specify in that file the containers we need to run …

docker-compose.yml

depends_on : explique les dépendances entre containers au yaml

docker-compose up # setup volumes networks and start all containers

docker-compose down # stop all containers and remove containers / volumes / networks

docker-compose logs to see logs, -d detach to run in background.

docker-compose ps , top, down.

Assignment - Writing a compose file

use the service name as the DNS name. localhost won’t work. use name. Volumes are never removed automatically.

rm Argument list too long

Wed, 01 Aug 2018 16:22:48 +0000

You can use this command :

find . -name "*.log" -exec rm {} \;

WordPress Curl on page returns 200 but browser returns 404

Tue, 13 Mar 2018 17:37:20 +0000

I had a weird issue on a PHP script. I was returning an error 404 on a WordPress page the following way :

// At the beginning of a template page
global $wp_query;

  if ( $posts_query-&gt;post_count == 0 ) {
    $wp_query-&gt;set_404();
    status_header(404);
    get_template_part( 404 ); die();
  }

When I was accessing the error page on the browser, It worked well, I had a 404 error page displayed + the correct status code when I inspected the page (Network tab).

However, when I was « curl-ing » the same error page, it didn’t work. It didn’t work in the shell, or in the PHP script.

The Shell command I did :

$ curl -I http://myerrorpage.dev 
HTTP/1.1 200 OK
Date: Tue, 13 Mar 2018 16:24:08 GMT
Server: Apache/2.4.7 (Ubuntu)
X-Powered-By: PHP/5.5.9-1ubuntu4.22
Expires: Thu, 19 Nov 2018 08:52:00 GMT
Cache-control: max-age=0, no-store
Set-Cookie: wordpress_fd4fa864532af79923254c1877e41f25=+; expires=Mon, 13-Mar-2017 16:24:09 GMT; Max-Age=-31536000;

The buggy PHP Script

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,            $url);
curl_setopt($ch, CURLOPT_HEADER,         true);
curl_setopt($ch, CURLOPT_NOBODY,         true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT,        1);
$headers[] = curl_exec($ch);
$status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
var_dump($status)

Solution

I had to remove the « CURLOPT_NOBODY » to get the correct status code.

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,            $url);
curl_setopt($ch, CURLOPT_HEADER,         true);
// curl_setopt($ch, CURLOPT_NOBODY,         true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT,        1);
$headers[] = curl_exec($ch);
$status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
var_dump($status);

Permission issue with npm while installing react-devtools

Tue, 27 Feb 2018 17:14:15 +0000

I had this error once while trying to install the npm package react-devtools.

leiluspocus$ npm i -g react-devtools
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!   stack: 'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/leiluspocus/.npm/_logs/2018-02-27T13_52_59_313Z-debug.log

The issue was that I was previously installing npm packages using the root user.

leiluspocus:lib$ ls -l
total 120 
(...)
drwxr-xr-x  11 root            wheel  374 27 fév 14:52 node_modules

It’s a mess afterwards and it’s easier to handle when the owner is your current user. So, I changed the owner of my folder node_modules using the following command :

sudo chown -R $USER /usr/local/lib/node_modules/

And it worked like a charm !

leiluspocus:lib$ ls -l
total 120
(...)
drwxr-xr-x  11 leiluspocus  wheel  374 27 fév 14:52 node_modules 
leiluspocus:lib$ npm i -g react-devtools
/usr/local/bin/react-devtools -> /usr/local/lib/node_modules/react-devtools/bin.js

> electron@1.8.2 postinstall /usr/local/lib/node_modules/react-devtools/node_modules/electron
> node install.js

Downloading SHASUMS256.txt
[============================================>] 100.0% of 3.43 kB (3.43 kB/s)
+ react-devtools@3.1.0
added 239 packages in 37.236s

Getting started with React Native

Sat, 02 Sep 2017 17:31:47 +0000

It’s pretty impressive how we can simply set up a development environment without XCode using Expo.

Make sure you’re using the right Node and NPM versions and double check that there are no missing packages while doing the npm install.

I had to run these commands before running npm start on my app (created through create-react-native-app ):

sudo sysctl -w kern.maxfiles=5242880
sudo sysctl -w kern.maxfilesperproc=524288

While you edit your project files (using any IDEA like Atom or Sublime Text), Expo provides live reloading so that you can directly test your application very quickly.

I made a very simple app that only embed a webview. IT can be found here: https://github.com/leiluspocus/react-test

Resources

Basic tutorial to get started with React Native: https://facebook.github.io/react-native/docs/tutorial.html
Packages explorer for React: https://js.coach/react-native/

Getting started with Magento

Thu, 17 Aug 2017 23:36:15 +0000

When I started working with Magento 1, I was frightened by the quantity of files and modules. The clients I worked for had several modules and a lot of things needed to be refactored, both projects were on Magento 1.

Here are some « baby steps » I followed when I began with Magento 1. I would like to remember them when I will get started on a Magento 2 project 🙂

Identify the business rules

Each client has its own challenges, one client might have to do something an other client won’t have to do. I once worked for a client who had 3 stocks options: « In stock », « Out of stock », « Likely to be out of stock » which was unthinkable for my last client 😀

The more you know about the business of your client, the more you will deliver features that fits his expectations.

Setup a way to debug efficiently

It takes a little bit of time to setup Xdebug but it is – oh sooo – valuable. With XDebug, you will be able to debug any line you want in your Magento project by simply adding a breakpoint. You will be able to view the content of your variables, the stack…

Setup Xdebug on your Magento project and install the xdebug extension on Chrome. For front-end development, I used to love Firebug but now, I’m using the native console of Chrome because this is my favorite browser 🙂

Identify the controllers / models behind basic actions

It’s important to understand how are these actions handled in the code logic to be able to develop features around these actions. Besides the code logic, visualizing where is the data stored in the database (which tables, how to get the data quickly with MySQL queries for example) can be useful for quick business reports generation.

Basic views

Product view (images, variants, product description)
Cart view
Checkout view
Orders view

Tricky e-commerce logic

The logic of promotions (how is a discount applied to a product?)
Logic of cart rules (how is a discount applied to a shopping cart?)

Develop a « Hello World » module

It will make you understand the « frightening » architecture through a very simple example for both front-end and back-end. For example, you can develop a module that adds a « Hello world » on product pages.

Understand the caching process

Last but not least, maybe one of the most difficult points to me: fully understand how a page is cached with Magento. Time speed is critical for your website conversion, the browsing experience must be as fast as possible. It’s however tricky for e-commerce because stocks can be evolving quickly: how can you cache data that can be modified frequently? Here are some answers you will need to find the answer to :

What are the sections cached in the website and how are they cached ?
Is the project using a reverse proxy ? (Varnish)
Is there a CDN for static files ? (images, CSS, Javascripts)

Once you will understand the caching process, you will be able to optimize the pagespeed and understand some bugs you will face.

Create a list of technical references

Magento has an extremely large community, which is awesome. I used to try to remember the most active people. They can be « trusted » even though you always have to test / fully understand the solutions you find online of course. I learned a lot about Magento 1 through reading the blogs / responses on StackOverflow of the people from this list

Inchoo
Alan Storm
Fabrizio Branca
Anna Völkl
Vinai Kopp

If you have a tip to give on how to get started with Magento 2, don’t hesitate to leave a comment, I will be happy to read !

Extra links :

Magento the right way – A Cheatsheet about Magento’s best practices https://magentotherightway.com/

Magento Compiler Mode http://alanstorm.com/magento_compiler_path

http://info2.magento.com/rs/magentosoftware/images/Conquer_the_5_Most_Common_Magento_Coding_Issues_to_Optimize_Your_Site_for_Performance.pdf

Making Magento flying like a rocket! (A set of valuable tips for developers) from Ivan Chepurnyi

Symfony3 Importing JS / CSS assets from a bundle in your custom templates

Fri, 30 Jun 2017 11:50:44 +0000

While implementing the PrestaImage bundle in a Symfony 3 project, I had to include the assets of the bundle in my custom template file. I had first copy / paste manually the files but I thought it was not an easy / clean way to maintain these files.

Install the assets in the public web folder

I used the magnificient CLI of Symfony :

php bin/console assets:install web

This command will :

Copy the assets files – placed under vendor/YOUR_BUNDLE/Resources/public/js or vendor/YOUR_BUNDLE/Resources/public/css
Create two folders for JS and CSS assets under web/bundles//

Calling the assets in the template

Then you will be able to call the assets in your custom twig template using :

<link rel="stylesheet" href="{{ asset('bundles/YOUR_BUNDLE/css/YOUR_ASSET_NAME.css') }}" />

I was surprised that there were no way to directly call the files without copying them, it would save some time and disk space.

Git Workflow Cheatsheet

Sun, 18 Jun 2017 16:55:42 +0000

I follow a pretty regular git workflow on my projects:

All my features are derived from a master branch
I merge my feature with master only after a code review (If I work with several people on the project, I ask them. Even If I’m alone on the project, I still use Github’s Pull Requests to review myself).

My Git Cheatsheet

Delete a local / remote branch

git branch -D branch_name #locally
git push origin --delete branch_name    #remote

Create a branch from a commit

git checkout -b branch_name a9c146a09505837ec03b

Copy the changes from a certain commit

git cherry-pick can be a life savior if well used (ex: when you merge a feature A, a feature B after and you want to revert feature A).

git cherry-pick commit_hash

Know which files you edited

git status

Add a file

git add filename

Reset your working tree

(careful with this command, you’ll loose all your local changes)

git checkout *

Save your local changes without commiting them

Stashs are very convenient specially when you switch a lot between multiples branches (features).

git stash save my_changes_name

View my saved stashs

git stash list

Apply a saved stash

git stash apply my_changes_name

Other Git tips

Do your best to commit only working stuff. It’s easy to handle in case of reverts afterwards.
Avoid the command git add . Be aware of the changes you’re pushing from your working tree.
Never force-quit (CTRL + C) while doing git checkout. I did it once because I was impatient and it was taking couple of seconds. If it takes a long time, it means there are a lot of files being fetches. If you do so, your working tree will be a mess.

PHP Customize excerpt in a WordPress post

Fri, 25 Nov 2016 09:05:28 +0000

add_filter( 'get_the_excerpt', 'my_new_excerpt' );
function my_new_excerpt( $format )
{
    $format = __( ' Blabla' ); // Modify this to your needs!
    return $format;
}

Enjoy !

Pentaho - FieldHelper cannot be cast to java.lang.String

Thu, 01 Sep 2016 13:11:20 +0000

I had the following error in a « User Defined Java Class » step on Pentaho Data Integration.

FieldHelper cannot be cast to java.lang.String

Indeed, you have to use the getRow() method to convert the field you’re getting into a String or any other variable type.

public boolean processRow(StepMetaInterface smi, StepDataInterface sdi) throws KettleException, Exception
{
  Object[] r = getRow();
        if (r == null) { return false; }
        String myString = get(Fields.In, "FeedSubmissionId").getString(r);
}

Can't login to Heroku from my mac

Wed, 10 Aug 2016 18:42:11 +0000

Problem of the day : I wasn’t able to connect to Heroku from my mac. The process was blocked on the message « Installing CLI… » like if it couldn’t connect to Heroku.

MacBook-Air-de-Laila:shredder leiluspocus$ heroku login
heroku-cli: Installing CLI...
Error: getaddrinfo: nodename nor servname provided, or not known (SocketError)
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/socket.rb:100:in `getaddrinfo'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/socket.rb:100:in `connect'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/ssl_socket.rb:146:in `connect'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/socket.rb:28:in `initialize'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/ssl_socket.rb:8:in `initialize'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/connection.rb:404:in `new'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/connection.rb:404:in `socket'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/connection.rb:106:in `request_call'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/middlewares/mock.rb:47:in `request_call'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/middlewares/instrumentor.rb:25:in `request_call'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/middlewares/base.rb:15:in `request_call'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/middlewares/base.rb:15:in `request_call'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/middlewares/base.rb:15:in `request_call'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon/connection.rb:250:in `request'
/usr/local/heroku/vendor/gems/excon-0.51.0/lib/excon.rb:238:in `get'
/usr/local/heroku/lib/heroku/jsplugin.rb:246:in `manifest'
/usr/local/heroku/lib/heroku/jsplugin.rb:259:in `url'
/usr/local/heroku/lib/heroku/jsplugin.rb:149:in `block (2 levels) in setup'
/usr/local/heroku/lib/heroku/jsplugin.rb:137:in `open'
/usr/local/heroku/lib/heroku/jsplugin.rb:137:in `block in setup'
/usr/local/heroku/ruby/lib/ruby/1.9.1/tmpdir.rb:83:in `mktmpdir'
/usr/local/heroku/lib/heroku/jsplugin.rb:135:in `setup'
/usr/local/heroku/lib/heroku/cli.rb:27:in `start'
/usr/local/bin/heroku:24:in `<main></main>'

I noticed my Bluetooth was active. It worked after I disabled it.

Get XML Data won't parse XML object Pentaho

Mon, 01 Aug 2016 17:20:40 +0000

I had an issue with Pentaho today. It wasn’t able to simply parse this XML that I was fetching from Amazon Marketplace Webservice.

Here’s the data I got :

<SubmitFeedResponse xmlns="http://mws.amazonaws.com/doc/2009-01-01/">
<SubmitFeedResult>
<FeedSubmissionInfo>
<FeedSubmissionId>MY_FEED_ID</FeedSubmissionId>
<FeedType>_POST_INVENTORY_AVAILABILITY_DATA_</FeedType>
<SubmittedDate>2016-08-01T19:28:30+00:00</SubmittedDate>
<FeedProcessingStatus>_SUBMITTED_</FeedProcessingStatus>
</FeedSubmissionInfo>
</SubmitFeedResult>
<ResponseMetadata>
<RequestId>MY_REQUEST_ID</RequestId>
</ResponseMetadata>
</SubmitFeedResponse>

The step « Get XML Data » couldn’t parse it because of the xmlns attribute tag. So I had to add a step « Replace in string » that would delete this attribute.

Write a new task using Capistrano

Mon, 18 Jul 2016 16:31:43 +0000

Capistrano can be a great tool to run a task on several servers. It can be a task like uploading a maintenance page or deleting some logs :

task :NAME_OF_YOUR_TASK do
desc &lt;&lt;-DESC
This is my awesome task. Description appears in help so write it carefully.
DESC
run "rm -rf #{logs_folder}"
run "mkdir #{destination_folder}"
top.upload("index.html", "#{destination_folder}/index.html")
end

You can read more about writing Capistrano tasks here.

Quickbooks SDK - Authentification failed error (Web connector)

Sat, 09 Jul 2016 12:32:38 +0000

I used this SDK to develop an API that connects directly to Quickbooks.

I had this error once: Authentification failed when I tried to fetch data from the API. My identifiers were correct.

The problem came from some warnings I had in my program.

It may sound obvious but make sure you have no PHP errors or warning in your application. Otherwise, the web connector of Quickbooks won’t be able to read data from your API.

2017 update

Seems like Quickbooks developed its own SDK. It might be a better option to use for your APIs ?

Using observers in Magento 1.13 can lead to slow loading issues

Sat, 18 Jun 2016 16:02:24 +0000

For one of the Magento projects I worked on, I had to implement a new action in the dropdown list of actions in the back-end.

I tried the Observer option described in this tutorial: Adding new mass action to admin grid in Magento

However, it slowed down the application because the event I was observing core_block_abstract_prepare_layout_before was triggered too many times. The Sales admin page could take around 5 to 10 seconds to load. I finally opted for the Block override option, much more elegant.

Lesson learned from this experience ? Be careful with the events you’re overriding with Magento and profile your dev environment. The plugin AOE_Profiler helped me a lot noticing this issue.

Create a copy of a Vagrant machine

Thu, 02 Jun 2016 18:09:22 +0000

Stop your vagrant machine

vagrant halt

Create the copy (it can take sometime)

vagrant package --base name_of_your_machine  --output path/to/newly/created/package

The machine name is on Virtual Box 🙂

Prototype Cheat Sheet

Fri, 13 May 2016 20:37:49 +0000

I had to deal with Prototype while working with Magento. Here’s a little cheat sheet of some very simple stuff I had to do.

Make an Ajax Request with parameters

new Ajax.Request(url, {
                   method:'get',
                   params : { data1 : 'myParam' }
                   onSuccess: function(xhr){
                    console.log(xhr.responseText); 
                    var json = JSON.parse(transport.responseText);
                    }
});

Change value of an input

$('ID OF THE ELEMENT').setValue('The new value');

Change data within a span tag

$('ID OF THE ELEMENT').update('Your new data');

Magento Custom routing

Sun, 08 May 2016 19:58:55 +0000

If you implemented several store views in your Magento shop (let’s say for French and English), if you implement a new router, he will be associated to this views.

Ex: In Magento’s default behavior,

your-store.com/my_router # KO 
your-store.com/fr/my_router # OK 
your-store.com/en/my_router # OK

The solution to this problem is to implement custom routing. Inchoo wrote an awesome article about it.

Use Meld as an external viewer for git diff on Ubuntu

Wed, 20 Apr 2016 16:50:53 +0000

This article explains very well how to use Meld as an external viewer for « git diff » on Ubuntu. Once done, you won’t have any valid excuses to escape code reviews 😉

Increase security on a WordPress site

Mon, 18 Apr 2016 16:34:14 +0000

WordPress is an extremely popular framework, which makes it easier to hack. Here are couple of ways to increase the security of your WordPress installation :

Hide your admin back-end to a list of whitelisted IPs through server rules on Apache / Nginx
Change the path to your admin back-end
Protect the wp-login.php script
Change the prefix of your tables
Use complicated passwords and change them often

For people who are not necessarily developers, the plugin « iThemes Security » does some of the steps I mentioned pretty well.

NoMethodError /Ruby/Gems/2.0.0/gems/sass-3.4.8/lib/sass/plugin/compiler.rb Undefined method start

Sat, 09 Apr 2016 16:15:08 +0000

I had the weirdest issue when initializing my compass project for Greenie.

>>> Compass is watching for changes. Press Ctrl-C to Stop.
NoMethodError on line ["402"] of /Library/Ruby/Gems/2.0.0/gems/sass-3.4.8/lib/sass/plugin/compiler.rb: undefined method `start' for #<Thread:0x007f90d1afd098 sleep></Thread:0x007f90d1afd098>
  /Library/Ruby/Gems/2.0.0/gems/sass-3.4.8/lib/sass/plugin/compiler.rb:402:in `map'
  /Library/Ruby/Gems/2.0.0/gems/sass-3.4.8/lib/sass/plugin/compiler.rb:402:in `listen_to'
  /Library/Ruby/Gems/2.0.0/gems/sass-3.4.8/lib/sass/plugin/compiler.rb:338:in `watch'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.3/lib/compass/sass_compiler.rb:46:in `watch!'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.3/lib/compass/commands/watch_project.rb:41:in `perform'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.3/lib/compass/commands/base.rb:18:in `execute'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.3/lib/compass/commands/project_base.rb:19:in `execute'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.3/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.3/lib/compass/exec/sub_command_ui.rb:15:in `run!'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.3/bin/compass:30:in `block in <top (required)>'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.3/bin/compass:44:in `call'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.3/bin/compass:44:in `<top (required)>'
  /usr/local/bin/compass:23:in `load'
  /usr/local/bin/compass:23:in `<main>'

I solved it by using a more recent version of Ruby using RVM. RVM is pretty cool because you can switch your Ruby versions very easily. Note that I had to re-install compass afterwards.

How to add a new stock option in Woocommerce

Tue, 22 Mar 2016 18:53:53 +0000

Sometimes, clients can come up with some pretty creative ways to handle their inventory … It was the case for me with a customer who was using WooCommerce.

I had to add a third option but the stock options was not customizable. I ended up deleting the native dropdown of stock options and I implemented a custom field.

In functions.php

add_action('woocommerce_product_options_stock_status', 'add_custom_stock_type');    
function add_custom_stock_type() {
        // Stock status - We remove the default one
        ?>
        
            }

And then I followed this tutorial to create a custom field : http://www.remicorson.com/mastering-woocommerce-products-custom-fields/

Someone on SO proposed an other solution based on my approach but my contract was already done with that client by the time he answered, didn’t get the chance to test it out.

Look for a word in a group of div using only jQuery

Tue, 22 Mar 2016 18:44:23 +0000

For an old project, I had to implement a search tool in a static page. No option for me to use any server side language, I had to implement that search tool using Javascript / jQuery.

The following function’s purpose is to :

Search amongst a group of divs that have the class qa-faqs if a word is present in the content
Exclude stop-words in french and in english from the query entered by the user
List of words to exclude is in the var words_to_exclude
Order the divs by data-relevance (times the searched word appears in each div)

Please note that the following function uses the awesome plugin jQuery.highlight

jQuery.extend({
    highlight: function (node, re, nodeName, className) {
        if (node.nodeType === 3) {
            var match = node.data.match(re);
            if (match) {
                var highlight = document.createElement(nodeName || 'span');
                highlight.className = className || 'highlight';
                var wordNode = node.splitText(match.index);
                wordNode.splitText(match[0].length);
                var wordClone = wordNode.cloneNode(true);
                highlight.appendChild(wordClone);
                wordNode.parentNode.replaceChild(highlight, wordNode);
                return 1; //skip added node in parent
            }
        } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
                !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
                !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
            for (var i = 0; i &lt; node.childNodes.length; i++) {
                i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
            }
        }
        return 0;
    }
});

jQuery.fn.unhighlight = function (options) {
    var settings = { className: 'highlight', element: 'span' };
    jQuery.extend(settings, options);

    return this.find(settings.element + "." + settings.className).each(function () {
        var parent = this.parentNode;
        parent.replaceChild(this.firstChild, this);
        parent.normalize();
    }).end();
};

jQuery.fn.highlight = function (words, options) {
    var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
    jQuery.extend(settings, options);
    
    if (words.constructor === String) {
        words = [words];
    }
    words = jQuery.grep(words, function(word, i){
      return word != '';
    });
    words = jQuery.map(words, function(word, i) {
      return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
    });
    if (words.length == 0) { return this; };

    var flag = settings.caseSensitive ? "" : "i";
    var pattern = "(" + words.join("|") + ")";
    if (settings.wordsOnly) {
        pattern = "\\b" + pattern + "\\b";
    }
    var re = new RegExp(pattern, flag);
    
    return this.each(function () {
        jQuery.highlight(this, re, settings.element, settings.className);
    });
};


jQuery(document).ready(function($) {
  
  $("div[id^=qa-faq]").each(function () {
    var num = this.id.match(/qa-faq(\d+)/)[1];
    var faqContainer = $('.qa-faqs');
    var faq = $('#qa-faq' + num);
    
    if ( faqContainer.is('.collapsible') ) {

      faq.find('.qa-faq-anchor').bind("click", function() {
        if ( faqContainer.is('.accordion') ) {
          $('.qa-faq-answer').not('#qa-faq' + num + ' .qa-faq-answer').hide();
        }
        if ( faqContainer.is('.animation-fade') ) {
          faq.find('.qa-faq-answer').fadeToggle();
        } else if ( faqContainer.is('.animation-slide') ) {
          faq.find('.qa-faq-answer').slideToggle();
        } else  /* no animation */ {
          faq.find('.qa-faq-answer').toggle();
        }

        return false;
      });
    
      $('.expand-all.expand').bind("click", function() {
        $('.expand-all.expand').hide();
        $('.expand-all.collapse').show();
        if ( faqContainer.is('.animation-fade') ) {
          $('.qa-faq-answer').fadeIn(400);
        } else if ( faqContainer.is('.animation-slide') ) {
          $('.qa-faq-answer').slideDown();
        } else  /* no animation */ {
          $('.qa-faq-answer').show();
        }	
      });

      $('.expand-all.collapse').bind("click", function() {
        $('.expand-all.collapse').hide();
        $('.expand-all.expand').show();
        if ( faqContainer.is('.animation-fade') ) {
          $('.qa-faq-answer').fadeOut(400);
        } else if ( faqContainer.is('.animation-slide') ) {
          $('.qa-faq-answer').slideUp();
        } else  /* no animation */ {
          $('.qa-faq-answer').hide();
        }	
      });
      
    }
  });

  $('.qasubmission').bind("click", function() {
    $('#postbox').fadeToggle();
  });
  
  $('#qaplus_searchform').submit(function() { 
    query = $(this).find('.qaplus_search').val();
    jQuery('.no-results-found').hide();
    search(query); 
    return false;
  });

  function search(query) { 
    var words_to_exclude = 'a,able,about,across,after,all,almost,also,am,among,an,and,any,are,as,at,be,because,been,but,by,can,cannot,could,dear,did,do,does,either,else,ever,every,for,from,get,got,had,has,have,he,her,hers,him,his,how,however,i,if,in,into,is,it,its,just,least,let,like,likely,may,me,might,most,must,my,neither,no,nor,not,of,off,often,on,only,or,other,our,own,rather,said,say,says,she,should,since,so,some,than,that,the,their,them,then,there,these,they,this,tis,to,too,twas,us,wants,was,we,were,what,when,where,which,while,who,whom,why,will,with,would,yet,you,your,alors,au,aucuns,aussi,autre,avant,avec,avoir,bon,car,ce,cela,ces,ceux,chaque,ci,comme,comment,dans,des,du,dedans,dehors,depuis,deux,devrait,doit,donc,dos,droite,début,elle,elles,en,encore,essai,est,et,eu,fait,faites,fois,font,force,haut,hors,ici,il,ils,je,juste,la,le,les,leur,là,ma,maintenant,mais,mes,mine,moins,mon,mot,même,ni,nommés,notre,nous,nouveaux,ou,où,par,parce,parole,pas,personnes,peut,peu,pièce,plupart,pour,pourquoi,quand,que,quel,quelle,quelles,quels,qui,sa,sans,ses,seulement,si,sien,son,sont,sous,soyez,sujet,sur,ta,tandis,tellement,tels,tes,ton,tous,tout,trop,très,tu,valeur,voie,voient,vont,votre,vous,vu,ça,étaient,état,étions,été,être';
    
    query.replace(words_to_exclude, ' ');
    if ( query.length &gt; 0 ) { 
      jQuery(".qa-faqs").highlight(query.split(" "), {className : 'showme'} );

      if ( jQuery('.showme').length == 0 ) {
        // This search has no matching results
        jQuery('.no-results-found').show();
      } 
      // Update reference
      jQuery(".qa-faq").attr('data-relevance', '0').hide().find("span.showme").each(function() {
        var incr = 1;
        if ( jQuery(this).parent().hasClass('qa-faq-anchor') ) {
          incr = incr + 2;
        }  
        var item = jQuery(this).removeClass('showme').parents('.qa-faq');
        item.attr('data-relevance', parseInt(item.attr('data-relevance')) + incr ).show();
      });

      // Sort questions
      var $wrapper = $('.qa-faqs');

      $wrapper.find('.qa-faq').sort(function (a, b) {
          return b.dataset.relevance - a.dataset.relevance;
      }).appendTo( $wrapper );	 

    }
    else {
      var $wrapper = $('.qa-faqs');

      $wrapper.find('.qa-faq').show().sort(function (a, b) {
          return b.dataset.origin - a.dataset.origin;
      }).appendTo( $wrapper );
    }

    $("html, body").animate({ scrollTop: $('.faq-container').offset().top }, 500, 'swing');
 
    return false;
  }


});

VirtualBox CheatSheet

Thu, 18 Feb 2016 16:08:10 +0000

Here is a couple of commands I’ve used in a previous life while trying to resize a Vagrant machine.

List the virtual disk images used by Virtual Box

vboxmanage list hdds

Remove a hard disk from a Virtual Box registry

vboxmanage closemedium disk a5bad1ba-5ff7-4b83-87ff-adb18f05269a --delete

How to resize a hard disk for a Virtual Machine – Tutorial

Folders not appearing in the tree on the left panel - PHP Storm

Tue, 12 Jan 2016 12:05:17 +0000

At some point, my folders were not appearing anymore in my Tree on the left Panel like this fellow below.

https://devnet.jetbrains.com/message/5448105?tstart=0

I ended up reading online that it occurs when you hit « Cancel » during the load of a project. I restarted PHPStorm and let it load all the components of the project and it worked.

How to indent a large XML file (Ubuntu)

Mon, 11 Jan 2016 15:59:23 +0000

I had to indent an extremely large XML file today. I tried to use different IDE (PHPStorm, Sublime Text 3), however the file was way too large and it took a long time to process.

Best way to do that is by using command line.

xmllint --format input.xml -o indented-output.xml

Extract characters after the last dash of a String RegExp

Sun, 10 Jan 2016 16:51:21 +0000

I wanted to extract characters after the last dash of a string. Regular expression are such a powerful tool to use in these cases. Here’s the one I needed for my problem :

(\w+)[^-]*$

Please note that with PHP, you need to use the preg_match method and surround the regexp with slashes.

preg_match ('/(\w+)[^-]*$/', 'cgo3020-red-xs', $results); // returns xs in $results[0]

Here’s a pretty convenient tool to test your regexp: https://regex101.com/

PHP / Magento - Direct SQL Queries

Tue, 22 Dec 2015 11:37:54 +0000

Not the cleanest but here’s a quick solution to do a direct query on Magento. Might be faster than calling Magento’s objects ?

/**
   * Get the resource model
   */
$resource = Mage::getSingleton('core/resource');
     
 /**
  * Acccess to the database in read only
  */
$readConnection = $resource-&gt;getConnection('core_read');
     
$query = 'SELECT * FROM ' . $resource-&gt;getTableName('catalog/product');
     
/**
 * Execute the query  
 */
$results = $readConnection-&gt;fetchAll($query);

Thank you DevProblems !

SQL Magento - Get store credit balance

Mon, 21 Dec 2015 17:48:06 +0000

Valid for Magento EE 1 only. The feature of store credits isn’t native in CE edition.

select amount 
from enterprise_customerbalance 
where customer_id = @customer_id ;

SQL Magento Get the list of SKUs that are in a catalog_price_rule

Tue, 24 Nov 2015 12:16:55 +0000

The parameter « rule_id » can be viewed in the URL when you are editing the catalog price rule.

select sku
from catalog_product_entity
where entity_id in (
SELECT DISTINCT product_id 
FROM catalogrule_product 
WHERE rule_id=&lt;rule_id&gt;
);

Couple of books to read for a developer

Sun, 21 Sep 2014 18:14:45 +0000

Some co-workers recommended me some development books. I added comments in the This list will be updated and feel free to add your suggestions in the comments 🙂

Lean In – Women, Work, and the Will to Lead
- Life changing book for me. It’s a must read for every women working or not in IT. Men will be interested as well !
Cracking the coding interview
- I always prepare my interviews with this book ! It has pretty good soft-skills questions too.

Django Cheat Sheet

Sun, 22 Dec 2013 23:28:23 +0000

Here are couple of useful commands / tutorials (in french sorry!) to get started easily with Django.

Create a project

python django-admin.py startproject project_name

Manually create a subfolder for HTML templates

Running servers

python manage.py runserver

Create an application (inside of a project)

python manage.py startapp blog

You should also read the Django course of Open Classrooms to get started smoothly 🙂

Convert an image into a base64 string Javascript

Sun, 22 Dec 2013 23:26:54 +0000

Here is a little function I did to convert an image into a base64 string (JavaScript only): http://pastebin.com/Dfb8TR4g

Parsing errors JSON

Tue, 25 Jun 2013 23:26:03 +0000

Parsing JSON with the jQuery method $.parseJSON can be tricky to debug, specially when you’re using a mobile device.

Here is a list of errors I encoutered, and the reason why they were raised.

Unexpected token u The method tries to parse a undefined variable

Unexpected token o The method tries to parse [Object object]

Sessions keep refreshing CodeIgniter

Wed, 05 Jun 2013 23:22:47 +0000

I had a bug once, the sessions kept expiring even though the token was still valid.

I found out that CI_sessions were refreshing the session_id all the time. This was a database issue, be careful on the length of the columns in the database. The column that stored the session_id was too short and the token kept being re-generated since the old one couldn’t be recognized.

This was a tricky bug because it didn’t raise any obvious PHP error… Be careful with the schema of your database folks !

Create a JSON array dynamically Javascript

Wed, 20 Mar 2013 23:21:59 +0000

Using only Javascript

var res = [];
for (var i = 0; i < results.rows.length; i++) {
    res[i] = {};
    res[i]['id'] = "foo";
    res[i]['name'] = "woohoo";
}

Best ways to debug Javascript

Mon, 18 Mar 2013 23:20:37 +0000

I was looking for an equivalent of PHP’s print_r to debug Javascript Objects and I found this very cool method:

JSON.stringify(whatever_obj);

How about you ? How do you debug objects in Javascript ?

Passing arguments in an event handler Javascript

Tue, 26 Feb 2013 23:19:15 +0000

I had this problem while working on Leaflet but I think it can be generalized to the issue of passing parameters to an event handler in Javascript. With the « bind » method of jQuery, you can pass parameters by using the data property of event (the object sent when an event is triggered) :

$(marker).bind("click", { parameter : its_value, parameter2: its_value }, function(event) {
console.log("Your parameter is :" + event.data.parameter);
console.log("Your parameter2 is :" + event.data.parameter2);
// your code goes here
});

As « marker » was a L.Marker object, I had to convert it into a jQuery object before applying the bind method. Thank you Anurag on StackOverflow !!

Connect a Gumstix via Serial Eclipse Ubuntu

Thu, 29 Nov 2012 23:10:47 +0000

I was following this well-written tutorial to set up eclipse for my gumstix when I came to the part « Connect your gumstix » (with the Eclipse Terminal). Before setting up the terminal connection on Eclipse, make sure that Eclipse will have the permissions to access to the folder. I didn’t have the permissions and I had the error « /dev/ttyUSB0: No such folder error » even if my board was plugged.

A simple chmod on the folder resolves the issue. Make also sure that you have an UTF-8 encoding, otherwise you gonna have a bad time while reading what’s going on on your board ! 😀

Installing Bluetooth library Java Interpreter

Mon, 22 Oct 2012 23:11:53 +0000

When I was installing the bluetooth library, i was told to type the directory where Java Interpreter was installed.

Run the command:

  which java

It’s gonna answer you « /usr/bin/java », type only « /usr/bin » in the shell line and you’re good 🙂 (Mac OS X Lion)