August 18, 2019 · 11:48 pm

Interactive Scroll Manipulation

When creating applications, all of the moving parts have to come together to create a truly enjoyable end result experience for the user. But let’s face it, regardless of how intricate your backend might be, or all the wild and nifty things going on under the hood, if you don’t have something to grab the user’s attention at the outset, there’s less likelihood of them interacting for long, much less coming back for a return visit. These days there are almost an infinite amount of things you can do to create dynamic, experiential, impressive pages. And a lot of it actually depends not the user too —> where does the mouse go? Do the scroll all the way down? What do they click on? How long do they stay on each page/in each section before navigating somewhere else?

With scrolling, creativity abounds. Simply googling “great landing pages”, “awesome scrolling” or something of the link will return a myriad of fascinating (at times mind-boggling results). A popular (maybe sometimes over-used, according to different design blogs) is parallax scrolling. With parallax scrolling, you create the illusion of depth in a two-dimensional setting, by having elements positioned independently of one another or relative to something there than their parent. In the most basic parallax scroll, you’ll typically find some kind of container div which has a background image, color, etc. and perhaps some text. You would expect the two to move in sync with one another up the page as you scroll down. But then you scroll and they don’t move in conjunction at all! By setting a few properties, you can manipulate the background image to remain and/or slowly move while other elements continue appearing as the user scrolls down, creating that depth illusion.

  <body>
    <section>
      

        
          Out in the Galaxy
        
     

 

    </section>
    <section>
      

        
          Meteor Showers
        
     

 

    </section>
  </body>

So your HTML may look something like the above where each section has a container holding the items, with different text and separate background images. Your CSS file then may look like:

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  height: 150vh;
  position: relative;

}

#parallax-one {
  background-image: url('https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pixelstalk.net%2Fwp-content%2Fuploads%2F2016%2F04%2FStars-wallpapers-HD-backgrounds-download.jpg&f=1');
  background-color: rgba(85, 143, 163, 0.34);
}

#parallax-two {
  background-image: url('https://il3.picdn.net/shutterstock/videos/6047102/thumb/1.jpg');
  background-color: rgba(86, 126, 113, 0.34);
}

.text-overlay {
  color: white;
  background-color: inherit;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: calc(2vh + 2vw);
  padding: 2vh 3vw 2vh 3vw;
  border-radius: 50px;
}

