Fixing Floating Parent Divs

It is frustrating  to float a child element only to find that every element appears to take the same positioning or find the child spilling beyond the borders of the parent. This brief article presents a modern solution to this issue using the display attribute in CSS.

Problem

At times when using the float attribute, elements placed in siblings  to a parent tag or even the siblings appear to inherit the floating properties of the target element. Elements may also appear to expand beyond the boundaries of a parent tag.

There are a few root causes of an element causing the parent’s siblings to appear to float including:

  • the zero height problem where an element is larger than its parent
  • the width of an ancestor is specified and violated by the child element

Solution

An older solution to the issue is to use the clear fix hack. However, with modern browsers, the solution is simpler:

.textedit-stylesheet-attr-div{
    display: flow-root;
}

Specifying flow-root causes the block format to be followed for the elements in the parent. This will maintain the float property of the children and cause the parent to ‘fit’ the child elements.

Popular Technologies

It is the fourth of July here in the US. Happy fourth. A few articles here continue to see plenty of readers per month years after being and some see practically none.

Out of interest, I decided to share  my statistics today. Each article I write is on a specific piece of a technology or about the technology in general.

Here are the sites most popular technologies on my blog:

  • PDFMiner
  • PostgreSQL
  • OpenCV
  • Edge Detection
  • Web Scraping
  • Browser tools such as JCEF and Java FX
  • Big Data
  • Security
  • Akka
  • Celery
  • Web Development Related Technologies

Scraping continues to be the most popular topic, possibly due to a link from PDFMiner. However, with 60 percent as many views, PostgreSQL takes second place. Scraping and PostgreSQL make up nearly every article with over 2,000 views. One PDF Miner article has had 25,000 views in the past several years alone.

I blog on things I use at work including topics such as:

  • concurrent programming
  • databases
  • mathematics
  • image recognition
  • scraping
  • browser tools
  • web development
  • big data
  • Java and Scala
  • Python

Who said java is dead?

Agile is Flexible: Deploying Agile in a Team Environment

Agile is not strict. In fact, agile is meant to be flexible. The concept comes with choices. Does your team use Scrum or Kanban? Are your retrospectives long or short?

This article examines the deployment of Agile, knowledge gleaned from deployment in multiple organizations.



Agile

The principles of agile are meant to provide flexibility and understanding. A few telling signs of this are forthcoming in the agile manifesto, which promotes:

  • simplicity by maximizing efficiency at work
  • early and continuous release of product
  • cross-organizational communication
  • working software as the primary sign of progress
  • embracing change

Deployment Headaches

The agile concepts and practices are some of the easiest to learn but maximizing efficiency does not mean having seven hours of meetings. It does not mean creating an unproductive comradery either.

Some of the pitfalls of deployment include:

  • meetings that eat away at productivity rather than help due to their length
  • a barrage of questions from various project managers that further eat away at productivity
  • stakeholder meetings that degrade into requirements analysis if there is no product to release yet
  • tickets that move into a Sprint or up a Kanban board in a way that slows the process down

Headache Exemplified

Issues in deployment can cause a backlog to grow uncontrollably. The amount of work can grow if agile is not deployed correctly and flexibly.

For instance, at a recent company I worked for,  the daily barrage of questions and meetings for the better part of a morning or day caused a significant slowdown in release times. The backlog grew by up to twenty tickets each week as pressure to complete tickets created more bugs.

Mounting pressure nearly created legal problems. In fact, as a new developer, I was the scapegoat for at least one problem, having a ticket offloaded onto myself only after a client demanded resolution and threatened a lawsuit.

Alleviating the Headaches

It is possible to alleviate the pain of deployment with a few simple measures including:

  • finding effective project managers and team leads for each team that are the sole source from which questions and tickets are generated
  • keeping meeting times small and encourage team members to find problems and solve them by embracing analysis of problems and their solutions at the appropriate meeting (some organizations look at an attempt to find the source of an issue as making excuses)
  •  finding an effective meeting length, often dedicating less time than recommended
  • planning stakeholder meetings effectively around the release of tangible product and using the project manager wisely to keep in contact with and update clients
  • utilizing software appropriately, keep teams as separated as needed

Clearly, there are decisions to be made regarding separation and time. Failing to address these problems can be deadly.

Tinkering with these resolutions, I have found that stakeholder meetings happen sporadically at first, ensuing as recommended after a product becomes substantial. Requirements gathering is itself a continuous project. I have also found that early stage projects can often make better use of Kanban, allowing for more flexibility, while established projects make better use of Scrum, when tickets are defined at the backlog grooming and retrospective.



