Lean Code and JavaScript

As I’ve said many times before, “There’s always a better way and more than one solution!”  The sentiments of this statement are echoed by the many ways a solution can be programmed using any of the many available languages including JavaScript.

Although I’ve been working with JavaScript for a number of years, I continue to discover interesting nuances in the language.  The learning never stops and is an inherent part of the intrigue that is programming.

While many solutions exist, some techniques and methods of programming are preferred over others.  Once you’ve mastered the basics of JavaScript, the programming challenges you are prepared to accept will inevitably become more complex.

Learning to address various coding problems is directly dependent on the knowledge and tools with which you are already familiar.  Be reminded however that just because they work doesn’t mean they are as effective or as efficient as they could be.

On this premise, I consider programming as a learning continuum.  Books and videos tend to serve as my primary sources of learning and reference.  In the case of JavaScript, one such book is:

Effective JavaScript presents detailed examples of what NOT to do and why followed by effective solutions to resolve the concerns identified.  The examples are succinct and clearly demonstrate complex ideologies in a simple, straightforward manner.  I have learned more from this book than most could begin to offer.

Learning how to code is only one aspect of programming.  Understanding how your code (or the language) works and why is another.  Effective JavaScript does both with a greater emphasis on the latter.  You will save yourself many hours of debugging your code when you have a clear understanding of what JavaScript can do when used correctly.

Of course, there is always Google, however, the information is typically solution oriented without the full benefit of scope or context.  As I’ve said before, “Be careful who teaches you.”  Unless you understand the code you are using, resorting to a “searched” solution may be cause for more trouble than it’s worth.

Until Next Time – STAY lean!

Versalytics

Related Articles and Resources

 

Advertisements

What? Rats WebGL Hit a Snag?

When your code hits a snag, there has to be a solution.  If you’ve discovered the “Rats WebGL Hit a Snag” notification, here are some articles we’ve discovered to both enlighten you and provide potential fixes.

It’s important to be aware of the potential problems your application may encounter, especially those that are beyond your control.  In this same respect, it is important to consider the tools and/or API’s you choose to use in your application.

Simply an FYI …

 

Until Next Time, STAY lean!

Versalytics

Lean Code – Web Graphics

Graphics and Animation

MultipleMachines

Over the past few weeks, I’ve been working on an application to simulate multiple production processes working in tandem and decided to re-introduce myself to the world of animation.  In its present state, the application is working quite well using just the core HTML5, CSS3, and JavaScript web languages.

The HTML5 canvas makes it easy to render graphics where CSS3 and JavaScript are used to manage and manipulate various animation effects.  Aside from the canvas element, OpenGL, WebGL / WebGL 2.0, SVG (Scalable Vector Graphics) and SMIL (Synchronized Multimedia Integration Language) or VML (Vector Markup Language) are also options to render graphics to your web page.

While HTML canvas is relatively easy to understand, working with SVG can be a little more complicated.  Fortunately, a number of packages exist that can be used to create our shapes and several JavaScript libraries are available to work with the generated SVG files.

Creating Vector Graphics

Adobe Illustrator is a great product but also demands a monthly subscription fee which, unless you’re a professional web developer, isn’t something too many of us want to add to our monthly budget.

An SVG Editor (by henoc) is available for Microsoft’s Visual Studio Code that can simplify the task of working with SVG.  You may also wish to consider using:

  • Vectr, a free cross-platform vector graphics editor, that allows you to create scalable vector graphics in 2D.   You can use the online version or download a copy of the application for your operating system (Windows, Mac, Linux, or Chromebook).
  • Inkscape a professional vector graphics editor for Windows, Mac OSx and Linux.  Free and open source.
  • Gravit Designer is a very capable and powerful design tool.  You can use the online version or download a copy of the application for your platform (Mac OSx, Windows, Linux, and Chrome OS).
  • There are also a number of online SVG editors – easily found with a simple Google search –  where you can create simple 2D SVG files online and save them locally to your machine.
  • It is also worth noting that the WebStorm IDE by JetBrains, our IDE of choice for web-based applications, also provides a level of support for working with SVG files.

JavaScript Libraries for SVG