The most important are the background-image specifications. Background-size is set to cover so that the image covers the entirety of the visible area,  bg-repeat is set to no-repeat so that the image does not render multiple times in order to cover (relative to other specifications, center the background position and then lasty, andmaybe most importantly, background-attachment is set to fixed so that it will appear to stay in one place while the rest of the elements of the page continue moving up (instead of moving with them) e.g. “fixing the background to the page”.

With two separate ids for each container div, we are able to specify our different background images. We can also specify an overly color for the text. When the z-index is specified in the .text-overlay class, it will allow the background-color to show up for the text, but not over the image, which can be further manipulated to your heart’s content!

This is a super simple implementation and there are so many other things you can do with it (I may create a separate post later once I decide which specific things I want to highlight). With Javascript and/or jQuery (although there seems to be a trend to use jQuery less as many are moving away from it in light of the powerful JavaScript we have today), you can grab a user’s scroll position, and further manipulate your parallax scroll based on that. You can trigger a pop-up, which is especially useful for e-commerce sites trying to incite the viewer to buy, or for explanatory pages telling incredible stories that rely less on text and more on interactivity (check out Movement of Data), further cementing user engagement. There’s also numerous plugins, package, and frameworks that can advance the frontend look to something extraordinarily beyond (Rellax, ScrollMagic, Parallax.js, and Skrollr to name a few).

blog-parallax-gif

Happy scrolling!

 

 

Leave a comment

Filed under Uncategorized

August 11, 2019 · 9:04 pm

Starting w/ Node.js & Revisiting Callbacks

One of the most exciting things about software engineering is that there is always so much to cool stuff to learn. It’s also one of the most daunting. Deciding what to actually focus on next can be a debilitating, almost paralyzing challenge. “Do I start focusing on Python because it’s such a popular language and can be used so extensively in all sorts of different fields?” “Do I go back to basics and focus on low level programming to get a more solid mastery of C, Assembly, etc and then choose what’s next from there?” “Do I learn the newest and most exciting thing out there right now?” “Do I obtain a highly practical certification, a la Amazon Web Services?”…Okay, well that last one I’m definitely working on, but it does become really hard to choose and there’s no real right or wrong choice.

Confused Lady Math Lady GIF - ConfusedLady MathLady Dafuq GIFs

So with that — after finishing a significant update to my last project (wherein I implemented private chatting with web sockets and action cable), I was looking for the next big challenge to tackle. I felt that learning Node.js and Express would be a nice mixture of something practical, new and different, but with at least a solid grasp of JavaScript, not so out of left field that it wouldn’t make sense at all


Sometimes programming is getting the hang of conventions, especially with relation to the unfamiliar. “Okay, I’ve learned that doing x in such-and-such a way works, and now I understand that if I do y in such-and-such a way, it will (or should) work too.” It’s easy to start working on a new concept, and being able to understand the convention, writing a program that runs fine and does what you want it to do, without fully understanding the why. I admit I’ve been guilty of it at times (though I try to avoid it, and/or correct it once aware of it). So when I began to work on Node.js, it became clear that I needed to go back and revisit some things — where I had gotten so used to my understand based on convention, I’d let go of the core why.

 

Why Question GIF - Why Question Suite GIFs

Shouting Why GIF - Shouting Why GIFs

 

One such thing was callbacks. I both enjoyed and felt confident using async and promises with my projects — buuuut that was client-side Javascript. To understand a Node.js server, I started with Nodeschool‘s learnyounode series. It’s simply a package you can install with npm to access a series of 12 problems sets and get a very basic foundation of Node.js. principles. Because Node.js is event-driven programming, running into callbacks happens pretty much right off the bat. Thinking I had a solid grasp of callbacks, I couldn’t understand why my code wasn’t working. I went back to the documentation, read some really great blogs, and realized I was relying on a conventional understanding, not a fundamental understanding, which I seemed to have blocked somewhere along the way.

 

Justin Timberlake Stare GIF - JustinTimberlake Stare Look GIFs

 

Thinking about callbacks in analogous terms helped me get back on track. I likened it to going to the library — let’s say to collect research for an academic project. You have your project topic, you’ve come up with a preliminary thesis, and you know at least one important book that you need in order to support this initial thesis. In this scenario, if the librarian is the callback, here’s how things might go:

  • You ask for the librarian if she can help you obtain this particular book.
  • You let her know that while she is looking for the book, you are going to gather other research materials and to let you know if and when she has found the book.
  • The librarian then checks her system see whether they have it, if it’s checked in or not, etc. and while she’s doing this you have gone to browse the aisles for other helpful books.
  • If she finds that they don’t have the book, or that it’s been checked out, she’ll come find you and let you know that it is unavailable (you’ve got an error).
  • If she finds that they do have the book, she’ll come find you and give you the book’s location (successful, you’ve got your data), so that you can then do something with that information, i.e. retrieve the book.

 

rupauls drag race thank you GIF

ITSMAAM ITISMAAM GIF - ITSMAAM ITISMAAM ITSMAAMITISMAAM GIFs

*I really was just trying to find a good “Thank You, Ma’am” gif,
but both of these cracked me up, so we got ourselves a combo*

 

Being able to handle multiple process simultaneously is incredibly useful and it’s what makes Node.js so powerful. The general consensus is that it is harder to learn at first, but ultimately better to use, once you’ve got the hang of it. There’s a plethora of great materials for getting started. As someone who learns best by a combination of reading and doing, I found the learnyounode package very effective, supplemented with outside reading as needed. I also tried to solve most problems first without using external packages, unless they were specifically required. (For example, in the first problem introducing BufferLists, there was also the option to use a secondary package to make the Buffer List more readable/easy to work with. But, for me, it actually made things less clear. So until I had a better understanding, which I did toward the latter problems, I did not use ‘bl’ or ‘concat-stream’). By the end of the problem sets, I had started really liking Node.js, albeit, that’s form only the tiniest fraction of exposure — but, nonetheless, I’m super excited about and really looking forward to this new process!

 

Librarian In Library Dress GIF - LibraryDress Camouflage Librarian GIFs

 

*I have linked resources below that I found particularly helpful

Leave a comment

Filed under Uncategorized

August 4, 2019 · 7:41 pm

Leo ♌️ Gang Gang — Member: John Carmack

This week was my birthday. Specifically this past Friday. So I decided to write my blog about a fellow Leo and August-birthday- sharer, and all-around awesome person, John Carmack.

John Carmack is a self-taught programmer born in Shawnee Mission, Kansas on August 20th, 1970. Before the existence of personal computers, Carmack loved science and fantasy and has said both built model rockets and played Dungeons and Dragons as a kid. Once exposed to computers, he was obsessed and taught himself how to code. His parents pushed him to attend college and although he agreed, he dropped out after two years, and during this two years took only computer classes.

Nonetheless, he is the man behind id software and a majority of beloved video games today. One of his first jobs out of school was at Softdisk where he developed Invasion of the Vorticons, a two-dimensional video arcade game. But the real benefit of this process was meeting his collaborators: fellow computer-obsessives John Romero and Adrian Carmack. They created a game called Wolfenstein 3-D, the id version of an Apple II game, Castle Wolfenstein. The response to it was overwhelming and players particularly loved that they felt like they were part of what was happening in the game, especially with the ability to look down the barrel of the gun at their target.

However, it was the release of Doom in 1993 that really catapulted Carmack to the top of the success list. They game recorded $7 million worth of sales in 1994, it popularity due in large part to the incredible world-building Carmack had done. The characters and setting appeared very realistic, especially compare to the pretty basic, flat, 2-D games that were the norm prior to the release of Doom. Althgouh he parted ways with former partner John Romero, Carmack continued to hone his craft and advance the work at his company, id. By the time he released Doom 3 he had spent four years studying the science of light to make sure that the next iteration of the game not only satisfied fans’ eager hopes and expectations, but went above and beyond previous versions.

 

A true Leo indeed! A great leader and hard worker, only satisfied if the next version of his self and/or his creation is significantly better than his past. Proud to have John Cormack as an incredible, impressive member of the tribe. Leo gang for life

 

Leave a comment

Filed under Uncategorized

July 28, 2019 · 4:15 pm

Women Are Not “Female Programmers”, They’re Just Programmers, Part 1: Where Will We Be Without Her? Amy Webb

 

This is part two of my previous blog post and considering the subject matter veers more into a grim, slightly paranoid, potential dystopian area, perhaps I should have started with this one and ended with my last one, which is more positive. That being said, while yes, darker, the ideas discussed are no less important, and I might even argue more important, as they relate to what’s to come rather than what has been. While there are a number of important women making incredible discoveries and contributions to the technological world in the modern era (albeit not always credited), I’ll be focusing specifically on one: Amy Webb. I actually discovered her while I was working on my last blog post which is what prompted me to make it a two part series. Amy Webb describes herself as a “quantitative futurist” — kind of a combination of data scientist and journalist. She looks at data, understanding, modeling, and analyzing it, as a means to discover trends and patterns, and, ultimately, present plausible future scenarios based on current observations of our (largely technological) world.

 

 

My first exposure to Webb was an episode of NPR’s 1A podcast: “Close Enounters of the A.I. Kind”. I recommend anyone and everyone listen to this episode, regardless of what your interests are or what you do for a living. You don’t have to work in tech to acknowledge the presence and influence technology has in our lives. Part of her job is to to explore unforeseeable or unintended outcomes of systems in place today. An award-winning author, Webb discusses her latest book “The Big Nine”— which chronicles nine companies who essentially control the majority of AI and machine learning development and subsequently, future implications of artificial intelligence. I have not read the book (although I plan to make a Barnes & Noble trip this week to purchase it) but I want to discuss two topics she covers in this and another podcast I listened to via The Library of Economics and Liberty: “Amy Webb on Artificial Intelligence, Humanity, and The Big Nine”.

 

 

 

The first topic is China. So three of the “big nine” companies are Chinese: Baidu, Alibaba, and Tencent (the other six are American: Google, Apple, Amazon, Microsoft, Facebook, and IBM). Having lived in China herself, and in relation to her book, Webb explores China’s sustained interest and investment in artificial intelligence. Chinese President, Xi Jingping, is wholly committed to excellence in and advancement of AI, even structuring elements of the government around it. He also is now the de facto “president for life” due to China’s 2018 election in which their constitution was amended to abolish term limits. There’s a lot I didn’t know about what was/is going on in China — including those election results — and while granted, we can’t be 100% percent sure of exactly what is going on internally since information is so tightly controlled, there are (somewhat horrifying) things that are important to note. One is China’s implementation of a social credit system. A new program that’s been rolled out in different variations and stages throughout a number of Chinese provinces, it is basically an enormous mass surveillance operation. Cameras and other technological devices have been installed to not only record, but with smart machines, analyze the behaviors of an individual as well as identify who an individual is. An example that’s discussed is someone j-walking. Devices will note a person crossing the street when they shouldn’t,  analyze the face of that person to discover their identity, and then can do a number of things to reprimand: send a notice that they must appear at the local police precinct to address law-breaking, post their face on a local billboard so that people in the area are aware of who the person is and what they have done, as well as alert people in their life (family members, employers, etc). of the infraction. Pretty much Black Mirror’s “Nose Dive” in real life.

 

 

The other is the BRI or Brick and Road Initiative. Another machination of the Chinese government’s creation, this is a program to aid China’s economy and trade relations by installing new infrastructure, (literally, bridges and such) along the old Silk Road. But there is a digital component as well. Fifty-eight pilot countries are involved in this new initiative, where China is installing 5G and fiber into the countries’ building and development. Webb does an incredible job analyzing the possible outcomes of both the BRI and the Social Credit System which I won’t try to paraphrase here, but suffice it to say, the potential results are concerning at best (and bone-chillingly terrifying at worst).

 

 

The second aspect I want to mention from her discussion explores the people who are actually working on the development of all this machine learning day-to-day. Shifting to America (since intel on Chinese development is limited and not entirely reputable or irrefutable), Webb has looked at the statistical demographics of AI workers. And shocker: it’s mostly white males. She does offer a disclaimer that she has met with a number of these developers and engineers, all of which she describes as brilliant people who are not inherently evil or malicious and want to contribute to a positive future. Nonetheless, there are certain implications from a data set whose perspective is by and large the same that cannot be ignored. If the people creating the computer programs and algorithms all share a similar experience/worldview and there are no others from different backgrounds, ideologies, etc to offer a larger, more representative context, what effect does that have on these systems? Well, for one: there’s an implied, even if unintended, bias. And that bias discredits an enormous number of the population. Anyone of a different race or gender is, ultimately, going to be discriminated against. This has already happened: 1) in Amazon’s hiring process, where the computer algorithm discriminated against resumes with the word “womens” in it (because the data, especially for engineers, shows a majority of male hires which points to success with men) and b) in Florida, a criminal justice program was rolled out for analyzing statistical projections of repeat offenders: in an actual scenario, two 14-year-old African American girls were classified as higher risk and more likely to repeat a crime than an older caucasian male who already had a record! When this male was released based on the program’s suggestion, what did he do? Commit another crime a few days later.

 

 