Conclusion

While agile methodologies are effective, they are by no means inflexible. They were not intended to be. Using your time effectively is at the root of any project management philosophy.

Proper use of agile with a precise application for your organization is the key to maximizing effectiveness.

 

Using :before or :after in CSS, adding a border to a clipped path

Clip path is great but there is an issue. The border property stops working. Triangles, polygons, and nearly any shape can easily be produced. However, the borders are cut.

This short article examines how to resolve this problem with pseudo images, introducing before and after.

Problem

CSS renders the clip path last no matter how it is placed in a CSS class or in what order classes are arranged. This means that margins, borders, and other features are lost when the object is clipped.

Before and After

The solution to the issue is to use CSS to superimpose one div element on another through the use of a pseudo image. Pseudo images can be created using :before or using a standard class followed by :after.

Before and after render content as expected:

.small-tab-bl:before{
        content: '';
        width: 378px;
        height: 178px;
        display: block;
        position: absolute;
        background: #f9fafc;
        top: 1px;
        left: 1px;
        clip-path:
            polygon(
                 0% 0%,
                 100% 0%,
                 100% 100%,
                 7.5% 100%,
                 0% 87%);
        -webkit-clip-path:
            polygon(
                 0% 0%,
                 100% 0%,
                 100% 100%,
                 7.5% 100%,
                 0% 87%)
        -moz-clip-path:
            polygon(
                 0% 0%,
                 100% 0%,
                 100% 100%,
                 7.5% 100%,
                 0% 87%)
        z-index: 1;
    }

    .small-tab{
       position: absolute;
       width: 380px;
       height: 180px;
       background: grey;
       clip-path:
            polygon(
                 0% 0%,
                 100% 0%,
                 100% 100%,
                 7.5% 100%,
                 0% 87%);
        -webkit-clip-path:
            polygon(
                 0% 0%,
                 100% 0%,
                 100% 100%,
                 7.5% 100%,
                 0% 87%)
        -moz-clip-path:
            polygon(
                 0% 0%,
                 100% 0%,
                 100% 100%,
                 7.5% 100%,
                 0% 87%)
       z-index: -1;
}

This class clips a div element to create a tab missing the bottom right corner. Two tabs are generated, one positions a single pixel off of the other to create a border. Before must include the gradient and content should be provided.

Conclusion

Before and after are useful tools for placing content and alleviating the problems with clip path.

Can Romer-G Switches make you More Productive at Work?

The past few years have brought large cost increases to basic computing accessories. E-sports, tariffs, and, to an increasingly lesser extent, the saturation of computing have driven up prices.

The cost of a keyboard and mouse in my area is now over $100, sending me on a distracting morning quest when I should have been working. It is my fault for stepping on my mouse and keyboard, obliterating the USB housing and contacts.

The result of replacing my AST keyboard with a Logitech G413 is an 8 of 10 at a cost of $59.99 at MicroCenter.

The Romer-G’s are cheaper than their domed counterparts, last longer by 10-15 million key presses, are potentially more productive, and are more enjoyable. Not spending $99-$120 on an ergonomic keyboard, a wrist pad is only $8.99, was a great decision.



Ergonomics

These keys are actually ergonomic. Logitech claims that the indentation on the key caps help fingers slide into position.

This is true. Where my hands used to lie flat, I now find myself typing with the curl my 8th grade typing teacher would slap a gold star on.

Typing Speed

Logitech claims that the lower actuation point than domed and design can increase typing speed by 25 percent.

While the target consumer is a gamer, this concept should work both ways without producing redundant letters.

Never taking anything on face value, I ran a test.

I chose the Aesop Fables test on https://www.typingtest.com. The results:

  • Dome switch keyboard typing speed: 77
  • Romer-G  speed: 86

According to the test, my speed increased a whopping 9 words per minute. The test claims that my speed went from fast to pro.

This seems embarrassing considering I know someone who can type at 110 wpm.  Still, while this keyboard only gives a slight edge, less than 25 percent, the boost is almost noticeable. Also, my typing goddess of a friend is a former semi-professional Star Craft player, the one with all of the Koreans.



Click Factor and Pleasure

No review of a mechanical switch is complete without the ASMR factor. These keys are clicky. They feel better than domed switches. The ergonomic factor plays a role in this as my posture is never great.

Overall, these keys are faster, cheaper than most of their domed and Cherry counterparts, and tend to wear out fingers less. Modern mechanical keyboards use a more human friendly plastic.

