Forem: Alex Quasar

How to create a bicycle builder website

Alex Quasar — Fri, 29 May 2020 08:11:33 +0000

Hello,
I am looking, interested in creating a bicycle builder website similar to that of bitmoji or facebook avatars but with real picture parts.

I envision it you would pick the following from of list of picture available on the website

pick the frame
pick the tires
pick the handle bars
pick the seat
pick the pedals

Each step of the way it would be added on the bike similar to bitmoji.

Any advice on how this could be done. Existing tool, libraries platforms or websites that exist similar to that?

A bonus would be to be able to 3d rotate the final picture at the end.

Heat Mapping Software

Alex Quasar — Sun, 24 May 2020 21:05:50 +0000

I am very interested in doing some heat mapping for some of my websites for myself and for others to see where users are interacting on the page and for conversion rate optimization.

Is there any free service or fremium app that allows this to be done on any website like React, Shopify, Wordpress, etc that you recommend.

I am aware of HotJar, what is your favourite tool for this and what do you recommend and why!?

Thanks Dev Community!

Looking for a Gatsby Coding Partner/Friend

Alex Quasar — Sun, 05 Apr 2020 22:54:58 +0000

Hello everyone!
I am looking for a coding partner to learn and explore AWS Amplify with Gatsby. I am looking to go beyond Dabit's starter file and create some real cool full stack applications. Obviously I am not expecting someone to do the same project as me or use the exact same tools but please reach out to me if you are interested or checkout my github profile!

Thank you, stay safe and have a wonderful day!

Discord Channel https://discord.gg/aGDE8E

Resources for React with AWS

Alex Quasar — Fri, 27 Mar 2020 06:48:14 +0000

Hello does anyone know where I can find some good resources for learning serverless AWS with React?!

I am trying to create a very simple app and would be nice to see some detailed instructions or videos on how to do this with React Hooks and Cognito AWS.

The following I am trying to create is

Sign up ( with FB and Google Social Sign up also )
Sign In
Different user levels (ie. user, admin)
A nice display of the user name and email on the dashboard page, when they sign in
Ability to logout
Ability to change password or reset password

Extras

Deploying with AWS (how to deploy with Environment variables)
Hosting this AWS web app with Netlify

Some of this stuff I have some familiarity with using Mongo and Express, but I would like to see if there is some great tutorials with Cognito and React Hooks that really explain things in detail with best practices.

I mostly having issues with the user sign up via "federated identities", and I am a bit lost in the docs.

Thank you for your expertise and advise DEV community ❤️.
Please share some resources or links and your advise in the comments below!

Re:Plain Rocks!

Alex Quasar — Sun, 22 Mar 2020 20:24:30 +0000

Summary

I been doing some research on getting a website chat application in with my React/Gatsby App. I am looking for something pretty simple for budget conscious clients.

Crisp although it has a free tier, the free tier is very limited. Intercom has all features and more, but is pricey.

My Requirements

The requirements would be

Budget Friendly (Free tier preferably)
User notified in live time when someone sends message to phone, email and / or fb messenger
Ability to customize welcome message

Nice to haves

Ability to create simple chatbot to answer common questions (Like on FB Messenger)
Online vs Offline modes (i.e set hours of operation for when representative is online)

Which chat platforms are developers today using for smaller clients, what would you recommend or are you creating your own!?

Please let me know your recommendation or what you use below and why!

Help with Google Sheets Script for Parsing JavaScript Objects

Alex Quasar — Fri, 13 Mar 2020 20:08:41 +0000

I have thousands of rows of data in a Google Sheets File in a column that looks something like

[{"amountMax":49.99,"amountMin":49.99,"availability":"true","color":"Brown","currency":"USD","dateSeen":["2019-04-11T08:00:00Z"],"isSale":"false","offer":"Online only","sourceURLs":["https://www.walmart.com/ip/SadoTech-Model-CXR-Wireless-Doorbell-1-Remote-Button-2-Plugin-Receivers-Operating-500-feet-Range-50-Chimes-Batteries-Required-Receivers-Beige-Fixed-C/463989633"]}]

I would like to be able to return the max value, the currency, the color attributes. How can I do that in Google Sheets. Ideally would like to do something like being able to retrieve the data attributes how I would normally in javascript like in this link here https://repl.it/@alexhoy/WetSlateblueDribbleware

However this does not seem to work for me when creating a function in script.google.com

