Back in October, I attended a Meetup on databases focused on 2 SQL-esque databases.
TimescaleDBis an open-source database built for analyzing time-series data with the power and convenience of SQL — on premise, at the edge or in the cloud.
CockroachDB – Architected for the cloud, CockroachDB delivers resilient, consistent, distributed SQL at your scale. CockroachDB is built by Cockroach Labs.
The presentations were very thorough, and as a result I found some of the details were a bit…esoteric. I don’t know that much about databases. (I was hoping for more IoT.)
But I did learn something about databases, replications, different types of databases, and node setups. Who knows where this information will squirrel itself away and pop up again in the future.
The NYC Databases of the Future: CockroachDB and TimescaleDB
Wednesday, Oct 30, 2019, 6:30 PM
Cockroach Labs 53 W 23rd St New York, NY
20 IoT’ers Went
New York City is known for many things… The perfect NYC slice, the lights of Broadway, and perpetually delayed subway trains. It is now known for something new and innovative, the databases from Cockroach Labs (distributed SQL) and Timescale (time series). Join us for networking, pizza and beer, and fantastic talks from Timescale and Cockroach La…
A quick overview of generative adversarial networks (GANs) — a type of artificial intelligence that are capable of generating, among other things, pretty realistic looking photos of humans that do not exist.
Shout out to those hard-working generative adversarial network (GAN)! Ok, I don’t really know about hard-working, but it is pretty cool. Let’s review.
Intro to GAN
GAN technology came out in internally at Nvidia, the computer graphics company, in 2014 and released publicly in 2018 (as StyleGAN). The studies are linked.
I’m not going to pretend I understand the details of either study. But based on the Wikipedia article linked above, what I can explain is that a GAN is the result of two neural networks that compete against each other, in one of those mathematical, strategy “games” researchers like to play. The networks study photographs (or text) and then decide which elements to use to generate something new.
I think some people will find it creepy, but I think it’s cool. For the human photos, it’s hard to not project a humanity into the faces, even though, logically, these are people that have never existed. The generated fake people seem, somehow….special.
Here’s a quick intro to some GAN and some links to explore. Enjoy!
Explore Some Fake Stuff
As I said above, one of the possible outputs of a GAN can be a surprisingly realistic looking photographs. View some of them at thispersondoesnotexist.com. Every time you refresh, you get a new person that has never existed. It’s like dreaming for computers.
This github repository has a list of a few more websites of GANs that generate photographs of humans, fake rental ads, articles, anime, and more results that don’t exist. There are fake cats, but computers seem to have trouble with animals. I suggest not looking at them. (They’re creepy.)
Test Yourself, Human!
Some of these faces look pretty realistic. For instance, the image above-left is an “image of a young woman generated by StyleGAN, an generative adversarial network (GAN). The person in this photo does not exist, but is generated by an artificial intelligence based on an analysis of portraits.” The ad on the right is fake, too. Could you tell?
If you want to really test yourself, the website Which Face Is Real throws up 2 side-by-side images.
Unless you’re a dog cat on the internet, you can probably tell the difference (and probablyevenespecially if you are a cat). The fake images have a few tell-tale signs like smudged backgrounds, odd looking teeth, unusual wrinkles, and some of them just don’t seem right.
You can also test yourself with the fake poems at Bot Poet.
Composites – There are some offshoots of the original technology, like this github repository which shows an example of a composite generated image using a StyleGAN image + an image of the Mona Lisa.
Digital “models” – I wouldn’t say these examples are quite the same, but there are already digital “models” on Instagram and in advertising campaigns. Lil Miquela has over 1.5 million followers on Instagram, and there’s a modeling agency specializing in digital “models”.
Video – The one below is uses around 8 frames of video to train their neural network, resulting in a real-time talking head model. It could be like one of those “deep-fake” videos, except the new heads are people that don’t exist. And you can kind of tell, if you watch the video below, human, the new heads do not really look too realistic (yet).
Few-Shot Adversarial Learning of Realistic Neural Talking Head Models
Statement regarding the purpose and effect of the technology
(NB: this statement reflects personal opinions of the authors and not of their organizations)
We believe that telepresence technologies in AR, VR and other media are to transform the world in the not-so-distant future. Shifting a part of human life-like communication to the virtual and augmented worlds will have several positive effects. It will lead to a reduction in long-distance travel and short-distance commute. It will democratize education, and improve the quality of life for people with disabilities. It will distribute jobs more fairly and uniformly around the World. It will better connect relatives and friends separated by distance. To achieve all these effects, we need to make human communication in AR and VR as realistic and compelling as possible, and the creation of photorealistic avatars is one (small) step towards this future. In other words, in future telepresence systems, people will need to be represented by the realistic semblances of themselves, and creating such avatars should be easy for the users. This application and scientific curiosity is what drives the research in our group, including the project presented in this video.
We realize that our technology can have a negative use for the so-called “deepfake” videos. However, it is important to realize, that Hollywood has been making fake videos (aka “special effects”) for a century, and deep networks with similar capabilities have been available for the past several years (see links in the paper). Our work (and quite a few parallel works) will lead to the democratization of the certain special effects technologies. And the democratization of the technologies has always had negative effects. Democratizing sound editing tools lead to the rise of pranksters and fake audios, democratizing video recording lead to the appearance of footage taken without consent. In each of the past cases, the net effect of democratization on the World has been positive, and mechanisms for stemming the negative effects have been developed. We believe that the case of neural avatar technology will be no different. Our belief is supported by the ongoing development of tools for fake video detection and face spoof detection alongside with the ongoing shift for privacy and data security in major IT companies.
Slightly off-topic, there’s a new Frontline documentary on AI. It’s 2-hours, so it’s a commitment. It doesn’t really go into the GAN-side of artificial intelligence, but it does discuss automation, privacy, and surveillance.
The documentary provides many reasons to be afraid of AI, particularly with regard to surveillance and use of AI by governments. We can’t really predict what governments will do, but if behavior control is a goal of AI there’s a natural user group: people who have trouble controlling their behavior. This would be people who have or have had issues or struggles with:
chemical imbalances in the brain
loss of motor control
Or even just reminding people to eat better and go outside more. I’m sure there are more. Anyway, that’s my thought. Seems fair to be afraid, but also there are some opportunities that shouldn’t be overlooked.
And now on the cultural side : the trailer for Her. I don’t know if it’s possible to have an OS this advanced, but there are some interesting fantasy explorations in this movie.
These are sites I’ve come across that may help someone building a portfolio. (Writing it also helps me remember!)
Yet another portfolio post!
Rather than go on about my own issues, I wanted to share a few resources. Before I begin, I’m going to make a little rant in case you’re feeling overwhelmed, like I am.
One of the sites emphasizes the importance the design a portfolio has on your job prospects. I feel this importance is overblown because the the design or tool seems to have such a big impact on how the portfolio is perceived. I can’t emphasize enough how many people use paid templates, plus the cost of a web domain. And I would be lying if I said it didn’t bother me that choosing the wrong CMS template is the difference between gainful employment vs not.
The fact that the portfolio makes a difference at all seems like the difference between showing up in a limo, BMW, Toyota, or SmartCar. I guess it really is like dating, which I admittedly know absolutely nothing about.
At the start of this review, my feeling is that people just want to be entertained. My thoughts changed somewhat, which you can read at the end.
Ok, now that I’m off my soapbox, here is my list. It’s organized like this:
Sites – Guides, essays, and portfolio collections
Tools – What people use to create their portfolio
People – A small handful of portfolios
A collection of essays, slides, and guides.
Article page: The Case Study FactoryThe Case Study Factory is about how similar so many UX portfolios seemingly look alike. The authors write:
“How the formulaic approach to UX case studies is numbing our critical thinking as designers, and how to bring a unique point of view to our work.”
Provides some pretty good tips at the end, however I recommend you read the whole article for context. Also because it’s a good article.
This is a compilation of tips and tricks to improve a design portfolio. She states:
While each design discipline has slightly different project expectations (i.e. UX wants wireframes while Branding wants logo sketches), I’ve realized there is an overall universal set of tactics that, when applied, will automatically enhance and differentiate any design portfolio.
The Google slide deck is really big and there are videos, so keep that in mind. It loads a little slow.
nng.com’s recent article, “5 Steps to Creating a UX-Design Portfolio” is probably what kicked this whole thing off. Actually I talked about this in another post, so I won’t rehash. But I will point out that I’ve made a number of changes to my website and my portfolio at Cargo Collective, which at this moment is offline.
My Personal Bookmarks
I’ve had the following links bookmarked for a few years. These seem more geared to PDFs.
This book was put together for the purpose of facilitating higher-quality portfolios. It will not cover project processes, but will act as a guide to documenting a project well for your portfolio. We hope the book will ease some of the anxiety around creating your first portfolio and then later exist as a helpful reference book to check a newer portfolio concept against
We are fortunate enough to see some great portfolios, however there are still many UX practitioners who are selling themselves short. There are some absolutely brilliant and in-depth guides about UX portfolios out there. But our intention with this document is to provide a concise, visual hand book on what to include in your portfolio.
Your portfolio represents you. But you’re not always there to talk about your work. No one gets hired on their portfolio alone. The best outcome is a meeting. Tonight is about snap judgments.
What people use to create sites
From the list of 80 above, (plus a few others I found) I randomly clicked into about 3-4 portfolios per group and I took a look at the page source.
Many, many sites are built using Squarespace, WordPress, Wix, or some other type of CMS with either built-in or plugins for flashy animation, grids, and what-not.
WordPress and Adobe Portfolio
Semplice home pageFor WordPress, I came across a template called Semplice. It is advertised as a WordPress template for designers. The latest version is Semplice4. Price is $100. I wouldn’t be surprised if many people have upgraded to the Studio version for $140. Semplice does not seem to have options for blogging; I didn’t see it.
Another theme I came across is Salient, although the site I found it on had a “Under Construction” label. It’s $60 and available on ThemeForest. It has over 5,500 reviews, over 95,000 sales, and is currently rated as 5-star.
If you use Behance, you may be interested in Adobe Portfolio. It’s $9.99/month, paid annually (about $120). You get access to Adobe Portfolio, Photoshop, and Lightroom, as well as access to Adobe Fonts. You can get a free trial, but you need to upgrade to connect a domain/subdomain.
Free DIY Options
Startbootstrap.com offers free Bootstrap templates, themes, and snippets that you can download and customize. Basically everything is free, with the obvious exceptions that you cannot use Startbootstrap templates to create a competitive website serving free Bootstrap templates.
I have used Startbootstrap multiple times and I find them pretty easy to use and combine. Some have CSS or JS animations built in; mostly CSS.
It does require solid HTML and CSS knowledge.
Github Pages uses your own github respository to host a website. It’s 100% free. However, it will say username.github.io/yourproject. And your code will be online for all to see. I’m also not sure if you can use Google Analytics.
Again, this is for people who have experience developing websites.
Obviously, having a free site generator is great. If you want to have your own domain, you can get a personal email address, like email@example.com. And you can connect it to github. But all that is well beyond the scope of this post.
BlankSlate by TidyThemes allows you to completely customize a WordPress installation, by providing a theme with absolutely zero styling. Sometimes you use a nice theme, but end up undoing stuff you don’t really like. Needless to say, this theme is for people with a good amount of experience. I say no more.
If you code your own site, these were some of the libraries and plug-ins some people used. I thought tilt.js was pretty cool.
There are so many JS libraries, this list will keep getting updated.
You can download InDesign templates, at 8.5 x 11 and 11 x 17. Good if you want to create a print portfolio, or if you want to redesign your resume.
A few portfolios in use
I randomly came across the following people, either in context of this post, or when reading an article, or serendipitously in some other way.
Caveat: In no way am I promoting any of the following people. I have never met them. I don’t know if they’re the kind of people who cut in line or litter. Maybe they don’t pick up after their dog….
The one thing that is true is that I took a look at their websites and I have an opinion. If you disagree, there’s a list of 80 portfolios above to check out.
Antonio Carusone, creator of Grid System. A very simple website. No images. He simply links to his other websites, most of them photography sites. The site is made with Cactus, which is another static-site generator not using Jekyll. (The last commit was 2 years ago, so it may not be maintained.)
I viewed a few other personal websites like this: simple, text-only, with no images. I think this is a good way to connect disparate interests. He seems to have a lot of experience, which is also good to know if you’re looking for ideas and you’re not early in your career.
Hiroaki Ito has this project on Behance. I’m including this person because I attended a virtual recruiter session with Google. The three recruiters reviewed two portfolios, and this project was one of them as an example from a visual designer. (The UX designer was Simon Pan, who uses WordPress. It appears to be his own theme although it could’ve started from BlankSlate.)
The project above is a combination of several very long images, stacked one on top of the other. This designer has a job at Google. He does not seem to have as much experience as the first guy.
Johna Paolino is someone I came across on Medium. She wrote an article on using CSS grid. Then I found her website, which is hosted on github. So that’s another – FREE – option. Looked like an interesting site and she seems to be employed at the NY Times.
That big font is BungeeShade.
Pendar Yousefi is the only person I came across in the list above that used Adobe Portfolio. It was pretty nice looking, so I’m including that here. He also appears to be employed at Google. He also seems to have many years of experience, which is another good data point.
To be clear, you cannot create an Adobe Portfolio account and link it to a personal domain without becoming paid subscriber. He does a good job of connecting his web properties. For him, he’s getting his money’s worth. But I just want to make sure it’s clear, according to the website, money appears to have been exchanged.
I came across Sharon Tsao‘s portfolio above, too. She does NOT appear to be employed. But I thought her simple site was an interesting example, and she seemed to explain her background particularly well.
She built this herself, or at least she did not use a template or CMS.
Thoughts & Reflections
I wrote this post over the course of 1-2 weeks. Right away, my initial thoughts for my own portfolio when the time of this post were to create a simple site that links out to other websites or to just expand my current WordPress installation (this blog). I also considered installing a separate WordPress instance altogether, which is still a strong possibility.
Despite my rant at the top of this post, I have started to change my opinion a little on the importance of portfolios. I think there is something to be said for trying to display your work in as good a light as possible.
I’m still collecting more data about these 80 portfolios, so there will be another post. And I’ve found more items to add to the Tools section (Webflow, anyone?), so I’ll probably continue making updates to this post in addition to simply posting again.
[Featured image credit: Photo by Pierre Bamin on Unsplash]
This selects the 5th child of the body, then the 2nd child from that. This is almost like using CSS selectors to select parent and child elements.
One of the things I love about Lynda is that they recommend additional courses to learn more about related topics. A few courses the instructor recommended included:
jQuery for Web Designers
Angular 2 Essential Training
ReactJS Essential Training
It might not be easily noticeable from this blog, but over the past few weeks I’ve updated my main website. I tend to do this a few times a year, as I gain feedback, or learn what works and what doesn’t work. Hopefully this change will stick around for a while. This post is documentation of what I did and why.
Over the past several months, I have been trying to get a better understanding of what UX managers look for when they view a candidate’s portfolio. There were a few resources I looked at that helped inform my opinions in this regard. After reading a few articles and slideshow presentations, reviewing websites, and gathering feedback, I had a few ideas. Here are a few points and screenshots demonstrating my ideas and how they affected the design.
I. Overall Design and Home page
One way or another, I ended up looking at a few portfolio pages from designers I’d met in-person or came across online. Despite reading several of those “10 UX Portfolios To Admire” articles, what I’ve discovered is that sometimes simple is best. And that translates to a template site, often paid.
Paid subscription services are anything from $6-$8 or more each month. I don’t think someone should have to pay a monthly fee in order to apply for a job. That meant I’d have to create it myself or use a free service. I’ve used Carbonmade, Coroflot, and even Behance (barely), which are all free. But their designs are limited and my research showed that managers will evaluate candidates on the usability of their portfolio, even when it’s hosted by a third-party.
Reviewing both free and paid sites, the ones I liked best were made by the paid services Squarespace or Wix, using remarkably similar templates. Essentially, that template was a site with basic navigation, a grid of projects on the home page, project pages, and a simple About page. Following that template, I came up with a basic grid for my home page. But I jazzed it up a bit with some fancy CSS throughout the site.
II. Presenting an Overview
In previous designs, I assumed that managers would read. But, my research showed that they might spend 30 seconds reviewing a portfolio, for the first time. I also came across numerous resources insisting that candidates outline role, problem or goal, and outcome when presenting their work.
So you can see in the screenshot below how I’ve outlined this information right at the top, next to an image.
II. Fast Scanning
Another consideration was the amount of time a manager spends reviewing a portfolio. My research showed that managers only spend 30 seconds on a portfolio and review 12-50 portfolios for a given position. I used the process/approach section to break up information into digestible, one-sentence long chunks.
III. Tell a Story
The word “storytelling” is thrown around a lot, especially in relation to self-promotion. I think “storytelling” is overused and cliche, and I’ve written about storytelling a few times. However, for the redesign, I thought about the concept of beginning, middle, and end. Thinking through these part of a story, I ended up with the following sections: overview, a process/approach section, documentation, and outcome. Outcome really helps “sell” it as a story, because it provides a conclusion.
Having talked about outcome, what now?
One idea I thought of, as I was writing this, was to shrink the size of the thumbnails on the home page to show more information on the screen. But, I think the “hero” image/section is what takes up most of the space, vs the size of the thumbnails. This is one change though; I have a running list of updates and ideas on Remember the Milk, where I can also track priority.
I plan to ask more friends for feedback and maybe get feedback from a few connections on LinkedIn. It was fun, I learned a lot. I look forward to adding more projects and the site evolving over time. Or until I redesign it again!
Currently finished with the 90% of the HTML/CSS of my website. I found this great free photograph to use in the main image section of the site. (Looks so classy.) I need to post some of the portfolio image alternatives I came up, but decided not to use.
This post is all about site performance optimization, what I did and what I learned. (That big, fat, red F in my cover image is explained below!)
I wasn’t initially set on improving the performance of my site. (It’s only 1 page.) But, remembering all my lessons on Treehouse, I decided to minify some files anyway, like a pro. For CSS minification, here’s a nice simple site for that: cssminifier.com. This site also has a js minifier and image optimizers. In addition to working on my style.css file, I went through and deleted unnecessary classes for my font-awesome css file, and minified the CSS, since I only needed about 12 icons. (I’ve since added a few back.) I also minified the smoothscroll.js file, which gives my site that, you know, smooth scroll effect. It’s a pretty short file, but it doesn’t hurt.
Before I used cssminifier.com, I also took it through a clean CSS filter on http://www.website-performance.org/ to prettify* my style.CSS file before minifying it. While I was there, I also decided check out the site performance. Ouch! Some big issues, especially with compressing images, including my new classy photo. This is where I got started on improving site performance.
Two big problems were too many CSS calls and images that were not optimized. I realized that I needed to link to some CDNs to reduce CSS calls. Instead of including the jQuery.js, Bootstrap.js, and Bootstrap CSS files, I’m now linking to the the files via CDN. I tried using one of the above websites to optimize my images, and also convert some of them to PNGs, but the server couldn’t handle it. So I used good, old Photoshop.
I did not know what this term meant, but I got an F from a few site performance websites. GTMetrix explains that using a compressed, zip, file will save a lot of space. But it’s up to the browser to decide which file to use. GTMetrix and Website-Performance.org both suggested compressing my styles.ccs, bootstrap.css, and font-awesome.min.css files. Well, since I’m going to be using a CDN for the Bootstrap and jQuery files, I’m not too concerned about those. But I did continue as it advised for the relevant files.
Having done all this, I am happy my site loads fast, especially on mobile. And a learned a lot, not just from these websites, but also about the tools I used to complete them. For instance, Cyberduck, an FTP-transfer client doesn’t show .htaccess files, but Filezilla does.
The sites were a little pedantic about image compression, and they would complain about the need to compress images another 1-4% or so. Since I’m using a portfolio site, it’s not really that important to me to try to squeeze every last unnecessary pixel out of my images, especially since most of them aren’t visible when the page loads. The only one I might consider continue to optimize is the main hero image, because it’s the first one you see.
The optimization sites also pointed about how long it takes for an embedded Vimeo link to load. This is also not a concern for me, because the video is only visible in a pop-up. And the sites also dinged all my embedded CSS files and image files because they were not coming a CDN. I looked into the option of uploading them into a CDN, but abandoned that idea. (I think it might have required a payment, and per my previous entry, that was not going to work for me.)
For my next project, I’ll start with this site first, because it lists out everything that’s slowing down a site, such as a missing .htaccess file — or I may use it to improve the performance of my other project sites. The nice thing about the results it provides is that it’s very helpful for organizing tasks and working systematically through the performance optimization process.