While we can manipulate and work with SVG data directly using CSS and native JavaScript, a number of libraries are available that provide significantly enhanced functionality and effects.  Some commonly used libraries for working with SVG data include:

JavaScript libraries will save you a tremendous amount of time and effort so you can focus on your application.  It is also possible to render 3D models using SVG with more highly capable JavaScript libraries.

Browser Support and Local Files

Browsers provide varying degrees of support for today’s web technologies and knowing what is or is not supported will determine whether your application will run as intended.  IE (Internet Explorer) is one browser that is typically lacking in support for capabilities such as CSS transforms on SVG elements.

Remember:  Browsers are NOT created equal.

FailedtoLoad-CrossOriginRequests

Some browsers like Chrome do not permit access to files or data on your local drive and you may receive an error similar to the one pictured above if you make the attempt.  Fortunately, I’m using the WebStorm IDE by JetBrains and have the option to run code either as a local file or using the built-in server.

Use a local server if you are using Chrome or another browser that does not provide access to data files that are local to your machine.

Responsive Websites

A responsive website is one of the more significant and noteworthy advantages of using SVG for your graphic elements.  Scaling your site to accommodate devices of all shapes and sizes is less of a challenge with SVG.   Images retain their original quality regardless of scale, can be created or edited with any text editor, and can be manipulated or enhanced using CSS and JavaScript.  These reasons alone make learning SVG that much more rewarding for you and your visitors.

The options for animating your website are many and limited only by your imagination.  As I’ve said many times before, “There’s always a better way and more one solution.”  Working with SVG’s and the number of API’s available to animate them proves this statement to be true yet again.

Until Next Time – STAY lean!

Versalytics

Related Articles and Resources:

 

 

SQLite Security And SQLCipher

SQLite is a light weight relational database management system (RDBMS) that is used by many applications.  Unfortunately, your data is not secure and can be read by anyone who has access to your SQLite database.

TCL (Tool Command Language) makes writing SQLite database applications a relatively simple chore where I can focus more so on the application itself.  For this reason and that SQLite is freely available and highly supported, I often prefer to use an SQLite database solution.

Although Microsoft’s SQL Server is typically our RDBMS of choice, having a secure database could well extend where SQLite can be deployed for more data sensitive applications.

Data Security Solutions

The SQLite site offers several Professional Support and Extension Products.  For a nominal one time fee you can purchase a license for the SQLite Encryption Extension that provides the added ability to read / write AES-encrypted databases.

Additional licensing options are available and include the “Compressed and Encrypted Only Database (CEROD)” license to read encrypted and compressed databases and the “ZIPVFS Read/Write Compressed Database Extension” license to automatically compress and encrypt data as it is written and decompress data and decrypt data as it is read.

The above options require a significant financial commitment, however, SQLCipher by Zetetic LLC provides a level of security that may give you cause to consider using SQLite for some of your more sensitive and smaller scale applications for a much lower (or free) price.

SQLCipher offers a variety of paid licensing options, however, according to the Open Source web page:  “SQLCipher Community Edition can be used in both open and closed source commercial software, but you must include our BSD-style license and copyright statements prominently in the application and documentation.

SQLite is one of many database options available to you as a developer.  Use your discretion when choosing which tools will best support and meet the requirements demanded by your application.

Until Next Time – STAY lean!

Versalytics

Related Articles and Resources

SQLite Web Security – SQLite.org

SQLCipher Extension for SQLite – GitHub – Latest release 3.4.2 – December, 2017.

How to Compile And Use SEE – SQLite.org

 

Lean Code and API’s

API Resources

GeocodeResponse-OVER_QUERY_LIMIT

Using an Application Program Interface or API is not a new concept, is relatively simple, and easy to do.  However, developing applications using resources outside of your local controlled environment can present new challenges and opportunities.

In this instance, I was testing one of Google’s API resources and received an “OVER_QUERY_LIMIT” error message.  Although it’s not too often that this happens, apparently it can on occasion.

You have exceeded your daily request for this API.  We recommend registering for a key at the Google Developers Console:  https://console.developers.google.com/apis/credentials?project=

You typically need an API key before you can use an API such as the Google Maps Geocoding API.  For those of you thinking or wondering about security, you can place restrictions on the use of your API key.

Registering an API Key