For example, here is a slugify function which takes an input (cell) and turns it into a slug/handle without the need for looping. In Google Sheets I can then call =slugify(b2) and turn that value into slug form

/**
* Converts value to slug
* @customfunction
*/
function slugify(value) {
  /*
   * Convert the the vs in a range of cells into slugs.
   * @customfunction
   */
  let slug = '';

  slug = value.substring(0, 100).toLowerCase();
  slug = slug.replace(/[^\w\s-]/g, '');
  slug = slug.replace(/\s+/g, '-');
  Logger.log(slug);

  return slug;
}

I want to do the same thing without looping to parse the object data above or declaring a range of values and what not.

Any suggestions on how I can do this in a simple way like shown above without the need for declaring active spreadsheet, range values and looping.

Help using Animated Icons with React and What is your fav animated icons library?

Alex Quasar — Sun, 08 Mar 2020 10:20:14 +0000

Greetings Dev Community
I am exploring animated icons which are super cool. One awesome library I came across was Lord Icons (https://lordicon.com/). They have some killer icon animations and I was trying to find a way to implement this in my React/Gatsby project 🙌❤️.

Unfortunately, they do not have a React example on their Github and I am having some issues with getting it to work after trying to follow their examples😬

Does anyone here wanna help me tackle this? I am hoping we can submit a React documentation to them once we figure it out!

PS.
Who else is using animated icons with React and what library are you using? Please submit recommendations below 🙏

Which Headless CMS do you use for your blog and do you recommend it or not

Alex Quasar — Thu, 05 Mar 2020 10:08:09 +0000

Hello, I am gonna go on a bit of rant here, but there does not seem to be too much good options for Headless CMS for the developer/blogger which has a free tier. I am currently using Contentful, which has a nice user interface, a generous free tier and a nice way to create Content models for different use cases. It is used by big companies and has a huge team behind it. However, it is not without its flaws (IMHO)

I am using Contentful with Gatsby and here is some of the things I find annoying from my experience...

I need to rebuild the site every single time I publish a new article. So if there is a small spelling mistake, then another rebuild. That eats up a ton of build minutes on Netlify.
The rich text content editor is buggy and the preview layout is totally different than what is on the site. I have to constantly make sure that the spacing is recognized inside of the editor, and often that involves adding extra line breaks. This makes it is more spaced out on the editor than what renders on the site.
Uploading images is super tedious, cumbersome and slow. Why is there no easy drag and drop.
Limited options in the Rich Text Content Editor. The rich text editor is only slightly better than the almost useless MarkDown editor. For example they do not have the options to

a) Make subscripts or superscripts
b) Make centering of text easy. Actually it is very sad that this very simplistic use case is not even possible in the editor. You do not have the option to have some text centered and some text left centered within the same rich text field :(

It would be nice if they had some extra code embed options as well. For example in the long form rich text editor you might be writing an article where you embed some CSS, HTML and JS code. Contentful does not allow you to do that in a flexible way. Though there is probably no CMS out that will have that feature, where you can drop code in, select a language and have it perfectly displayed like if you were using https://prismjs.com/

If you are writing all your articles in a very structured manner and they all look the same and things occur in the same order than Contentful works okay. Otherwise, it is problematic. Further, it requires a lot of hands on developer work to customize.

These major flaws outlined make Contentful a writing averse platform due to the extra time needed to write and publish an article.

The user experience for writing on the Medium Platform is absolutely amazing. Unfortunately, I have not seen any available CMS that even comes close. Hate or love WordPress (I personally am on the hate side), WP makes it easy to write articles and customize the content for anyone, even if it's a developers nightmare.

Why is there no headless CMS that can combine some of the powerful Content modeling features Contentful provides with the amazing writing UX on the Medium Platform? Whichever CMS does this first, and provides a free tier to the personal bloggers will definitely topple all other current CMS platforms.

Thoughts?

DUOTONE

Alex Quasar — Tue, 01 Oct 2019 00:02:07 +0000

Hello DEV community. I am working with Gatsby.js and a using the image optimization features which are really cool. I am have come across something called duotone which inside the childImageSharp properties of a fluid container. For example, part of my GraphQL query

mainImage {
              sharp: childImageSharp {
                fluid(
                  maxWidth: 100
                  maxHeight: 100
                  duotone: { shadow: "#95ADE9", highlight: "#AFC4D8" }
                ) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
          }

Is anyone an expert on DUOTONE, I want a quick way to see how my images would look with different DUOTONE styles, similar to a CSS color picker, but for DUOTONE.

Any suggestions?