DEV Community: Luis Augusto

The Collab Lab TCL-28: The Road to Lettuce Know

Luis Augusto — Tue, 14 Sep 2021 00:11:24 +0000

For 8 weeks, TCL 28 cohort members worked together with the guidance of their mentors to create Lettuce Know, a smart shopping list application with a friendly UI.

Who are the TCL 28 Collabies and Mentors?

The Developers a.k.a. Collabies:

The Mentors:

What did they do?

the-collab-lab / tcl-28-smart-shopping-list

Overview

What is this project?

The goal of this project is to collaborate with your Collab Lab team to create a “smart” shopping list app that learns your buying habits and helps you remember what you’re likely to need to buy on your next trip to the store.

How does it work?

As a user, you will enter items (e.g., “Greek yogurt” or “Paper towels”) into your list. Each time you buy the item, you mark it as purchased in the list. Over time, the app comes to understand the intervals at which you buy different items. If an item is likely to be due to be bought soon, it rises to the top of the shopping list.

Check out an example

The app will work in many of the same ways as iNeedToBuy.xyz (on which our project is based) with the exception that we will not be implementing barcode…

View on GitHub

Over the span of 8 weeks, TCL 28 collaborated together remotely to create Lettuce Know, a smart shopping list which learns the user’s shopping habits and predicts when items are due for the next purchase using React, Firebase & Material UI.

What did that collaboration look like, exactly? Well, each week the Collabies would pair off in twos so they could work together on an assigned issue or story. They would be responsible for working through that story, asking for help from their fellow Collabies or mentors if needed, creating a descriptive pull request on GitHub which outlines what changes were made, completing code reviews, and then finally, merging the pull requests to the main branch.

Here are a sample of the various tickets that the Collabies worked on together:

Generated a new, unique token for users, and stored it inside Firebase Firestore. Also, users can share their tokens with their friends and make changes to their shopping lists.
Implemented a feature to mark an item on the shopping list as purchased so the app can learn how often the user buys different items. When a purchase is recorded, the estimated number of days until the next purchase date is calculated and recorded in the database.
Created a feature for sorting shopping list items in order of how soon the user is likely to need to buy each of them again so that it’s clear what the user needs to buy soon.
Created items schema and stored the item information and connected to user tokens.
Created a feature for preventing the user from typing a duplicate item, duplicate items are not added to Firestore.
Added a feature to filter the user's shopping list to make it easier to locate an item in the list.
Used accessibility tests (a11y) to make sure the app is accessible to all users.

What did they learn?

Before participating in The Collab Lab, our Collabies all had experience with frontend and backend development with varying technologies, however, they all shared experience with HTML, CSS, JavaScript, and React. In addition to using those skills to build their app, they also used some new technologies — Cloud Firestore, a NoSQL document-oriented online database, Material-UI, and SweetAlert.

But aside from learning to use Cloud Firestore and query documents in the database, the most important skills that the Collabies learned were communication and remote collaboration. With everyone living in various time zones and having different responsibilities during the week, communication was essential to being successful as a team. The Collabies utilized Slack and GitHub to schedule pair-programming sessions and communicate what changes were being made to the codebase at any given time. When one pair had a question on the story they were working on, they communicated that to the group and received the feedback they needed to continue solving the problem.

It wasn’t only essential to communicate progress on the project, but also to communicate our successes. Every two weeks, the Collabies and mentors participated in a retrospective, where everyone had the opportunity to share their appreciation for each other, what they thought went well, and what they thought could be better. There was always a lot of love that was shared during those meetings.

Week after week, the quality of code reviews, pull requests, merges, and communication skills improved. Pair-programming helped them talk through their code and articulate their thought processes verbally. By the time the cohort was just about wrapped, the group was getting weekly requirements knocked out early and started opening their own issues and making tickets.

Collabie Experience Highlight

During our first day, I immediately felt welcomed by both Andrew and Stacie’s positive radiance. I soon was introduced to the rest of my fellow Collabies and mentors. Ever since I met them, everyone has been super respectful, helpful, and supportive from start to finish. Throughout our pair programming sessions, our office hours on the weekdays, and our code reviews on Saturday, I soon fell in love with the routine I had for 8 weeks. Working together felt adventurous, as we tackled different issues together and admired our accomplishments at the end of each session. From their working style to their coding knowledge, I learned so much from each one of my talented teammates. Even though there may be times we do run into a bug, the other pair and mentors were there for guidance. Our mentors were super responsive, patient, and insightful, I am still shocked how they were able to do all this while balancing a job. Looking back, I really do think this is one of the best teams I have ever been on, and I am so thankful for this experience. :) — Sandy Dai