Conclusion

The Logitech keyboard works well and the switches have a better feel than their rubber domed counterparts. While not as great as their Cherry counterparts, the Romer-G supposedly lasts longer and costs less than the ergonomic domed key keyboards. Being more responsive than a typical keyboard, a Romer-G keyboard can also increasing typing speed while helping combat carpel tunnel disease.

Differences in Tablets and Browsers Over the Last Few Generations

We all have to do this at some point, create an all encompassing, GUI program that works between the different generations of IPad and even up to 1920 x insane. Increasingly, as of 2018, it doesn’t seem to matter whether you are working in the back or front end, at some point you are creating some sort of front end. Making matters more complicated, a slew of useful and enticing features are starting to become available.

This article is geared towards examining the increasing scale of screen widths in tablets and the differences in available features over time.

Features

Browser features have increasingly grown more powerful. Just a few newer features are:

The links above lead to the MDN pages including browser support. In general, Microsoft Edge or Explorer nearly never supports modern features. However, Microsoft’s browser usage is dropping steadily with Edge taking less than 3 percent of the market and Explorer taking less than 10 percent.

Solid, responsive web applications can be built for Opera, Safari, Chrome, and Firefox without entirely alienating all users but with a slightly outmoded design using CSS hacks or even web frameworks through header parsing.

Firefox, Chrome, and Safari continue to lead the pack in terms of support for newer features.

Device Usage

In terms of devices, the variety of tablet brands is growing. This is leading to a growth in the use of Android devices. This will mean that browsers such as Chrome and Firefox will grow increasingly popular.

Apple continues to lose market share while Microsoft is gaining ground. This could be due to the poor practices of Apple in relation to copyrights and development.


Reactive Trend

The overall trend is towards responsive web development. Each page scales to nearly any resolution required with the exception of mobile which requires a separate site.

This trend carries towards features as well. The days of using stateful web design, jumping from page to page, are nearly dead. Each page is practically a

Future development and certainly my own are also abandoning the typical grid system. Divisions can now become polygons. It is possible to draw complex shapes with d3js.

Web Applications in Unexpected Places

Anything and everything is becoming possible. Web applications are achieving the same power as desktop and mobile applications. However, security will still be a concern.

This power includes on the monitoring side of the IOT sphere. With the ability to launch a browser through tools such as QT and PyQT,  web applications will start showing up in unexpected places.

Consequently, web sockets, RTC, MQPP, and XMPP  will likely grow in popularity.


Screen Sizes

Screens have grown in resolution at the low and high end as expected. Since 2012, screen resolutions have grown from 960 x 720 for an IPAD to 1024 x 768 as well as up to 1366 x 768 on desktop, up from 1280 x 800.

A basic website should be safe coding, in 2018 using:

  • 960 x 720: Older Generation IPads
  • 1024 x 768: Newer Generation of IPads and older desktop screens
  • 1280 x 800: For older screens
  • 1366 x 768: The most common resolution of 2018
  • 1920 x 1080: The future most popular resolution

To stay relevant, plan on coding for both Ipad resolutions as low as 960 x 702 and desktop resolutions as high as 1920 x 1080. My own sites split this resolution into 7 different tiers.

Of course, create a mobile site as well at about 420 width.

The tiers I use are:

  • 900 – 999 width
  • 1000 – 1199 width
  • 12000 – 12299 width (some computers have bizarre resolutions in this range)
  • 1300-1399 width
  • 1400-1599 width
  • 1600 – 1799 width
  • 1800+ width

Frameworks

Frameworks have not changed much but have gotten better. Django now supports channels, Spring has been fully coupled with boot for some time, and Flask is becoming more secure.

More interestingly, React has gained ground due to the power it maintains in building responsive applications. This is really nothing new.

Personally, I utilize Django these days with Flask for micro-services. This allows me to  maintain as single stack for both my front and back-end which utilizes Celery,  Thespian, PyTorch, and Python’s other powerful data tools.

 

””

Product Review: Canon Rebel T7i is a Great Starter Camera

We live in a world where phone cameras have roughly as many pixels as a digital camera. That said, there are an unrivaled number of products available for an SLR that greatly enhance picture quality and allow for high quality imagery without spending for a 250 mega-pixel camera or one with 4k video support.

The Rebel T7i is showing its age proudly and offers a great and relatively cheap way to move from your phone or handheld digital camera to producing high quality images. It may not offer a stock focal length at the level of a Nikon D3400 but is easier to grasp, more durable, and has the terrific support of nearly every local camera shop and Canon itself. With a wide variety of available lenses, I still recommend this camera over the Nikon D3400.

