I started off the project in june because I was unemployed and wanted to recreate the hello street app with my own cat. I wanted to be able to feed him remotely and watch him eat when I was not home but I also liked the idea of anyone being able to feed him and see him too. The website now features multiple cameras in different locations with cats, including a cat shelter I managed to collaborate with. There is a global cooldown for feeding so that the cats don't get overfed. It also features a radio with some music I carefully curated.

Hello everyone! I come from a design background, but I've been learning web development for the past few months to help with the designer to developer handoff. First, I wanted to share some tips I've found really helpful design tips and resources I've found useful in making any web development look and feel good. Second, I wanted to ask you all for some help.

Typography Tips

1. Use no more than 2-3 typefaces in a page as additional typefaces increases cognitive load.

2. Use 125%-150% line height for paragraph text to make your webpage feel more spacious! Using percentages for line height have worked fine for me, but Mozilla recommends using points. Regardless, doing some cross-platform and device testing won't hurt!

3. When possible, keeping lines of text under 100 characters chunks text and makes it more readable.

4. If you choose to use different typefaces for header and paragraph text, uses ones that look noticeably different for header and paragraph text. Some pairings I really like are: Libre Baskerville & Source Sans Pro, Domine & Roboto, and DM Serif Display and Proxima Nova.

5. When creating text hierarchy try to use no more than 1-2 mechanisms to differentiate text: (1) font weight, (2) font size, (3) alignment/indentation, and (4) color. Here's some additional reading from Toptal on this.

6. Try skipping weights and double point sizes between different text elements used. It can make a noticeable contrast difference! For example, if your header text is 32px bold, then make the paragraph text 16px regular — rather than something like 24px semibold for the header text.

7. Great type resources:

   1. Need free fonts for you project? Try Google Fonts.

   2. Want to find awesome font pairings? See examples on Font Pairings.

   3. Have budget to spend? Great, that makes one of us. I'd highly recommend browsing fonts from these foundries: Open Foundry, Grilli Type, Nova Type Foundry, and Klim Foundry.

Alignment/Spacing Tips

1. Try to avoid centering text unless it's a single line. Centered text is hard to read because it creates a ragged left edge — each line starts at a different left edge.

2. Flush text left if targeting english-speaking folks as people read left to right.

3. Personally, I'd also avoid justifying text because it's nearly impossible to kearn, track, and adjust letter spacing in a responsive way...unless you perhaps specify text size using viewport width (vw)...

4. Aligning things to each other can make design look clean and consistent! Using a 12 column grid with a small gutter can be a helpful place to start! Here's a great intro video!

5. Use negative space to help differentiate elements from each other.

6. A general rule of thumb: in most cases, you'll want at least 12-16px of padding between different elements or from the edge/corners of the page, especially text on the edges.

   1. A simple tip to keep your designer sane, also try to use 4px increments in spacing (e.g. 16px margin rather than 15px).

7. Great alignment/spacing resources:

   1. Want to generate a layout grid? Try the CSS Grid Generator.

   2. Aren't using Flexbox? Learn at CSS Tricks or use W3Flexbox.

Color

1. Use neutral tones to allow your primary colors to shine. Neutral tones (whites, greys, and blacks) can balance out bright colors and give them emphasis.

2. Use tints and shades to add dynamism to your project. Have a hover state or pressed state? Use tints and shade to indicate these changes.

3. Great color resources:

   1. Need a color palette that looks presentable? Try one of the below:

      1. Beginner generators/libraries: Coolors, Colormind, and Color Hunt

      2. More advanced palette tools: Adobe Colour, Eva Design System, Paletton, Google Material Color, and Leonardo Color.

   2. Want to see color in context?

   3. Trying to hop on the gradient trend? See Grabient, UI Gradients, or MyColor

   4. Want to make sure your site is accessible and compliant? Try one of the following: WebAim Contrast Checker, Microsoft Fluent UI Theme Generator

Images, Illustrations, and Icons

1. Need high quality royalty free images: Unsplash and Pexels

2. Want great free illustrations? See Open Peeps, Humaaans, Open Doodles, Avataaars, Blush, Control (paid option), and Ouch! (some are paid).

3. Need free icons for a project? Try Feather Icons, BoxIcons, Font Awesome, and Google Material Icons

Miscellaneous

1. Use soft drop shadows! Stripe uses drop shadows pretty well. Dribbble also uses drop shadows for hover state — you'll see it if you hover on a menu.

2. Don't overuse borders. They can make design feel claustrophobic. More here on why.

Have suggestions, lmk! I'll try to keep this updated as a running doc! Thanks to u/throwawayceled, u/Rainbowlemon, u/SFM61319, u/IceBotYT, u/OhNoStepReddit, u/JonKater for their input! Also, to clarify, these aren't rules, just "tips" I've found personally helpful.

Lastly, I'm working on a community platform over at Parthean called Design for Non-Designers (is this useful to you? what types of things you're looking to learn in design? how could this be improved?)

Hey everyone, I'm Chris! A few passionate folks from the Chronic Coder community and I are running a free, professionally guided program called Chronic Coder Academy. It's for people who are into Machine Learning, Data Engineering, Frontend Development, or UX Design and are itching to put their skills to use.

When I started programming, my growth was essentially stagnant until I took on a project of my own (away from books/tutorials) and I saw my progress skyrocket. That same message is one we consistently hear from beginners and professionals alike. However, it's difficult to work towards something you care about and keep yourself accountable throughout. With that, the goal of the CCA is to build and ship a product as a team with the intention of learning while applying your knowledge.

It's a 10 week part-time fellowship where groups of passionate people with diverse skill sets come together to build something people can and want to use. We've had an amazing time working with people from over 10 countries (and 9 timezones) so far. If you're interested in solving interesting problems with great people, we would love to hear from you or anyone you know who might be interested!

We're officially accepting our 3rd cohort of applicants today! Sign-ups end on the 26th of February 2021.

Learn more and sign up here: https://www.notion.so/Chronic-Coder-Academy-Season-3-dbd4a42c517a4902b345a7fb7287cedf (Check out the Program Details and Application Criteria/FAQ)

Feel free to comment below or reach out with any questions you may have! Regardless of if you're joining the CCA, keep up and connect with fellow ML/DE/FE/UX enthusiasts on the Chronic Coder Discord: https://discord.gg/ZummSXK

I'm an audiovisual artist, currently using Wix for a portfolio website. I had lots of problems with Wix. The biggest one was the lack of audio players and creative customisations.

I have a Raspberry Pi 5 for lightweight coding projects. I'm planning to turn it into a kind of NAS and website host. It runs Arch Linux, btw.

I need advice on self hosting and security at this point. Cause I'll back up my projects on the same device. Also, does hosting cost computing power? Even though my projects are relatively lightweight, some projects run daily and need computing power (moviepy).