feed.xml

<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.1.0">Jekyll</generator><link href="http://0.0.0.0:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://0.0.0.0:4000/" rel="alternate" type="text/html" /><updated>2020-06-06T14:38:01-05:00</updated><id>http://0.0.0.0:4000/feed.xml</id><title type="html">[ Pob’s corner ]</title><subtitle>Another tech blog</subtitle><entry><title type="html">Legacy : a great mentorship for dev !</title><link href="http://0.0.0.0:4000/legacy-a-great-mentorship/" rel="alternate" type="text/html" title="Legacy : a great mentorship for dev !" /><published>2020-05-18T00:00:00-05:00</published><updated>2020-05-18T00:00:00-05:00</updated><id>http://0.0.0.0:4000/legacy-a-great-mentorship</id><content type="html" xml:base="http://0.0.0.0:4000/legacy-a-great-mentorship/">&lt;p class=&quot;intro&quot;&gt;&lt;span class=&quot;dropcap&quot;&gt;T&lt;/span&gt;oday I want to talk about a topic that is present in a developer's life : legacy.&lt;/p&gt;

&lt;p&gt;This word means a lot of things in the IT world, and can be translated or interpreted in such many different ways. So here I will push my point of view as a developer, this is not a regular definition of legacy. The fact is, after experience, I don’t understand why during all my studies, no one talked or teached about this, because it concern more than 50% of my career.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/img/legacy.jpg&quot; alt=&quot;Legacy : don't blame it&quot; /&gt;&lt;/p&gt;

&lt;p&gt;I want to talk about &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;human legacy&lt;/code&gt; when nobody don’t know how this feature works because “&lt;em&gt;it was developed a long time ago by a guy who left the company&lt;/em&gt;”. And of course about &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;technical legacy&lt;/code&gt; : a language, technology, framework that is out of date or just dead, source code with no structuring or design strategy, no documentation, no tests. Legacy is everywhere, in each project or system, there is a part of legacy. You can’t fight this, but you have to deal with it !&lt;/p&gt;

&lt;h2 id=&quot;dont-judge-too-fast-&quot;&gt;Don’t judge too fast ….&lt;/h2&gt;

&lt;p&gt;Behind the scene maybe there are some people that in a particular context did this “&lt;em&gt;strange&lt;/em&gt;” thing. When I was younger I pushed back these projects and judged first on the situation. “&lt;em&gt;Why they did that like it ?&lt;/em&gt;” or “&lt;em&gt;How the !/=-$ is possible ?!&lt;/em&gt;”. But this was not the good way. Don’t lose your time. When you think about that just look at a situation where you had to “&lt;em&gt;do it fast&lt;/em&gt;”, “&lt;em&gt;do it now&lt;/em&gt;” or just “&lt;em&gt;it has to works, we will QA later&lt;/em&gt;”. Have a look at particular context of this situation, why you didn’t do the best thing. There are reasons for that : insufficient time (deadlines ?), applicant never understood how a software works, your are new to the project, there is a lack of documentation, tools are out of date,  you never worked with this language, or maybe you’re just more experienced right now than the young developer who worked on the project (&lt;em&gt;maybe it was a trainee or just junior&lt;/em&gt;) in the past ? Maybe it was not a developer at all …&lt;/p&gt;

&lt;h2 id=&quot;nobody-is-perfect&quot;&gt;Nobody is perfect&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;We all do mistakes&lt;/strong&gt; ! Yes even if you are a &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;100x engineer&lt;/code&gt;, you do mistakes. Because we become stronger and stronger learning during all our career. We start younger and become senior. There is a difference between a developer alone and a developer in a team. Sometimes a “POC” become a project but you didn’t know at first, and you leave. The developer behind you will start with a “legacy” (&lt;em&gt;don’t tell me that all of your POCs are healthy ^^&lt;/em&gt;).&lt;/p&gt;

&lt;h2 id=&quot;analyse-and-secure&quot;&gt;Analyse and secure&lt;/h2&gt;

&lt;p&gt;First of all : analyse situation. Which &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;environments&lt;/code&gt; are available ? We got production, is there any staging environment ? Can we simply re-start project in &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;local&lt;/code&gt; ? Is there any &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;CI/CD&lt;/code&gt; process to put code in production ? Are there any &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;tests&lt;/code&gt; that I can rely on ? Is code on &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;git&lt;/code&gt; or &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;svn&lt;/code&gt; plateform ? Do you get &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;access&lt;/code&gt; to servers or tools or &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;APIs&lt;/code&gt; ? Can we found &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;logs&lt;/code&gt; somewhere ? Is there any &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;backlog&lt;/code&gt; ?&lt;/p&gt;

&lt;p&gt;And secure it as possible. Sometimes you won’t get enough time to do all these shortcomings. You will have to choose and vote which one is needed. If project must go to live, &lt;strong&gt;GIT&lt;/strong&gt; is the first thing we use to settle.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tests&lt;/strong&gt; just come next : how can we secure our refactoring without killing something ? Create tests, start as simple you can. A little but brillant guy always learned me : “&lt;strong&gt;1 test &amp;gt; 0 test&lt;/strong&gt;”. Sometimes you won’t have suffisant skill to put tests in this from scratch project you don’t know. Have you ever heard and tried &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Golden Master Testing&lt;/code&gt; ? This is so nice.&lt;/p&gt;

&lt;h2 id=&quot;read-and-learn&quot;&gt;Read and learn&lt;/h2&gt;