Well everyone, I am starting to add product reviews. In full disclosure, I am reviewing products from time to time (maybe 10 to 20 percent of my content), out of interest and profit.

My first rating here 7/10 (comparable to a Nikon D3400 but loses a point for the stock kit)



Rebel TI Qualities

  • Price of Camera and Accessories is an unbeatable $639
  • Supports a great number of lenses and features that allow a user to produce images better than can be obtained from a handheld device or digital camera
  • Produces high quality images
  • Decent Non-4k Video Support
  • Terrific AI
  • Durable
  • Lower stock lens focal length than the Nikon D3400

Overall Quality

Stock image quality on the Rebel Ti is no longer discernible from your typical high definition Samsung camera phone. However, mega-pixels are no longer a good way to define the quality of a camera.

The stock qualities of the Rebel Ti are actually what leads to the lower score. If you want  a camera that works better out of the gate and are not looking to dive into the world of photography, the Nikon is a slightly better option.

However, Canon is a well-established company with more visibility than Nikon. It is easier to find lenses in your camera store, equally easy to find lenses and accessories online, and of equal quality to it’s counterparts once you decide to accessorize. With a high quality lens, the T6 can even serve as a durable backup for a professional photographer or the main camera for someone just getting their feet wet.

All of the photos I sell were shot using either an older Rebel T6io or newer Rebel T7i, the newest mountain images were shot with the Rebel T7i.

The EOS also offers terrific video quality. Of course, the camera is not rated at 4k.

Finally, the backing of Canons terrific default settings make the Camera terrific for anyone wanting to try an SLR without knowing how to fiddle with aperture and iso. I particularly find the portrait and landscape settings great for comparing against my own skill set.

Durability

This may seem odd but, as an adventurer or photographer, you will need to find interesting photographs to survive. The old days of going down to the dock and snapping a quick picture are not going to cut the mustard.

Canon cameras and lenses are durable. My Rebel T6i still works despite being taken on dozens of backcountry ski trips, up many mountains, on top rope routes, on boat rides, on plane trips, and on many road trips. In short, I can mistreat the Rebel and still take a picture at the end of the day. That said, treat the camera with care. No technology lasts as long as Teflon.

This camera and even the lenses can take more of a beating than others.

Accessories and Lenses

The Rebel Camera is established with a large number of available lenses that are terrific for getting a hang of digital photography, starting to sell images, or making high quality imagery. Canon cameras receive high remarks for their accessories, glass, and tools that can easily help

The 18-135mm lens is a must for anyone looking to produce high quality lenses. At the time of writing a full kit including a telephoto lens and the wonderful 18-135mm lens is selling for $900 on Amazon. In the age of high-megapixels, it is creativity and glass that makes a photographer stick out.



Canon customer support is also terrific. The factory helps with repairs and the staff is knowledgeable.

Verdict

It is difficult to give this camera a 7/10. However, with some shortcomings, the result is inevitable. This is still my go to starter camera.

Singularity could be a Mild Augmented Reality

We have nightmares in which AI as the enemy. The Borg  terrorized the Star Trek universe except for seven of nine of course. Cylons nearly destroyed civilization in Battlestar Gallactica. Commander Shepherd fought an AI that likely went rogue on a distant alien civilization. I am still not sure why this story line did not create the new Mass Effect series.

We are at a crossroads of the combination of AI and humanity. Zuckerberg and Musk cannot stop our progress. We may all end up living in a communist society in where AI and machinery do all of our work. We could also end up with a fascist and corporatist society, in the Benito Mussolini sense.

However, we are at a crossroads at which we can choose how we will use AI. It will be used in an attempt to destroy the middle class and likely already is which is why I mention the debate between communism and fascism. However, it also carries with it form. What form that takes is ours to explore and can actually create another golden age.

The form we choose is one option on a wide spectrum. We could rebel against our robot overlords and re-enter the dark ages. We can choose to remain at our current level of enlightenment. We can embrace augmented reality and combine our own creativity with a reduced price tag, allowing another golden age of capitalism before the final and inevitable transformation of society. Finally, we can let the common MBA pervert science with limited foresight and education while creating an enormous wealth gap and limited growth in enlightenment before the inevitable transformation of society.

