<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Anderson Mamede | Blog</title>
    <description>A web development blog</description>
    <link>https://blog.andersonmamede.com.br/</link>
    <atom:link href="https://blog.andersonmamede.com.br/feed.xml" rel="self" type="application/rss+xml"/>
    <pubDate>Fri, 31 May 2024 16:44:57 +0000</pubDate>
    <lastBuildDate>Fri, 31 May 2024 16:44:57 +0000</lastBuildDate>
    <generator>Jekyll v3.9.5</generator>
    
      <item>
        <title>Creating an extension - Part 1: Quick start with Boilerplate</title>
        <description>&lt;p&gt;This is the first part of the two-post series where I’ll show how to create a WebExtension for Chrome and Firefox which shows for how long a page has been opened:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;In this first part I’ll show how to &lt;strong&gt;quickly create a new extension&lt;/strong&gt;;&lt;/li&gt; &lt;li&gt;In the second part I’ll show how to &lt;strong&gt;code a WebExtension&lt;/strong&gt; to show the elapsed time;&lt;/li&gt; &lt;/ul&gt; &lt;h1 id=&quot;creating-a-new-extension&quot;&gt;Creating a new extension&lt;/h1&gt; &lt;p&gt;Creating a new &lt;a href=&quot;https://developer.mozilla.org/en-US/Add-ons/WebExtensions&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;WebExtension&lt;/a&gt; is simple. The minimum for the browser to recognize a WebExtension is a file called &lt;a href=&quot;https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;manifest.json&lt;/a&gt;. That’s where the most important settings are...</description>
        <link>https://blog.andersonmamede.com.br/creating-an-extension-part-1-quick-start-with-boilerplate/</link>
        <guid isPermaLink="true">https://blog.andersonmamede.com.br/creating-an-extension-part-1-quick-start-with-boilerplate/</guid>
        
        <category>boilerplate</category>
        
        <category>extension</category>
        
        <category>github</category>
        
        <category>personal project</category>
        
        
      </item>
    
      <item>
        <title>Changing or hiding a grid column when exporting to XLS or PDF [Scriptcase]</title>
        <description>&lt;p&gt;A while ago I created a grid application using &lt;a href=&quot;https://blog.andersonmamede.com.br/tags/#scriptcase&quot; target=&quot;_blank&quot;&gt;ScriptCase&lt;/a&gt; to list all not-completed orders, and because each order could have different status, I added a &lt;strong&gt;column to show an image/icon&lt;/strong&gt; based on its status:&lt;/p&gt; &lt;p&gt;&lt;img src=&quot;https://blog.andersonmamede.com.br/images/scriptcase-grid-with-images-icons.png&quot; alt=&quot;ScriptCase - Grid application with images/icons&quot; /&gt;&lt;/p&gt; &lt;p&gt;In the &lt;a href=&quot;http://www.scriptcase.net/docs/en_us/v9/manual/06-applications/02-grid-application/17-grid-events/index.html#onrecord&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;onRecord&lt;/a&gt; event I checked the status and set the content of that column - an IMG tag, i.e., plain HTML - and everything worked fine, except when exporting that grid to XLS (or PDF).&lt;/p&gt; &lt;p&gt;&lt;strong&gt;When exported to XLS&lt;/strong&gt; using &lt;a href=&quot;http://www.scriptcase.net/docs/en_us/v9/manual/06-applications/02-grid-application/06-export-settings/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;ScriptCase’s exporting option&lt;/a&gt;, the status column &lt;strong&gt;showed...</description>
        <link>https://blog.andersonmamede.com.br/changing-or-hiding-grid-column-when-exporting-to-xls-or-pdf-scriptcase/</link>
        <guid isPermaLink="true">https://blog.andersonmamede.com.br/changing-or-hiding-grid-column-when-exporting-to-xls-or-pdf-scriptcase/</guid>
        
        <category>scriptcase</category>
        
        
      </item>
    
      <item>
        <title>Breadcrumbs and schema markup</title>
        <description>&lt;h2 id=&quot;breadcrumbs&quot;&gt;Breadcrumbs&lt;/h2&gt; &lt;p&gt;In digital scenario, &lt;a href=&quot;https://developers.google.com/search/docs/data-types/breadcrumbs&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;breadcrumbs&lt;/a&gt; are structural navigation systems used in user interfaces to provide users with a way to locate themselves within the structure of a website. &lt;strong&gt;Breadcrumbs&lt;/strong&gt; show the traveled path by the user and/or the depth where he’s in.&lt;/p&gt; &lt;p&gt;&lt;img src=&quot;https://blog.andersonmamede.com.br/images/breadcrumbs-page-example.png&quot; alt=&quot;Example of breadcrumbs in a website&quot; /&gt;&lt;/p&gt; &lt;p&gt;For usability, &lt;strong&gt;breadcrumbs&lt;/strong&gt; will:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;stimulate users interest and curiosity&lt;/li&gt; &lt;li&gt;reduce the number of actions necessary to go to parent pages&lt;/li&gt; &lt;li&gt;improve the findability of pages and sections&lt;/li&gt; &lt;li&gt;direct users around your site&lt;/li&gt; &lt;li&gt;show website hierarchy &lt;br /&gt;&lt;/li&gt; &lt;/ul&gt; &lt;h2 id=&quot;breadcrumbs-serps-and-seo&quot;&gt;Breadcrumbs, SERPs and SEO&lt;/h2&gt; &lt;p&gt;Breadcrumbs...</description>
        <link>https://blog.andersonmamede.com.br/breadcrumbs-and-schema-markup/</link>
        <guid isPermaLink="true">https://blog.andersonmamede.com.br/breadcrumbs-and-schema-markup/</guid>
        
        <category>ui-ux</category>
        
        <category>html</category>
        
        <category>schema.org</category>
        
        
      </item>
    
      <item>
        <title>ScriptCase 9 Macro Documentation</title>
        <description>&lt;section&gt; &lt;h2&gt;SQL&lt;/h2&gt; &lt;div class=&quot;macro-box&quot;&gt; &lt;h3 id=&quot;sc_begin_trans&quot;&gt;sc_begin_trans&lt;/h3&gt; &lt;p&gt;This macro starts a set of transations in the database.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;macro-box&quot;&gt; &lt;h3 id=&quot;sc_change_connection&quot;&gt;sc_change_connection&lt;/h3&gt; &lt;p&gt;This macro dynamically change the application connections.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;macro-box&quot;&gt; &lt;h3 id=&quot;sc_commit_trans&quot;&gt;sc_commit_trans&lt;/h3&gt; &lt;p&gt;This macro effective a set of transations in the database.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;macro-box&quot;&gt; &lt;h3 id=&quot;sc_concat&quot;&gt;sc_concat&lt;/h3&gt; &lt;p&gt;With this macro you can concat fields on select for every database.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;macro-box&quot;&gt; &lt;h3 id=&quot;sc_connection_edit&quot;&gt;sc_connection_edit&lt;/h3&gt; &lt;p&gt;This macro edits an existing connection at runtime.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;macro-box&quot;&gt; &lt;h3 id=&quot;sc_connection_new&quot;&gt;sc_connection_new&lt;/h3&gt; &lt;p&gt;This macro creates new connections dinamically.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;macro-box&quot;&gt; &lt;h3 id=&quot;sc_error_continue&quot;&gt;sc_error_continue&lt;/h3&gt; &lt;p&gt;This macro deactivates the Scriptcase standard database error treatment message for...</description>
        <link>https://blog.andersonmamede.com.br/scriptcase-9-macro-documentation/</link>
        <guid isPermaLink="true">https://blog.andersonmamede.com.br/scriptcase-9-macro-documentation/</guid>
        
        <category>scriptcase</category>
        
        
      </item>
    
      <item>
        <title>How to show notifications outside the browser</title>
        <description>&lt;p&gt;HTML5 and its JavaScript APIs are not so new, and yet there are features not very well-known, which is the case with &lt;strong&gt;Web Notifications&lt;/strong&gt;.&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/notification&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Web Notifications&lt;/a&gt; is a JavaScript API which can &lt;strong&gt;show messages (notifications)&lt;/strong&gt; to users. It is very useful for notifying users when something happens in a web system/page, e.g., a new message arrives, a new order is completed, a long process is ready, a user must take care as soon as possible of any new information submitted by other users.&lt;/p&gt; &lt;p&gt;As long as the browser is open, the notification is usually displayed on the...</description>
        <link>https://blog.andersonmamede.com.br/how-to-show-notifications-outside-the-browser/</link>
        <guid isPermaLink="true">https://blog.andersonmamede.com.br/how-to-show-notifications-outside-the-browser/</guid>
        
        <category>javascript</category>
        
        
      </item>
    
      <item>
        <title>PHP session - Behind the scenes</title>
        <description>&lt;p&gt;Have you ever wondered what is happening internally when you use PHP session? Or how and where data are kept when navigating through different pages?&lt;/p&gt; &lt;p&gt;In this article you will learn &lt;strong&gt;how PHP manages sessions and what is happening behind the scenes&lt;/strong&gt;. &lt;br /&gt;&lt;br /&gt;&lt;/p&gt; &lt;h2 id=&quot;but-first-what-is-php-session&quot;&gt;But first, what is PHP session?&lt;/h2&gt; &lt;p&gt;&lt;a href=&quot;http://php.net/sessions&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;PHP session&lt;/a&gt; is a way to &lt;strong&gt;persist data&lt;/strong&gt; across subsequent accesses and/or multiple pages. &lt;strong&gt;Differently from cookies&lt;/strong&gt;, session data are &lt;strong&gt;stored in the server&lt;/strong&gt; and can’t be directly manipulated by the user.&lt;/p&gt; &lt;p&gt;Its &lt;strong&gt;basic usage is quite simple&lt;/strong&gt;: you just have to start a session...</description>
        <link>https://blog.andersonmamede.com.br/php-session-behind-the-scenes/</link>
        <guid isPermaLink="true">https://blog.andersonmamede.com.br/php-session-behind-the-scenes/</guid>
        
        <category>php</category>
        
        <category>session</category>
        
        
      </item>
    
      <item>
        <title>File upload using AJAX (+jQuery)</title>
        <description>&lt;h2 id=&quot;a-bit-of-history&quot;&gt;A bit of history&lt;/h2&gt; &lt;p&gt;In the early years, there was no way to &lt;strong&gt;upload files using AJAX/JavaScript&lt;/strong&gt; that would work in the &lt;strong&gt;most recent browsers&lt;/strong&gt; without having to write different code for specific browsers.&lt;/p&gt; &lt;p&gt;One of the most common ways to simulate upload using AJAX was to submit a form to another page which would make some validations and then save the file in the right folder or in database. Another option was to use something that worked as an intermediary between the browser and the server; some plugins (e.g. jQuery Uploadify) used to use Flash back then. &lt;br...</description>
        <link>https://blog.andersonmamede.com.br/file-upload-using-ajax-jquery/</link>
        <guid isPermaLink="true">https://blog.andersonmamede.com.br/file-upload-using-ajax-jquery/</guid>
        
        <category>javascript</category>
        
        
      </item>
    
      <item>
        <title>How to check if CAPTCHA is valid (in ScriptCase)</title>
        <description>&lt;p&gt;Some time ago I had to implement &lt;a href=&quot;http://www.scriptcase.net/tutorials/using-the-captcha-form-login/&quot; target=&quot;_blank&quot;&gt;&lt;strong&gt;CAPTCHA&lt;/strong&gt;&lt;/a&gt; in a Control application in &lt;strong&gt;ScriptCase&lt;/strong&gt;. I didn’t have trouble implementating it, as it’s very simple:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;menu “Control”&lt;/li&gt; &lt;li&gt;section “Security”&lt;/li&gt; &lt;li&gt;option “Use captcha” should be “Yes”&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;But I also had to &lt;strong&gt;control (log) all access attempts&lt;/strong&gt;, and to do that I had to know what exactly was wrong with the access attempt. It could be that the fields were not correctly filled in (e.g. empty fields), or that the user supplied an invalid CAPTCHA. And it’s this second case, invalid CAPTCHA, that &lt;strong&gt;I had to keep track&lt;/strong&gt;.&lt;/p&gt; &lt;p&gt;In...</description>
        <link>https://blog.andersonmamede.com.br/how-to-check-if-captcha-is-valid-in-scriptcase/</link>
        <guid isPermaLink="true">https://blog.andersonmamede.com.br/how-to-check-if-captcha-is-valid-in-scriptcase/</guid>
        
        <category>scriptcase</category>
        
        
      </item>
    
      <item>
        <title>Improving productivity in ScriptCase environment</title>
        <description>&lt;blockquote&gt; &lt;p&gt;The most efficient web development environment.&lt;br /&gt; Create your web solutions in a fast and innovative way, reducing the development time in up to 80%.&lt;/p&gt; &lt;/blockquote&gt; &lt;p&gt;That is how its own &lt;a href=&quot;http://www.scriptcase.net/&quot; target=&quot;_blank&quot;&gt;official page&lt;/a&gt; describes &lt;strong&gt;ScriptCase&lt;/strong&gt;, a &lt;a href=&quot;https://en.wikipedia.org/wiki/Rapid_application_development&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Rapid Application Development&lt;/a&gt; (RAD) platform written in PHP.&lt;/p&gt; &lt;p&gt;In spite of having some (many) problems, &lt;strong&gt;ScriptCase&lt;/strong&gt; sufficiently fulfills what it’s up to: a tool to create &lt;strong&gt;web applications&lt;/strong&gt; using PHP and JavaScript, integrating multiple different databases (e.g. MySQL, SQL Server, PostgreSQL) in a very fast way and providing utilities like forms, grids, searches, reports, charts, internacionalization, export data...</description>
        <link>https://blog.andersonmamede.com.br/improving-productivity-in-scriptcase-environment/</link>
        <guid isPermaLink="true">https://blog.andersonmamede.com.br/improving-productivity-in-scriptcase-environment/</guid>
        
        <category>scriptcase</category>
        
        <category>productivity</category>
        
        <category>extension</category>
        
        <category>github</category>
        
        <category>personal project</category>
        
        
      </item>
    
      <item>
        <title>Image preview before upload</title>
        <description>&lt;p&gt;Showing preview of files before uploading them to a server, specially for images, is a really interesting functionality for users and is quite simple to implement.&lt;/p&gt; &lt;p&gt;It’s possible to show preview even on heavily AJAX-based web pages/applications, as the preview can be done with &lt;strong&gt;JavaScript and it does not rely on server processing&lt;/strong&gt;. If this is your case (web pages/application AJAX-based) you can also &lt;a href=&quot;https://blog.andersonmamede.com.br/file-upload-using-ajax-jquery/&quot; target=&quot;_blank&quot;&gt;upload your files with AJAX&lt;/a&gt;. &lt;br /&gt;&lt;br /&gt;&lt;/p&gt; &lt;p&gt;Here I’ll show you how to implement image preview with JavaScript by following these steps:&lt;/p&gt; &lt;p&gt;&lt;strong&gt;1&lt;/strong&gt; - Detect when user selects a file using the &lt;strong&gt;onchange&lt;/strong&gt;...</description>
        <link>https://blog.andersonmamede.com.br/image-preview-before-upload/</link>
        <guid isPermaLink="true">https://blog.andersonmamede.com.br/image-preview-before-upload/</guid>
        
        <category>javascript</category>
        
        <category>ui-ux</category>
        
        
      </item>
    
  </channel>
</rss>