&lt;p&gt;So when you get this project the first thing to do is something that you will do during all of your time : &lt;strong&gt;READ&lt;/strong&gt;. Read code and &lt;strong&gt;LEARN&lt;/strong&gt;. A developer will spend most of his time to read code, not to write code. One more thing that only experience has taught me : start small ! One small upgrade is better than no upgrade. Extract some parts away and test them. And repeat. So read, learn about the code, the context, you will find solutions and achieve to better things. Sometimes maybe, your search and work will conclude to a new project, or to kill a project. But this is at least, &lt;strong&gt;an upgrade of the project&lt;/strong&gt;. Decide about kill or upgrade is not easy and it depends a lot on how much you want to invest on it, and which things we talked about during analyze (&lt;em&gt;environments, CI/CD, tests, versioning, accesses, logs, backlog, etc.&lt;/em&gt;) we can push.&lt;/p&gt;

&lt;h2 id=&quot;legacy--the-best-coworker-to-learn&quot;&gt;Legacy : the best coworker to learn&lt;/h2&gt;

&lt;p&gt;You have to practice a lot to deal with it, this is exactly the same as automated tests : you have use them every day at work, but it was a little part during all your studies (&lt;em&gt;if you get lucky to get some courses on this&lt;/em&gt;). Sometimes you will compare yourself as an archaeologist or genealogist, and yes it can be exciting to interfere in a project that you do not know. At the end you will be proud of your work and you will have grown ! The fact is that this work of search, analyze, read, act is very formative and will bring you new visions for next projects.&lt;/p&gt;

&lt;p&gt;I hope that these lines will help you to fight some deamons with legacy in the future.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;small&gt;Originally published at &lt;a href=&quot;https://dev.to/pobb/legacy-a-great-mentorship-for-dev-3688&quot; target=&quot;_blank&quot;&gt;Dev.to&lt;/a&gt;.&lt;/small&gt;&lt;/em&gt;&lt;/p&gt;</content><author><name></name></author><summary type="html">Today I want to talk about a topic that is present in a developer's life : legacy.</summary></entry><entry><title type="html">Create rails app using docker in 5 steps</title><link href="http://0.0.0.0:4000/create-new-rails-app-using-docker/" rel="alternate" type="text/html" title="Create rails app using docker in 5 steps" /><published>2020-05-03T00:00:00-05:00</published><updated>2020-05-03T00:00:00-05:00</updated><id>http://0.0.0.0:4000/create-new-rails-app-using-docker</id><content type="html" xml:base="http://0.0.0.0:4000/create-new-rails-app-using-docker/">&lt;p class=&quot;intro&quot;&gt;&lt;span class=&quot;dropcap&quot;&gt;I&lt;/span&gt;f you want to create a new Rails application using docker, and keep it simple, these lines will help you.&lt;/p&gt;

&lt;p&gt;Why docker ? Why no rvm or rbenv ? In the past I used to work with rvm, helping me to manage multiple ruby / rails projects. I move to docker recently not to deploy an app to this beautiful cloud (&lt;em&gt;choose one you want&lt;/em&gt;), but to create a developer environment. This is not the first purpose of docker, but it help a lot.&lt;/p&gt;

&lt;p&gt;I don’t need to install all of my ruby versions on my computer, not all postgresql / mysql / mariadb versions of all projects I work on, not all dependencies etc. that can conflicts between them. I can choose which unix to use (&lt;em&gt;it depend on images&lt;/em&gt;) and get closer to production env. Docker is faster on Linux, i’m on Mac, it’s a little bit slower but it’s fine.&lt;/p&gt;

&lt;p&gt;So let’s create a new rails app using docker, and keep it really simple. We will take an example for a standard rails 6 app using a postgresql database.&lt;/p&gt;