I don’t want to veer too much into conjecture since I am not officially trained in this where someone like Amy Webb is, so I will leave it to her to draw the conclusions (and urge you to at least listen to her discuss it if you don’t want to read the book — the NPR podcast is only thirty-five minutes). But, in presenting the facts above, I hope that people begin to look a little closer at the technology we take for granted, who is creating and controlling this technology, and what that might mean for the future for which we are headed vs the future we want to create. I, for one, (and I think I’ve mentioned this before), refuse to own a Google Home or Alexa device became I don’t want even more data being collected on me than already is. But that’s a microscopic piece of the puzzle. The real takeaway is that if we want to have a safe, inclusive, and transparent future among all peoples, we need to take a long hard look at those at the top who are shaping it, and confront our own involvement in what we expect from these giant tech companies and how that informs the future we aim to construct.

 

 

 

Sources

Leave a comment

Filed under Uncategorized

July 21, 2019 · 11:56 pm

Women Are Not “Female Programmers”, They’re Just Programmers, Part 1: Where Would We Be Without Her? Lovelace, Hopper, and Borg

Y’all know I’m a Rihanna fan, but lemme just link a little Beyonce here cause…who run the world? GIRLS!
https://www.youtube.com/watch?v=VBmMU_iwe6U&list=PL27A853D80B4DAD13

 

I write a lot about issues that matter to me, especially in relation to the industry, and often about being a woman in tech because it’s something I experience the nuances of. That doesn’t mean women haven’t made incredible aspects in STEM fields. Despite the diversity statistics not supporting an equal playing field for women in tech, there are still numerous contributions women have made, both recently and historically. Especially when it comes to coding, engineering, and development. Considering that this is such a prevalent issue, and one that I relate to, I wanted to take a look into three of the most famous women in history of computers.

 

Ada Lovelace

Ada Lovelace, regarded as “the first computer programmer”, although famous in her own right, was actually the daughter of Lord Byron. Born in 1815 in London, her gender was a disappointment to her father, who apparently wanted a “grlorious boy”. The two were essentially estranged and Ada was mostly raised by her mother, although they did not have a particularly close relationship either. Nonetheless, she was bright. Due to illness and frailty she was confined to her bed for a majority of her childhood. (This coupled with her mother’s keen interest in rooting out any of her father’s “insanity”) but she kept her mind active by studying mathematics and technology, and continually enhancing her skills. When she made her “debut to society” (in quotations because I’m rolling my eyes 🙄) she was quite desirable because of her brilliance.

lovelace GIF