Lettuce Know Project Demo

You can check out our project demo here!

TCL-22 Recap

Luis Augusto — Fri, 04 Jun 2021 23:35:54 +0000

Combining the collective minds of some very talented and enthusiastic individuals with a fascination for avocados and mochi ice cream, TCL-22 set out on a quest to create a fun and engaging shopping list app, aptly titled AvoCart!

Built with React, Material UI, Styled Components, and Firebase, AvoCart was an effective use case for both the team to understand how effective communication can create less friction and allow for more creativity and a greater developer experience in group projects.

How does it work?

Highlights

The team clicked right from the beginning with fun pairings like team Baltimore and team Canada. Everyone worked collaboratively and effectively throughout the entire project. Some of the highlights from working together on this project include:

The team was able to implement and learn new packages very quickly, such as Notistack, Material UI, and Styled Components, and everyone was open to learning new tools.
Everyone was very proactive and did not need a lot of direction from the mentors when it came to pairing up and communicating with each other. They began discussing UI in a thread before any of the mentors really knew!
All team members provided constructive feedback in a respectful manner.
The growth on the team was amazing. Kudos to Abbey, Karan and Caitlin for each securing jobs during the experience!
Daria’s curiosity and ability to explain difficult concepts was incredibly helpful, especially with out-of-scope topics such as the pre-built token generator. She does a great job of digging deep into the technical details.
Everyone on the team was positive and enthusiastic about creating software that was fun to use, and everyone agreed on the avocado theme.
The team created a Figma board to track moodboard inspiration, and build designs for the avocart site. The designs included both mobile and desktop. Both Figma, and responsive design was something that the team learned by themselves.

You can watch the demo of the project below, and also visit AvoCart through the hosted application on Firebase or at our Github repo!

The Design

Our team built out the design prototypes in Figma before developing the UI, and it was a great experience for collaborating and whiteboarding UX and design ideas for the project! Feel free to take a look at our Figma board or preview the images below!

Authors

Advisors

The Twitter Verified Fad is Old News. Time to get Github Verified ✅

Luis Augusto — Wed, 21 Apr 2021 18:36:20 +0000

Have you ever noticed how there are some commits with a verified tag next to it and wondered what it meant and why not all commits show this message?

I always thought it was interesting that commits could be verified and I wondered why it was even necessary. Is a non-verified commit less than a verified one? Does it prevent others from taking credit for your work? So I dug into it and was able to get all of my commits verified, and below I share with you how easy it is to setup and why it is useful.

If you want to get deep into this, Github has an entire section in their docs that talks about commit signatures, but I'll do my best to summarize the basics below.

What does it mean to have a verified commit?

If you see a verified commit and click on the tag, you will see a message similar to the image above saying that a commit has been signed with the committer's verified signature, and it displays a GPG Key ID as proof of the signature.

GPG stands for GNU Privacy Guard, which allows developers to encrypt and sign data and communications. You can learn more about it from their website.

By default, commits made directly from Github's website, such as PR merges, suggested PR changes, etc, but by generating a GPG key and associating it with your computer, you can use it to digitally sign all your commits and tags locally.

Why should I verify my commits?

By signing your commits, GitHub can confirm that commits are really made by you from your device. This is useful especially when working in open source where lots of people are touching the same project, or for security oriented companies.

You're probably wondering, doesn't Github already know that I made a commit in my name because, well, I made the commit from my account? Yes and no. While you do have authorization to push and pull repositories from your computer, you can easily change the name or email that displays in the commit, and in some case impersonate or be impersonated yourself. Try it!

$ git config --global user.name "Mona Lisa"
$ git config --global user.email "monalisa@notfake.com"

You are now making commits as Mona Lisa!

Pretty crazy to think that it's that easy to change the author of a commit.

How do I get verified?

So if you are ready to join the exclusive and elite verified club (disclaimer: it's not actually exclusive or elite), it's pretty simple:

1) Go to the GPG Website and download the binary release for your OS