&lt;h2 id=&quot;prerequisites&quot;&gt;Prerequisites&lt;/h2&gt;
&lt;ul&gt;
  &lt;li&gt;Docker&lt;/li&gt;
  &lt;li&gt;Docker-compose&lt;/li&gt;
  &lt;li&gt;Internet connection (&lt;em&gt;download docker’s images take time ..&lt;/em&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;5-steps&quot;&gt;5 steps&lt;/h2&gt;
&lt;ol&gt;
  &lt;li&gt;Clone this project (&lt;em&gt;it contains 3 files&lt;/em&gt;) : &lt;a href=&quot;https://github.com/Pobb/docker-rails&quot; target=&quot;_blank&quot;&gt;https://github.com/Pobb/docker-rails&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;docker-compose build&lt;/li&gt;
  &lt;li&gt;docker-compose run web rails new . –force –no-deps –database=postgresql –no-documentation&lt;/li&gt;
  &lt;li&gt;Edit config/database.yml and add :
    &lt;ul&gt;
      &lt;li&gt;host: db&lt;/li&gt;
      &lt;li&gt;username: “postgres”&lt;/li&gt;
      &lt;li&gt;password: “postgres”&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;docker-compose up&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Visit &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;http://localhost:4000&lt;/code&gt; and you are done !&lt;/p&gt;

&lt;h2 id=&quot;some-explanations&quot;&gt;Some explanations&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;docker-compose build&lt;/strong&gt; will create docker image on your computer using our &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Dockerfile&lt;/code&gt;. As you can see our Dockerfile is really simple. First we use official ruby image from docker hub . Next we just install some dev tools. Biggest part concern &lt;strong&gt;yarn&lt;/strong&gt; : we use &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;Rails 6&lt;/code&gt; in our example, needing webpack etc. We have to setup Yarn. Next we install rails using &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;gem install&lt;/code&gt;command.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Create our rails app :&lt;/strong&gt; in our docker-compose file we can see that we declare a &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;web&lt;/code&gt; service. We will use image we just builded and launch our classical rails new command. We mention &lt;strong&gt;rails new .&lt;/strong&gt; to create app in our current folder.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Edit config/database :&lt;/strong&gt; In our docker-compose file we can see that our &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;db&lt;/code&gt;service use postgres’s image. Here we want something really simple. By default, username and password are set to “postgres”. So mention it in your &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;database.yml&lt;/code&gt; file.  Host is &lt;strong&gt;db&lt;/strong&gt; : just mention it like it without quotes. It’s our &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;db&lt;/code&gt; service name we choose in docker-compose file.&lt;/p&gt;

&lt;h2 id=&quot;some-tips&quot;&gt;Some tips&lt;/h2&gt;
&lt;ul&gt;
  &lt;li&gt;We use volontary latest ruby version in our example (&lt;em&gt;first line of Dockerfile&lt;/em&gt;), but I suggest you to fix your ruby version using appropriate docker image. You will find it on docker-hub website.&lt;/li&gt;
  &lt;li&gt;As for ruby, I suggest you to precise rails version when you “gem install rails”&lt;/li&gt;
  &lt;li&gt;You can create a docker folder and move our 3 files in (&lt;em&gt;careful to change path in Dockerfile and docker-compose.yml&lt;/em&gt;)&lt;/li&gt;
  &lt;li&gt;I suggest you to use ENV variable to put your user and password into database.yml file.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;&lt;small&gt;Sources &lt;a href=&quot;https://github.com/Pobb/docker-rails&quot; target=&quot;_blank&quot;&gt;Github project&lt;/a&gt;&lt;/small&gt;&lt;/em&gt;&lt;/p&gt;</content><author><name></name></author><summary type="html">If you want to create a new Rails application using docker, and keep it simple, these lines will help you.</summary></entry><entry><title type="html">Rails : How to preview Office files ?</title><link href="http://0.0.0.0:4000/rails-preview-office-file/" rel="alternate" type="text/html" title="Rails : How to preview Office files ?" /><published>2020-04-14T00:00:00-05:00</published><updated>2020-04-14T00:00:00-05:00</updated><id>http://0.0.0.0:4000/rails-preview-office-file</id><content type="html" xml:base="http://0.0.0.0:4000/rails-preview-office-file/">&lt;p class=&quot;intro&quot;&gt;&lt;span class=&quot;dropcap&quot;&gt;W&lt;/span&gt;e use to work with CSV or PDF files when we talk about web apps. CSV are easy to use and edit after exportation (we can also easily create them), PDF are easy to read and and pretty much a standard. But when we have to deal with `.docx`, `.xslx` or similar formats, things get complicated. &lt;/p&gt;

&lt;h2 id=&quot;preview-a-file&quot;&gt;Preview a file&lt;/h2&gt;

&lt;p&gt;In your app, you have certainly used a preview for images or PDFs files. But how will you do in case of an emails app that must show preview of all attachments or another DMS app that must preview files with exotic extensions (&lt;em&gt;docx, pptx, xslx, odt, ods, odp etc.&lt;/em&gt;) ?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Convert them to PDF&lt;/strong&gt; and you are done !&lt;/p&gt;

&lt;h2 id=&quot;libre-office-to-the-rescue&quot;&gt;Libre office to the rescue&lt;/h2&gt;

&lt;p&gt;To get this tool, just install libreoffice on your server using :&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;apt-get install libreoffice -qq
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;A little look to the doc and you can see two options we will use :&lt;/p&gt;

&lt;p&gt;&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;--convert-to&lt;/code&gt; : allow us to convert a file from our extension to pdf
&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;--headless&lt;/code&gt; : it ignore GUI environment&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;libreoffice --headless --convert-to pdf my_file.docx
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;rails--there-is-a-gem-for-that&quot;&gt;Rails : there is a gem for that&lt;/h2&gt;

&lt;p&gt;In a rails app, just add a gem on your Gemfile :&lt;/p&gt;

&lt;div class=&quot;language-ruby highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c1&quot;&gt;# Gemfile&lt;/span&gt;
&lt;span class=&quot;n&quot;&gt;gem&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'libreconv'&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;# In your ruby file module or class&lt;/span&gt;
&lt;span class=&quot;no&quot;&gt;Libreconv&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;convert&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;Rails&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;root&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;/public/files/my_file.docx&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;Rails&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;root&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;/public/files/my_file.pdf&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Bundle install, and now you can make a preview of your file using the PDF version on your server. Note that libreoffice’s tool don’t convert only in PDF but can convert a file from extension that it can open and read to a file with extension that he can write. PDF won’t disappoint you ;)&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;small&gt;Originally published at &lt;a href=&quot;https://dev.to/pobb/rails-how-to-preview-office-files-11go&quot; target=&quot;_blank&quot;&gt;Dev.to&lt;/a&gt;.&lt;/small&gt;&lt;/em&gt;&lt;/p&gt;</content><author><name></name></author><summary type="html">We use to work with CSV or PDF files when we talk about web apps. CSV are easy to use and edit after exportation (we can also easily create them), PDF are easy to read and and pretty much a standard. But when we have to deal with `.docx`, `.xslx` or similar formats, things get complicated.</summary></entry><entry><title type="html">Docket : connect to your docker’s container easily !</title><link href="http://0.0.0.0:4000/docket-connect-container/" rel="alternate" type="text/html" title="Docket : connect to your docker's container easily !" /><published>2020-03-05T00:00:00-06:00</published><updated>2020-03-05T00:00:00-06:00</updated><id>http://0.0.0.0:4000/docket-connect-container</id><content type="html" xml:base="http://0.0.0.0:4000/docket-connect-container/">&lt;p class=&quot;intro&quot;&gt;&lt;span class=&quot;dropcap&quot;&gt;I&lt;/span&gt;'ll introduce you today a tool helping you to connect to docker containers quickly and easily using CLI.&lt;/p&gt;

&lt;p&gt;The current docker way you already know is simple. If you want to connect to one of your running containers, you have to execute “&lt;strong&gt;docker ps&lt;/strong&gt;” command, listing all your (&lt;em&gt;running&lt;/em&gt;) containers informations.&lt;/p&gt;

&lt;p&gt;Next you have to execute “&lt;strong&gt;docker exec -it my_container bash&lt;/strong&gt;” command. This will connect you in your container to a bash session.&lt;/p&gt;