She was very close with Mary Somerville, her tutor, who ended up introducing her to Charles Babbage. In 1842, when Babbage gave a speech about his Analytical Engine, it was Lovelace who was asked to translate it to English from a French article written by Italian engineer Luigi Menabrea. Her notes tripled the length of the original and indicated not only her understanding of the machine, but her vision to see past what it does to what it could do. She saw numbers as “more than just quantities, and a machine that could manipulate numbers could be made to manipulate any data represented by numbers.” (“Ada Lovelace: The First Computer Programmer”) This visionary understanding of maths us what led her to invent the first computer program: a stepwise sequence of operations integration process between source and target, specifically an algorithm for the Analytical Engine to calculate Bernoulli numbers. She predicted computers having programs to do things such as “compose music, produce graphics, and be useful to science.” (“Ada Lovelace: The First Computer Programmer”) Here were are in 2019, and where is the lie tho?!

 

Grace Hopper

Grace Hopper was born in 1906 in New York, was basically, a badass. She was a rear admiral in the United States Navy and a pioneering mathematician advancing computer technology. She received her undergraduate degree in Mathematics and Physics from Vassar College, and worked as an Assistant Professor there to afford her subsequent tuition to Yale, from which she received both a Masters and PhD (one of the first women to do so) in Mathematics. She returned to Vassar to teach full-time until the outbreak of WWII and America’s participation in 1942. She applied for and was accepted to the WAVES program (Women Accepted for Volunteer Emergency Services) and was assigned to work on the Harvard Mark I, and large-scale automatic calculator, and the first computing device of its kind in the U.S.

debugging computer science GIF

She continued her work on computers after the war ended, and oversaw programming for the UNIVAC I (Universal Automatic Computer) She and her team revolutionized the the computing world when they invented the first compiler, successfully dictating and translating simple commands via binary code. This creation, which accelerated the focus on machine-independent programming languages, laid the groundwork for COBOL (Common Business Oriented Language), which every modern computing language is built upon. It’s safe to say Hopper’s work is instrumental, nay, essential, to modern day computing/computer programming as we know it.

Fun side note: Hopper was also the person who coined the term “debugging” when she found a glitch in the Mark II and upon further investigation, discovered a moth that had gotten stuck. Upon removal, she said she was “debugging” the computer — the term  soared in popularity and has been used ad infinitum ever since!

 

Anita Borg

ABI honors Anita Borg's vision for women in technology.

Born in Chicago in 1949, Anita Borg Naffz became one of the greatest advocates for women in technology known today. Her childhood saw her living in Palatine, Illinois, Kaneohe, Hawaii, and Mukilteo, Washington. Regardless if her location, she loved math, though she did not plan on being a computer scientist. She taught herself to program in her twenties and spent two years in Seattle at the University of Washington. She earned her PhD from New York University in 1981 from her work on operation systems’ synchronization efficiency. She followed this with four years of work on a fault tolerant Unix-based OS, allowing “programs to have some degree of error without failing completely”,(“Anita Borg – Inventions, Patents, Intellectual Property, and Foundations”) first in New Jersey, and then with Germany’s Nixdorf Computer. When she transitioned to Digital Equipment Corporation in 1986, she began working on high-speed memory systems, which led her to develop (and patent) a performance analysis method to generate complete address traces for these systems.

Aside from her brilliant technological work, Borg was also a supporter of and advocate for women in computing. She noticed not only the lack of women in her industry, but also the fear and reluctance she typically encountered in women regarding technology. While the lack of these sentiments allowed her to be successful, she also wanted other women to have the opportunity to be included, and to empower them to pursue such opportunity. Having worked on Message-Enabled Communication and Information Systems (MECCA), she founded Systers in 1987, an email network for women in tech (the first!), and in 1994, along with Telle Whitney, the Grace Hopper Celebration of Women in Computing, which is held every year to this day, and is the largest gathering of STEM women in the world. She and Whitney subsequently founded the Institute for Women and Technology in 1997 (now known as the Anita Borg Institute for Women and Technology), providing recruitment and advancement of women in technology.

 

 

Clearly, we owe a great deal to these trailblazers — not for being “women in tech”, but for simply being brilliant mathematicians, logicians, and computer scientists. Before she died in 2003, Anita Borg’s goal was to see 50% of women represented in computing by 2020. Sadly, as of 2019 this has not been achieved, but the needle is (slowly) moving, although the numbers, however, are still subpar. One statical report, tracking investment numbers, shows that only 9% of tech startups’ venture capitalist investors are women, and the distribution of this capital only sees 21% going to women-founded startups, but way better than 7 percent in 2005! (“Where Women Startup Investors Are Gaining Ground”) What’s sad, and frustrating, about this is that there’s no evidence of women-founded startups being less successful than their male counterparts. But the correlation between representation and investment speaks volumes.

GHC2016_COLOR REV1.png

On a positive note, most companies are aware of the discrepancies in numbers of marginalized groups’ recognition and representation. Those that are hyper-aware of the unsettling statistics also make real, specific, actionable efforts to do something about it. I have a lot of admiration for and tend to be drawn toward these types of companies, and it often shows in the robustness of what they are creating. When exploring whether companies’ actions and decision-making live up their mission and values, those that place high emphasis on inclusivity and make diversity a core element of who they are, tend to see higher ratings, reviews, success both internally and externally, growth, and a generally positive reputation. A few worth noting: Adobe, Etsy, Asana, Cisco, Glitch, Buffer, and believe it or not, Starbucks. The last three all some implement some element of public salary policy, and Starbucks specifically uses “salary transparency to close gender and race pay gaps”. (“Why These 3 Companies Are Sharing How Much Their Employees Make”) Also, California law now requires that women hold corporate leadership positions. (“Gender Diversity in Silicon Valley”).

Besides, and maybe even more important than, brilliance, the other great commonality Ada Lovelace, Grace Hopper, and Anita Borg share, is vision. They were visionaries, who saw beyond more than current output and maximizing what something is doing to future potential, all that it can do. As Hopper famously said: “The most dangerous phrase in the language is, ‘We’ve always done it this way.’”  

My hope, and belief, for 2020 is that the times are changing.

“The Times They Are A-Changin’” — Bob Dylan

 

Who Run The World GIF

 

