Vincent Morneau Blog

javascript

NEW Pinch and Zoom (like Instagram)

A few weeks ago I published a blog post Pinch and Zoom like Instagram. Turns out I didn't properly test on iOS and the effect was flaky. Here is simpler and more efficient solution using only native JavaScript, no library involved like Hammer.js in my first blog post. Try

orclapex

Rich animations for your APEX app

Very soon, a project that I've been working on over the past 2 years will go LIVE. It's a very special APEX app designed entirely for public use. That means anyone in the world will be able to use it. For free. No login required! The demographics that will use

orclapex

Fetch API for Oracle APEX - Part 3: Security SIMPLIFIED

Fetch API series: Part 1: Basic UsagePart 2: Securing EndpointsPart 3: Security SIMPLIFIEDIn my last blog post, I explained how to make the Fetch API work against an APEX session using OAuth. I was quite proud of the solution, but turns out there is a better way. Instead of using

orclapex

Fetch API for Oracle APEX - Part 2: Securing Endpoints

Fetch API series: Part 1: Basic UsagePart 2: Securing EndpointsPart 3: Security SIMPLIFIEDThis is a follow-up to my previous blog post: Using the Fetch API in Oracle APEX. In that post, I explained how to fetch data from an ORDS endpoint and display it as a regular APEX template (example

orclapex

Fetch API for Oracle APEX - Part 1: Basic Usage

Fetch API series: Part 1: Basic UsagePart 2: Securing EndpointsPart 3: Security SIMPLIFIEDFetch is a JavaScript API native to all browsers that allows you to make a request to a URL. That request returns a response, which you can then use any way you want. Without passing any option to

orclapex

Pinch and Zoom like Instagram

As you scroll down Instagram or any other social media on your phone, you browse through countless pictures. Some of them are interesting enough that you want to look closer, given the size of the small screen. It's become intuitive for most people to "pinch" an image to activate a

orclapex

APEX as a PWA: The Complete Guide

Covered Features Installing the APEX app on a mobile device Making the APEX app available offline Syncing offline requests when getting back online Sending push notifications Documentation Part 1: Introducing Progressive Web Apps Part 2: Setup and Development Tips Part 3: JavaScript Recap Part 4: Installing an APEX App into

orclapex

How to Avoid a JavaScript Mess

At Kscope18, I presented How to Avoid a JavaScript Mess at the #LetsWreckThisTogether talks. Here it is, turned into a blog post. We all want to write clean code. I was attending Mike Hichwa's session at Kscope18's Sunday symposium, and he revealed numbers about language usage within the frameworks we

orclapex

Using Font Awesome 5 Pro

It's inevitable that APEX will update the icon libraries in the next release. I expect these two: - From Font Awesome 4 to Font Awesome 5 Free - From Font APEX to Font APEX HD Because APEX is pretty much redistributing Font Awesome, it has to use the free version.

orclapex

Alternative Look for Disabled Buttons

Recently I was told that the disabled buttons in our Universal Theme application were not... disabled enough. And I have to agree in a way. If that button was the only button visible on the page, it could be seen as the application's default color scheme. So we added some

orclapex

Why you should change the FONT of your code editor

I recently changed the default font of my code editor and I love it. I now use Fira Code, which is a monospaced font with programming ligatures. If you're not familiar with programming ligatures, it essentially groups multiple characters (like <= or ===) into one, and the result is pretty neat.

Material APEX Part 3: Colors & Styling

As more and more people adopt Material APEX, I am often asked "how do you change the colors?" and other styling related questions. It's actually pretty simple because it's no different than Universal Theme. There are 4 ways to utilize a theme native styling options. Let's break it

orclapex

Material APEX Part 4: 2018 Status & Statement of Direction

When APEX 5.2 is going to be released, here's how Material APEX will be affected. We will continue to support Material APEX for critical bug fixes, under the current v0.12.x branch (APEX 5.1 compatible) All further development (enhancements and new features) will be done in the

orclapex

Animate your APEX application

A few weeks ago I released a very simple dynamic action plugin: AnimAPEX. It consists of 75+ animations that you can apply to any APEX component. Want to shake an input when the password is wrong? Want to flash a report that has been refreshed? Want to spin a button

orclapex

The best alternative to Universal Theme

Material APEX just got updated earlier this week to v0.12.0. If you haven't heard about it, it is a complete alternative solution to Universal Theme. And it is free! Material APEX has been around for more than two years now and it's being used widely accross the APEX

orclapex

JavaScript async/await in APEX

The following technique will change the way we write JavaScript very soon. If you're into JavaScript, you're gonna want to understand async/await. Prerequisites JavaScript Promises were introduced to solve many JavaScript problems such as the callback hell. async/await builds on top of Promises to provide an easier handling

css

Atom: Select Variables Faster

Some languages like HTML and CSS have syntactical standards promoting the use of the hyphen/dash symbol (-). Let's consider a variable l_my_variable in PL/SQL. In JavaScript I would name it myVariable. In CSS I would name it my-variable. In Atom if you double click on this

orclapex

Tabs with Auto Height

I really like the Tabs Container template in Universal Theme. It promotes a great structure for your content, while being good looking. You can have as many tabs as you want in the Tabs Container which means many different content heights. By default, Universal Theme picks the tallest tab and

orclapex

Peeking at Collapsed Navigation Menu Entries

Universal Theme's navigation sidebar has two states: expanded or collapsed. When collapsed, you only see the icons. Sometimes, icons are not enough. I wanted to peek at the text behind the icon without having to reach for the hamburger menu at the top. See demo. Please first collapse the sidebar

tabs

My opinion on Tabs vs Spaces

On this year Stack Overflow survey, this never ending war showed some love in favor of Tabs. I was a big Spaces user until a few months ago. I now use Tabs and I don't think I'll switch back anytime soon. Why? Like many devs, I've always been very thorough

orclapex

Checkbox Pills

Demo: https://apex.oracle.com/pls/apex/f?p=128166:1 Universal Theme offers a template option for radio button items to make them look like buttons: As of this writing (APEX 5.1.1), this template option does not work on checkboxes. But wouldn't it be nice to have

oracle

JavaScript Promises in APEX

As I was reading the APEX 5.1 API documentation the other day, I noticed something pretty interesting under the apex.server namespace. apex.server.process and apex.server.plugin are now returning JavaScript Promises. apex.server.plugin( pAjaxIdentifier, pData, pOptions ) → Promise apex.server.process( pName, pData, pOptions ) → Promise What

oracle

Using APEX Javascript Events

Dynamic actions are great, but sometimes I just want to code Javascript by hand in my code editor. In the official APEX documentation, very little is said about APEX Javascript events. All we know is that apexbeforerefresh and apexafterrefresh exist, but how can we use them? And are there more

oracle

Beautifying File Browse Inputs

Are you tired of seeing this? The look and feel behind these <input> comes from the browser itself, so there ain't much you can do... ...or is there? Let's try and work with them a little bit... * Example above shows 3 file inputs on the same line. HTML

orclapex

Introducing APEX Bootstrap 4 (Theme)

UPDATE: This theme is deprecated. For the past few weeks we've been working on something new. I'm excited to release the first version of a new APEX Theme. Still alpha, not production ready :) See Demo See Source code Bootstrap 4 itself (the framework) doesn't look too different from Bootstrap 3,