&lt;p&gt;Every time I use the “docker ps” command, I get a long and large table. Unreadable if your terminal is not with 6px font-size .. On my terminal it looks like this :&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://i.imgur.com/Dkc2VgY.png&quot; alt=&quot;docker ps command&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Not really easy to read. But because I hate loose my time and love to find funny’s solutions, I tried to develop a script that automatically get all containers available in “docker ps” command, only displaying “name” in a list option. I just have to select the right one with my keyboard, and it give me the good bash session, that’s all !&lt;/p&gt;

&lt;h2 id=&quot;docket--docker-in-your-pocket-&quot;&gt;Docket : docker in your pocket !&lt;/h2&gt;
&lt;p&gt;That’s why Docket is born : in a few lines of bash or ruby (&lt;em&gt;maybe one day it will be available in python too&lt;/em&gt;), job is done !&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;http://g.recordit.co/vN2zEXCrgw.gif&quot; alt=&quot;Recordit GIF&quot; /&gt;&lt;/p&gt;

&lt;p&gt;All of my mates that saw it on my computer just asked to use it, so maybe it will be useful to you too! Go on the &lt;a href=&quot;https://github.com/Pobb/docket&quot;&gt;GitHub project&lt;/a&gt; for setup instructions. You just have to download script (bash or ruby, as you want), and execute it. For more comfortable use, you can create an alias.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;small&gt;Originally published at &lt;a href=&quot;https://dev.to/pobb/docket-connect-to-your-docker-s-container-easily-10gc&quot; target=&quot;_blank&quot;&gt;Dev.to&lt;/a&gt;.&lt;/small&gt;&lt;/em&gt;&lt;/p&gt;</content><author><name></name></author><summary type="html">I'll introduce you today a tool helping you to connect to docker containers quickly and easily using CLI.</summary></entry><entry><title type="html">Invisible Captcha : how to avoid spam in Rails</title><link href="http://0.0.0.0:4000/gem-invisible-captcha/" rel="alternate" type="text/html" title="Invisible Captcha : how to avoid spam in Rails" /><published>2020-03-01T00:00:00-06:00</published><updated>2020-03-01T00:00:00-06:00</updated><id>http://0.0.0.0:4000/gem-invisible-captcha</id><content type="html" xml:base="http://0.0.0.0:4000/gem-invisible-captcha/">&lt;p class=&quot;intro&quot;&gt;&lt;span class=&quot;dropcap&quot;&gt;I&lt;/span&gt;f you got a public website and you got a form that can be edited from users (like a contact form for example), you will get spammed every day. How to deal with it ?&lt;/p&gt;

&lt;p&gt;Spambots become stronger day after day. When we dev a new form we have to deal with security to avoir injections, but sometimes we have to avoid with spam. Imagine you got a website with a contact form, how will you do to stop spambots ?&lt;/p&gt;

&lt;p&gt;There are man ways to do it, you can try to :&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;Ask a question to the user (example : Give me result for 4+4)&lt;/li&gt;
  &lt;li&gt;Use a captcha (like google captcha)&lt;/li&gt;
  &lt;li&gt;Disallow links in content form&lt;/li&gt;
  &lt;li&gt;Use a blacklist of words or adresses extension&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But all of these are not really good because of user experience (you stop the user in his way to complete the form asking a question or filling a captcha), or just because it’s hard to deal with a blacklist.&lt;/p&gt;

&lt;h4 id=&quot;honeypot-to-the-rescue-&quot;&gt;Honeypot to the rescue !&lt;/h4&gt;
&lt;p&gt;Another approach is to use the honeypot principle : add in your form an input that won’t be visible by the user, will have to stay empty, but bots will complete it. This is the simple first way, but it’s not suffisant.&lt;/p&gt;

&lt;p&gt;Bots test your website and to check if they complete your form, they are waiting for the response. So you have to catch them before submit (to block usual action), and give them a “200 response OK”.&lt;/p&gt;

&lt;h4 id=&quot;invisible-captchas-gem&quot;&gt;Invisible-captcha’s gem&lt;/h4&gt;
&lt;p&gt;In a Rails project, there is a gem to do it : &lt;a href=&quot;https://github.com/markets/invisible_captcha&quot; target=&quot;_blank&quot;&gt;invisible-captcha&lt;/a&gt; :&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-ruby&quot; data-lang=&quot;ruby&quot;&gt;&lt;span class=&quot;c1&quot;&gt;#Gemfile&lt;/span&gt;
&lt;span class=&quot;n&quot;&gt;gem&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'invisible_captcha'&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;#app/controller/contact_controller.rb&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;ContactController&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;ApplicationController&lt;/span&gt;
  &lt;span class=&quot;n&quot;&gt;invisible_captcha&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;only: &lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;ss&quot;&gt;:create&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;

  &lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;create&lt;/span&gt;
    &lt;span class=&quot;c1&quot;&gt;# check params&lt;/span&gt;
    &lt;span class=&quot;no&quot;&gt;Notification&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;my_contact_form&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;params&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;deliver&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;

&lt;span class=&quot;c1&quot;&gt;#app/views/contact/index.html.erb&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sx&quot;&gt;%= form_tag(envoyer_message_contact_index_path) do %&amp;gt;
  &amp;lt;%=&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;invisible_captcha&lt;/span&gt; &lt;span class=&quot;sx&quot;&gt;%&amp;gt;
  &amp;lt;%= text_field_tag &quot;name&quot;, nil, placeholder: &quot;Name&quot;, required: true %&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;sx&quot;&gt;%= text_field_tag &quot;email&quot;, nil, placeholder: &quot;Email&quot;, required: true %&amp;gt;
  #(...)