Sources

Leave a comment

Filed under Uncategorized

July 14, 2019 · 7:55 pm

The Beloved Blue Elephant (or: “why even Postgres anyway?”)

At Flatiron School, once being taught the fundamentals of relational databases and learning to query with SQL,ite, we moved pretty quickly to PostgreSQL. Because it’s what was taught, I sort of took it for granted. I never thought to look deeper into why it’s such a popular database system or how it came about. That changed recently when I went to a wonderful meetup as part of Postgres Ladies NYC, organized by @DataRenee and featuring @clairegiordano, who gave a fabulous presentation chronicling the top 10 reasons Postgres is so beloved (linked here, via her twitter).

 

 

PostgreSQL was founded in 1986 in Berkeley, California as a project whose name was categorically referential. It literally stood for “Post Ingres” — Ingres being the SQL database management system at UC Berkeley, and this new project designed to be the system after Ingres. This project was led by Michael Stonebreaker upon leaving UC Berkeley, and the initial Postgres design document, written by Stonebreaker and Lawrence Rowe, outlined six key points to adhere to. These tenants remain today and are as follows:

  1. Provide better support for complex objects.
  2. Provide user extendability for data types, operators and access methods.
  3. Provide facilities for active databases (i.e. alerts and triggers) and inferencing including forward- and backward-chaining.
  4. Simplify the DBMS code for crash recovery.
  5. Produce a design that can take advantage of optical disks, workstations composed of multiple tightly-coupled processors, and custom designed VLSI chips.
  6. Make as few changes as possible (preferably none) to the relational model.
*via “The design of POSTGRES”

Postgres is open-source, which is instrumental to it’s identity and was fundamental to its creators. As such, other developers have the opportunity to work on and enhance features. In 1994, Andrew Yu and Jolly Chen released an updated version that, among other things, added a SQL language interpreter, the psql program (allowing for interactive SQL queries from the command line), and trimmed the entire codebase by 25%.

While the release of Postgres95 was majorly significant, the name itself was less so. In 1996, acknowledging Postgres95’s SQL querying updates and retaining the initial impetus for creation, the name was officially changed to the current “PostgreSQL” and today is one of the most widely-used, and loved, SQL relational database management systems (RDBMS). Because of nearly universal support for SQL (Structured Query Language), the SQL is often dropped from the end, and it is commonly referred to as simply Postgres.

balloon GIF

 

Many, many, modern tech companies use or started out using Postgres as their database system. Aside from being open-source and having a robust community of active contributors, one of the reasons that Postgres is important (and widely supported) is thanks to its “object relational data model”. This structure, as opposed to a solely “relational data model”, allows users to define objects and to outline any subsequent relationships, functions, operators, etc. Although a fully user-defined data structure wasn’t available until the release of PostgreSQL in 1996, the  beginnings were seen in Postgres95, in which user-defined functions could be instantiated and used to imitate SQL subqueries.

Copy That Duplicate GIF - CopyThat Duplicate Imitation GIFs

 

Another highlight is PostGIS, a Postgres extension that provides support for spatial objects and geographical relationships. With the addition of geometric datatypes, indexes, and operators, Postgres stands out as one of the most advanced databases for logging, mapping, and rendering of performant geospatial data. and while other databases may include support for some of what’s listed on the full extensive list of Postgres-supported datatypes (found here), as you can see, Postgres is the only one which supports them all.

i am le tired end of the world GIF

 

Postgres operates with Multiversion Concurrency Control (or MVCC). Within the Concurrency Control theory, there are essentially two modes of operation: a) you can avoid conflict by “pessimistically” locking the system and freezing mutation of data via Readers and Writers or b) you can accept the occurrence of conflict and detect them by “optimistically” locking, and logging subversion data state(s). Many relational database systems implement MVCC in some way, but Postgres’s method is unique. By utilizing a multiversion database model and creating “snapshots”, it can effectively allow queries to view a particular database version “regardless of the current state of underlying data”. (Postgresql – MVCC)

Postgres is also a distributed database, and was scaled horizontally by a company called Citus (a company with an amazing logo, btw). This implementation offered greater range and flexibility in terms of functionality, which could now be spread across numerous machines and catalogues.

vhs tumblr featured GIF

 

Lastly, it’s worth noting how much of an impact and effect Postgres has had on the world wide tech community. Postgres events and conferences are held all the time in a multitude of international locations. The 2019 PostgresOpen will take place in Orlando, Florida while the 2019 European PGConf Europe will occur in Milan (last year was Lisbon). If you’re interested in learning more, getting involved, or becoming part of a local Postgres group, check if there’s an existing one in your city. If not, the warm and welcoming Postgres community is always looking to open its doors and gain further reach, and I encourage you to look up information about getting in touch about starting one! (This is a good start.)

Wanna Be My Running Buddy? GIF - Dog Corgi Treadmill GIFs

 

Sources:

Leave a comment

Filed under Uncategorized

July 7, 2019 · 8:58 pm

“Perfection is a polished collection of errors”

Above quote is by Mario Benedetti and felt it was just too perfect in terms of what is means to be a developer, as well as my own need for perfection and subsequent coming to terms with, and even (*gasp*) enjoying errors.”

Cyber Punk System Failure GIF - CyberPunk SystemFailure GIFs

We all want applications to run smoothly and seamlessly, from both a developer and user standpoint. But let’s face its: that’s simply not the world we live in. Whether it’s testing out new code/functionality of an application, updating old code, bad connection, a user putting in wrong/unacceptable information (or the myriad of other possible snafus), errors are part of the game. So an important aspect of any application is to be able to handle those errors and use them for benefit.

Phaedra Parks Jesus GIF

Being able to code requires becoming acquainted and comfortable with errors. As a Type-A perfectionist, this was a steep learning curve for me. I had to not only accept, but embrace what I initially deemed “messing up/failing” but soon realized was actually just the nature of the beast. At the outset, it was simply understanding and working with errors in the terminal. Migrating to the web, however, with more advanced applications, produced significantly more advanced errors.

Reese Witherspoon Election GIF

