Παρουσιάζοντας το Sizzy - Ένα εργαλείο για την ανάπτυξη τρελών ιστοτόπων που ταιριάζουν

Εδώ, λοιπόν, έγινε ο Sizzy.

Ξέρεις την διαδικασία. Εξετάζετε μια εφαρμογή για έναν πελάτη και πρέπει να κάνετε κάθε σελίδα και κάθε στοιχείο να εργάζεται σε κάθε παραλλαγή, σε κάθε συσκευή.

Χρησιμοποιούσα ήδη το storybook για να αλλάξω μεταξύ όλων των παραλλαγών ενός εξαρτήματος, αλλά έπρεπε ακόμα να αλλάζω μεταξύ 12 συσκευών μόνο για να δούμε τις αλλαγές σε όλα αυτά. Και έτσι ξεκίνησαν όλα.

Τι γίνεται με την κατασκευή ενός εργαλείου όπου μπορείτε να κάνετε προεπισκόπηση πολλαπλών οθονών ταυτόχρονα κατά την εργασία σας; Αυτό θα ήταν τακτοποιημένο, huh!

Πώς ξεκίνησαν όλα

Το αρχικό τιτίβισμα για την ιδέα πήρε 200+ αρέσει και 60 + retweets έτσι οι άνθρωποι σίγουρα ενδιαφέρονται για αυτό το είδος εργαλείου.

Αρχικά, το έκανα να λειτουργεί μόνο με την ιστορία αντιδράσεων. Είχα κάποια προβλήματα με τις βιβλιοθήκες css-in-js κατά την ανάπτυξη τοπικά, αλλά βρήκα μια γρήγορη λύση.

Μετά το ιστορικό της ολοκλήρωσης, ολοκληρώθηκε το αρχικό πρωτότυπο. Το επόμενο πράγμα που έπρεπε να αντιμετωπίσω ήταν η μεγέθυνση και σμίκρυνση σε όλες τις οθόνες.

Οι χρήστες πιθανότατα θα ήθελαν να δουν τις αλλαγές τους σε μεγαλύτερες οθόνες όπως iPads ή μικρούς φορητούς υπολογιστές και δεν μπορείτε να τα τοποθετήσετε χωρίς να σμικρύνετε.

Μετά από ένα μικρό τίναγμα με το πλάτος και το ύψος του γονικού iframe και μετασχηματισμού: κλίμακα (ζουμ * 0,01) στο περιεχόμενο, τελικά πήρα το σωστό.

Σε εκείνο το σημείο άρχισα να σκέφτομαι ότι το εργαλείο μπορεί πραγματικά να δημοσιευθεί ως αυτόνομη εφαρμογή στο διαδίκτυο, και το plugin bookbook μπορεί να είναι μόνο μια προσθήκη. Έτσι, άλλαξα τον στόχο μου και άρχισα να εργάζομαι προς αυτή την κατεύθυνση.

Πρόσθεσα μερικά θέματα, γυαλισμένα μέχρι το UI λίγο, αγωνίστηκα για 30 λεπτά για να βρω ένα όνομα και ....... * drumroll * Sizzy είναι. Ρυθμίσω προσωρινό GitHub repo για άτομα που ενδιαφέρονται να παρακολουθήσουν, ώστε να μπορούν να γνωρίζουν πότε θα κυκλοφορήσει ο κώδικας.

Είμαι περήφανος που έκανα τον Addy Osmani και τον Jason Miller να ασχολείται με ένα κενό repo

Είχα πολλά χαρακτηριστικά που ήθελα να συμπεριλάβω, αλλά έπρεπε να ολοκληρώσω τα σημαντικά και να φέρω την πρώτη έκδοση μέχρι το τέλος της νύχτας. Προστέθησα το φιλτράρισμα ανά λειτουργικό σύστημα και τύπο συσκευής και συνεχίσαμε.

Πρόσθεσα μια μπάρα url στην κορυφή, ώστε οι χρήστες να μπορούν να παίξουν γύρω και να προεπισκόπηση κάθε url.

Αφού άνοιξα τον πηγαίο κώδικα, γυαλισμένο το UI και τελείωσε πολλά άλλα μικρότερα πράγματα, το sizzy.co ήταν ζωντανό και αυτό ήταν το τελικό αποτέλεσμα:

Πραγματικά ολοκλήρωσα τις εργασίες στις 5:30 π.μ. επειδή δεν μπορούσα να κοιμηθώ χωρίς να τελειώσω * αυτό * * ένα * * πράγμα *

Τυλίγοντας

Δεν έχω δουλέψει για το δικό μου προϊόν για περίπου ένα χρόνο, και μπορώ να σας πω ότι αισθάνεται έτσι, * έτσι * καλό! Δεν υπάρχουν χρονομετρητές, δεν υπάρχουν εκτιμήσεις, καμία διαχείριση, χάος οργάνωσης και άλλα πράγματα που σκοτώνουν την παραγωγικότητά σας. Απλά καθίσετε, ξέρετε τι πρέπει να κάνετε και κάνετε το έργο που πρέπει να γίνει. Αυτό είναι!

Αντιμετωπίζετε το δικό σας πρόβλημα με την ελπίδα ότι θα λύσετε και τα προβλήματα άλλων ανθρώπων. Το πιο σημαντικό πράγμα είναι ότι στο τέλος, παίρνετε πολλά εκπληκτικά και θετικά σχόλια, τα οποία είναι βασικά το μόνο πράγμα που σας οδηγεί να κάνετε καλύτερη και πιο φοβερή δουλειά!

Θέλω να ευχαριστήσω όλους για τα σχόλιά σας και την υποστήριξή σας. Μπορείτε να ακολουθήσετε το Sizzy στο Twitter αν ενδιαφέρεστε για μελλοντικές ενημερώσεις.

Μπορείτε να με ακολουθήσετε στο Twitter για περισσότερα πράγματα που αφορούν το React και Javascript.

Εάν εσείς ή κάποιος που γνωρίζετε ενδιαφέρεται για ένα εργαστήριο του React, ελέγξτε την Ακαδημία React.

EDIT 1: Το Sizzy έχει εγκριθεί στο OpenCollective, οπότε αν σχεδιάζετε να το χρησιμοποιήσετε, μπορείτε να το υποστηρίξετε μέσα από μια μικρή δωρεά. Το όνομά σας και η εικόνα θα εμφανιστούν αυτόματα στην ενότητα των υποστηρικτών του GitHub readme. Ευχαριστώ!

EDIT 2: Εάν είστε προγραμματιστής και σας ενδιαφέρει ο τρόπος κατασκευής του Sizzy με το React, τα στυλ-εξαρτήματα και το MobX, ελέγξτε το νέο κανάλι του YouTube, στο οποίο αναρτάω βίντεο σχετικά με τα χαρακτηριστικά του Sizzy και τα στέλνω ζωντανά.

EDIT 3: Η επέκταση του Sizzy Chrome είναι ζωντανή . Η προεπισκόπηση οποιασδήποτε ιστοσελίδας στο Sizzy είναι τώρα ένα κλικ μακριά!

Adios!