&amp;lt;% end %&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;You can choose to params this honeypot’s gem with many options, like custom the name of the field, choose what do to with callback etc.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;small&gt;Github &lt;a href=&quot;https://github.com/markets/invisible_captcha&quot; target=&quot;_blank&quot;&gt;invisible-captcha&lt;/a&gt;&lt;/small&gt;&lt;/em&gt;&lt;/p&gt;</content><author><name></name></author><summary type="html">If you got a public website and you got a form that can be edited from users (like a contact form for example), you will get spammed every day. How to deal with it ?</summary></entry><entry><title type="html">Draw.io : un outil pour réaliser des organigrammes et des diagrammes</title><link href="http://0.0.0.0:4000/draw-io-copie/" rel="alternate" type="text/html" title="Draw.io : un outil pour réaliser des organigrammes et des diagrammes" /><published>2017-01-09T00:00:00-06:00</published><updated>2017-01-09T00:00:00-06:00</updated><id>http://0.0.0.0:4000/draw-io%20copie</id><content type="html" xml:base="http://0.0.0.0:4000/draw-io-copie/">&lt;p class=&quot;intro&quot;&gt;&lt;span class=&quot;dropcap&quot;&gt;P&lt;/span&gt;our réaliser un schéma, un organigramme ou un diagramme, qu’il soit conséquent ou très petit, c’est parfois compliqué. Quel logiciel vais-je devoir télécharger, comment s’en sert-on, est-ce que le rendu visuel sera facilement exportable et surtout présentable ? &quot;Je veux juste faire une patate et un carré avec une flèche !&quot;&lt;/p&gt;

&lt;p&gt;Je cherchais donc un outil pour réaliser des diagrammes ou schémas un peu techniques en vue de pouvoir les “modifier” par la suite mais aussi les “présenter” à d’autres personnes (le tout sans contraintes de paiement ni d’inscription, et pourquoi pas une interface sympa et intuitive).&lt;/p&gt;

&lt;h4 id=&quot;drawio-à-la-rescousse-&quot;&gt;Draw.io à la rescousse !&lt;/h4&gt;
&lt;p&gt;En cherchant un peu sur la toile je suis tombé sur Draw.io qui m’a donné pleine satisfaction. Cet outil est disponible en ligne mais il existe également des applications que l’on peut installer dans son navigateur (Chrome). Nous ne l’avons pas testé mais il existe même un plugin WordPress pour intégrer l’outil au wysiwyg du CMS.&lt;/p&gt;

&lt;h4 id=&quot;une-interface-simple-et-intuitive-online--offline&quot;&gt;Une interface simple et intuitive (online &amp;amp; offline)&lt;/h4&gt;
&lt;p&gt;L’avantage premier est qu’il n’est pas nécessaire de s’inscrire. Ensuite il est tout à fait possible d’enregistrer son travail et de le modifier par la suite. Vous n’avez plus internet ? Pas de problème, téléchargez l’extension sur Chrome et vous pourrez le manipuler dans un écran comme une véritable application desktop.&lt;/p&gt;

&lt;figure&gt;
  &lt;img src=&quot;/assets/img/post-draw.png&quot; alt=&quot;&quot; /&gt; 
  &lt;figcaption&gt;Fig1. - Version online de l’outil Draw.io&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;p&gt;L’interface propose trois colonnes comme sur de nombreux logiciels de dessins avec au centre votre espace de travail, à gauche les outils mis à votre disposition et à droite des paramètres plus génériques. La prise en main a été rapide, nous ne sommes donc pas perdus ..&lt;/p&gt;

&lt;h4 id=&quot;une-palette-doutils-complète&quot;&gt;Une palette d’outils complète&lt;/h4&gt;
&lt;p&gt;La palette d’outils à gauche est assez longue mais il est facile de s’y repérer. Vous pourrez facilement y faire des diagrammes génériques mais aussi plus précis pour représenter de l’UML, des mockups (iOs, Android) ou encore des schémas réseaux. Bref il y a du choix.&lt;/p&gt;

&lt;p&gt;Un petit moteur de recherche vous permet même de regrouper l’ensemble des éléments disponibles pour votre recherche.&lt;/p&gt;

&lt;h4 id=&quot;sauvegarder-et-exporter-son-travail&quot;&gt;Sauvegarder et exporter son travail&lt;/h4&gt;
&lt;p&gt;La sauvegarde de vos données se fera en XML, cela vous aidera à réouvrir et modifier votre travail par la suite. Il est également possible d’extraire son travail en fichier image, en SVG, en HTML, en PDF.&lt;/p&gt;

&lt;p&gt;Pour le mode online, l’outil est compatible avec Google Drive, Dropbox et OneDrive, mais vous pourrez bien évidemment sauvegarder votre travail sur votre ordinateur.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;small&gt;Originally published at &lt;a href=&quot;https://www.sois-net.fr/draw-io-un-outil-pour-realiser-des-organigrammes-et-des-diagrammes/&quot; target=&quot;_blank&quot;&gt;Sois-net&lt;/a&gt;.&lt;/small&gt;&lt;/em&gt;&lt;/p&gt;</content><author><name></name></author><summary type="html">Pour réaliser un schéma, un organigramme ou un diagramme, qu’il soit conséquent ou très petit, c’est parfois compliqué. Quel logiciel vais-je devoir télécharger, comment s’en sert-on, est-ce que le rendu visuel sera facilement exportable et surtout présentable ? &quot;Je veux juste faire une patate et un carré avec une flèche !&quot;</summary></entry><entry><title type="html">A la découverte d’animate.css</title><link href="http://0.0.0.0:4000/animate-css/" rel="alternate" type="text/html" title="A la découverte d’animate.css" /><published>2016-11-29T00:00:00-06:00</published><updated>2016-11-29T00:00:00-06:00</updated><id>http://0.0.0.0:4000/animate-css</id><content type="html" xml:base="http://0.0.0.0:4000/animate-css/">&lt;p class=&quot;intro&quot;&gt;&lt;span class=&quot;dropcap&quot;&gt;A&lt;/span&gt;ujourd’hui petite présentation d’animate.css, une feuille de style CSS permettant d’animer des éléments de notre DOM, à l’aide des animations CSS3.&lt;/p&gt;