APIs Credentials

If you already have a Google account, go to the “https://console.developers.google.com/apis/credentials?project=” link as shown in the error message above, sign in to your account and accept the terms and conditions.  You can then begin the process of creating your project and credentials.  Google will then generate an API key for your project to use in your application.

As of this writing, there are at least 184 API’s available where some of the more popular API’s include Google Drive API, Gmail API, Google Maps Android API, Google Cloud Translation API, and Google Maps Geocoding API.

Once you’ve enabled the API’s required for your project and set up your API Key, you can begin using and monitoring the services requested from your GoogleAPIs dashboard. The “Web Services > Geocoding API” page provides a simple example of getting and using the API Key in your application.

API’s can greatly simplify your application development and enables you to deploy features that would otherwise consume a lot of time and effort to implement.  The guides and documents in the API Library describe the scope of the API and provide sufficient information to begin using them to your advantage.

API Access Limits

Be aware that some API’s may have limits to the number of free “access requests” received and/or processed in a given day or over a given time period.  Users may encounter problems if requests from your site exceed this limit.  Increased access requests may be available if you are using a “fee-based” service or premium account.

For example, as of this writing, the Google Maps Geocoding API imposes the following Standard Usage Limits:  2,500 free requests per day and 50 requests per second.  A “pay-as-you-go” billing option or Premium Plan is also available with a maximum of 100,000 daily requests.

API Services

API services or resources may offer significant advantages for your application and are certainly worth an investment of your time to see what is available.  If your programming language, such as JavaScript or Python, provides a means of working with “http” requests, API’s are definitely worthy of your consideration.

API’s enable working with external resources both as a data source and for manipulating data.  The ability to programmatically work with data reduces the possibility of data entry errors and other human fallibilities.

Remember to use API key restrictions to control and prevent unauthorized access requests!  Making an attempt to use an API key from a site other than the one authorized in the restriction settings will return a “REQUEST_DENIED” status as pictured below:

API-Restricted-Access

Until Next Time – STAY lean!

Versalytics

Brackets Update

Brackets-Corner-ScreenShotVersion 1.12 of Brackets was released on January 29, 2018 and is now available for download.  This release introduces some exciting new features including JavaScript Refactoring, intelligent rename in file/scope feature, try catch block wrapping, one click conversion of anonymous expression / function block to arrow expression, and getter/setter creation.  More information can also be found in the release notes.

As a lightweight editor, Brackets serves as the “Goldilocks” solution for my smaller JavaScript and web page development projects.  Web page development is greatly enhanced with the live preview feature.

Although JetBrains Web Storm is my IDE of choice for larger applications, Brackets is an ideal editor for those looking to start off with something simple and easy to use.  Numerous extensions are readily available, easy to install, and will greatly enhance your experience while using Brackets.

To take advantage of the latest and greatest features, it’s important to keep your applications up to date.  These updates may fix bugs that you’ve discovered (or have yet to discover) and may also introduce some features that can save you a lot of time and effort in your development process.

Until Next time – STAY lean!

Versalytics

 

 

 

 

Lean Code and JavaScript IDE

BracketsJavascript is one of the more popular programming languages in use today and its use and capabilities are further enhanced by a variety of available frameworks, such as Node.js and AngularJS, and other libraries.

Although you can use almost any text editor to write Javascript, a language based Interactive Development Environment (IDE) or Code Editor can greatly improve your ability to write code more efficiently and effectively.  This is especially true where syntax and case sensitive languages – like Javascript – are concerned.

I use WebStorm by JetBrains for the majority of my web-based applications, however, a number of less capable cross-platform IDE’s and editors are also available for writing JavaScript, HTML, and CSS.  One such editor is Brackets created by Adobe Systems.

Review:  The 10 best JavaScript editors” by Martin Heller, Contributing Editor, InfoWorld (May 17, 2017) presents a number of JavaScript editors for consideration of which Brackets is among them.  I prefer to use cross-platform tools wherever possible and I use a variety of IDE’s and editors that are best suited for the project at hand.

Brackets is a light-weight open-source cross-platform editor equipped with sufficient functionality to efficiently write HTML, CSS, and JavaScript code.  A number of extensions are also available to further enhance your experience using Brackets.