To begin, you can always display error messages in the console of developer tools. But accurately rendering you backend data to showcase. Working with a Rails API backend for example, to send data to the frontend, it must be rendered as json. In doing so, you can send a jon object within an if..else statement that will track and display errors, if there are any. For example, if your application is set up to authenticate users upon login, you’d need to test that a user is who they say they are on the backend and then if not, be able to display as much. In Rails with JWT tokens, may look something like:

  def create
    @user = User.new(user_params)
    if (@user.save)
      render json: {
        user: @user
        token: get_token(payload(@user))
        }, status: :accepted
    else
      render json: {
        errors: @user.errors.full_messages
      }, status: :unprocessable_entity
    end
  end

 

In vanilla JavaScript you can work with errors using try and catch. Defining a function where you “try” to execute some code, while being wary of errors, and if they occur, you can “catch” them and at that point handle the error. If you add “throw” into the mix, you can customize your error handling for specific error messages based on whatever is return. The standard term is “throw an exception” (or to throw an error) and the exceptions allowed are Strings, Numbers, Booleans, or Objects. By defining potential error scenarios with try and catch, you can then throw custom results for better program functionality and user experience.

However, most people these days use frameworks and libraries for frontend applications and while it’s all JavaScript under the hood, there are more advanced technologies to adeptly handle errors within a particular framework. The release of React 16 included the introduction of Error Boundaries, a separate component to intercept errors wherever they occur below them in the component tree, and by isolating them, then can locally handle the error as well as display a backup page/message to the user. because Javascript is imperative, a lot of the typical error-handling won’t work in React due to its declarative nature. The try/catch mentioned above will only work for imperative code blocks. 

say it like it is iyanla vanzant GIF by OWN: Oprah Winfrey Network

After defining your Error Boundary component, you wrap other components in it in order to catch the errors whenever attempting to render. Internally, Error Boundaries make use of the getDerivedFromState() method in order to display a separate UI to the user. The error itself is passed to static getDerivedFromState and you can update state and/or what’s displayed based on whatever comes in (i.e a boolean that gets set to true if an error occurs). The componentDidCatch() lifecycle event is also utilized. Two arguments are supplied to componentDidCatch() — the error itself and any information about the error. Within it, taking advantage of logErrorToMyService(), you can use a separate service designed to display errors to users (and yourself) in a legible and understandable fashion, rather than cryptic console messages. For example, within a React Login component, an Error Boundary might be defined as follows:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      hasError: false
    }
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true })
    console.log(error, info)
    logErrorToMyService(error, info)
  }
}
export default ErrorBoundary    
  render() {
    return this.state.hasError ? 
    

      
 Please check your credentials and try again!

      Back To Main
    
 
    : 
    this.props.children
  }

and then in App.js or maybe Routes.js (or wherever the Login component is imported to be displayed), import the ErrorBoundary and wrap it around Login

  <ErrorBoundary>
    <Login />
  </ErrorBoundary>

And that’s it! Mind you, a straightforward and very simplified version, but enough to illustrate the concept. There are ways to go more in depth in terms of custom error handling/rendering and how to update an application’s functionality for both the user and the developer in terms of receiving data from and working with errors — as always, the documentation is great place to start, but there are numerous excellent blog posts as well. Happy error rendering!

Animated GIF

Leave a comment

Filed under Uncategorized

June 30, 2019 · 10:24 pm

Technological Solidarity 👏🏼 (Ways To Make An Impact In Tech)

A recent meetup I went to led me to discover an organization that I personally believe is amazing. Their mission, values, and essentially all that they are founded on aligns with everything I care about, especially in relation to being a part of this industry professionally. The company, ThoughtWorks, is “a community of passionate individuals whose purpose is to revolutionize software design, creation and delivery, while advocating for positive social change.” (Read more about ThoughtWorks here.) This got me thinking about the ways that someone can create meaningful change with impactful solutions in an industry that is omnipotent in our current society and from the look of things, will only continue to grow.

 

important billy eichner GIF by NRDC

 

For someone working in tech with development and engineering skills, one option is to contribute top open source projects that are that are politically-minded or have an activist leaning. The first resource is to simply visit the politics tag page of GitHub: Github#politics. There’s an extensive list of all different kinds of projects. They’re written in numerous languages and range from an app for busy voters [mobile(Ballot)] or tweeting to a US legislator [tweet-a-legislator] to one for gathering and analyzing  Congressional bills [Billscraper.js] to one for “crowd-sourcing structured election candidate data” [yournextrepresentative]. If rather than browsing you want something more specific or have a political mission in mind, there are numerous ways to find open source GitHub projects.

 

big brother pop GIF by Big Brother After Dark

 

Another avenue is to volunteer. There are an abundance of non-profits and coalitions serving different facets of the industry. If you have coding skills, you can help others to become tech-literate and there are numerous organizations that support underrepresented or marginalized communities in tech, like Benetech and ByteBack. There are also organizations that aim to help move the political/social/cultural needle, such as Tech For Campaigns. Whether you want to help veterans, minorities, women, disabled persons, and/or any other malinged groups (or all of the above!), there’s likely an existing association that will allow you to do so. A few that come to mind are ones I’m personally familiar with and have had exposure to: Black Girls Code, Women Who Code, Operation Code, Code2040, Code.org. There’s a plethora of others, city-wide, national, and international, that will gladly take volunteers wishing to help! The following links are just beginning points of entry:

 

conniving jacqueline white GIF by Unbreakable Kimmy Schmidt

 

Additionally, there are organizations for supporting minority-founded startups and helping them to succeed: check out five of them here, which could be beneficial if you are interested in creating a startup but lack the means or resources. This also brings me to my next topic: DONATING! So, yes, volunteering is absolutely a donation — you donate your skillset, your time, your energy, and that is incredibly valuable. But perhaps you don’t have any of those things to give, or maybe you work in tech but aren’t on the coding side, or maybe you’re just a successful person who really cares about supporting a positive vision for the future. Regardless, monetary donations are always appreciated and supremely beneficial to any institution trying to make a difference. And if donating doesn’t interest you or isn’t a feasible option, given that the majority of companies have a tech component in today’s world, the one thing you can do is double-check the values, mission, and modus operandi of any enterprise. Then triple-check that against their actions and documented practices. Whether you work work in tech and it be your employing company, or you own/run a business and outsource the technical constituent to a separate firm or agency. With regard to this (and all of the available options mentioned): a little bit of research into the specifics of how an establishment operates goes a long way.

 