&lt;p&gt;Pour avoir un aperçu de ce que cela donne, rendez-vous sur le site officiel : &lt;a href=&quot;https://daneden.github.io/animate.css/&quot; target=&quot;_blank&quot;&gt;animate.css&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Au total on y retrouve plus de 70 animations différentes, il y a donc de quoi faire !&lt;/p&gt;

&lt;p&gt;Techniquement il ne s’agit ni plus ni moins que d’une feuille de style CSS (avec des propriétés CSS3) à charger. Ensuite on appelle la classe “animated” sur un élément, puis la classe portant le nom de l’animation désirée.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;h1&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;animated bounce&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;Example&lt;span class=&quot;nt&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Vous pouvez également jouer avec vos animations en personnalisant la “duration”, le “delay” et l’“iteration” le tout en CSS :&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span class=&quot;nf&quot;&gt;#yourElement&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;py&quot;&gt;-vendor-animation-duration&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;3s&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;py&quot;&gt;-vendor-animation-delay&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;2s&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;py&quot;&gt;-vendor-animation-iteration-count&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;infinite&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Pour jouer une animation lors d’un événement, il est tout à fait possible de la déclencher avec un peu de javascript. Il est également possible de détecter en javascript la “fin” d’une animation, très pratique donc pour supprimer notamment les classes que l’on vient d’ajouter pour permettre de ré-exécuter notre animation ensuite.&lt;/p&gt;

&lt;p&gt;Ce fichier nous permettra de gagner du temps à réaliser des animations CSS3 basiques que l’on pourra appliquer par exemple sur des formulaires, des slideshows ou pour donner un effet lors de l’affichage d’un contenu au scroll etc. Attention toutefois de ne pas en abuser et d’utiliser les animations à bon escient …&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;small&gt;Originally published at &lt;a href=&quot;https://www.sois-net.fr/a-la-decouverte-danimate-css/&quot; target=&quot;_blank&quot;&gt;Sois-net&lt;/a&gt;.&lt;/small&gt;&lt;/em&gt;&lt;/p&gt;</content><author><name></name></author><summary type="html">Aujourd’hui petite présentation d’animate.css, une feuille de style CSS permettant d’animer des éléments de notre DOM, à l’aide des animations CSS3.</summary></entry><entry><title type="html">Rails : bien préparer sa BDD pour stocker des Emoji</title><link href="http://0.0.0.0:4000/rails-bdd-utf8mb4/" rel="alternate" type="text/html" title="Rails : bien préparer sa BDD pour stocker des Emoji" /><published>2016-10-17T00:00:00-05:00</published><updated>2016-10-17T00:00:00-05:00</updated><id>http://0.0.0.0:4000/rails-bdd-utf8mb4</id><content type="html" xml:base="http://0.0.0.0:4000/rails-bdd-utf8mb4/">&lt;p class=&quot;intro&quot;&gt;&lt;span class=&quot;dropcap&quot;&gt;D&lt;/span&gt;dans cet article début d’approche sur la problématique pour stocker des &quot;Emoji&quot; en BDD&lt;/p&gt;

&lt;p&gt;Effectivement on pense que cela ne sert à rien de les utiliser mais le problème avec ces icônes est qu’ils sont disponibles nativement sur la plupart des claviers mobiles désormais, et donc … peuvent se retrouver dans le moteur de n’importe quel formulaire de votre site. Si vous ne gérez pas ce cas particulier, cela peut engendrer des erreurs.&lt;/p&gt;

&lt;h4 id=&quot;la-fausse-piste-serialize&quot;&gt;La fausse piste “serialize”&lt;/h4&gt;
&lt;p&gt;Certains optent pour la solution un peu brute et pas forcément de bonne augure de spécifier dans un model que tel champ est à “serializer” (je suis moi aussi un peu tombé dedans ^^)&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-ruby&quot; data-lang=&quot;ruby&quot;&gt;&lt;span class=&quot;k&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;MonModel&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;ActiveRecord&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;::&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;Base&lt;/span&gt;
  &lt;span class=&quot;n&quot;&gt;serialize&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:mon_champ&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Alors effectivement ça “marche” mais allez jeter un oeil en BDD et cela vous enchantera moins (d’autant plus qu’il sera difficile de requêter sur ce genre de données avec des conditions par exemple).&lt;/p&gt;

&lt;p&gt;Serialize sert avant tout à nous aider à sauvegarder des données en tant qu’objet (au passage, en YAML). Passons donc cette alternative.&lt;/p&gt;

&lt;h4 id=&quot;un-problème-dencodage-avant-tout&quot;&gt;Un problème d’encodage avant tout&lt;/h4&gt;
&lt;p&gt;Le problème avec les encodages classiques en &lt;strong&gt;utf8&lt;/strong&gt; est que ce dernier utilise au maximum 3 octets par caractère. Les Emoji en nécessitent 4 ! Depuis la version MySQL 5.5.3, l’encodage &lt;strong&gt;utf8mb4&lt;/strong&gt; permet de manipuler tous les caractères unicodes de 4 octets (comprenant donc nos fameux emojis).&lt;/p&gt;

&lt;p&gt;L’avantage est qu’il suffit de configurer notre BDD pour lui dire d’utiliser cet encodage précis. Attention toutefois, il vous faut MySQL &amp;gt;= 5.5.3.&lt;/p&gt;