Extensions are often written by third-party programmers or developers and should be installed with caution.  I highly recommend researching and reading reviews by others to ensure they are worthwhile and trustworthy.

If you are just learning JavaScript or writing a quick a script, consider the simplicity of using an editor like Brackets where you can focus on writing your code rather than get bogged down with learning all the details and nuances of a full-featured IDE.

If you’re wondering what kind of programs can be written using JavaScript, HTML, and CSS, you’ll have Brackets to serve as your source of inspiration as one of the many possibilities.  For more information, visit the Brackets web page.  As of this writing, Brackets 1.11 is available for download.

The excitement of learning a new language is often met with varying degrees of chaos and confusion when selecting the right tools to get started.  I recommend starting with something simple and less distracting that will allow you to focus on the task at hand.  Brackets is one such editor.

In time, you will learn which tools will best serve your needs and you can adjust your working and coding environment accordingly.  Feature filled IDE’s and Editors will do little to serve your needs if you have yet to learn or don’t know how to program.

Until Next Time – STAY lean!

Versalytics

Related Articles, Resources, and References

High-Performing Python

I was pleasantly surprised to see some very useful downloads when I opened the November 2017 issue of the Intel Developer Products Newsletter:

  • Intel Distribution for Python – Accelerate Python Performance – Powered by ANACONDA, and
  • Intel Performance Libraries – Download these free libraries today to create better, more reliable, and faster software applications.
    • Intel Data Analytics Acceleration Library (Intel DAAL)
    • Intel Math Kernel Library (Intel MKL)
    • Intel Integrated Performance Primitives (Intel IPP)
    • Intel Threading Building Block (Intel TBB)
    • Intel MPI Library (Windows Package)

Rather than write about these free offerings from Intel, click on the links above to see and choose the tools that will serve you best.  The files are relatively large and you may want to reserve your time for when and how you download them to your machine.  Versions are available for Windows, MacOS, and Linux.

Anaconda is my Python installation of choice if not simply for the ease of maintaining the many Python packages that are available.  That the Intel distribution for Python is powered by Anaconda is not surprising.

Although I’ve expressed my fair share of caution when using code libraries written by others, I have no concerns with Intel as the documentation is more than thorough.  If you’re truly interested in a comprehensive Python installation, consider this package offering from Intel.

Until Next Time, stay LEAN!

Versalytics

 

 

Simply the best – Logitech’s Craft Keyboard

Craft Keyboard BoxI pre-ordered Logitech’s Craft Keyboard several weeks ago and it just arrived – a week earlier than expected!  The Craft Keyboard is compatible with Logitech’s FLOW technology and is a perfect companion to my MX Master 2S mouse.

I use computers extensively in my line of work and I’m always looking for the ultimate keyboard experience.  I was also looking for a single solution that would allow me to work on more than one machine using the same keyboard and mouse.

Logitech’s Craft keyboard coupled with the MX Master 2S mouse and Logitech’s FLOW software technology is the answer to that quest.  I can now work seamlessly between my SurfaceBook Pro and MacBook Pro machines all while using the same keyboard and mouse.  The keys on the Craft keyboard are labeled for both PC and MAC machines.

IMG_4564The top left dial, referred to as the CROWN, is one of the unique features of the Craft keyboard.  The CROWN presents either a smooth or ratchet style feel when turned depending on the current context of the application.

The touch sensitive CROWN integrates seamlessly with Microsoft Office, Adobe, and other applications.  Even browsing the web is a slightly enhanced experience.  You can perform context specific tasks from within an application by simply tapping, pressing and / or turning the CROWN.

As a premium keyboard, my expectations were high and for the most part, Logitech has delivered .  The Craft keyboard provides the best typing experience of any keyboard I have literally had the opportunity to lay my hands on.  The backlit keys are very quiet, highly responsive, and require minimal travel and effort to actuate.  The tops of the keys are slightly concave and your fingers naturally settle into them.

F6-F7 Backlight BrightnessThe backlit keys turn on immediately as your hands approach the keyboard and turn off approximately 5 seconds after you move them away.  You can use the F6 and F7 function keys to decrease or increase the brightness level of the backlit keys respectively.  There are 15 levels.  This is worth noting as the backlit keys work regardless of the ambient light levels in the room.