Keep fighting the good fight! ✊🏽✊🏻✊🏿✊✊🏾✊🏼

patriotic broad city GIF

 

Extra Reading Bonus: “Coding The Resistance” 😉🙌🏼😎
Bonus: “Hacking The Political Platform: Why One Candidate Is Using GitHub” 💯

Leave a comment

Filed under Uncategorized

June 23, 2019 · 5:27 pm

Business in the Back, Party in the Front

A key principle I always try to be aware of when writing new or refactoring pre-existing code, is the specifics of where things should go. Readability is very important, so is naming, and so is is placement. I’ve been updating old projects lately in an attempt to ✔️ them off as “complete” (to the extent that any application can ever be “complete”). Partly because there were elements of each that I’d always wanted to implement and never had time to, and partly because I want to move on from them and start new things.

 

season 4 netflix GIF by Gilmore Girls

 

In this process, inevitably, certain elements of the original projects’ setups have changed. And this is where it’s key to note where things go. The rule of thumb is to have the logic of your application in the backend and the interactivity in the frontend. This doesn’t mean there isn’t any logic in the frontend (quite the opposite!) or that there’s nothing to do with interactivity in the backend, but certain types of functions and methods should remain in each, with respect to what they do.

Your backend should be in charge of creating the core structure of your application: setting up data models and the relationships between them, storing data relative to classes or class instances, and being responsible for anything that you want to stay semi-permanently documented. The most recent project I’ve been addressing is a zodiac dating app. The backend consists of two associated polymorphic self-referencing, has-and-belongs-to-many classes: the Sun class and the User class. The Sun class (representing the main zodiac sign — our “sun” sign, the one a user is most likely know) and then the Compatibility class pulls from the Sun class, cross-referencing each sign against the other signs to determine if an instance of the Compatibility class should be created. The User class is similar —> a User has a Sun (sign) and uses the results determined via the Compatibility algorithm to cross-reference against other instances of the User class, checking if compatibility is reciprocated (and based on some other factors like gender preference) to ultimately create a Match.

 

 

The frontend is all about how a User will experience the application. A person can login or sign up, both of which will make calls to the backend, either to retrieve data or to submit new data. Once logged in, a User will have a display of all their matches that have been created on the backend and are re-fetched every time they login and/or make an adjustment to their information (i.e. editing their profile, declining a match, etc). All of the Compatibility, Match, and Sun information, I would want in the backend. Sun and Compatibility will never change, but Matches and Users will. By facilitating a change in state on the frontend and sending a post request to the backend, the entire application can keep tabs on, and control of, what information is rendered. A User can also get new Matches, but old Matches will never be repeated or presented again as new.

 

Weaving History GIF - Weaving History GIFs

 

There are a lot of moving parts but you can start to see where and why it’s important to maintain the separation of concerns. With the backend always in charge of which information has already been processed and storing new information coming in, there’s less risk for a mistake to be made. The constant interaction between the frontend and backend is precisely what allows for a better and more seamless user experience, which is the primary goal of an effective and well-designed frontend. If a User declined a bunch of Matches in a row, and all of that new activity was being stored in the frontend alone, even if just until the next time they log-in, there’s an incredibly high risk that something will get lost in the shuffle. Maybe a declined Match gets re-presented because the frontend application wasn’t able to successfully log the update, maybe a user changes their gender preference but they’re presented with all the same options as before.

There are an enormous number of factors to consider when designing an application, including memory, run-time, scale, speed, etc. and there is a delicate interplay between all. There are times and situations where certain qualities are preferable to others. Making numerous fetches within functions can have the potential to slow an application down. It’s important to try to keep functions as pure as possible, but sometimes the complexity of a function isn’t the most conducive to purity (and there’s always the option to go back and re-factor).

 

Kondo 近藤 麻理恵 叩く GIF - Kondo MarieKondo Konmari GIFs

 

For me, I’d rather my application not present any incorrect or repetitive data when unnecessary, and I definitely don’t want a user to get frustrated with an app that is making mistakes. I recently wanted to have new information relative to a Sun sign displayed within my zodiac dating app. Particularly, I wanted a User’s zodiac symbol (as in a pictograph version of the image relative to the constellation) to show up when clicking the name of their sign for more details. I started to write this function on my frontend, but not even a quarter of the way through, I realized it made much more sense to add this new data via an attribute of the Sun class on the backend. Then I’d be able to pull once and always have that symbol available. Instead of checking a User’s sign on the frontend every time they login to determine what symbol to display, it’s simpler and more efficient to have that information a part of the Sun class upon instantiation. I added a “glyph” attribute to my Sun model, wrote a method that used emoji zodiac symbols, and upon re-seeding my database, all of my Sun signs had their little symbol associated. Then on the frontend, I simply had to display the current user’s “sun.glyph” and voila! Less margin for error, more efficient code rendering, and rather than deciphering logic to determine a symbol for a particular Sun sign, greater ability to maintain the frontend’s focus on managing and updating state.

 

KRKOmJd.gifLOL 

Leave a comment

Filed under Uncategorized

June 16, 2019 · 11:33 pm

Raccoons + Humans + Robots In Harmony 🎶❤️

I was really at a loss for what to write a blog on this week. I racked my brain for elements of work I’d recently completed, things I had learned from events and conversations, even other blog posts I’d read in an instructional/educational capacity. Nothing stood out that I felt I had sufficient experience with to write on, or that was different enough from previous posts (I did work on interesting UI/UX stuff this week, especially with responsive-design, but having already written about CSS/HTML a couple times lately, kind of a non-starter). What follows is a series of loosely-tied technology-related observations and how they influence the world around us.

 

spongebob squarepants internet GIF

 