&lt;h4 id=&quot;création-et-configuration-de-notre-projet-rails&quot;&gt;Création et configuration de notre projet Rails&lt;/h4&gt;
&lt;p&gt;Nous allons dans un premier temps créer un projet Rails et le configurer pour mettre par défaut ce nouvel encodage (nous reviendrons dans un autre article sur la manière de procéder pour mettre à jour des colonnes sans perte de données sur un projet existant).&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-console&quot; data-lang=&quot;console&quot;&gt;&lt;span class=&quot;gp&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;Necessite rails &lt;span class=&quot;o&quot;&gt;&amp;gt;=&lt;/span&gt; 4 et surtout MySQL &lt;span class=&quot;o&quot;&gt;&amp;gt;=&lt;/span&gt; 5.5.3
&lt;span class=&quot;go&quot;&gt;rails new mon_projet -d mysql&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-yaml&quot; data-lang=&quot;yaml&quot;&gt;&lt;span class=&quot;c1&quot;&gt;# On modifie notre database.yml&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;# ...&lt;/span&gt;
&lt;span class=&quot;na&quot;&gt;adapter&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;mysql2&lt;/span&gt;
&lt;span class=&quot;na&quot;&gt;encoding&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;utf8mb4&lt;/span&gt;
&lt;span class=&quot;na&quot;&gt;charset&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;utf8mb4&lt;/span&gt;
&lt;span class=&quot;na&quot;&gt;collation&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;utf8mb4_unicode_ci&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;# ...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-ruby&quot; data-lang=&quot;ruby&quot;&gt;&lt;span class=&quot;c1&quot;&gt;# On créer un fichier dans config/initializers/utf8mb4&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;require&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;'active_record/connection_adapters/abstract_mysql_adapter'&lt;/span&gt;

&lt;span class=&quot;k&quot;&gt;module&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;ActiveRecord&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;module&lt;/span&gt; &lt;span class=&quot;nn&quot;&gt;ConnectionAdapters&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;AbstractMysqlAdapter&lt;/span&gt;
      &lt;span class=&quot;no&quot;&gt;NATIVE_DATABASE_TYPES&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;ss&quot;&gt;:string&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:name&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;varchar&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:limit&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;191&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Comme vous pouvez le constater, on précise ici une limite de &lt;strong&gt;191&lt;/strong&gt; pour nos types “varchar”. Habituellement on est sur du &lt;strong&gt;255&lt;/strong&gt;. En utf8 la taille maximum de l’index est de 767 octets, donc on a 767 / 3 octets par caractère = 255 caractères max pour l’utf8 habituel, et pour l’utf8mb4 on obtient 767 / 4 octets par caractère = 191 caractères max.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-console&quot; data-lang=&quot;console&quot;&gt;&lt;span class=&quot;gp&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;On créer notre BDD
&lt;span class=&quot;go&quot;&gt;rails db:create
rails db:migrate

&lt;/span&gt;&lt;span class=&quot;gp&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;On créer un objet de &lt;span class=&quot;nb&quot;&gt;test&lt;/span&gt;
&lt;span class=&quot;go&quot;&gt;rails generate scaffold articles titre contenu:text&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Lancez votre projet et rendez-vous sur la page de création d’un article, placez-y un titre et du texte avec un emoji dans chaque champ. Vous n’aurez pas de problème lors de la sauvegarde en BDD&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Sources : &lt;a href=&quot;https://dev.mysql.com/doc/refman/5.5/en/charset-unicode-utf8mb4.html&quot; target=&quot;_blank&quot;&gt;Documentation MySQL utf8mb4&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;small&gt;Originally published at &lt;a href=&quot;https://www.sois-net.fr/rails-bien-preparer-sa-bdd-pour-stocker-des-emoji/&quot; target=&quot;_blank&quot;&gt;Sois-net&lt;/a&gt;.&lt;/small&gt;&lt;/em&gt;&lt;/p&gt;</content><author><name></name></author><summary type="html">Ddans cet article début d’approche sur la problématique pour stocker des &quot;Emoji&quot; en BDD</summary></entry><entry><title type="html">Sublime Text : la sélection d’un mot ponctué en un seul clic</title><link href="http://0.0.0.0:4000/sublime-select-mot/" rel="alternate" type="text/html" title="Sublime Text : la sélection d’un mot ponctué en un seul clic" /><published>2016-08-24T00:00:00-05:00</published><updated>2016-08-24T00:00:00-05:00</updated><id>http://0.0.0.0:4000/sublime-select-mot</id><content type="html" xml:base="http://0.0.0.0:4000/sublime-select-mot/">&lt;p class=&quot;intro&quot;&gt;&lt;span class=&quot;dropcap&quot;&gt;V&lt;/span&gt;oici une petite astuce sur l’éditeur Sublime Text pour sélectionner un mot (une variable, une fonction etc.) en double cliquant dessus même si celui-ci contient une ponctuation. Exemples :&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-ruby&quot; data-lang=&quot;ruby&quot;&gt;&lt;span class=&quot;c1&quot;&gt;# ruby&lt;/span&gt;
&lt;span class=&quot;n&quot;&gt;variable&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;empty?&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span class=&quot;c&quot;&gt;&amp;lt;!-- html --&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;p&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;txt-center&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;Hello world !&lt;span class=&quot;nt&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Faites le test sur votre Sublime Text, si vous effectuez un double-clic pour sélectionner “empty?” dans le code Ruby, ou pour sélectionner “txt-center” en entier sur le code HTML, seuls “empty” et “txt” le seront.&lt;/p&gt;

&lt;p&gt;Il suffit d’ajouter des propriétés au moteur de syntaxe chargé par Sublime Text. Par exemple si j’ouvre un fichier .rb la syntaxe Sublime chargée est “Ruby” etc.&lt;/p&gt;