Simultaneously pressing the “fn” and “esc” keys toggles the shift state of the function keys between standard and assigned features.  The assigned function key features can be repurposed to perform a variety of tasks using Logitech’s Options software.

Visit Logitech’s web page for a complete review of the Craft Keyboard’s many features and capabilities.  I ordered my keyboard directly from the site and I’m extremely pleased with my purchase.

Craft Advanced Keyboard.jpg

Although the Craft keyboard carries a steep price tag, when I consider the many hours that I spend working on my computers, the quality of the keyboard itself, and the new found real estate on my desk top, it’s worth every penny.

 

Increased productivity and creativity are just two of many reasons that make Logitech’s Craft Keyboard my new keyboard of choice.

Until Next Time – STAY lean!

VersalyticsRelated Resources

Logitech’s Craft keyboard offers premium typing with big bonuses, Darrel Etherington, TechCrunch.com

Logitech Craft Keyboard – Review, Curt Blanchard, mymac.com

This Dial Controls Everything! – Logitech Craft keyboard, Hardware Canucks

MX Master 2S Mouse (Versalytics.org)

 

 

Lean Code and Productivity

Writing code can be a very time-consuming process and finding ways to be more productive is typically welcomed by professional programmers.  While many new programmers are anxious to learn their language of choice, few spend any time learning about the Interactive Development Environment or IDE they are using to write their code.

Programmers can increase productivity by taking advantage of the many keyboard shortcuts that are built into their IDE or editor of choice.  Many IDE’s are designed to work on any platform and makes learning them that much more valuable.  In this context, choosing the right IDE can be just as important to your productivity as knowing the language itself.

A short list of the primary IDE’s I use includes:

  • IntelliJ IDEA HelloWorldMicrosoft:  Visual Studio 2017 (C, C#, C++),
  • ActiveState:  Komodo IDE (TCL/Tk),
  • JetBrains:
    • CLion (C++),
    • PyCharm Professional (Python),
    • IntelliJ IDEA Ultimate (Java),
    • PhpStorm (PHP),
    • RubyMine (Ruby),
  • NetBeans IDE:  NetBeans (Java).

Most of you reading this are likely familiar with the more common key combinations such as <Ctrl>+<s> to save a file, <Ctrl>+<c> to copy highlighted text, or <Ctrl>+<v> to paste text.  Many IDE providers have developed key combinations that provide much more functionality than typically offered by primitive text editors.  Extended features may range from basic editing and code navigation to code selection, code completion, code generation, code refactoring, and so much more.

IntelliJ IDEA SecretsVisual Studio 2017 (Microsoft), Komodo IDE (ActiveState), IntelliJ IDEA Ultimate and PyCharm (JetBrains) are just a few examples of IDE’s where key combinations exist to perform a wide variety of tasks.  Also knowing certain shortcuts that can be used while entering code can save a significant amount of time.

A premium IDE is well worth the investment in both money and the time required to learn it.  Extending IDE functionality to include automated code generation, code formatting, import optimization, and support for version control systems are just some of the reasons for using a premium IDE.

Once you discover the key combinations that are available to you, remembering them will be the next challenge.  Practice makes perfect and the more often you use them, the more likely it is that you will remember them.

CLionMenuDropDownIf you’re accustomed to working with your mouse when navigating the menu options inside your IDE, make note of the keyboard shortcut that may appear next to the menu option you are using as pictured in this CLion IDE drop-down menu.  If not this time, perhaps it may be worth trying the next time you find yourself reaching for the mouse to perform a task.

Aside from attempting to remember everything you read in the documentation, you can also perform a simple Google Search for “Cheat Sheets” on the language of your choice.  You will quickly discover that you are not alone when it comes to memorizing keyboard shortcuts and you will be presented with a vast array of options that are best suited for you and your specific IDE.

Increase your productivity and take advantage of all the power at your fingertips.  You will save yourself a tremendous amount of time and effort writing your code and developing your application.  By learning all there is to know about your IDE of choice, you may surprise yourself to see how much time you can save using a simple key combination that you never knew existed.

Until Next Time – STAY lean!

Versalytics - Logo (293x293)Related Content