As I sat on my couch brainstorming, my eyes were drawn the bluetooth wireless earbuds flashing at the edge of my peripheral . I don’t have the white apple ones; instead I have an unknown (read: cheaper) version that are black and round, and which blink when they are on. So naturally, I then googled “how does Bluetooth work”. Interesting, but also fairly obvious information considering Bluetooth technology, although continuously improved upon, has been around for a while now.

headphones jerk GIF

Don’t own any bluetooth pairing devices? Hey, no judgement — it took me until earlier this year to get even a pair of the headphones myself (and I refuse to purchase a smart home device because of separate, privacy-related reasons). The first step is to set the initial device to be paired in “discoverable mode”. Discoverable or pairing mode, allows the devices to be able to identify each other based on relative frequency and send a passkey. Once the passkey is sent from the device #1 to device #2 and is in the vicinity (the size of which is determined by the frequency range) device #2 will send a code back that needs to match the passkey from device #1. Nothing revelatory here.

 

 

Yesterday morning, my roommate and I got involved in the task of trying to save a raccoon. This relates, I promise. Our apartment is above MTA train tracks, easily viewed from the overlooking windows and/or fire escape. A baby raccoon had fallen from the overhang on the walls flanking the track below and was screaming for its mother who was still on the overhang, pacing nervously. Why is this relevant? Well, in addition to tying a bunch of sheets together and around a tree to give the mother and/or cub something to climb, my roommate and I used bluetooth to direct the mother’s attention. It seemed she was skeptical of the sheets (likely due to the smell of humans) and after a while returned to her nest (where we later discovered she had two other cubs). We wanted to indicate that the baby was still below (now hiding in a crevice on the side of the track walls) so we played the sound of a raccoon kit crying for its mother over the portable bluetooth airwave speaker. We were able to successfully direct her attention to the correct area, and even get her working her way toward the sheets. But after three+ hours of this and not wanting to endanger her life (or the life of her other babies) we resigned to the hope that the fallen baby had already climbed up at a time when we weren’t looking, and if not, would do so under the cover of darkness.

 

peace teamwork GIF

*this ^ is not from the actual incident, just something eerily similar I found
when googling: “peace teamwork gif”  sooo…felt like I had to use it*

*here’s a slightly less worrisome one*

 

Technology influences everything that we do. I know this is not a profound statement, it’s hardly a new declaration, but sometimes, sitting down and really thinking about this, fully understanding and taking in the weight of what that means, is a little startling. My roommate made the comment afterward about how crazy it was that we just “techno-hacked the situation”, utilizing devices to emulate sensory experiences to manufacture a response and intended action from another species. Pretty wild. (Pun intended.) Technology is ubiquitous, and I love it. I’m a major fan. But I also try to remain mindful of its implications as a growing omnipresence in the majority of our lives.

 

napoleon dynamite technology GIF

 

I went to a meetup last week with my roommate (okay, he happens to be my best friend too, which is why he’s heavily involved in this story) about cryptocurrency. A small, intimate setup in the back room of a hotel bar, this particular evening involved a panel of two guests discussing cryptocurrency’s role in technology, economy, and community as a decentralized current and/or future driving force. Although I have only the most minuscule knowledge of cryptocurrency (and my roommate has just slightly more than me), this sort of politically-driven, activism-laden topic is precisely where our sensibilities overlap. Regardless of expertise, we thought it would be fascinating. And it was. Though less because of the topic (don’t get me wrong, it was engrossing, but much of it was over my head), and more because of the social and human interactive behaviors we observed.

 

Hillary Clinton Cryptocurrency GIF - HillaryClinton Cryptocurrency Bitcoin GIFs

 

There was one older man leading the panel, and two younger guys brought in to discuss the ways cryptocurrency had informed their work and lives. In fact, most of the room was male. Not all straight and not all white, but the majority were. The speakers were hyper-intelligent, articulate, and engaging, but the host left something to be desired. He often interrupted them to reiterate his opinion, push his agenda, or simply to declare that they were wrong— not how he *thought* they were wrong (key distinction).

 

???? GIF - NickYoung QuestionMarks What GIFs

 

There was a palpable feeling of reticence and skepticism in the room. Only older men asked questions and whenever they did, the questions were loaded. Not necessarily in the specifics of what they were asking (I’d need to be more well-versed to comfortably make that claim) but definitely in terms of attitude and tone. Very aggressive. Very condescending. Very judgmental and distrusting and even mocking. There was no sense of “Wow, what could we learn from you? How could we implement this into our systems, into our understanding of an industry?”, but absolutely a sense of “What you’re saying won’t ever work. The system isn’t designed like that, the way you’re thinking is wrong. Who are you kids to think you can dictate an economic sector in this way?”, etc. Even in a room mainly full of what one would call “finance bros”, I was still pretty blown back by the disrespect.

 

cryptocurrency dogecoin GIF

 

And this is where technology is so intriguing. It is heavily intertwined with economics as one of the major driving forces of our global economy today and in its ability to constantly reinvent the wheel. From eliminating wires for music-listening, to (hopefully!!! 🙏🏼) saving raccoons, to redefining a field in an industry, even a very new one, or a whole industry itself, the possibilities seem endless. It also moves at an incredibly rapid pace, so not only are humans, in a way, competing with technology for who can arrive at conclusions and achieve developments faster (hi robots 👋🏼) but also with each other. Whoever has a mind of greater imagination, and more importantly, remains the most open to new ideas and possibilities, is who will be poised for success. Lambasting an idea for whether or not it’s in line with “the way things are done” is a one-way ticket to the left behind boat. This isn’t an era where we can rest on our laurels or remain rooted in the ways of the past. We have to move ahead, not with blind ambition, but with a thirst for knowledge, a hunger to achieve what’s been thought unachievable, and most importantly, an awareness of our technological choices and actions. Because mindfulness (typically the key to everything) is absolutely essential to advancing civilization in a harmonious way with technology.

 

Meditation Hippie GIF - Meditation Hippie SpongeBob GIFs

**more raccoon gifs because they’re freakin’ PRECIOUS!**

family raccoon GIF

Leave a comment

Filed under Uncategorized