&lt;p&gt;Ouvrez un fichier ruby (.rb) puis aller dans “&lt;strong&gt;Preferences &amp;gt; Settings – More &amp;gt; Syntax Specific – User&lt;/strong&gt;” et ajoutez-y le code suivant :&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;w&quot;&gt;
  &lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;&quot;word_separators&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;./&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\\&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;()&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;'-:,.;&amp;lt;&amp;gt;~@#$%^&amp;amp;*|+=[]{}`~&quot;&lt;/span&gt;&lt;span class=&quot;w&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Dans le cas de notre exemple avec la classe “txt-center”, ouvrons désormais un fichier html ou html.erb dans Sublime Text puis aller dans “&lt;strong&gt;Preferences &amp;gt; Settings – More &amp;gt; Syntax Specific – User&lt;/strong&gt;” et on y ajoute le même code en retirant le “tiret” de l’expression pour qu’elle puisse être matchée :&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;w&quot;&gt;
  &lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;&quot;word_separators&quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;./&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\\&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;()&lt;/span&gt;&lt;span class=&quot;se&quot;&gt;\&quot;&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;':,.;&amp;lt;&amp;gt;~@#$%^&amp;amp;*|+=[]{}`~&quot;&lt;/span&gt;&lt;span class=&quot;w&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Et voilà le tour est joué ! Faites et adaptez cette manipulation sur toutes les syntaxes/extensions de fichiers Sublime souhaités.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;small&gt;Originally published at &lt;a href=&quot;https://www.sois-net.fr/sublime-text-la-selection-dun-mot-ponctue-en-un-seul-clic/&quot; target=&quot;_blank&quot;&gt;Sois-net&lt;/a&gt;.&lt;/small&gt;&lt;/em&gt;&lt;/p&gt;</content><author><name></name></author><summary type="html">Voici une petite astuce sur l’éditeur Sublime Text pour sélectionner un mot (une variable, une fonction etc.) en double cliquant dessus même si celui-ci contient une ponctuation. Exemples :</summary></entry><entry><title type="html">Rails : Problème d’index trop long sur une migration ?</title><link href="http://0.0.0.0:4000/rails-migration-nom-long/" rel="alternate" type="text/html" title="Rails : Problème d’index trop long sur une migration ?" /><published>2016-05-04T00:00:00-05:00</published><updated>2016-05-04T00:00:00-05:00</updated><id>http://0.0.0.0:4000/rails-migration-nom-long</id><content type="html" xml:base="http://0.0.0.0:4000/rails-migration-nom-long/">&lt;p class=&quot;intro&quot;&gt;&lt;span class=&quot;dropcap&quot;&gt;E&lt;/span&gt;n voulant créer une table de liaison entre deux autres dans un projet, nous avons rencontré un problème avec les index. Petit récap :&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-ruby&quot; data-lang=&quot;ruby&quot;&gt;&lt;span class=&quot;k&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;CreateCategorieCritereCategorieProduit&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;ActiveRecord&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;::&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;Migration&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;change&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;create_table&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:categorie_criteres_categorie_produits&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;id: &lt;/span&gt;&lt;span class=&quot;kp&quot;&gt;false&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;do&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;|&lt;/span&gt;
      &lt;span class=&quot;n&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;belongs_to&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:categorie_critere&lt;/span&gt;
      &lt;span class=&quot;n&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;belongs_to&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:categorie_produit&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;add_index&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:categorie_criteres_categorie_produits&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:categorie_critere_id&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;
    add_index :categorie_criteres_categorie_produits, :categorie_produit_id&quot;&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;En faisant un petit rake db:migrate qui va bien, on obtenait ceci :&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-console&quot; data-lang=&quot;console&quot;&gt;&lt;span class=&quot;go&quot;&gt;==  CreateCategorieCritereCategorieProduit: migrating =========================
&lt;/span&gt;&lt;span class=&quot;gp&quot;&gt;-- create_table(:categorie_criteres_categorie_produits, {:id=&amp;gt;&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;})&lt;/span&gt;
&lt;span class=&quot;go&quot;&gt;rake aborted!
StandardError: An error has occurred, all later migrations canceled:

&lt;/span&gt;&lt;span class=&quot;gp&quot;&gt;Index name 'index_categorie_criteres_categorie_produits_on_categorie_critere_id' on table 'categorie_criteres_categorie_produits' is too long;&lt;/span&gt;&lt;span class=&quot;w&quot;&gt; &lt;/span&gt;the limit is 64 characters&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Le problème vient du fait qu’en voulant respecter la convention Rails sur le bon nomage de notre table de liaison on se retrouve avec un index ayant un nom très long de 68 caractères. Or la limite autorisé par notre BDD est de 64. Pour contrer cela, on peut forcer un nom d’index différent en le précisant à la fin de notre migration comme ci-dessous :&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-ruby&quot; data-lang=&quot;ruby&quot;&gt;&lt;span class=&quot;k&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;CreateCategorieCritereCategorieProduit&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;ActiveRecord&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;::&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;Migration&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;change&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;create_table&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:categorie_criteres_categorie_produits&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;id: &lt;/span&gt;&lt;span class=&quot;kp&quot;&gt;false&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;do&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;|&lt;/span&gt;
      &lt;span class=&quot;n&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;belongs_to&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:categorie_critere&lt;/span&gt;
      &lt;span class=&quot;n&quot;&gt;t&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;belongs_to&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:categorie_produit&lt;/span&gt;
    &lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;add_index&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:categorie_criteres_categorie_produits&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:categorie_critere_id&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;name: &lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;cat_crit_id&quot;&lt;/span&gt;
    &lt;span class=&quot;n&quot;&gt;add_index&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:categorie_criteres_categorie_produits&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:categorie_produit_id&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;name: &lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;cat_prod_id&quot;&lt;/span&gt;
  &lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Et voilà !&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;small&gt;Originally published at &lt;a href=&quot;https://www.sois-net.fr/rails-probleme-dindex-trop-long-sur-une-migration/&quot; target=&quot;_blank&quot;&gt;Sois-net&lt;/a&gt;.&lt;/small&gt;&lt;/em&gt;&lt;/p&gt;</content><author><name></name></author><summary type="html">En voulant créer une table de liaison entre deux autres dans un projet, nous avons rencontré un problème avec les index. Petit récap :</summary></entry></feed>