2) Once installed, open up terminal and run gpg --gen-key. When asked to enter your email address, make sure to use the email address associated with your Github account. You may also be asked to create a password. Don't forget the password, you will need it later on!

3) Once it's done, you should see some information about your new key. You can also run gpg --list-keys to refer back to it.

$ gpg --list-keys
gpg: checking the trustdb
gpg: marginals needed: 3  completes needed: 1  trust model: pgp
gpg: depth: 0  valid:   1  signed:   0  trust: 0-, 0q, 0n, 0m, 0f, 1u
gpg: next trustdb check due at 2023-04-17
/Users/luis/.gnupg/pubring.kbx
------------------------------
pub   rsa3072 2021-04-17 [SC] [expires: 2023-04-17]
      A5BE09DEE58C0ACFE...
uid           [ultimate] Luis Augusto <hello@luis.app>
sub   rsa3072 2021-04-17 [E] [expires: 2023-04-17]

4) See that really long alphanumeric string up there? You'll need to tell Git about that key with these commands:

$ git config --global commit.gpgsign true
$ git config --global user.signingkey A5BE09DEE58C0ACFE...

5) Finally, using that key, run the command $ gpg --armor --export A5BE09DEE58C0ACFE... to get a public key that looks something like this:

-----BEGIN PGP PUBLIC KEY BLOCK-----
fjaiodjf;aosejaw;fiasjdfoawefao;jsfid
'fsdfijados;ifjaewf aewfiaafjaf;aodfj
iaif;oasjafiajf;iaofj;afjas;fja;fej;f
---END PGP PUBLIC KEY BLOCK-----

Yes, I did just mash the keyboard, but it's something like that.

6) Take that entire block and copy it over the GPG Keys section of your Keys Settings in Github.

7) Make your first commit on your computer! You will be asked for that password you made in step 2, and if you are on a Mac, you can save it to your keychain so you'll never be asked about it again.

Now every time you make a commit, you'll be feeling like this cool pup.

I hope this helps! If you want to learn more about it, here is a recap of the resources I mentioned:

Code With Friends: Breaking down a community events platform I built with Vue, Firebase, and Netlify

Luis Augusto — Tue, 29 Sep 2020 00:28:15 +0000

Over the month of September, I volunteered to help build out a website for a seasonal event called Code With Friends. It's hosted by Mayuko, who is known for her online presence in networks such as YouTube and Twitch. Code With Friends is a month-long coding event where folks from all over the world work on their personal coding projects together in a non-competitive setting!

In this article, I am going to review some of the decisions I made while building the site. You can view the site at codewithfriends.io and the repo is open source:

CWFriends / CodeWithFriends

Learn new things! Make cool stuff! Have fun! Do all that, with an online community of friends.

Code with Friends

Learn new things! Make cool stuff! Have fun! Do all that, with an online community of friends.

About The Project

This website is used to support seasonal coding events hosted by Mayuko. Through the website, users can view and participate in the latest seasonal coding event, read news updates, submit projects, and learn more about Code with Friends and its previous events.

Built With

NuxtJS for static site generation
Vuetify for the frontend framework
Netlify for static hosting
Netlify CMS for Content Management
Firebase for authentication, serverless functions, media storage and databases
Algolia for searching users for check-in groups

Getting Started

To get a local copy up and running follow these steps.

Installation

Clone the repo with git clone https://github.com/luisaugusto/CodeWithFriends.git
Make sure you have the latest version of Node installed…

View on GitHub

Site Requirements

There were a few requirements I imposed on myself when building the website:

Since this is a volunteer project for a non-profit, expenses should be at a minimum.
I made the site open source so others could contribute in case I become no longer available, so I needed to make all the content and data easily editable
The site had to be built in about 3 weeks, so I wanted to lean on a component framework to do all the heavy lifting of the development for me.

The Solutions

Each of these requirements led me to the main decisions of how I would build the site:

I would host the site on Netlify as a static site for easy CI/CD and free hosting
All of the content would be managed in markdown files to mitigate the need for a database and make contributions easier. I decided to use Netlify CMS since I already use Netlify for Hosting
Since Vue is my expertise, I opted to use Nuxt as a static site generator and leverage Vuetify as the component framework.

Site Features