I highly argue for that middle tier, as does at least one of our evil mega-corporations. Augmented reality combines the entrepreneurial spirit and education with the power and price tag of generic software. The day when companies produced spaghetti code and hired people of limited scope is quickly dying or dead, a fact I hope Generation X will grasp at some point. SAAS and broad off the shelf programs filled with AI are rapidly becoming the new norm. My own company allows researchers, counselors, educators, and project managers to achieve a form of singularity where human intuition, powerful AI, ETL, a fast and scalable yet simple back-end, and hopefully decent design will help non-profits, psychologists, corrections officers, educators, accountants, and more collaborate to achieve more than before using a streamlined tool instead of patching together teams like a jigsaw puzzle.

Imagine one day building a design for a new robot in your local park aided by simulations and artificial intelligence  before shipping the design to a manufacturer for a 3D printed prototype. You may even print a small design yourself. Within a week you are presenting to investors on another platform, holding a meeting on the same device on which you built your robot. The investors notice that the function your device performs is profitable due to predictive analytics at large scale and fund production. Now, you have a company. The success of your company depends on your ability to sell and produce at low cost, both aided by AI.

On an even simpler and more realistic scale, you might also imagine a fast food industry where employees take orders over devices while their hands are free to work or command a few robots. This could help offset the cost of wage increases.

The possibilities of mixing humanity with robotics is endless but also requires a strong growth in resource production with a meaningful price tag. If governments and taxpayers can grasp the idea embraced by our forefathers and eschew the bondage of moneyed interests, we can grow beyond our wildest dreams. Otherwise, the last option becomes reality and we throw our destinies at a dystopia reminiscent of the worst science-fiction films.

Of course, we are also running out of resources. None of this will matter once we have depleted our earth to the point where feeding ourselves is a miracle. Humans are, after all, the reason the Terran race exists in StarCraft.

Handling Multiple Presences in Openfire

buckets

XMPP is a terrific protocol for communications based media. For P2P networking, it is the or at least among the most robust. Well supported distributions like the ultralight eJabberd and extensive though somewhat resource intensive Openfire exist which implement the 20 year old protocol to a tee.

Still, there is that nagging need to detect multiple statuses at once to avoid overburdening resources with what could be thousands of extra requests. This article examines how to poll for multiple presences at once by extending Openfire’s presence service with a JSON plugin.

Code is available on my Github account.

Presence API

JiveSoftware, creator of the presence plugin, created a decent and simple presence API whose code is available on Github.

This API is easy to extend.

Using my plugin

My plugin simply adds a few lines to the PresencePlugin class and creates a JSONPresenceProvider class that can be used to return one or more statuses.

The available options are:

  • jid: Takes presidence and obtains the status of a single JID
  • jids: A semi-colon (;) separated list of jids of which to obtain statuses
  • type: This should be json to obtain the list of statuses

For instance:

http://myserver:9090/plugins/presence/status?jids=user@server;user2@server&type=json

This allows GET requests to be kept fairly simple. The same parameters may be used in a POST request as before.

Values are returned in a JSON object containing an array of user information objects:

{
  "presences":[{
     "user": "username",
     "jid": "username@server",
     "status": "[available | unavailble | etc.]"
  }],
  "success": [true | false]
}

Building

Building the plugin is simple on Linux (or Windows). Simply execute the following on Linux at the root of the project.

 mvn clean package
 cd ./target
 mkdir build
 mv presence*jar ./build
 cd ./build && jar -xvf presence.jar && jar -xvf presence-X.X.X.jar
 mv *jar ../
jar -cvf presence.jar .

This will combine the dependency and code jar into a single jar which can be placed in the plugins folder of Openfire. Openfire automatically detects new plugins.

Conclusion

Extending Openfire is simple. This article reviewed my modification to the presence plug-in allowing users to obtain the status of multiple JIDS at once through JSON.

Private Immutable Configuration Hack in Python

Pyhton is notoriously not secure by default. However, it is still possible to generate a level of security through name mangling and other means. This article explains how to use name mangling, the singleton pattern, and class methods to create more secure access to configuration in Python3.

Singleton and Class Methods

Setting up a singleton in Python is simple:

class ChatConfig():

    __config = None

    class __Config:

        def __init__(self, config):
            self.config = config

    @classmethod
    def set_config(cls, config):
        if cls.__config is None:
            cls.__config = config


    @classmethod
    def get_config(cls):
        return cls.__config

 

The internal class and variable are mangled so as to make the variable itself private. This allows a single configuration to exist across the different packages while keeping the internal variable private and allowing for the variable to be set only once.

Conclusion

Python is not entirely insecure. It only takes code. This article offers an example of a way to set a variable once and share the setup among multiple packages.