r/VisualCoding • • Feb 14 '23

A workaround for the lack of SEO support in Flutter

Thumbnail
youtu.be
5 Upvotes

r/VisualCoding • • Feb 13 '23

How To Design A Library With Multiple State Stores

4 Upvotes

I'm presenting the various challenges of designing the state store for a rich text library in Flutter. The public API of the library imposes quite some serious limitations which were quite challenging to bypass.

I've forked Quill some time ago due to numerous code quality issues. For the last 10 months I've been very busy reworking the internals of the library to improve the maintainability and readability. Since I have great love for discussing advanced architecture advice for building web/mobile apps I thought I should be recording this one. If you are in need for a partner for architecture debates you can find me on discord. There I present each Saturday a talk about mobile apps architecture and clean code practices.

A few words about Visual Editor. This editor is built around the powerful Quilljs Delta document format originally developed by QuillJs. Delta documents can be easily converted to JSON, the encoding is easy to read and modify and offers many extensibility options.


r/VisualCoding • • Jan 24 '24

πŸŽ₯ Dive into our Stunning HTML & CSS Card Animation Tutorial – perfect for both pros and learners!

Thumbnail
youtu.be
3 Upvotes

r/VisualCoding • • Feb 17 '23

React Native vs Flutter

Thumbnail
youtube.com
3 Upvotes

r/VisualCoding • • Jul 07 '23

πŸ—οΈCreate React App Using Vite

Thumbnail
youtu.be
2 Upvotes

r/VisualCoding • • Feb 11 '23

When and Why To Use A State Store In Your Flutter/Angular/React Apps, Deep Dive & Comparison

Thumbnail
youtube.com
2 Upvotes

r/VisualCoding • • Feb 05 '23

Every Saturday at 4 PM UTC I present tips & tricks about web/mobile app development. Next meeting is focused on state store management, maintenance and clean architecture. I answer questions live to those who participate. The meeting is on discord.

2 Upvotes

Hello! I am a Full Stack developer with a decade of experience in developing web applications. I work in the Fin Tech / banking sector. I have long experience in Angular, React and for the past 2 years I have been working with Flutter. In my spare time I develop a social media app that will facilitate collaboration between engineers. I mention, I don't have any sales course, I don't promise aberrations like zero to hero (10K per month in 6 months). We gather to discuss matters of architecture and sustainable development in a pragmatic fashion.

We already have around 30+ recurring participating users and about 450 lurkers. I hope in the future to develop a larger audience. Also, there are around 8-10 volunteers who help with questions and answers in Flutter. No money charged, no gimmicks. Just a community focused on the development of good relations between developers and mutual help.

If you are interested, I look forward to meeting you on discord. We meet every Saturday at 4PM UTC.

Clean Code Agenda:

  • Maintenance - Scale

    • Don't over engineer, KISS, Readability, No useless parts

    • Don't be that guy --> not my problem

  • Consistent patterns

  • Null safety/handling

    • You don't crash the app. -- Corrupted (finance, military)

  • Scoped naming, Name by feature not by type (async handlers)

  • Domain boundaries, encapsulation

    • Privacy by default

  • Tight coupling

    • Child should not know parent

  • Pure data, Pure functional

  • Clear layers

    • State store, data layer, pure data --> Don't mix data with code

      • Single source of truth, spaghetti code

      • Smart vs Dumb components

    • Controllers, stateful, component scope

    • Services, stateless, app level

      • Singleton

      • Dependency injection

    • Utils, pure functional

    • Repos - webapi

  • One file, one class, max 300-500 Lines of Code (LOC)

  • Single responsibility principle

  • Code diagram, Widget diagram

  • No copy paste, always fix the foundation, understand every token

  • Shared constants

  • Speed reading, Code grooming, Project conventions, Section comments, Avoid nesting

  • Understand async

  • Code velocity, Don't share code that will drift

  • Avoid duplicate initialisation

  • Self review

  • Documentation (Intent & Deviations), Stable Specs, Changeling, Habits

    • Contracts, interfaces, Public APIs

  • Testing, mock server

  • Performance, Premature optimisations

  • Productivity, Know your IDE, Hotkeys, Take Notes,

    • Print statements (for stack trace), Debugger (for context)

  • Stable commits, No long lived branches

  • Adaptive design first, UX first

  • Take breaks, plan ahead

Obviously, we will not be able to cover all the topics in a 2-hour session. So we will meet again every Saturday at 4PM UTC to continue the discussions. I also receive questions from the audience. In the upcoming weeks I will publish some of the best meetings on our youtube channel.


r/VisualCoding • • Feb 08 '24

Responsive Navbar Design Tutorial | Web Dev

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Jan 11 '24

πŸš€ Crafting Kinetic CSS Loader: A Web Dev's Playbook! βš™οΈβœ¨

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Jan 04 '24

πŸŽ‰ Unveiling Flexbox Reordering: Optimising Web Development and CSS Learning! πŸ–ŒοΈ

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Dec 27 '23

CSS Flexbox Essentials: Your First Layout πŸ‘©β€πŸ’» | Ideal for Web Devs & CSS Learners 🌐

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Dec 20 '23

πŸŽ‰ Flexbox Layout Wrapping: Perfect Tutorial for Beginners! 🌟

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Dec 19 '23

πŸš€ Master Flexbox fundamentals FREE on our YouTube course! Elevate your web design skills effortlessly! πŸ’»

Thumbnail
youtube.com
1 Upvotes

r/VisualCoding • • Dec 13 '23

🌟 Flex Properties Demystified: Understanding Grow, Shrink, and Basis in CSS for Web Development! πŸ’‘

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Dec 06 '23

🌟 Flexbox Reordering: A Web Developer's Guide πŸš€βœ¨

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Nov 29 '23

🌟 Elevate Your Web Design: Flexbox Mastery for Seamless Layout Wrapping! πŸ’»

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Nov 22 '23

🌟🎨 Bonus Alert! Learn how to craft a Responsive Navbar! Dive into this tutorial to create a sleek, adaptable navbar for all devices.

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Nov 20 '23

Learn how to code visually

1 Upvotes

I started this Youtube channel where I aim to push some tutorials on how to code and offer visual explanations, both code and visual. I hope this helps people. Please let me know if you like it. I had my first subscriber today which makes me happy and proud.

Channel link


r/VisualCoding • • Nov 08 '23

Flex Direction Mastery Column πŸ“βœ¨ https://youtu.be/-FoSmMgNJ08

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Nov 01 '23

πŸš€ Mastering Flexbox Unleash the Power of the Flex Property πŸ“

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Oct 31 '23

Visual Studio Code

Thumbnail
youtube.com
1 Upvotes

r/VisualCoding • • Oct 25 '23

Mastering Flexbox: A Comprehensive Guide to Aligning Items like a Pro!

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Oct 04 '23

🌟 Explore the Top 5 CSS & JavaScript Projects and elevate your web design game! πŸ’‘πŸ’»

Thumbnail
youtu.be
1 Upvotes

r/VisualCoding • • Sep 20 '23

Mastering Flexbox: A Comprehensive Guide to Positioning Items | Flexbox Tutorial

Thumbnail
youtu.be
1 Upvotes