The website is being used for all of the signups and submissions of projects during the event, and to make it easier I wanted users to sign in with Github to submit their projects and information. Since I am using a static site, I went with Firebase to setup a serverless database with Firestore and run some functions that would enter signups in a spreadsheet for the staff to review the entries. The signup form also makes use of Algolia Search connected to Firestore to query users to add to a check-in group:

There is also a calendar of important dates for each event as well as a calendar for lab hours, which users can leverage to meet with guides who can help them with questions relating to their project. This was really easy to do with the Vuetify Calendar Component, and it's just pulling data from the markdown files.

Costs

So far, the only cost that has been accrued was $15 for adding a collaborator to a Netlify Team to transfer the site over, but it's just a one time payment since we won't be needing multiple collaborators after transfer completed. Netlify also has a build limit for 300 minutes per month which is pretty easy to stay under as long as we are mindful of our builds.

Firebase also has a very generous free tier that includes a good quota for many of their tools, and they include $300 of free credit for the first 3 months! The only quota I have hit so far was the reads, which is limited to 50k in the free tier. This is my first time using Firebase and I thought that was plenty. But on the day the site launched, we hit over 2.2 million!

This was due to me not optimizing reads well enough, and so I've been working the past few days to get this down by creating indexes and documents with grouped data, as well as switching to Algolia for user searching. Firebase doesn't support text queries, so it was incredibly wasteful to collect all users when doing a search. Since I've been optimizing, I've dropped the reads dramatically. Even if I can't get it down to 50k per day, an additional 100k reads per day is just 6¢. In total, I'm thinking Firebase will cost about $1.50 a month on a busy month and maybe even be free on an off season. I'll have to monitor it over the next few months to get a better idea.

Algolia is also free for the first 10,000 searches, and since I'm just using it on the signup form which can't be consistently accessed, I doubt we will hit that for a while.

Final Thoughts

While I have built many static sites in the past (including my own personal site), this has definitely been a huge learning experience for me with optimizing Firebase and getting every piece of the site to work together harmoniously.

Signups are open now and anyone is welcome to join! Thanks for reading and I would appreciate feedback!

Does a Top Level Domain (TLD) really matter?

Luis Augusto — Wed, 09 Sep 2020 18:20:32 +0000

With my current domain, luis.codes, set to expire next month, I was contemplating whether or not I should renew it. It is more on the expensive side ($72/mo), and it's not really perfect for what I want it to say about me. I don't just code, I design and create digital experiences. As much as I would have liked to have luis.dev, I unfortunately missed the boat on that, so I went out looking at what other options I have available to me.

My criteria is not too bad I don't think, I just want something short, not too expensive, and with a TLD that I can use personally and professionally.

Namecheap claims to have 479 different TLDs, which is pretty incredible! There are a ton of options at different price points, but as usual, the ones suited to a developer are mostly taken for (.dev, .io, .sh, etc).

After sifting through the options, I ended up securing luis.earth while I decide whether or not I would really like to use that. I thought it might be good for me because it stands out, and I could use a subdomain for my site (dev.luis.earth), I can setup an email such as dev@luis.earth, and as someone who is environmentally conscious it might signify that I care about the planet. Since it is generic enough, it doesn't shoehorn me into doing one thing (just codes, or just a dev, just designs, etc). I have been writing it out with email addresses and website urls to see if it looks good, and I think I am happy about it but just worried it doesn't fit how just about every other developer uses .dev or the like.

Maybe I am thinking about it too much. Do you think that a TLD is really important, or so long as it isn't too cheesy it doesn't really matter? Do you include that in your first impressions of a website?

Hello Dev! Introducing myself to the community

Luis Augusto — Tue, 14 Jul 2020 20:38:45 +0000

I recently found out through an article that you can create a special repo on Github that can display a Readme on your profile. It's a pretty neat feature, and I'd recommend reading this if you're interested in learning how to do it!

3 Ways to Spice up your Github Profile README 🔥

Jaye Hernandez ・ Jul 12 ・ 3 min read

#github #markdown #statistics #branding

Anyways, I wanted to share what I wrote and introduce myself a little bit to the community and my followers. I've been posting on here since late 2019, and one of my goals is to write 50 posts by the end of the year. Here's a little bit about who I am, what I'm working on, and some other tidbits:

I am a fullstack developer working at a creative agency using the LAMP stack, building websites and applications for companies in the medical and biotech fields. On personal projects, I lean towards a JAMstack with Node and Vue/Nuxt/Vuex, relying on API integrations and static site generators.

🔭 I’m currently working on:

Internal projects at work built on Pimcore
Building up my online presence through blogging and Twitter
A few personal projects, like a small social network for family members, an interactive site for hiking trails, and an NPM package

🌱 I’m currently learning:

React - After so many years of using Vue, I figured it would be also good to see what it's like developing with a different framework. It'll also give me a chance to understand JSX and CSS-in-JS.
TypeScript - Currently finding ways to introduce it into my applications.

👯 I’m looking to collaborate on:

Open source projects built with JS, especially ones that use React or TypeScript
Resolving issues with CSS layouts and responsiveness, Nuxt/Vue, or other JS bugs

🤔 I’m looking for help with:

Finding ways to meet and connect with other developers, especially during the limbo of quarantines and lockdowns. I have always been recommended to find a mentor, and would love to hear from other people's experiences in those types of programs.

💬 Ask me about:

Ways you can improve your lighthouse scores
How to get the most out of CSS Grid and Flexbox Layouts
How you can preserve the planet and reduce your carbon footprint.

📫 How to reach me:

You can contact me at my email address or at one of the other places I hang out at, such as on Dev, my Twitter, and LinkedIn.

😄 Pronouns:

He/Him/His

⚡ Fun facts:

I have a Bachelors in Music Production & Engineering, which helped nourish my interests in creativity and design. I later translated those skillsets into programming and web development, and I have enjoyed building cool things for over 8 years now.

You can find more about me on my personal website, and feel free to comment below if you have any questions, thanks!

Light Mode or Dark Mode, which do you prefer?

Luis Augusto — Thu, 02 Jul 2020 00:01:48 +0000

Do you put all of you apps in dark mode if possible? Do you think every website should have an option for this, or at least integrate with your device's settings, such as with the prefers-color-scheme CSS property? Is your IDE an exception to your preference?

I thought it would be interesting to hear what others have to say. I do try to put everything in dark mode, including my IDE, and for some devices with OLED screens, that means better battery performance. Some people I talk to mention that it's harder to read text with dark backgrounds and could affect accessibility. While it's great to always have the options, that means extra work for the UI designers to create a secondary color scheme for it.

Facebook has jumped on the bandwagon with their new design, as well as YouTube and a plethora of apps which have had it for years. What are your thoughts?

Stop Using Fixed Headers and Start Using Sticky Ones

Luis Augusto — Thu, 25 Jun 2020 18:41:30 +0000

Like them or not, headers that stay visible at the top of the page are a very popular UI and will likely not be going away anytime. Many sites make use of this kind of header, including Reddit, Facebook, Apple, and even DEV. What do each of these sites have in common? They are all using fixed headers.

I wanted to share that there is a better way to do this, and I am curious as to why no one is taking the approach of using a sticky header instead.

The issue with fixed headers

By using position: fixed on an element like the header, the element is removed from the stack and positioned relative to the browser window. That means it no longer takes up space and any elements positioned after it will adjust to fill up that area. In regards to a header, that means elements will be placed underneath it and you'll need to accommodate for it by using padding or relative positioning.

See Dev or Apple, which use a variable to store the header height and applies padding to the body or main tag:

Or Facebook, which uses relative positioning and a top offset to adjust for spacing:

Or Reddit, which uses a margin to solve it instead:

This is probably the worst way to build a header like because it's not responsive and extra unnecessary css. I suggest that headers like this should use sticky positioning instead.

The benefits of sticky positioning

By using position: sticky on a element like the header, it does a few great things. First of all, it doesn't remove the element from the stack, so it still keeps it's real estate in the container. That means you don't have to perform any of these hacks to get the right spacing for the main content and the header. Also, it still stays at the top of page or wherever you need it based on the scroll position. So instead of:

Setting header to position:fixed
Calculating the height with JS or manually adding it to a variable
Adjusting the position of the content with padding, margins, or relative positioning with that variable

All you have to do is:



header {
  position: sticky;
  top: 0;
}

And that's it, no extra variables or calculations needed.

Here is a very simple example in a Codepen:

Browser Support

Of course, the only downside is that it does not work on IE 11:

But really though, who is accessing the Apple website or Dev from IE11? Maybe I'm just crazy, but think there a few sites that can start making this transition over to sticky positioning.

My first browser extension is now available! The process of creating a new tab replacement for Chrome and Firefox

Luis Augusto — Tue, 23 Jun 2020 17:33:28 +0000

During the month of May, I participated in a Code with Friends event hosted by Mayuko. The goal of the event was to bring developers together and build projects that improved quarantine life.

I love being in the outdoors, and having to comply with shelter in place can make it difficult to experience nature while also being cooped up all day and working from home. Outdoor Inspiration was built as a reminder of what is waiting for us when life returns to normal, and to encourage people to make plans to explore the outdoors. I wanted to inspire people with views of natural wonders while they are unable to experience them in person.

Building a Browser Extension

I used this project as a learning experience for building extensions on Chrome and Firefox. While the initial build is a very simple extension that basically replaces the new tab with a Vue application, I plan to add to this over time and build more features to better integrate it with each browser.

I primarily used the Chrome Extension Guide to build this out initially. For Firefox, I used their Extension Workshop Site to learn about their process, but since I have a very basic extension, I just had to make sure my manifest.json file was compatible with Firefox. Mozilla has a very useful tool called Extension Test which I used to test my Chrome extension, and fortunately it was easily portable over to Firefox.

Building a browser extension can definitely be a daunting task, especially if you want deeper integration with the browser as well as cross-compatibility. If you just want to replace the new tab without all the bells and whistles however, it's as easy as making a manifest.json and packaging it up. I do want to add a few other integrations over time, such as browser syncing and settings which will add another layer of complexity to the app, but will be a great next step for me to learn more about building browser extensions.

Feel free to check out the project on Github and let me know your thoughts!

luisaugusto / outdoor-inspiration

A new tab extension for Chrome and Firefox that displays pictures and descriptions of US National Parks.

Please consider supporting my work and other projects:

⛰ Outdoor Inspiration

A new tab extension that displays photos and descriptions of US National Parks.

Chrome	Firefox
Download	Download

The app can also be previewed as a static site here as well as run locally.

Photos from the application are fetched from my galleries in Flickr, and information about the park is pulled from the NPS website.

About the Project

Inspiration

I build this project as part of the Code with Friends event in May 2020, which had a theme of building something to improve quarantine life.

View on GitHub

Understanding Semantic Versioning

Luis Augusto — Fri, 15 May 2020 00:19:40 +0000

Semantic Versioning (or Semver) is a methodology for releasing software with a universal versioning system. You have probably seen semantic versioning in many places, such as in node package files or Github tags and releases. So how does it work?

The Basics

Semantic versioning consists of 3 numbers, each separated by a decimal. An example of a semantic version would be 3.6.4, or 4.12.11.

The first digit is a MAJOR version which should be incremented when there are incompatible API changes
The second digit is a MINOR version that is incremented when new functionality it added in a backwards compatible manner
The third digit is a PATCH version used for backwards compatible bug fixes.

To visualize this, semantic versioning follows the pattern MAJOR.MINOR.PATCH

Sometimes, you may also see a pre-release tag appended to the version with a dash, such as 1.0.0-alpha or 1.0.0-beta.12, which are both valid semantic versions.

Version Updates

In your package files, a majority of the dependencies will have a special character at the beginning of it, such as ~ or ^. These are special characters that are used to signify how a package should be updated.

~ tells us that the package can updated to the latest PATCH update, but has a fixed MAJOR and MINOR version. ~4.5.6 means all releases from 4.5.6 up to, but not including 4.6.0 can be used.
^ is similar to ~ but also allows updates to the MINOR version, so ^1.2.3 can be updated all the way to, but not including, 2.0.0. However, below 1.0.0, it will act the same as ~ in that it will only update the PATCH version, the MINOR version will be fixed.

For anything below 0.1.0, all versions prefixed with ^ will not update, even to the next PATCH.

Version Ranges

Other than specifying a version with a special character, there are also ways to write ranges of versions:

> and >= will signify any version greater than, or greater than or equal to, the specified version, including MAJOR versions, such as >=2.0.0. < and <= work the same but with less than.
Putting two versions next to each other will specify a range, such as 1.0.0 - 1.5.0 (equivalent to >=1.0.0 <1.5.0)
An x can be placed in any version number as a wildcard, it just means any version is acceptable, such as 2.x or 1.2.x

Here are some examples of valid semantic versions:

1.2.3
0.0.1-alpha.2
1.0.0-beta
0.9.0-b.89.z
^1.4.5
~1.9.1
>2.0.0
>=19.4.3
5.x
<4.0.0
<=4.0.0
1.2.3 - 1.2.6
>5.0.0 <=2.1.0
>=10.1.8 <11.0.0-beta.9

I hope this brief explanation can help you understand your package files, and also help you in releasing your own projects! There is much more to learn more about semantic versioning, and you can check out the official site which goes into way more detail about each requirement for naming your versions.

How to get that neat Messenger gradient scrolling effect with CSS

Luis Augusto — Sun, 10 May 2020 18:22:02 +0000

For those of you that use Messenger, you probably already know that there are ways to customize a chatroom by changing the message colors, emoji, group name and photo, nicknames, etc. However I recently found that you can add a gradient to you message bubbles which I find to be really pleasing:

So how does this work? It's actually really easy to do and a great use of background-attachment: fixed property value.

With background-attachment: fixed, the background does not scroll with its container, and it becomes fixed in place relative to the browser viewport. You can see this a lot in Squarespace templates to create that parallax image effect:

The same property can be used with gradients, since those are also treated as images in CSS, creating that scrolling gradient effect. If you also have multiple elements with the same background and fixed attachment, it makes it look like the background gradients flow into each other from bubble to bubble. Since the background is relative to the viewport, the size of the gradient is the size of the viewport:

What are some other neat things you can do with this? You can make it look like a box is disappearing when you scroll up:

It's pretty neat what one property in CSS can do to create such an interesting design effect. I'll definitely be putting this in my toolkit!

Anyone here still using CSS Floats?

Luis Augusto — Sat, 02 May 2020 22:12:58 +0000

Since the introduction of grids and flexbox, I have pretty much removed floats from my vocabulary. The only situation in which I would use them would be with positioning images next to wrapping text. Are there any other situations you have run into where floats were a better solution than other alignment tools?

DEV Community: Luis Augusto

The Collab Lab TCL-28: The Road to Lettuce Know

Who are the TCL 28 Collabies and Mentors?

What did they do?

the-collab-lab / tcl-28-smart-shopping-list

Overview

What is this project?

How does it work?

Check out an example

What did they learn?

Collabie Experience Highlight

Lettuce Know Project Demo

TCL-22 Recap

How does it work?

Highlights

The Design

Authors

Advisors

The Twitter Verified Fad is Old News. Time to get Github Verified ✅

What does it mean to have a verified commit?

Why should I verify my commits?

How do I get verified?

Code With Friends: Breaking down a community events platform I built with Vue, Firebase, and Netlify

CWFriends / CodeWithFriends

Learn new things! Make cool stuff! Have fun! Do all that, with an online community of friends.

Code with Friends

Table of Contents

About The Project

Built With

Getting Started

Installation

Site Requirements

The Solutions

Site Features

Costs

Final Thoughts

Does a Top Level Domain (TLD) really matter?

Hello Dev! Introducing myself to the community

3 Ways to Spice up your Github Profile README 🔥

Jaye Hernandez ・ Jul 12 ・ 3 min read

🔭 I’m currently working on:

🌱 I’m currently learning:

👯 I’m looking to collaborate on:

🤔 I’m looking for help with:

💬 Ask me about:

📫 How to reach me:

😄 Pronouns:

⚡ Fun facts:

Light Mode or Dark Mode, which do you prefer?

Stop Using Fixed Headers and Start Using Sticky Ones

The issue with fixed headers

The benefits of sticky positioning

Browser Support

My first browser extension is now available! The process of creating a new tab replacement for Chrome and Firefox

Building a Browser Extension

luisaugusto / outdoor-inspiration

A new tab extension for Chrome and Firefox that displays pictures and descriptions of US National Parks.

Please consider supporting my work and other projects:

⛰ Outdoor Inspiration

About the Project

Inspiration

Understanding Semantic Versioning

The Basics

Version Updates

Version Ranges

How to get that neat Messenger gradient scrolling effect with CSS

Anyone here still using CSS Floats?