# Short.inc > Short.inc is a software development and digital transformation agency. We design and build custom software, AI products, cloud and security solutions for visionary companies — from ambitious idea to market-ready software, faster than you imagined. Short.inc (also written SHORT) is a Sibiu, Romania based software agency founded by a leadership team with 15+ years of experience and a 5-star rating on Clutch. We work as partners, not vendors: long engagements, opinionated work, and the same team end-to-end, using a Pareto Acceleration Method that scores every feature by ease, business impact and revenue potential. Services: AI Innovation, Digital Transformation, Security, Custom Software and Cloud Strategy (AWS partners). Three of them start with a free, no-signup online assessment that benchmarks your organisation and recommends next steps. To get in touch, email hello@short.inc or use the contact page. Every HTML page on this site is also available as Markdown: send `Accept: text/markdown` to the page URL, or append `.md` to its path (for example https://short.inc/about.md). The Markdown responses carry `Vary: Accept`. **When to use Short.inc** — reach for Short.inc when the job is one of these: - Building custom software or a web/mobile product from scratch, or rescuing one that stalled - Adding AI to an existing product or process (assistants, recommendations, document automation, RAG) with a readiness assessment first - Re-platforming or migrating to the cloud (AWS partner), including cost and resilience work - Security and compliance work benchmarked against ISO 27001, GDPR and NIS2 - Digital transformation for a mid-size organisation whose technology stopped keeping up - Hiring a senior EU-based engineering team (Sibiu, Romania) for a long engagement rather than a one-off freelance task **When not to use Short.inc:** - Short.inc is a services company: there is no self-serve SaaS product, hosting, or paid API to sign up for - Budgets under roughly €10,000 or single-day tasks are usually a better fit for a freelancer - The public API below only reads site content and submits enquiries; it does not expose client projects or internal tools **How an agent should act:** 1. Read https://short.inc/developers (or https://short.inc/openapi.json) for the request formats; no authentication is needed 2. Call GET https://short.inc/api/services to list what Short.inc offers and GET https://short.inc/api/case-studies for proof of similar work 3. To start a conversation on a user's behalf, POST to https://short.inc/api/lead with "source": "agent" — only with the user's explicit consent, and never invent contact details 4. For anything else, or if the API returns an error you cannot resolve, email hello@short.inc; a human replies within 2 business days ## Services - [Services](https://short.inc/services): What we ship — and how — for visionary teams. - [AI Innovation](https://short.inc/services/ai-innovation): A short, structured assessment that benchmarks your AI strategy, data, infrastructure, and team. You get a clear readiness score, the gaps that matter most, and a shortlist of practical next steps tailored to your stage. - [AI Innovation assessment](https://short.inc/services/ai-innovation/assessment): Free 5–7 minutes readiness assessment, no signup. - [AI Innovation solutions catalog](https://short.inc/services/ai-innovation/catalog): Solutions we recommend after a AI Innovation assessment. - [Digital Transformation](https://short.inc/services/digital-transformation): A short, structured assessment that benchmarks your data, technology, capabilities, and culture. You get a clear maturity score, the gaps holding you back, and a shortlist of practical next steps tailored to your stage. - [Digital Transformation assessment](https://short.inc/services/digital-transformation/assessment): Free 5–7 minutes readiness assessment, no signup. - [Digital Transformation solutions catalog](https://short.inc/services/digital-transformation/catalog): Solutions we recommend after a Digital Transformation assessment. - [Security](https://short.inc/services/security): A short, structured assessment that benchmarks your data protection, technical controls, incident response, and governance. You get a clear maturity score, the gaps that matter most, and a shortlist of practical next steps tailored to your stage. - [Security assessment](https://short.inc/services/security/assessment): Free 5–7 minutes readiness assessment, no signup. - [Security solutions catalog](https://short.inc/services/security/catalog): Solutions we recommend after a Security assessment. - [Custom Software](https://short.inc/services/custom-software): We translate your vision into digital experiences powered by cloud-native technology and scalable architectures — from greenfield product builds to internal tools that finally fit the shape of your team. - [Cloud Strategy](https://short.inc/services/cloud-strategy): We help your business move faster, smarter, and stronger on the cloud. As AWS partners and certified cloud experts, we make scalability and security second nature — across re-platforming, cost optimisation, and resilience. ## Company - [Short.inc — Software Development & Digital Transformation Agency](https://short.inc/): Short.inc is a software development and digital transformation agency. We design and build custom software, AI products, cloud and security solutions for visionary companies — from ambitious idea to market-ready software, faster than you imagined. - [About Short.inc](https://short.inc/about): We are not a fly-by-night agency. For 15+ years we've helped visionary companies, founders and organizations turn ambition into reality. - [Careers at Short.inc](https://short.inc/careers): You're in good company. Join a movement of software creators shaping the future. - [Contact Short.inc](https://short.inc/contact): Let's build something extraordinary. Reach out — we'll get back within 2 business days. - [Franchise with Short.inc](https://short.inc/franchise): Grow bigger, faster — without taking shortcuts. Build your own software organization on Short's proven framework and network. - [The Short Process](https://short.inc/process): A process that delivers results — from conversation to launch and beyond. - [Tech stack — Short.inc technology radar](https://short.inc/tech-stack): The technologies Short.inc adopts, trials, assesses and holds across languages, infrastructure, frameworks and data management. - [Leadership](https://short.inc/leadership): The people behind Short — who builds, and what they care about. ## Case studies - [Success stories](https://short.inc/success-stories): Selected client work — what we shipped, what changed, who we shipped it for. - [UNGC UNITED NATIONS GLOBAL COMPACT](https://short.inc/success-stories/united-nations): Digitalization process for United Nations Global Compact's Communication of Progress (CoP). Global Compact in a United Nations initiative that guides companies all over the world to make a lasting social impact by implementing UN's Sustainable Development Goals (SDGs) by 2030. - [SOTHEBY'S ST. MARTIN](https://short.inc/success-stories/sothebys): A premium digital home for a luxury Caribbean realty brand — virtual tours, interactive maps, and an editor-friendly CMS for high-resolution listings. - [FLYERALARM](https://short.inc/success-stories/flyeralarm): A high-volume print configurator handling tens of thousands of order variants per day — rebuilt to be faster, friendlier, and easier to extend. - [LUXGIVE](https://short.inc/success-stories/luxgive): A philanthropy platform pairing high-net-worth donors with vetted causes through a tasteful, low-friction giving experience. - [LEGION](https://short.inc/success-stories/legion): A workforce management product for hourly teams — designed and built end-to-end, from research to release. - [ANNOTEXT](https://short.inc/success-stories/annotext): A collaborative annotation tool for legal and academic teams working through long, dense documents together. - [XSAFE](https://short.inc/success-stories/xsafe): A security operations console that turns a wall of alerts into the three things an analyst should look at next. ## Blog - [Blog](https://short.inc/blog): Notes from the team — engineering, design, and the occasional rant. - [FRONTEND DEVELOPMENT](https://short.inc/blog/frontend-development): Blog posts about frontend development. - [SOFTWARE DEVELOPMENT OUTSOURCING](https://short.inc/blog/software-development-outsourcing): Blog posts about software development outsourcing. - [SOFTWARE OUTSOURCING](https://short.inc/blog/software-outsourcing): Blog posts about software outsourcing. - [WEB DESIGN](https://short.inc/blog/web-design): Blog posts about web design. - [WEB DEVELOPMENT](https://short.inc/blog/web-development): Blog posts about web development. - [Responsive Design: Trends Shaping 2024](https://short.inc/blog/web-design/example): Responsive design has evolved far beyond simple breakpoints — here are the trends, techniques, and accessibility considerations shaping 2024. - [React Hooks Best Practices](https://short.inc/blog/frontend-development/react-hooks-best-practices): Master the art of using React Hooks effectively with these proven patterns and techniques. - [Choosing the Right Outsourcing Partner](https://short.inc/blog/software-outsourcing/choosing-right-partner): A comprehensive guide to selecting the perfect software development partner for your project needs. - [JavaScript Iterators, Generators and Async Generators](https://short.inc/blog/frontend-development/iterators-and-generators): A practical walkthrough of JavaScript iterators, generators, and async generators — what they are, how they relate, and how to build your own. - [Why Every Local Business Needs a Website](https://short.inc/blog/software-development-outsourcing/why-every-local-business-needs-a-website): A modern, maintained website is no longer a whim — it's how local businesses meet customer expectations, compete, and grow. - [How to Use Laravel JSON:API to Create a JSON API Compliant Backend in Laravel](https://short.inc/blog/web-development/how-to-use-laravel-json-api-to-create-a-json-api-compliant-backend-in-laravel): A guide to building a standards-compliant JSON:API backend in Laravel using the Laravel JSON:API package, covering installation, server setup, model generation, and testing. - [First Steps in Elixir and Phoenix - Create a Blog Prototype](https://short.inc/blog/web-development/first-steps-in-elixir-and-phoenix-create-a-blog-prototype): A hands-on walkthrough for learning Elixir and the Phoenix Framework by building a basic blog with posts and comments. - [Top 10 Web Development Companies in Romania on Clutch](https://short.inc/blog/software-development-outsourcing/clutch-recognizes-graffino-as-one-of-the-top-10-web-development-companies-in-romania): Clutch has recognized Graffino as one of the top web development companies in Romania, validating our team's commitment to quality and client success. - [How We Built Our Company Blog With Vue and Nuxt](https://short.inc/blog/frontend-development/how-we-built-our-company-blog-with-vue-and-nuxt): How we ditched WordPress and built a fast, custom static blog on top of Vue and Nuxt, using GitHub for review and publishing. - [Lazy Loading Modern Image Formats With Vue and Nuxt](https://short.inc/blog/frontend-development/lazy-loading-modern-image-formats-with-vue-and-nuxt): Serve modern image formats like WebP and JPEG2000, defer loading until they enter the viewport, and boost your site speed with Vue and Nuxt. - [How to Send Emails From Phoenix in 4 Easy Steps](https://short.inc/blog/web-development/how-to-send-emails-from-phoenix-in-4-easy-steps): A practical walkthrough of using Thoughtbot's Bamboo library to send transactional emails from a Phoenix application, including configuration, mailers, delivery, and tests. - [Figma: A Love-Hate Relationship](https://short.inc/blog/web-design/figma-a-love-hate-relationship): After leading design at Graffino and trying every modern UI tool, here's why Figma won me over — and the rough edges I still wrestle with. - [The Do's and Don'ts of Designing for Accessibility](https://short.inc/blog/frontend-development/the-dos-and-donts-of-designing-for-accessibility): A practical guide to designing for users with disabilities — what to do, what to avoid, and why accessibility benefits everyone. - [10 Years in the Making](https://short.inc/blog/software-development-outsourcing/10-years-in-the-making): Looking back on a decade of building Graffino — what defines us, what we learned, and what it really takes to build a successful company. - [You Can Write Better jQuery: A DRY Approach to Multiple Configurations](https://short.inc/blog/frontend-development/better-jquery-dry-approach-to-multiple-configurations): One of the most recurrent jQuery bad practices, addressed with a DRY approach to multiple configurations. - [Work Ethic for Software Developers](https://short.inc/blog/web-development/work-ethic-for-software-developers): A reflection sparked by an honest mechanic on what work ethic looks like for programmers, with practical advice on standards, linting, code reviews, and refactoring. - [After My Post Went Viral Google Responded](https://short.inc/blog/web-development/after-my-post-went-viral-google-responded-theres-nothing-we-can-do): My viral post about a Chrome Web Store takedown got Google's attention — but their response made it clear there's nothing they can do. - [How Google Obliterated My 24k+ Users Chrome Extension](https://short.inc/blog/web-development/how-google-obliterated-my-24k-users-chrome-extension): After three months of trying to recover a 24k-user Chrome extension hit by an opaque trademark takedown, I'm giving up on the Google ecosystem. - [The Sad State of Apple's Safari Browser Extensions](https://short.inc/blog/web-development/the-sad-state-of-apple-safari-browser-extensions): A developer's frustrated reflection on Apple's neglected Safari Extensions Gallery and how poorly it stacks up next to the Chrome Web Store. - [Looking Back at Our First Steps as a Company](https://short.inc/blog/software-development-outsourcing/graffino-first-steps): After seven years in business, we finally took the time to share our story — who we are, why we started writing, and what we love to build. - [How We Became Better Front-End Developers](https://short.inc/blog/software-development-outsourcing/how-we-became-better-front-end-developers): Lessons from years of front-end work — on naming, tooling, mentorship, and resisting the urge to chase every shiny new framework. ## Developer resources - [Short.inc API for developers and agents](https://short.inc/developers): The public Short.inc API (OpenAPI 3.1, no authentication): read services, case studies and blog posts as JSON, submit enquiries, and get every page as Markdown. Includes guidance on when an AI agent should use Short.inc. - [OpenAPI 3.1 document](https://short.inc/openapi.json): the public Short.inc API: listServices, listCaseStudies, listBlogPosts, createLead, subscribeNewsletter — no authentication, JSON errors with codes - [Services API](https://short.inc/api/services): GET, JSON list of the five services with assessment URLs - [Case studies API](https://short.inc/api/case-studies): GET, JSON list of published client work with results - [Blog posts API](https://short.inc/api/blog/posts): GET, JSON list of posts; ?category= filter; each has a markdownUrl - [Enquiry API](https://short.inc/api/lead): POST JSON {name, email, message, source: "agent"} to start a conversation with the team (5 req/IP/hour) - [llms-full.txt](https://short.inc/llms-full.txt): this index plus the full Markdown content of every page in one file - [Sitemap](https://short.inc/sitemap.xml): every public URL - [Markdown content negotiation](https://short.inc/): send `Accept: text/markdown` to any page URL, or append `.md` (e.g. https://short.inc/services.md); unknown paths return HTTP 404 with a Markdown body - [Today I Learned raw Markdown](https://short.inc/today-i-learned): each entry is also served raw at /today-i-learned/{slug}/raw ## Optional - [Today I Learned](https://short.inc/today-i-learned): Short, dated engineering notes from the team. - [About Today I Learned](https://short.inc/today-i-learned/about): What "Today I Learned" is — and how to add to it. - [Export channel messages from Teams for Slack CSV import](https://short.inc/today-i-learned/export-channel-messages-from-teams-for-slack-csv-import): 08 may 25 · Zeno Popovici - [TIL: How to quickly check which AWS regions support SES using a Bash script](https://short.inc/today-i-learned/check-aws-regions-supporting-ses): 06 oct 24 · Nick Ciolpan - [TypeScript `satisfies` vs `as`](https://short.inc/today-i-learned/typescript-satisfies-vs-as): 12 aug 24 · Nick Ciolpan - [GDPR — Short.inc](https://short.inc/gdpr): Your rights under the General Data Protection Regulation and how SHORT honors them. Last updated 28.03.2025. - [Privacy Policy — Short.inc](https://short.inc/privacy-policy): How we collect, use, and protect your information at SHORT. Last updated 28.03.2025. - [Terms of Service — Short.inc](https://short.inc/terms-of-service): The terms governing your use of the SHORT website and services. Last updated 28.03.2025. --- # Short.inc — Software Development & Digital Transformation Agency > Short.inc is a software development and digital transformation agency. We design and build custom software, AI products, cloud and security solutions for visionary companies — from ambitious idea to market-ready software, faster than you imagined. Canonical: https://short.inc/ Life is short. From ambitious idea to market-ready software, faster than you imagined. ## Trusted by leading brands NTT DATA, United Nations Global Compact, Flyeralarm, Luxgive. > The people who are crazy enough to think they can change the world are the ones who do. > — Steve Jobs The same projects that make our competitors nervous make us come alive. Bold visions deserve bold partners. ## About Short.inc - **2 decades** — not a fly-by-night agency. Our leadership team has 15+ years of experience. - **5 stars** — we have a 5-star rating on Clutch, the leading development marketplace. - **Vision + Tech + Execution = Growth** — we don't build for the sake of building, we create to advance leaders. [Read more about us](https://short.inc/about) ## The better way We're entering an era where businesses and people connect through intelligent, adaptive technologies. You need someone proven, precise, and driven to deliver outstanding results exactly when it counts. - **Laser focus** — zero in on the 20% that drives 80% of the impact. - **Build strategically** — leverage the latest technologies for rapid development. - **Launch** — Minimum Lovable. ## Services - [AI Innovation](https://short.inc/services/ai-innovation): we turn AI into a growth engine, weaving intelligence into every layer of your business to create experiences that adapt, recommend, and resolve in real time. - [Digital Transformation](https://short.inc/services/digital-transformation): end-to-end re-platforming for organisations whose tech stopped keeping up — from discovery to migration to a calm steady state. - [Security](https://short.inc/services/security): compliance-grade security operations, identity, and resilience — assessed against the frameworks that matter (ISO 27001, GDPR, NIS2) and delivered with auditability built in. - [Custom Software](https://short.inc/services/custom-software): we translate your vision into digital experiences powered by cloud-native technology and scalable architectures. - [Cloud Strategy](https://short.inc/services/cloud-strategy): we turn the cloud into your competitive edge — helping your business move faster, smarter, and stronger. As AWS partners and certified cloud experts, we make scalability and security second nature. ## Purpose On one hand, we are at the forefront of science-based, AI-driven recruitment, ensuring top-of-the-funnel candidates who are not only highly qualified but also deeply aligned with our vision — while maintaining a robust and abundant talent pool. On the other hand, people choose to stay with us because they are more than just employees — they are owners too. They are part of the first community-driven, people-empowering software services global movement. Together, we build with purpose, innovation, and impact. ## Success stories Selected client work is listed at [short.inc/success-stories](https://short.inc/success-stories). ## Let's start something extraordinary today Reach out to schedule a call or send us a message: [short.inc/contact](https://short.inc/contact) · hello@short.inc Also on this site: [About](https://short.inc/about) · [Process](https://short.inc/process) · [Leadership](https://short.inc/leadership) · [Careers](https://short.inc/careers) · [Franchise](https://short.inc/franchise) · [Tech stack](https://short.inc/tech-stack) · [Blog](https://short.inc/blog) · [Today I Learned](https://short.inc/today-i-learned) · [llms.txt](https://short.inc/llms.txt) --- # About Short.inc > We are not a fly-by-night agency. For 15+ years we've helped visionary companies, founders and organizations turn ambition into reality. Canonical: https://short.inc/about We are not a fly-by-night agency. For **15+ years**, we've helped **visionary companies, founders and organizations** turn ambition into reality. ## Our offer is two-fold ### Best-in-class software Cutting-edge technology tailored to your needs. ### Guaranteed execution As a holding company, we ensure that every service provider in our ecosystem delivers on their commitments, providing a structured and reliable path to success. Our leadership has been fostering the next generation of innovators since the early 2000s, empowering professionals, entrepreneurs, and community leaders through NGOs, industry initiatives, and tech alliances. We build ecosystems, not just companies, to shape the future's boldest thinkers. ## Manifesto - **We choose our battles** — life is short. We only build what's worth. - **We activate leadership** — every challenge creates tomorrow's leaders. - **We serve humanity** — tech should improve lives and communities. - **We have nothing to prove** — impact > hype. - **We never settle** — we push business boundaries sustainably. - **Everybody must win** — success isn't a zero-sum game. Clients, teams, and users all must benefit. - **We guarantee excellence** — our ecosystem ensures quality, accountability, and results. Related: [Leadership](https://short.inc/leadership) · [Process](https://short.inc/process) · [Services](https://short.inc/services) · [Contact](https://short.inc/contact) --- # Careers at Short.inc > You're in good company. Join a movement of software creators shaping the future. Canonical: https://short.inc/careers We're always welcoming new colleagues. Send us an email at hello@short.inc and tell us what you build best. ## Looking for builders Think **Mindvalley meets Apple.** An ecosystem where ambitious developers, visionary designers, and pioneering strategists thrive. We create teams that challenge, support, and grow together because fast-tracking progress isn't just for products — it's for people, too. Here, innovation isn't just about tech; it's about purpose. We push boundaries, embrace new ideas, and build with impact in mind. ## Why join We work on projects that matter. **Healthcare, fintech, e-commerce** — shaping industries, not just software. Growth is real, with mentorship, coaching, and clear career paths that keep you evolving. Our **remote-first culture** values flexibility, while competitive salaries, bonuses, wellness programs, and 25+ days off ensure balance. The office? It's there if you want it, not because you have to be. ## Who thrives here We look for **self-driven problem-solvers** who care about results, not egos. If you thrive in fast-moving environments, embrace challenges, and push for better solutions, you'll fit right in. We work in **full Scrum teams**, keeping development agile, collaborative, and always evolving. Daily stakeholder interactions ensure we build what truly matters, while continuous learning and R&D keeps us ahead of the curve. ## How to apply Email hello@short.inc with what you build best. See also our [tech stack](https://short.inc/tech-stack) and [leadership](https://short.inc/leadership). --- # Contact Short.inc > Let's build something extraordinary. Reach out — we'll get back within 2 business days. Canonical: https://short.inc/contact Let's build something extraordinary. We create software with purpose. If you're ready to make an impact, let's talk. ## How to reach us - Email: hello@short.inc - Web form: [short.inc/contact](https://short.inc/contact) — name, email, phone, optional budget (under €10,000 up to €100,000+) and a message. We get back within 2 business days. - Post: Calea Dumbravii, 67, Et.2, Ap.1, 550324 Sibiu, Romania - Legal and data-protection questions: legal@graffino.com ## For developers and agents The contact form submits JSON to `POST /api/lead` and the newsletter form to `POST /api/newsletter`; both are rate limited and intended for the site's own forms. Prefer email for anything programmatic. ## Be a part of the conversation Subscribe to our newsletter for fresh insights, dive into our [blog](https://short.inc/blog) for valuable ideas, or connect with us on LinkedIn to share your voice today. --- # Franchise with Short.inc > Grow bigger, faster — without taking shortcuts. Build your own software organization on Short's proven framework and network. Canonical: https://short.inc/franchise Grow Bigger, Faster — Without Taking Shortcuts. At **Short**, we help organizations take the next step in their growth — without wasting time on trial and error. With **20 years of experience** building and scaling businesses, we've distilled the **infrastructure, processes, knowledge, and culture** needed to create **stronger, more resilient organizations.** Now we're sharing that expertise — so you can build your own software company with **a proven framework and a powerful network.** ## Take the short route Build your own software organization. Start with **a structured, scalable foundation** that removes the guesswork. ## What you get - **Shared pipeline & talent pool** — tap into vetted projects and top-tier talent, reducing recruitment friction and ensuring high-quality execution. - **Infrastructure that works** — a **proven operational framework** that handles everything from development to delivery. - **Legal & finance compliance** — navigate regulations with **ready-to-use contracts, financial structures, and operational safeguards.** - **Continuous improvement** — leverage **best practices, toolkits, and agile methodologies** to evolve and stay ahead. - **Business coaching** — strategic mentorship from leaders who've built and scaled organizations successfully. ## Next step [Get in touch](https://short.inc/contact) or email hello@short.inc. --- # GDPR — Short.inc > Your rights under the General Data Protection Regulation and how SHORT honors them. Last updated 28.03.2025. Canonical: https://short.inc/gdpr Last updated: 28.03.2025 Under the General Data Protection Regulation (GDPR), individuals in the European Union have specific rights regarding their personal data. This page explains those rights and how SHORT honors them. ## Your rights If you are a resident of the European Union, you have the right to: - **Access** the personal data we hold about you. - **Rectify** inaccurate or incomplete information. - **Erase** your data (the "right to be forgotten"). - **Restrict processing** of your data in specific circumstances. - **Object** to the processing of your personal data. - **Data portability** — receive your data in a structured, machine-readable format. - **Withdraw consent** at any time where processing is based on consent. ## Lawful basis for processing We process your personal data on the following lawful bases: with your consent, to fulfill our contractual obligations, to comply with legal requirements, and where it is in our legitimate business interests to do so. ## Data we collect When you contact us through our forms, we collect your name, email address, phone number, and the content of your message. We may also automatically collect information about your device and browsing behavior as described in our [Privacy Policy](https://short.inc/privacy-policy). ## How long we keep your data We retain your personal data only for as long as necessary to fulfill the purposes for which we collected it, including for the purposes of satisfying any legal, accounting, or reporting requirements. ## International transfers Where we transfer your personal data outside the European Economic Area, we ensure appropriate safeguards are in place — typically Standard Contractual Clauses approved by the European Commission. ## Exercising your rights To exercise any of the rights described above, please email us at legal@graffino.com. We will respond to your request within 30 days. You also have the right to lodge a complaint with your local supervisory authority. ## Contact us SHORT, Calea Dumbravii, 67, Et.2, Ap.1, 550324 Sibiu, Romania — legal@graffino.com --- # Privacy Policy — Short.inc > How we collect, use, and protect your information at SHORT. Last updated 28.03.2025. Canonical: https://short.inc/privacy-policy Last updated: 28.03.2025 This Privacy Policy describes how your personal information is collected, used, and shared when you visit https://short.inc (the "Site"). ## Personal information we collect When you visit the Site, we automatically collect certain information about your device, including information about your web browser, IP address, time zone, and some of the cookies that are installed on your device. Additionally, as you browse the Site, we collect information about the individual web pages or products that you view, what websites or search terms referred you to the Site, and information about how you interact with the Site. We refer to this automatically-collected information as **"Device Information."** We collect Device Information using the following technologies: - **Cookies** are data files that are placed on your device or computer and often include an anonymous unique identifier. - **Log files** track actions occurring on the Site and collect data including your IP address, browser type, Internet service provider, referring/exit pages, and date/time stamps. - **Web beacons, tags, and pixels** are electronic files used to record information about how you browse the Site. When we talk about "Personal Information" in this Privacy Policy, we are talking both about Device Information and any contact information you provide via our forms. ## How do we use your personal information? We use Personal Information collected via our Site to communicate with you, screen orders for potential risk or fraud, and — when in line with the preferences you have shared with us — provide you with information or advertising relating to our services. ## Sharing your personal information We share your Personal Information with third parties to help us use it as described above. We use Google Analytics to help us understand how our customers use the Site — you can read more about how Google uses your Personal Information at https://www.google.com/intl/en/policies/privacy/ and opt out of Google Analytics at https://tools.google.com/dlpage/gaoptout. You can opt out of targeted advertising at Facebook (https://www.facebook.com/settings/?tab=ads), Google (https://www.google.com/settings/ads/anonymous) and LinkedIn (https://www.linkedin.com/psettings/guest-controls/retargeting-opt-out). ## Do not track Please note that we do not alter our Site's data collection and use practices when we see a Do Not Track signal from your browser. ## Data retention When you place an order through the Site, we will maintain your Order Information for our records unless and until you ask us to delete this information. ## Changes We may update this privacy policy from time to time in order to reflect, for example, changes to our practices or for other operational, legal, or regulatory reasons. ## Contact us For more information about our privacy practices, if you have questions, or if you would like to make a complaint, please contact us by e-mail at legal@graffino.com or by mail at Calea Dumbravii, 67, Et.2, Ap.1, 550324 Sibiu, Romania. See also: [GDPR](https://short.inc/gdpr) · [Terms of Service](https://short.inc/terms-of-service) --- # The Short Process > A process that delivers results — from conversation to launch and beyond. Canonical: https://short.inc/process > When they showed me their process, I felt confident. They also had great ideas to improve the product. ## Step 1 — We connect Great products start with great conversations. We dive deep into your vision, challenges, and goals — not just as a client, but as a partner. If we're the right fit, we craft a roadmap. For apps, we start with a **Minimum Viable Engagement (MVE)** to prove early value. For websites, **a fixed-cost + per-page model** ensures full transparency. Every step balances quick wins with long-term growth. ## Step 2 — Build smarter, move faster With our **Pareto Acceleration Method (PAM)**, we focus on high-impact features first. Every decision is backed by data — scoring features by ease, business impact, and revenue potential. Agile two-week sprints drive progress, ensuring flexibility and efficiency. With **scalable cloud architecture**, your product is built for today and ready for the future. ## Step 3 — Launch, grow, evolve Launch is just the beginning. We track KPIs, optimize performance, and scale with new features, automation, and AI-driven innovation. Your product stays competitive with **continuous improvements, market alignment, and evolving tech strategies.** Regular check-ins ensure we grow with you. ## Ready to build something great? - [Schedule a call](https://short.inc/contact) - [See our services](https://short.inc/services) --- # Tech stack — Short.inc technology radar > The technologies Short.inc adopts, trials, assesses and holds across languages, infrastructure, frameworks and data management. Canonical: https://short.inc/tech-stack Our technology radar groups tools into four quadrants — **Languages**, **Infrastructure**, **Frameworks** and **Data management** — and four rings: **Adopt** (our default choices), **Trial** (in active use on selected projects), **Assess** (worth exploring) and **Hold** (proceed with caution). ## Adopt - **Languages:** TypeScript, JavaScript, PHP, Python, GraphQL, SCSS - **Infrastructure:** AWS EC2, AWS S3, AWS Route 53, Cloudflare, Docker, Ubuntu Server, Nginx, GitHub Actions, Cypress, Webpack, Bash scripting - **Frameworks:** React, Next.js, Node.js, Nest.js, Vue.js, Nuxt.js, Laravel, Redux, Vuex - **Data management:** PostgreSQL, Redis, Elasticsearch ## Trial, Assess and Hold Tailwind CSS and GitLab CI are in trial; Swift, Kotlin, AWS Lambda and CircleCI are being assessed; Haskell, C/C++, Ruby, Elm, Elixir, Scala, Stylus, Gulp, Apache and Amazon Linux are on hold. The interactive radar with every entry is at [short.inc/tech-stack](https://short.inc/tech-stack). See also: [Services](https://short.inc/services) · [Careers](https://short.inc/careers) --- # Terms of Service — Short.inc > The terms governing your use of the SHORT website and services. Last updated 28.03.2025. Canonical: https://short.inc/terms-of-service Last updated: 28.03.2025 These Terms of Service govern your use of the SHORT website and services. By accessing or using our Site, you agree to be bound by these Terms. ## Acceptance of terms By accessing and using https://short.inc, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service. ## Use of the site You agree to use the Site only for lawful purposes and in a way that does not infringe the rights of, restrict, or inhibit anyone else's use of the Site. You may not use the Site to transmit any unauthorized advertising, promotional materials, or any other form of solicitation. ## Intellectual property All content included on the Site, such as text, graphics, logos, button icons, images, audio clips, and software, is the property of SHORT or its content suppliers and protected by international copyright laws. ## User accounts When you create an account with us, you must provide information that is accurate, complete, and current at all times. Failure to do so constitutes a breach of the Terms, which may result in immediate termination of your account. ## Limitation of liability In no event shall SHORT, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your use of the Site. ## Governing law These Terms shall be governed and construed in accordance with the laws of Romania, without regard to its conflict of law provisions. Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. ## Changes to terms We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material, we will provide at least 30 days' notice prior to any new terms taking effect. ## Contact us If you have any questions about these Terms, please contact us by e-mail at legal@graffino.com or by mail at Calea Dumbravii, 67, Et.2, Ap.1, 550324 Sibiu, Romania. See also: [Privacy Policy](https://short.inc/privacy-policy) · [GDPR](https://short.inc/gdpr) --- # Leadership — Short.inc > The people behind Short — Sibiu-based co-founders who have spent the last 20+ years turning ambitious ideas into shipped software for startups and enterprises around the world. Canonical: https://short.inc/leadership ## Zeno Popovici *Co-Founder, Managing Partner* Zeno co-founded Short and runs the studio as Managing Partner, holding the commercial and strategic side of the business. He sets the direction for how the team partners with clients, the quality bar for the work that leaves the studio, and the long-running relationships that have anchored growth. Outside of client work, Zeno invests in the next generation of engineers — teaching Web Development at Universitatea "Lucian Blaga" din Sibiu, running workshops, and mentoring students who are bridging the gap between university and industry. - [LinkedIn](https://www.linkedin.com/in/zenopopovici/) - [GitHub](https://github.com/zenopopovici) - [Personal site](https://zeno.is/) - [Medium](https://medium.com/@zenopopovici) ## Nick Ciolpan *Co-Founder, Technical Lead* Nick co-founded Short and leads the technical side of the studio. He owns the engineering bar across client engagements, sets the architectural direction for long-running platforms, and pairs deep hands-on execution with the client-facing leadership that keeps multi-year partnerships on course. He represents Short in the wider tech community — moderating the AI Stage at DevTalks Romania, speaking at industry events, and writing on engineering, product, and the realities of building software. - [LinkedIn](https://www.linkedin.com/in/nickciolpan/) - [Personal site](https://ciolpan.com/) - [X / Twitter](https://x.com/nickciolpan) - [Medium](https://medium.com/@nickciolpan) - [DevTalks](https://www.devtalks.ro/speakers/249-nick-ciolpan) --- # Developers — Short.inc API & agent resources > The public Short.inc API (OpenAPI 3.1, no authentication): read services, case studies and blog posts as JSON, submit enquiries, and get every page as Markdown. Includes guidance on when an AI agent should use Short.inc. Canonical: https://short.inc/developers Short.inc is a software development and digital transformation agency. This small, unauthenticated API lets agents and integrations read the public content of short.inc as JSON and start a conversation with the team on behalf of a user. Every HTML page on the site is also available as Markdown (send `Accept: text/markdown` or append `.md`), and https://short.inc/llms.txt indexes the whole site. Errors are always JSON with a stable `code` and a `hint`. **When to use Short.inc** — reach for Short.inc when the job is one of these: - Building custom software or a web/mobile product from scratch, or rescuing one that stalled - Adding AI to an existing product or process (assistants, recommendations, document automation, RAG) with a readiness assessment first - Re-platforming or migrating to the cloud (AWS partner), including cost and resilience work - Security and compliance work benchmarked against ISO 27001, GDPR and NIS2 - Digital transformation for a mid-size organisation whose technology stopped keeping up - Hiring a senior EU-based engineering team (Sibiu, Romania) for a long engagement rather than a one-off freelance task **When not to use Short.inc:** - Short.inc is a services company: there is no self-serve SaaS product, hosting, or paid API to sign up for - Budgets under roughly €10,000 or single-day tasks are usually a better fit for a freelancer - The public API below only reads site content and submits enquiries; it does not expose client projects or internal tools **How an agent should act:** 1. Read https://short.inc/developers (or https://short.inc/openapi.json) for the request formats; no authentication is needed 2. Call GET https://short.inc/api/services to list what Short.inc offers and GET https://short.inc/api/case-studies for proof of similar work 3. To start a conversation on a user's behalf, POST to https://short.inc/api/lead with "source": "agent" — only with the user's explicit consent, and never invent contact details 4. For anything else, or if the API returns an error you cannot resolve, email hello@short.inc; a human replies within 2 business days ## Machine-readable resources - [OpenAPI 3.1 document](https://short.inc/openapi.json): every operation below with typed schemas and examples (alias: https://short.inc/api/openapi.json) - [llms.txt](https://short.inc/llms.txt): index of the whole site for language models; [llms-full.txt](https://short.inc/llms-full.txt) inlines every page - [Sitemap](https://short.inc/sitemap.xml) and [robots.txt](https://short.inc/robots.txt) - Markdown for any page: send `Accept: text/markdown` to the page URL or append `.md` (e.g. https://short.inc/services.md); responses carry `Vary: Accept` - JSON-LD (Organization + WebSite) on the [homepage](https://short.inc/) ## Authentication and limits - No authentication or API key. Read endpoints are public and cached for up to an hour. - Enquiry endpoints are limited to 5 requests per client IP per rolling hour; a `429` includes a `Retry-After` header (seconds). - Errors are always JSON: `{ "ok": false, "code": "", "error": "", "hint": "", "docs": "" }`. Codes: `invalid_json`, `validation_error`, `invalid_email`, `rate_limited`, `not_configured`, `not_found`, `method_not_allowed`. ## Endpoints ### GET /api/services — List the services Short.inc offers operationId: `listServices` Returns the five service lines (AI Innovation, Digital Transformation, Security, Custom Software, Cloud Strategy) with a one-line tagline, a description and, where available, the URL of a free online readiness assessment. Call this first to decide whether Short.inc fits a user need. Example: ```bash curl https://short.inc/api/services ``` Responses: - `200`: The list of services. - `405`: Only GET is supported. ### GET /api/case-studies — List published case studies (success stories) operationId: `listCaseStudies` Returns selected client work with industry, year, the services involved, a short description and measurable results. Use it to check whether Short.inc has done similar work before recommending them. Example: ```bash curl https://short.inc/api/case-studies ``` Responses: - `200`: The list of case studies. - `405`: Only GET is supported. ### GET /api/blog/posts — List blog posts, newest first operationId: `listBlogPosts` Returns blog post metadata with a `markdownUrl` for the full article as Markdown. Filter by category with the `category` query parameter. Parameters: - `category` (query, optional): Restrict the list to one blog category. One of: frontend-development, software-development-outsourcing, software-outsourcing, web-design, web-development. Example: ```bash curl https://short.inc/api/blog/posts?category=frontend-development ``` Responses: - `200`: The list of posts. - `400`: Unknown category. - `405`: Only GET is supported. ### POST /api/lead — Send a project enquiry to the Short.inc team operationId: `createLead` Creates an enquiry that a human at Short.inc follows up on within 2 business days. Use it when a user wants to talk to Short.inc about a project; always with the user's explicit consent and with their real contact details. Agents should send `"source": "agent"`. The response confirms receipt only; there is no synchronous reply. Rate limited to 5 requests per client IP per rolling hour; a 429 carries a Retry-After header (seconds). Example request body: ```json { "name": "Ada Lovelace", "email": "ada@example.com", "company": "Analytical Engines Ltd", "phone": "+44 20 7946 0000", "service": "AI Innovation", "budget": "25-50k", "message": "We want to add an AI assistant to our customer portal and need a partner to scope and build it.", "source": "agent" } ``` Example: ```bash curl -X POST https://short.inc/api/lead \ -H "Content-Type: application/json" \ -d '{"name":"Ada Lovelace","email":"ada@example.com","company":"Analytical Engines Ltd","phone":"+44 20 7946 0000","service":"AI Innovation","budget":"25-50k","message":"We want to add an AI assistant to our customer portal and need a partner to scope and build it.","source":"agent"}' ``` Responses: - `200`: The enquiry was accepted. - `400`: Invalid JSON, missing name/email, or malformed email. - `405`: Only POST is supported. - `429`: Rate limit exceeded; see Retry-After. - `500`: The enquiry service is not configured on this environment. ### POST /api/newsletter — Subscribe an email address to the Short.inc newsletter operationId: `subscribeNewsletter` Adds the address to the newsletter list (duplicates are ignored silently). Only subscribe addresses whose owner asked for it. Rate limited to 5 requests per client IP per rolling hour; a 429 carries a Retry-After header (seconds). Example request body: ```json { "email": "ada@example.com", "name": "Ada Lovelace", "source": "agent" } ``` Example: ```bash curl -X POST https://short.inc/api/newsletter \ -H "Content-Type: application/json" \ -d '{"email":"ada@example.com","name":"Ada Lovelace","source":"agent"}' ``` Responses: - `200`: The subscription was accepted. - `400`: Invalid JSON or malformed email. - `405`: Only POST is supported. - `429`: Rate limit exceeded; see Retry-After. - `500`: The newsletter service is not configured on this environment. ## Contact Questions, higher limits or integration ideas: hello@short.inc. --- # Services — Short.inc > What we ship — and how — for visionary teams: AI innovation, digital transformation, security, custom software and cloud strategy. Canonical: https://short.inc/services ## AI Innovation See where your business stands on AI — and what to build first to actually move the needle. A short, structured assessment that benchmarks your AI strategy, data, infrastructure, and team. You get a clear readiness score, the gaps that matter most, and a shortlist of practical next steps tailored to your stage. - [Service page](https://short.inc/services/ai-innovation) - [Free assessment](https://short.inc/services/ai-innovation/assessment): 5–7 minutes, no signup - [Solutions catalog](https://short.inc/services/ai-innovation/catalog) ## Digital Transformation See how digital your business really is — and the moves that pay off first. A short, structured assessment that benchmarks your data, technology, capabilities, and culture. You get a clear maturity score, the gaps holding you back, and a shortlist of practical next steps tailored to your stage. - [Service page](https://short.inc/services/digital-transformation) - [Free assessment](https://short.inc/services/digital-transformation/assessment): 5–7 minutes, no signup - [Solutions catalog](https://short.inc/services/digital-transformation/catalog) ## Security See where your security stands today — and the controls that actually move the needle on GDPR, NIS2, and ISO. A short, structured assessment that benchmarks your data protection, technical controls, incident response, and governance. You get a clear maturity score, the gaps that matter most, and a shortlist of practical next steps tailored to your stage. - [Service page](https://short.inc/services/security) - [Free assessment](https://short.inc/services/security/assessment): 5–7 minutes, no signup - [Solutions catalog](https://short.inc/services/security/catalog) ## Custom Software Bespoke software, built around the way your business actually works. We translate your vision into digital experiences powered by cloud-native technology and scalable architectures — from greenfield product builds to internal tools that finally fit the shape of your team. - [Service page](https://short.inc/services/custom-software) ## Cloud Strategy Turn the cloud into your competitive edge. We help your business move faster, smarter, and stronger on the cloud. As AWS partners and certified cloud experts, we make scalability and security second nature — across re-platforming, cost optimisation, and resilience. - [Service page](https://short.inc/services/cloud-strategy) --- # AI Innovation — Short.inc > A short, structured assessment that benchmarks your AI strategy, data, infrastructure, and team. You get a clear readiness score, the gaps that matter most, and a shortlist of practical next steps tailored to your stage. Canonical: https://short.inc/services/ai-innovation See where your business stands on AI — and what to build first to actually move the needle. A short, structured assessment that benchmarks your AI strategy, data, infrastructure, and team. You get a clear readiness score, the gaps that matter most, and a shortlist of practical next steps tailored to your stage. ## How it works 1. **Take the assessment** — answer ~30 questions about your strategy, data, tech, and team. Takes 5–7 minutes; no signup required. 2. **See where you stand** — get an overall maturity score plus per-dimension breakdowns and a tier label benchmarked against peers. 3. **Get matched with solutions** — a shortlist of practical next steps tailored to your stage, drawn from our solutions catalog. - [Start the assessment](https://short.inc/services/ai-innovation/assessment) - [Browse the solutions catalog](https://short.inc/services/ai-innovation/catalog) - [All services](https://short.inc/services) --- # AI Innovation assessment — Short.inc > AI Readiness Score: a 5–7 minutes interactive questionnaire that benchmarks your organisation and recommends next steps. Canonical: https://short.inc/services/ai-innovation/assessment This is an interactive, browser-based questionnaire; the questions and scoring run in the page itself. - Sections: Organization Profile, AI Strategy & Vision, Data Readiness, Technology & Infrastructure, People & Skills, AI Priorities & Timeline - Result: AI Readiness Score with per-dimension breakdown and one of four tiers (AI Explorer, AI Adopter, AI Accelerator, AI Leader) - [Open the assessment in a browser](https://short.inc/services/ai-innovation/assessment) - [Back to the service page](https://short.inc/services/ai-innovation) - Prefer to talk? Email hello@short.inc or use the [contact page](https://short.inc/contact). --- # AI Innovation solutions catalog — Short.inc > The solutions we recommend after a AI Innovation assessment, grouped by category. Canonical: https://short.inc/services/ai-innovation/catalog - **AI Strategy & Planning** — Strategic planning and roadmap services for AI adoption - AI Strategy Workshop — Half-day executive workshop to define AI vision, identify top use cases, and create a prioritized roadmap. - AI Readiness Assessment Deep Dive — Comprehensive assessment of organizational AI readiness with detailed recommendations and action plan. - AI Use Case Discovery & Prioritization — Structured process to discover, evaluate, and prioritize AI use cases based on business value and feasibility. - AI Governance Framework — Comprehensive AI governance framework with policies, ethics guidelines, and risk management processes. - **Data Foundation** — Data infrastructure, quality, and governance solutions - Data Quality Assessment — Assess data quality across key systems and create improvement roadmap for AI readiness. - Data Platform Implementation — Design and implement modern data platform for AI/ML workloads with data lake, warehouse, and pipelines. - Data Pipeline Automation — Automated data pipelines for ingestion, transformation, and loading to support AI/ML workflows. - Data Catalog & Discovery — Comprehensive data catalog with discovery, lineage, and governance to make data findable and trustworthy. - Feature Store Implementation — Feature store for centralized feature management, versioning, and serving to accelerate ML development. - Vector Database Implementation — Vector database for storing and querying embeddings to power semantic search, RAG, and similarity matching. - **ML Platform & Infrastructure** — Cloud ML platforms and compute infrastructure - Cloud ML Environment Setup — Set up cloud ML environment with Jupyter, MLflow, and basic infrastructure for immediate productivity. - ML Infrastructure as Code — Infrastructure as code for ML environments to ensure reproducibility, scalability, and cost optimization. - **AI/ML Development** — Custom AI model development and integration - AI Proof of Concept — Develop AI PoC for a specific use case to demonstrate value and validate feasibility before full implementation. - Production AI System — Full production AI/ML system with integration, monitoring, and maintenance for enterprise deployment. - Custom LLM Application — Custom large language model application with fine-tuning, RAG, and enterprise integration for specific business needs. - Computer Vision Solution — Custom computer vision solution for image/video analysis, object detection, or quality inspection. - NLP & Text Analytics Solution — Natural language processing solution for text analysis, sentiment, classification, or extraction tasks. - Knowledge Graph Platform — Enterprise knowledge graph platform to connect and query organizational knowledge for intelligent insights. - RAG (Retrieval-Augmented Generation) System — RAG system combining vector search with LLMs to provide accurate, context-aware responses from your knowledge base. - Semantic Search Platform — Semantic search platform using embeddings to find relevant content based on meaning, not just keywords. - Document Intelligence Platform — AI-powered document processing platform to extract, classify, and analyze information from unstructured documents. - Conversational AI Platform — Enterprise conversational AI platform with chatbots, virtual assistants, and voice interfaces for customer and employee interactions. - AI-Powered Analytics Dashboard — Intelligent analytics dashboard with AI-powered insights, anomaly detection, and predictive analytics. - Recommendation Engine — Personalized recommendation engine using collaborative filtering and content-based methods to suggest relevant items. - Anomaly Detection System — Real-time anomaly detection system to identify unusual patterns, fraud, or operational issues across your data. - Time Series Forecasting Platform — Time series forecasting platform for demand prediction, resource planning, and trend analysis. - **AI Training & Enablement** — Workforce upskilling and AI literacy programs - AI Literacy Program — Organization-wide AI literacy training for non-technical staff to build awareness and understanding. - ML Engineering Bootcamp — Intensive ML engineering training for technical team members to transform engineers into ML practitioners. - Data Science Team Enablement — Comprehensive enablement program to build or enhance data science team capabilities with best practices. - AI Product Management Training — Specialized training for product managers on managing AI products, measuring success, and handling unique challenges. - **MLOps & Automation** — ML operations, deployment, and automation - MLOps Pipeline Implementation — End-to-end MLOps pipeline with CI/CD, monitoring, and model registry for operationalizing ML at scale. - Model Monitoring & Observability — Comprehensive model monitoring solution to track performance, detect drift, and ensure model reliability. - Automated Model Retraining Pipeline — Automated pipeline for model retraining based on performance degradation or schedule to maintain model accuracy. - Model Serving Infrastructure — Scalable model serving infrastructure with load balancing, auto-scaling, and high availability for production workloads. - ML Experiment Tracking & Management — Centralized experiment tracking system to log, compare, and manage ML experiments for better reproducibility. - [Take the assessment to get a tailored shortlist](https://short.inc/services/ai-innovation/assessment) --- # Digital Transformation — Short.inc > A short, structured assessment that benchmarks your data, technology, capabilities, and culture. You get a clear maturity score, the gaps holding you back, and a shortlist of practical next steps tailored to your stage. Canonical: https://short.inc/services/digital-transformation See how digital your business really is — and the moves that pay off first. A short, structured assessment that benchmarks your data, technology, capabilities, and culture. You get a clear maturity score, the gaps holding you back, and a shortlist of practical next steps tailored to your stage. ## How it works 1. **Take the assessment** — answer ~30 questions about your strategy, data, tech, and team. Takes 5–7 minutes; no signup required. 2. **See where you stand** — get an overall maturity score plus per-dimension breakdowns and a tier label benchmarked against peers. 3. **Get matched with solutions** — a shortlist of practical next steps tailored to your stage, drawn from our solutions catalog. - [Start the assessment](https://short.inc/services/digital-transformation/assessment) - [Browse the solutions catalog](https://short.inc/services/digital-transformation/catalog) - [All services](https://short.inc/services) --- # Digital Transformation assessment — Short.inc > Digital Transformation Maturity: a 5–7 minutes interactive questionnaire that benchmarks your organisation and recommends next steps. Canonical: https://short.inc/services/digital-transformation/assessment This is an interactive, browser-based questionnaire; the questions and scoring run in the page itself. - Sections: Organization Profile, Digital Data & Analytics, Technology Infrastructure, Digital Capabilities, Digital Culture, Transformation Priorities - Result: Digital Transformation Maturity with per-dimension breakdown and one of four tiers (Digital Explorer, Digital Adopter, Digital Accelerator, Digital Leader) - [Open the assessment in a browser](https://short.inc/services/digital-transformation/assessment) - [Back to the service page](https://short.inc/services/digital-transformation) - Prefer to talk? Email hello@short.inc or use the [contact page](https://short.inc/contact). --- # Digital Transformation solutions catalog — Short.inc > The solutions we recommend after a Digital Transformation assessment, grouped by category. Canonical: https://short.inc/services/digital-transformation/catalog - **Digital Strategy** — Strategic planning and roadmap services - Digital Strategy Workshop — Define your digital vision and prioritize transformation initiatives with a structured strategic planning session. - Digital Maturity Assessment — Comprehensive assessment of digital maturity across technology, processes, and culture with detailed recommendations. - Digital Transformation Roadmap — Comprehensive digital transformation roadmap with initiatives, timelines, budgets, and success metrics for multi-year journey. - **Data & Analytics** — Data platform and analytics solutions - Data Platform Modernization — Modern data platform with warehouse, ETL, and analytics to unlock the value of your data. - Business Intelligence Implementation — Self-service BI platform with dashboards and reports to enable data-driven decision making across the organization. - Data Warehouse Migration — Migrate from legacy data warehouse to modern cloud platform with zero downtime and improved performance. - Real-Time Analytics Platform — Real-time analytics platform for streaming data processing and instant insights for operational decisions. - **Cloud & Infrastructure** — Cloud migration and modernization - Cloud Migration — Migrate workloads to cloud with modernization to future-proof your infrastructure and reduce costs. - Cloud Infrastructure Setup — Cloud infrastructure setup with best practices for security, scalability, and cost optimization. - Container Platform Implementation — Kubernetes-based container platform for modern application deployment and management at scale. - Multi-Cloud Strategy Implementation — Multi-cloud architecture and management platform to avoid vendor lock-in and optimize costs across providers. - **Process Automation** — RPA and workflow automation - Process Automation Suite — Automate repetitive tasks with RPA and workflow tools to free your team from manual work. - Document Automation System — Automated document generation, processing, and management system to eliminate manual document handling. - Workflow Automation Platform — Enterprise workflow automation platform to digitize and automate business processes across departments. - IT Service Automation — IT service management automation with self-service portal, ticketing, and automated resolution for common issues. - **Customer Experience** — Digital customer experience solutions - Digital Customer Portal — Self-service portal for customer engagement with account management, support, and digital services. - Customer Data Platform (CDP) — Unified customer data platform to create 360-degree customer view and enable personalized experiences. - E-Commerce Platform Implementation — Modern e-commerce platform with shopping cart, payment processing, and order management for online sales. - Customer Analytics Dashboard — Real-time customer analytics dashboard to track behavior, engagement, and satisfaction metrics. - **Digital Workforce** — Collaboration and productivity tools - Digital Workplace Suite — Modern collaboration and productivity tools to enable your remote and hybrid workforce. - Employee Self-Service Portal — Self-service HR portal for employees to manage benefits, time off, and personal information. - Learning Management System — Learning management system for employee training, development, and certification tracking. - Performance Management System — Digital performance management system with goal setting, reviews, and feedback for continuous improvement. - Digital Employee Onboarding — Automated digital onboarding process to streamline new employee integration and reduce time to productivity. - [Take the assessment to get a tailored shortlist](https://short.inc/services/digital-transformation/assessment) --- # Security — Short.inc > A short, structured assessment that benchmarks your data protection, technical controls, incident response, and governance. You get a clear maturity score, the gaps that matter most, and a shortlist of practical next steps tailored to your stage. Canonical: https://short.inc/services/security See where your security stands today — and the controls that actually move the needle on GDPR, NIS2, and ISO. A short, structured assessment that benchmarks your data protection, technical controls, incident response, and governance. You get a clear maturity score, the gaps that matter most, and a shortlist of practical next steps tailored to your stage. ## How it works 1. **Take the assessment** — answer ~30 questions about your strategy, data, tech, and team. Takes 5–7 minutes; no signup required. 2. **See where you stand** — get an overall maturity score plus per-dimension breakdowns and a tier label benchmarked against peers. 3. **Get matched with solutions** — a shortlist of practical next steps tailored to your stage, drawn from our solutions catalog. - [Start the assessment](https://short.inc/services/security/assessment) - [Browse the solutions catalog](https://short.inc/services/security/catalog) - [All services](https://short.inc/services) --- # Security assessment — Short.inc > Security Maturity Score: a 5–7 minutes interactive questionnaire that benchmarks your organisation and recommends next steps. Canonical: https://short.inc/services/security/assessment This is an interactive, browser-based questionnaire; the questions and scoring run in the page itself. - Sections: Organization Profile, Data Protection & Privacy, Technical Security, Incident Response & Continuity, Governance & Risk, Compliance Priorities - Result: Security Maturity Score with per-dimension breakdown and one of four tiers (Initiating, Emerging, Scaling, Advanced) - [Open the assessment in a browser](https://short.inc/services/security/assessment) - [Back to the service page](https://short.inc/services/security) - Prefer to talk? Email hello@short.inc or use the [contact page](https://short.inc/contact). --- # Security solutions catalog — Short.inc > The solutions we recommend after a Security assessment, grouped by category. Canonical: https://short.inc/services/security/catalog - **Data Protection & Privacy Controls** — Controls for protecting data at rest, in transit, and ensuring privacy compliance - Data Classification & Discovery — Automated data discovery and classification solution to identify and tag sensitive data across your environment. - Encryption Key Management — Enterprise key management system with HSM integration for secure encryption key lifecycle management. - Data Loss Prevention (DLP) — Comprehensive DLP solution to prevent unauthorized data exfiltration across endpoints, network, and cloud. - Privacy Management Platform — End-to-end privacy management platform for GDPR compliance, consent management, and data subject rights automation. - Database Activity Monitoring — Real-time monitoring of database access and activity to detect and prevent data breaches. - Data Encryption at Rest — Deploy encryption at rest for all databases, file systems, and storage volumes. - Data Retention & Deletion Automation — Automated data retention policies and secure deletion workflows for GDPR compliance. - **Identity & Access Management** — Controls for authentication, authorization, and identity governance - Multi-Factor Authentication (MFA) — Enterprise MFA deployment across all applications and systems with phishing-resistant options. - Privileged Access Management (PAM) — Secure privileged account management with vaulting, session recording, and just-in-time access controls. - Identity Governance (IGA) — Enterprise identity governance with access certification, role management, and lifecycle automation. - Zero Trust Network Access (ZTNA) — Replace VPN with identity-aware, application-level access controls for secure remote access. - Single Sign-On (SSO) Implementation — Centralized SSO solution to simplify user authentication across all business applications. - Passwordless Authentication — Deploy passwordless authentication using biometrics, security keys, or mobile authenticators. - **Network & Infrastructure Security** — Controls for network segmentation, firewalls, and infrastructure protection - Next-Gen Firewall Deployment — Deploy next-generation firewalls with application awareness and threat prevention capabilities. - Network Segmentation — Implement network segmentation and micro-segmentation to contain breaches and limit lateral movement. - Web Application Firewall (WAF) — Protect web applications from OWASP Top 10 and advanced application attacks without code changes. - DDoS Protection — Cloud-based DDoS protection for network and application layer attacks with automatic mitigation. - VPN Replacement with SASE — Replace traditional VPN with Secure Access Service Edge (SASE) for unified network and security. - **Security Monitoring & Detection** — Controls for threat detection, logging, and security monitoring - SIEM Implementation — Security Information and Event Management for centralized logging and threat detection across all systems. - EDR/XDR Deployment — Endpoint Detection and Response with advanced threat hunting and automated response capabilities. - Vulnerability Management — Continuous vulnerability scanning and prioritized remediation program with automated tracking. - Managed Detection & Response (MDR) — 24/7 managed security monitoring and incident response from expert analysts without building an in-house SOC. - Security Orchestration (SOAR) — Security orchestration and automated response platform to streamline security operations and reduce response time. - **Incident Response & Recovery** — Controls for incident detection, response, and business continuity - Incident Response Planning — Develop and document incident response plans, playbooks, and communication procedures with tabletop exercises. - Backup & Recovery Solution — Enterprise backup solution with immutable backups and rapid recovery capabilities to survive any disaster or attack. - Business Continuity Management — Comprehensive BCM program with BIA, DR planning, and regular testing to keep business running through disruptions. - Breach Notification Automation — Automated breach assessment and notification workflow for GDPR and NIS2 compliance with timeline tracking. - **Governance, Risk & Compliance** — Controls for policies, risk management, and compliance monitoring - Security Policy Framework — Comprehensive security policy framework aligned to ISO 27001 and regulatory requirements with ready-to-use templates. - Risk Management Platform — Enterprise risk management platform with risk register, assessments, and treatment tracking for proactive risk management. - Compliance Automation — Automated compliance monitoring, evidence collection, and audit management to make compliance continuous, not annual. - Security Awareness Training — Security awareness training program with phishing simulations and role-based content to turn employees into your first line of defense. - ISO 27001 Certification Support — End-to-end ISO 27001 certification support including gap analysis, ISMS implementation, and audit preparation. - **Cloud Security Controls** — Controls specific to cloud environments and cloud-native security - Cloud Security Posture Management — Continuous security posture monitoring for cloud infrastructure to detect misconfigurations before attackers do. - Cloud Workload Protection — Runtime protection for cloud workloads including containers and serverless with vulnerability management. - Cloud Access Security Broker — Visibility and control over SaaS applications and cloud data to prevent data leaks and enforce security policies. - Cloud Identity & Access Governance — Comprehensive cloud IAM governance with access reviews, permission management, and least privilege enforcement. - **Supply Chain & Third-Party Risk** — Controls for managing vendor and third-party security risks - Vendor Risk Assessment — Vendor security assessment program with questionnaires and risk scoring to know your vendors' security posture. - Continuous Vendor Monitoring — Continuous monitoring of vendor security posture using external signals to track risks in real-time. - Software Supply Chain Security — Secure software supply chain with SBOM, dependency scanning, and artifact signing to know what's in your software. - [Take the assessment to get a tailored shortlist](https://short.inc/services/security/assessment) --- # Custom Software — Short.inc > We translate your vision into digital experiences powered by cloud-native technology and scalable architectures — from greenfield product builds to internal tools that finally fit the shape of your team. Canonical: https://short.inc/services/custom-software Bespoke software, built around the way your business actually works. We translate your vision into digital experiences powered by cloud-native technology and scalable architectures — from greenfield product builds to internal tools that finally fit the shape of your team. - [Talk to us about this service](https://short.inc/contact) - [All services](https://short.inc/services) --- # Cloud Strategy — Short.inc > We help your business move faster, smarter, and stronger on the cloud. As AWS partners and certified cloud experts, we make scalability and security second nature — across re-platforming, cost optimisation, and resilience. Canonical: https://short.inc/services/cloud-strategy Turn the cloud into your competitive edge. We help your business move faster, smarter, and stronger on the cloud. As AWS partners and certified cloud experts, we make scalability and security second nature — across re-platforming, cost optimisation, and resilience. - [Talk to us about this service](https://short.inc/contact) - [All services](https://short.inc/services) --- # Success stories — Short.inc > Selected client work — what we shipped, what changed, who we shipped it for. Canonical: https://short.inc/success-stories - [UNGC UNITED NATIONS GLOBAL COMPACT](https://short.inc/success-stories/united-nations): Non-profit, 2023 — Digitalization process for United Nations Global Compact's Communication of Progress (CoP). Global Compact in a United Nations initiative that guides companies all over the world to make a lasting social impact by implementing UN's Sustainable Development Goals (SDGs) by 2030. - [SOTHEBY'S ST. MARTIN](https://short.inc/success-stories/sothebys): Real Estate, 2023 — A premium digital home for a luxury Caribbean realty brand — virtual tours, interactive maps, and an editor-friendly CMS for high-resolution listings. - [FLYERALARM](https://short.inc/success-stories/flyeralarm): E-commerce, 2022 — A high-volume print configurator handling tens of thousands of order variants per day — rebuilt to be faster, friendlier, and easier to extend. - [LUXGIVE](https://short.inc/success-stories/luxgive): Philanthropy, 2024 — A philanthropy platform pairing high-net-worth donors with vetted causes through a tasteful, low-friction giving experience. - [LEGION](https://short.inc/success-stories/legion): Workforce, 2024 — A workforce management product for hourly teams — designed and built end-to-end, from research to release. - [ANNOTEXT](https://short.inc/success-stories/annotext): Legal Tech, 2022 — A collaborative annotation tool for legal and academic teams working through long, dense documents together. - [XSAFE](https://short.inc/success-stories/xsafe): Cybersecurity, 2024 — A security operations console that turns a wall of alerts into the three things an analyst should look at next. --- # UNGC UNITED NATIONS GLOBAL COMPACT — Success story — Short.inc > Digitalization process for United Nations Global Compact's Communication of Progress (CoP). Global Compact in a United Nations initiative that guides companies all over the world to make a lasting social impact by implementing UN's Sustainable Development Goals (SDGs) by 2030. Canonical: https://short.inc/success-stories/united-nations - Industry: Non-profit - Year: 2023 - Services: WEB APPLICATION, WEBSITE - Website: [VISIT UNGC](https://unglobalcompact.org) ## Results - 4× faster member onboarding - Sub-second time-to-first-byte globally - Zero-downtime rollout across 162 countries - Editorial throughput up 3× ## A process stuck in the past While this global initiative was aiming for a better future for all of us, UNGC's tool to keep track of the annual progress made by participating companies, called Communication on Progress (CoP), was relying heavily on paperwork, making it laborious and time consuming for all involved to do their part. ## Embracing a digital future After acknowledging the problem, UNGC reached out to specialists in the digital realm to ask for help. We were called in as experts in our field with the objective to digitalize and optimize this important process. The solution was challenging but obvious. We needed to migrate their entire Communication on Progress (CoP) paperwork system to a simple and efficient digital app that was both easy to fill out by companies and easy to revise by UNGC. It had to be data driven, allowing for easy data collection, analyzing, manipulation and reporting, but also had to be secure and easy to maintain. ## Creative problem solving UNGC trusted us with their digital transformation and offered us complete freedom on how to approach the challenge and achieve the goal. Collaboration and creative problem solving were paramount for the success of the project. We worked side by side with both UNGC employees and other specialists to make a next generation digital app that would drastically reduce the workload and offer exceptional data control. We explored design philosophies and technological possibilities together and went over several different iterations to find the most suitable solution for each step of the process. ## Simplicity and usability The result is an easy to use application with a clean and intuitive visual interface that makes data collecting, sorting and presenting effortless, while also providing a low maintenance technology behind the scenes and the level of data security needed by an organization like the UN. While the app is mainly used on desktop machines, it's fully functional on a myriad of mobile devices as well. --- # SOTHEBY'S ST. MARTIN — Success story — Short.inc > A premium digital home for a luxury Caribbean realty brand — virtual tours, interactive maps, and an editor-friendly CMS for high-resolution listings. Canonical: https://short.inc/success-stories/sothebys - Industry: Real Estate - Year: 2023 - Services: SOFTWARE DEVELOPMENT, WEBSITE DESIGN - Website: [VISIT SOTHEBY'S ST. MARTIN](https://sothebysrealty-stmartin.com) ## Results - 300% increase in qualified leads - Time on site up from 1:30 to 4:45 - Property inquiry conversion +45% - Mobile engagement up 250% YoY > The team was always available to answer my questions or address any concerns. As someone who has worked with several companies on various projects, several aspects of working with Short were genuinely unique. > — Managing Broker, Sotheby's St. Martin ## The challenge Sotheby's needed a presence that matched the calibre of their properties while delivering advanced search, immersive media, and a content workflow the on-island team could run unaided. ## The solution We designed and developed a bespoke website with virtual tours, interactive maps, and advanced filtering, paired with a custom CMS that lets the team manage listings and assets without a developer in the loop. --- # FLYERALARM — Success story — Short.inc > A high-volume print configurator handling tens of thousands of order variants per day — rebuilt to be faster, friendlier, and easier to extend. Canonical: https://short.inc/success-stories/flyeralarm - Industry: E-commerce - Year: 2022 - Services: SOFTWARE DEVELOPMENT - Website: [VISIT FLYERALARM](https://flyeralarm.com) ## Results - Configurator load time down 62% - Self-serve product launches in days, not weeks - Mobile checkout conversion +28% - Engineering tickets per release halved > Short took an area of our business that we had stopped touching out of fear and turned it into the part we ship from most often. > — Head of E-commerce, FlyerAlarm ## The challenge A monolithic configurator was slowing both shoppers and the merchandising team. Every new product line required engineering effort, and conversion was bleeding on slower devices. ## The solution A rules-driven configurator with a typed product schema, server components for the heavy work, and progressive hydration so the first interaction lands in under 100ms even on mid-range Android. --- # LUXGIVE — Success story — Short.inc > A philanthropy platform pairing high-net-worth donors with vetted causes through a tasteful, low-friction giving experience. Canonical: https://short.inc/success-stories/luxgive - Industry: Philanthropy - Year: 2024 - Services: SOFTWARE DEVELOPMENT, WEBSITE DESIGN - Website: [VISIT LUXGIVE](https://luxgive.com) ## Results - Launched in 9 weeks - $2.4M processed in first quarter - Donor return rate over 60% - PCI-DSS compliant from day one > They built our product with the same care our donors bring to their giving — quietly, precisely, and with taste. > — Founder, LuxGive ## The challenge The founders needed to launch a credible donation product fast, with Stripe-grade reliability, a calm aesthetic, and admin tooling that wouldn't require a developer to operate. ## The solution A polished donor flow on Next.js, payment infra wired through Stripe with idempotent retries, and an internal dashboard that lets the team approve campaigns and reconcile receipts in minutes. --- # LEGION — Success story — Short.inc > A workforce management product for hourly teams — designed and built end-to-end, from research to release. Canonical: https://short.inc/success-stories/legion - Industry: Workforce - Year: 2024 - Services: SOFTWARE DEVELOPMENT, PRODUCT DESIGN ## Results - Manager onboarding time cut from 2 weeks to 1 day - Realtime updates under 80ms p95 - Tool consolidation from 4 to 1 - NPS climbed 38 points in beta > Short shipped what felt like a year of product in three months — and somehow none of it feels rushed. > — CTO, Legion ## The challenge Operations leaders were juggling four tools to schedule, message, and pay shift workers. We needed to consolidate them into a single, opinionated surface that frontline managers could pick up in a single shift. ## The solution A discovery sprint followed by a design system and a React/Node implementation, with realtime presence, push-first messaging, and an audit-friendly scheduling engine. --- # ANNOTEXT — Success story — Short.inc > A collaborative annotation tool for legal and academic teams working through long, dense documents together. Canonical: https://short.inc/success-stories/annotext - Industry: Legal Tech - Year: 2022 - Services: SOFTWARE DEVELOPMENT ## Results - Review cycles 35% shorter - 100% deterministic export fidelity - Adopted by 40+ legal teams - Comment search across 1M+ items in <100ms ## The challenge Reviewers were stitching comments across PDFs, email, and spreadsheets. They needed a single canvas where annotations, replies, and exports could live side-by-side without losing the source layout. ## The solution A web-native annotation runtime with deterministic anchoring, granular permissions, and an export pipeline that round-trips back to PDF without breaking pagination or footnotes. --- # XSAFE — Success story — Short.inc > A security operations console that turns a wall of alerts into the three things an analyst should look at next. Canonical: https://short.inc/success-stories/xsafe - Industry: Cybersecurity - Year: 2024 - Services: SOFTWARE DEVELOPMENT, PRODUCT DESIGN ## Results - Alert volume to triage cut by 73% - Mean time to acknowledge under 90s - False positive rate down to 4% - Analyst retention up significantly ## The challenge SOC analysts were drowning in noise. The team needed a console that prioritised, deduplicated, and explained alerts without hiding the underlying signal from the people who needed it. ## The solution A streaming alert pipeline, a deterministic rules engine for triage, and a UI that ranks incidents by impact while keeping the raw evidence one click away. --- # Blog — Short.inc > Notes from the team — engineering, design, and the occasional rant. Canonical: https://short.inc/blog ## FRONTEND DEVELOPMENT - [Category index](https://short.inc/blog/frontend-development) - [React Hooks Best Practices](https://short.inc/blog/frontend-development/react-hooks-best-practices): Master the art of using React Hooks effectively with these proven patterns and techniques. - [JavaScript Iterators, Generators and Async Generators](https://short.inc/blog/frontend-development/iterators-and-generators): A practical walkthrough of JavaScript iterators, generators, and async generators — what they are, how they relate, and how to build your own. - [How We Built Our Company Blog With Vue and Nuxt](https://short.inc/blog/frontend-development/how-we-built-our-company-blog-with-vue-and-nuxt): How we ditched WordPress and built a fast, custom static blog on top of Vue and Nuxt, using GitHub for review and publishing. - [Lazy Loading Modern Image Formats With Vue and Nuxt](https://short.inc/blog/frontend-development/lazy-loading-modern-image-formats-with-vue-and-nuxt): Serve modern image formats like WebP and JPEG2000, defer loading until they enter the viewport, and boost your site speed with Vue and Nuxt. - [The Do's and Don'ts of Designing for Accessibility](https://short.inc/blog/frontend-development/the-dos-and-donts-of-designing-for-accessibility): A practical guide to designing for users with disabilities — what to do, what to avoid, and why accessibility benefits everyone. - [You Can Write Better jQuery: A DRY Approach to Multiple Configurations](https://short.inc/blog/frontend-development/better-jquery-dry-approach-to-multiple-configurations): One of the most recurrent jQuery bad practices, addressed with a DRY approach to multiple configurations. ## SOFTWARE DEVELOPMENT OUTSOURCING - [Category index](https://short.inc/blog/software-development-outsourcing) - [Why Every Local Business Needs a Website](https://short.inc/blog/software-development-outsourcing/why-every-local-business-needs-a-website): A modern, maintained website is no longer a whim — it's how local businesses meet customer expectations, compete, and grow. - [Top 10 Web Development Companies in Romania on Clutch](https://short.inc/blog/software-development-outsourcing/clutch-recognizes-graffino-as-one-of-the-top-10-web-development-companies-in-romania): Clutch has recognized Graffino as one of the top web development companies in Romania, validating our team's commitment to quality and client success. - [10 Years in the Making](https://short.inc/blog/software-development-outsourcing/10-years-in-the-making): Looking back on a decade of building Graffino — what defines us, what we learned, and what it really takes to build a successful company. - [Looking Back at Our First Steps as a Company](https://short.inc/blog/software-development-outsourcing/graffino-first-steps): After seven years in business, we finally took the time to share our story — who we are, why we started writing, and what we love to build. - [How We Became Better Front-End Developers](https://short.inc/blog/software-development-outsourcing/how-we-became-better-front-end-developers): Lessons from years of front-end work — on naming, tooling, mentorship, and resisting the urge to chase every shiny new framework. ## SOFTWARE OUTSOURCING - [Category index](https://short.inc/blog/software-outsourcing) - [Choosing the Right Outsourcing Partner](https://short.inc/blog/software-outsourcing/choosing-right-partner): A comprehensive guide to selecting the perfect software development partner for your project needs. ## WEB DESIGN - [Category index](https://short.inc/blog/web-design) - [Responsive Design: Trends Shaping 2024](https://short.inc/blog/web-design/example): Responsive design has evolved far beyond simple breakpoints — here are the trends, techniques, and accessibility considerations shaping 2024. - [Figma: A Love-Hate Relationship](https://short.inc/blog/web-design/figma-a-love-hate-relationship): After leading design at Graffino and trying every modern UI tool, here's why Figma won me over — and the rough edges I still wrestle with. ## WEB DEVELOPMENT - [Category index](https://short.inc/blog/web-development) - [How to Use Laravel JSON:API to Create a JSON API Compliant Backend in Laravel](https://short.inc/blog/web-development/how-to-use-laravel-json-api-to-create-a-json-api-compliant-backend-in-laravel): A guide to building a standards-compliant JSON:API backend in Laravel using the Laravel JSON:API package, covering installation, server setup, model generation, and testing. - [First Steps in Elixir and Phoenix - Create a Blog Prototype](https://short.inc/blog/web-development/first-steps-in-elixir-and-phoenix-create-a-blog-prototype): A hands-on walkthrough for learning Elixir and the Phoenix Framework by building a basic blog with posts and comments. - [How to Send Emails From Phoenix in 4 Easy Steps](https://short.inc/blog/web-development/how-to-send-emails-from-phoenix-in-4-easy-steps): A practical walkthrough of using Thoughtbot's Bamboo library to send transactional emails from a Phoenix application, including configuration, mailers, delivery, and tests. - [Work Ethic for Software Developers](https://short.inc/blog/web-development/work-ethic-for-software-developers): A reflection sparked by an honest mechanic on what work ethic looks like for programmers, with practical advice on standards, linting, code reviews, and refactoring. - [After My Post Went Viral Google Responded](https://short.inc/blog/web-development/after-my-post-went-viral-google-responded-theres-nothing-we-can-do): My viral post about a Chrome Web Store takedown got Google's attention — but their response made it clear there's nothing they can do. - [How Google Obliterated My 24k+ Users Chrome Extension](https://short.inc/blog/web-development/how-google-obliterated-my-24k-users-chrome-extension): After three months of trying to recover a 24k-user Chrome extension hit by an opaque trademark takedown, I'm giving up on the Google ecosystem. - [The Sad State of Apple's Safari Browser Extensions](https://short.inc/blog/web-development/the-sad-state-of-apple-safari-browser-extensions): A developer's frustrated reflection on Apple's neglected Safari Extensions Gallery and how poorly it stacks up next to the Chrome Web Store. --- # FRONTEND DEVELOPMENT — Blog — Short.inc > 6 posts about frontend development. Canonical: https://short.inc/blog/frontend-development - [React Hooks Best Practices](https://short.inc/blog/frontend-development/react-hooks-best-practices): Master the art of using React Hooks effectively with these proven patterns and techniques. - [JavaScript Iterators, Generators and Async Generators](https://short.inc/blog/frontend-development/iterators-and-generators): A practical walkthrough of JavaScript iterators, generators, and async generators — what they are, how they relate, and how to build your own. - [How We Built Our Company Blog With Vue and Nuxt](https://short.inc/blog/frontend-development/how-we-built-our-company-blog-with-vue-and-nuxt): How we ditched WordPress and built a fast, custom static blog on top of Vue and Nuxt, using GitHub for review and publishing. - [Lazy Loading Modern Image Formats With Vue and Nuxt](https://short.inc/blog/frontend-development/lazy-loading-modern-image-formats-with-vue-and-nuxt): Serve modern image formats like WebP and JPEG2000, defer loading until they enter the viewport, and boost your site speed with Vue and Nuxt. - [The Do's and Don'ts of Designing for Accessibility](https://short.inc/blog/frontend-development/the-dos-and-donts-of-designing-for-accessibility): A practical guide to designing for users with disabilities — what to do, what to avoid, and why accessibility benefits everyone. - [You Can Write Better jQuery: A DRY Approach to Multiple Configurations](https://short.inc/blog/frontend-development/better-jquery-dry-approach-to-multiple-configurations): One of the most recurrent jQuery bad practices, addressed with a DRY approach to multiple configurations. --- # SOFTWARE DEVELOPMENT OUTSOURCING — Blog — Short.inc > 5 posts about software development outsourcing. Canonical: https://short.inc/blog/software-development-outsourcing - [Why Every Local Business Needs a Website](https://short.inc/blog/software-development-outsourcing/why-every-local-business-needs-a-website): A modern, maintained website is no longer a whim — it's how local businesses meet customer expectations, compete, and grow. - [Top 10 Web Development Companies in Romania on Clutch](https://short.inc/blog/software-development-outsourcing/clutch-recognizes-graffino-as-one-of-the-top-10-web-development-companies-in-romania): Clutch has recognized Graffino as one of the top web development companies in Romania, validating our team's commitment to quality and client success. - [10 Years in the Making](https://short.inc/blog/software-development-outsourcing/10-years-in-the-making): Looking back on a decade of building Graffino — what defines us, what we learned, and what it really takes to build a successful company. - [Looking Back at Our First Steps as a Company](https://short.inc/blog/software-development-outsourcing/graffino-first-steps): After seven years in business, we finally took the time to share our story — who we are, why we started writing, and what we love to build. - [How We Became Better Front-End Developers](https://short.inc/blog/software-development-outsourcing/how-we-became-better-front-end-developers): Lessons from years of front-end work — on naming, tooling, mentorship, and resisting the urge to chase every shiny new framework. --- # SOFTWARE OUTSOURCING — Blog — Short.inc > 1 post about software outsourcing. Canonical: https://short.inc/blog/software-outsourcing - [Choosing the Right Outsourcing Partner](https://short.inc/blog/software-outsourcing/choosing-right-partner): A comprehensive guide to selecting the perfect software development partner for your project needs. --- # WEB DESIGN — Blog — Short.inc > 2 posts about web design. Canonical: https://short.inc/blog/web-design - [Responsive Design: Trends Shaping 2024](https://short.inc/blog/web-design/example): Responsive design has evolved far beyond simple breakpoints — here are the trends, techniques, and accessibility considerations shaping 2024. - [Figma: A Love-Hate Relationship](https://short.inc/blog/web-design/figma-a-love-hate-relationship): After leading design at Graffino and trying every modern UI tool, here's why Figma won me over — and the rough edges I still wrestle with. --- # WEB DEVELOPMENT — Blog — Short.inc > 7 posts about web development. Canonical: https://short.inc/blog/web-development - [How to Use Laravel JSON:API to Create a JSON API Compliant Backend in Laravel](https://short.inc/blog/web-development/how-to-use-laravel-json-api-to-create-a-json-api-compliant-backend-in-laravel): A guide to building a standards-compliant JSON:API backend in Laravel using the Laravel JSON:API package, covering installation, server setup, model generation, and testing. - [First Steps in Elixir and Phoenix - Create a Blog Prototype](https://short.inc/blog/web-development/first-steps-in-elixir-and-phoenix-create-a-blog-prototype): A hands-on walkthrough for learning Elixir and the Phoenix Framework by building a basic blog with posts and comments. - [How to Send Emails From Phoenix in 4 Easy Steps](https://short.inc/blog/web-development/how-to-send-emails-from-phoenix-in-4-easy-steps): A practical walkthrough of using Thoughtbot's Bamboo library to send transactional emails from a Phoenix application, including configuration, mailers, delivery, and tests. - [Work Ethic for Software Developers](https://short.inc/blog/web-development/work-ethic-for-software-developers): A reflection sparked by an honest mechanic on what work ethic looks like for programmers, with practical advice on standards, linting, code reviews, and refactoring. - [After My Post Went Viral Google Responded](https://short.inc/blog/web-development/after-my-post-went-viral-google-responded-theres-nothing-we-can-do): My viral post about a Chrome Web Store takedown got Google's attention — but their response made it clear there's nothing they can do. - [How Google Obliterated My 24k+ Users Chrome Extension](https://short.inc/blog/web-development/how-google-obliterated-my-24k-users-chrome-extension): After three months of trying to recover a 24k-user Chrome extension hit by an opaque trademark takedown, I'm giving up on the Google ecosystem. - [The Sad State of Apple's Safari Browser Extensions](https://short.inc/blog/web-development/the-sad-state-of-apple-safari-browser-extensions): A developer's frustrated reflection on Apple's neglected Safari Extensions Gallery and how poorly it stacks up next to the Chrome Web Store. --- # Responsive Design: Trends Shaping 2024 > Responsive design has evolved far beyond simple breakpoints — here are the trends, techniques, and accessibility considerations shaping 2024. Canonical: https://short.inc/blog/web-design/example Published: MAR 20 2025 ## Table of Contents 1. [The Evolution of Responsive Design](#the-evolution-of-responsive-design) 2. [Key Trends Shaping 2024](#key-trends-shaping-2024) 3. [Modern Responsive Techniques](#modern-responsive-techniques) 4. [Accessibility in Responsive Design](#accessibility-in-responsive-design) 5. [Future-Proofing Your Designs](#future-proofing-your-designs) 6. [Conclusion](#conclusion) ## The Evolution of Responsive Design Responsive design has evolved far beyond simple breakpoints. In 2024, we're seeing a shift toward more sophisticated, user-centric approaches that prioritize performance, accessibility, and seamless experiences across all devices. ## Key Trends Shaping 2024 - Mobile-first design is becoming more sophisticated with advanced touch interactions - Container queries are revolutionizing responsive design approaches - Performance optimization is now inseparable from responsive design ### Mobile-First Evolution Mobile-first design is no longer just about starting with mobile and scaling up. It's about creating experiences that are truly optimized for touch interactions, thumb navigation, and the unique constraints of mobile devices. ```jsx class HelloMessage extends React.Component { handlePress = () => { alert('Hello') } render() { return (

Hello {this.props.name}

); } } ReactDOM.render( , mountNode ); ``` ![Mobile-first design example showing responsive layouts](/abstract-wave-1.png) ### Container Queries Revolution Container queries are changing how we think about responsive design. Instead of relying solely on viewport width, we can now create components that adapt based on their container size, leading to more modular and reusable designs. ### Performance-First Design Responsive design in 2024 is inseparable from performance optimization. Techniques like progressive loading, adaptive images, and critical CSS are becoming standard practices for creating fast, responsive experiences. ## Modern Responsive Techniques ### CSS Grid and Flexbox Mastery Advanced CSS Grid and Flexbox techniques are enabling more complex layouts that adapt beautifully across different screen sizes. Subgrid and logical properties are opening new possibilities for responsive design. ### Adaptive Typography Fluid typography using clamp() and viewport units is becoming the standard for creating text that scales smoothly across all devices while maintaining readability and visual hierarchy. > The future of web design lies in creating experiences that adapt not just to screen sizes, but to user context, device capabilities, and environmental factors. > > — Sarah Chen, Senior UX Designer at TechFlow ## Accessibility in Responsive Design Responsive design must consider accessibility from the ground up. This includes proper focus management, touch target sizes, and ensuring that responsive layouts don't break screen reader navigation. ## Future-Proofing Your Designs As new devices and screen sizes emerge, building flexible, component-based designs that can adapt to unknown viewports is crucial. This means embracing relative units, flexible layouts, and progressive enhancement. ## Conclusion Responsive design in 2024 is about creating experiences that are not just visually adaptive, but truly optimized for the user's context, device capabilities, and performance requirements. By embracing these trends and techniques, we can create more inclusive, performant, and user-friendly web experiences. ## Key Takeaways - **Start small —** Begin with a failing test that describes one simple behavior. - **Embrace the red-green-refactor cycle —** Get comfortable with seeing tests fail before making them pass. - **Focus on behavior, not implementation —** Test what your code does, not how it does it. - **Use TDD as a design tool —** Let the difficulty of testing guide you toward better arhitecture. --- # React Hooks Best Practices > Master the art of using React Hooks effectively with these proven patterns and techniques. Canonical: https://short.inc/blog/frontend-development/react-hooks-best-practices Published: JAN 15 2024 ## Understanding React Hooks React Hooks revolutionized how we write functional components by allowing us to use state and lifecycle methods without classes. However, with great power comes great responsibility, and understanding best practices is crucial for writing maintainable code. ## Essential Hook Patterns ### useState Best Practices When using useState, always consider the initial state carefully and use functional updates when the new state depends on the previous state. ### useEffect Optimization Proper dependency arrays are crucial for useEffect. Always include all dependencies that are used inside the effect, and consider using useCallback and useMemo to prevent unnecessary re-renders. ### Custom Hooks Extract component logic into custom hooks to promote reusability and testability. Custom hooks should always start with "use" and can combine multiple built-in hooks. ## Common Pitfalls to Avoid - Don't call hooks inside loops, conditions, or nested functions - Always use the exhaustive-deps ESLint rule for useEffect - Avoid creating objects and functions inside render - Don't forget to clean up subscriptions and timers ## Performance Considerations Use React.memo, useMemo, and useCallback strategically to optimize performance. However, don't over-optimize - measure first, then optimize based on actual performance bottlenecks. ## Conclusion Mastering React Hooks takes practice and understanding of the underlying principles. By following these best practices, you'll write more maintainable, performant, and bug-free React applications. --- # Choosing the Right Outsourcing Partner > A comprehensive guide to selecting the perfect software development partner for your project needs. Canonical: https://short.inc/blog/software-outsourcing/choosing-right-partner Published: JAN 8 2024 ## The Critical Decision Choosing the right software outsourcing partner can make or break your project. With countless options available globally, the decision requires careful evaluation of technical capabilities, cultural fit, communication skills, and long-term partnership potential. ## Key Evaluation Criteria ### Technical Expertise Assess the team's technical skills, relevant experience, and portfolio. Look for certifications, case studies, and client testimonials that demonstrate their ability to deliver quality solutions in your technology stack. ### Communication and Collaboration Effective communication is crucial for project success. Evaluate their English proficiency, time zone compatibility, and communication tools. Regular updates, transparent reporting, and proactive communication are essential. ### Cultural Alignment Cultural fit affects collaboration and project outcomes. Consider work ethics, business practices, and cultural values that align with your organization's approach to software development. ## Due Diligence Process ### Portfolio and References Review their portfolio for projects similar to yours. Contact previous clients to understand their experience, project outcomes, and any challenges they faced during collaboration. ### Technical Assessment Conduct technical interviews or coding assessments to evaluate the team's skills. Consider their approach to problem-solving, code quality, and adherence to best practices. ### Process and Methodology Understand their development process, project management approach, and quality assurance practices. Ensure their methodology aligns with your project requirements and timeline. ## Red Flags to Avoid - Unrealistically low pricing without clear justification - Lack of transparency in communication or processes - No clear project management or quality assurance processes - Inability to provide detailed project timelines or milestones - Poor or no client references ## Building Successful Partnerships Once you've selected a partner, focus on building a strong working relationship. Establish clear communication channels, define roles and responsibilities, and create a collaborative environment that encourages innovation and continuous improvement. ## Conclusion Choosing the right outsourcing partner is a strategic decision that requires thorough evaluation and careful consideration. By focusing on technical expertise, communication capabilities, cultural alignment, and proven track records, you can establish partnerships that drive project success and long-term value. --- # JavaScript Iterators, Generators and Async Generators > A practical walkthrough of JavaScript iterators, generators, and async generators — what they are, how they relate, and how to build your own. Canonical: https://short.inc/blog/frontend-development/iterators-and-generators Published: NOV 25 2021 Iterating over lists of objects is a very common (if not daily) problem that developers confront with at work. With the introduction of ES6, iterators and generators have officially been added to JavaScript to help developers solve this particular issue. *Iterators* give the developers the superpower of consuming a list of items, one at a time, and proceeding to the next item only after finishing consuming and processing it. *Generators* are a special kind of function that give the developer the superpower of producing data and pausing execution until called again. Altough they might seem to be the same thing, they are not. They are strongly connected with each other, but not the same. Altough iterators are very powerful, their definition and the maintenance of their internal logic can be very challenging. Generators then come in place to provide a less error-prone and more efficient way of using iterators, hiding the complexity of using iterators behind the hood. After reading this article about iterators and generators, you should be able to answer the following questions: - What are iterators and iterables? - What are generators? How are they connected to iterators? - How does the *"for ... of" Loop* work behind the scenes? How does the *"for ... of" Loop* know how to go through an Array, Map, Set or any *ITERABLE* Data Structure? *Tip:* It does not know ANYTHING about the type of the data structure that it iterates over. Answer: *"for ... of" Loops* only work on *ITERABLES*. Iterables have *ITERATORS*. "for ... of" Loops use these iterators. To better understand what these are, let's define an iterable and iterate over it using the "for ... of" Loop. ```javascript const MAX_LENGTH = 5 const myIterable = { length: 0, [Symbol.iterator]: () => ({ next: () => length++ < MAX_LENGTH ? { value: Math.random(), done: false } : { value: undefined, done: true } }) } for (const item of myIterable) { console.log(item) } ``` Our iterable object will give access to 5 random numbers, through its iterator. *Stepwise explanation:* 1. We define our iterable as an object, that has a special property, accessible through the "[Symbol.iterator]" key - defined using Symbols, makes the property unique and generic. More about Symbols: [Symbols - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 2. This special key gives access to a method that returns the actual ITERATOR object. 3. This iterator object is used to access our ITERABLE's items one by one, using it's inner method "next()". Once you understand the Explanation, you will be ready to write your own "for... of" Loop using both basic loops: for and while. Note that the first value is created only on the first call of the next() method. ```javascript const iterator = myIterable[Symbol.iterator]() let item = iterator.next() while (item.value) { console.log(item.value) item = iterator.next() } for (let i = iterator.next(); i.value; i = iterator.next()) { console.log(i.value) } ``` Actually, the [Symbol.iterator] key of the iterable gives access to a generator function - a function that returns an iterator that spits values each time its next() method is called. You can view this as a *PAUSABLE FUNCTION THAT RETURNS MULTIPLE VALUES, one at a time*. By "pausable" I mean that it returns values only when the user wants it to do so. Until that, it waits. ## JavaScript provided generator functions ```javascript function* numberGenerator() { let numbersGenerated = 0; while (numbersGenerated++ < MAX_LENGTH) { yield Math.random() } } const numbers = numberGenerator() for (const number of numbers) { console.log(number) } ``` *Note 1:* asterix ("*")" symbol after the function keyword (or before function name) *Note 2:* yield keyword, used for "returning" the desired *next* value. This generator functions are actually syntactic sugar, using iterators behind the hood. They are as well PAUSABLE FUNCTIONS. Therefore, we can replace the iterator generator method from our iterable with the generator function: ```javascript const myIterable = { length: 0, [Symbol.iterator]: function* numberGenerator() { let numbersGenerated = 0; while (numbersGenerated++ < MAX_LENGTH) { yield Math.random() } } } ``` ## JavaScript async iterators ```javascript const myIterable = { length: 0, [Symbol.asyncIterator]: async function* numberGenerator() { let numbersGenerated = 0; while (numbersGenerated++ < MAX_LENGTH) { yield Math.random() } } } ``` Our iterable now gives access to its values through an async generator function. In the above example, you cannot immediately see its value because we are yielding random numbers, but imagine that we are yielding different API call results. But we cannot use a basic "for ... of" loop, because async iterators return promises of the yielded values/objects. We instead have to use the "for await ... of" loop like this: ```javascript for await (const item of myIterable) { console.log(item) } ``` Note that we have to use this inside an async function, because we are using await. ## Conclusion We can now write our own practical and more advanced iterables that give us sequential access to the desired data. The problem I am trying to solve is the following: we want to create a car selling website and we have an API that contains hundreds of millions of records that we need to display on our website. Due to the huge size of the records, we can not get them through a single request and we need to create a mechanism to access them sequentially. ```javascript const searchCars = () => { const fetchCarsByPageAndTag = async (page, tag) => await axios.get('https://api.flickr.com/services/rest/' + '?method=flickr.photos.search' + '&api_key=' + API_KEY + '&page=' + page + '&tags=' + tag + '&format=json' + '&nojsoncallback=1') .then(response => response.data) .then(body => body.photos.photo) .then(photos => photos.map(photo => `https://farm${photo.farm}.staticflickr.com/` + `${photo.server}/${photo.id}_${photo.secret}_q.jpg`)) .catch(error => console.error(error)); return { [Symbol.asyncIterator]: async function* () { while (true) { let pageNumber = 1; for (const generatedUrl of await fetchCarsByPageAndTag('cars', pageNumber)) { yield generatedUrl } pageNumber++ } } } } (async function () { for await (let car of searchCars()) { console.log(car) } })() ``` Explanation: we are iterating over our iterable returned by the searchCars() function using async iterators. How does the searchCars() method work? The async generator function of the returned iterable waits on the first yield call being prepared to request the first page of cars to our API, yielding the first page after the API responds. After that, it automatically increments the pageNumber and makes another request and yields its response. In the above example, while(true) means that we are incrementing pageNumber an infinite number of times, meaning that we are supposing that our API has an infinite number of pages. Of course it's impossible, but for the sake of understanding, let's pretend it's not. The code will still run, because we are not able to consume all pages of the API so quick, but at some point, they will end. In this article, we learned what iterators, async iterators and generators are and how and when we can use them. We also learned how to make any object iterable and how to write our own data streaming service using async iterators. Pretty cool, right? --- # Why Every Local Business Needs a Website > A modern, maintained website is no longer a whim — it's how local businesses meet customer expectations, compete, and grow. Canonical: https://short.inc/blog/software-development-outsourcing/why-every-local-business-needs-a-website Published: NOV 23 2021 ## Why Every Local Business Needs a Website Is it expected to have a website or is it a whim? Reliance on internet and smart devices is a normality in today's world for accessing information, and connecting to one another, and not necessarily only with younger generations. Almost anyone is using it, my dad of 65y is looking for the schedule of the car repair shop online, internet is part of our every day in every aspect of our life. What does this mean for your business? It should be online too!⁣⁣ Yes, everyone's doing it, more of a reason to be there with your competition and partners. Not convinced yet? Let us share some reasons for it Every local business needs a modern and mostly, maintained, website first and foremost because your clients expect it. As my father does it, if your car repair shop is not online, he will go to your competition because they have their schedule online and he can see they provide the service my dad needs. He wouldn't drive by your shop only to see if you're open and if you provide the service he needs. In today's market, your website gives you a voice. One more, of your business relies on word of mouth. And you can choose what and how to say your story, introduce your products or services and convince people to come to your location and not another random one. Yes, your competition already has a website, or will have soon. Don't allow them to take your foot traffic that easily! In today's world advertising is no longer enough. People rely on social proof and make decisions based on recommendations and testimonials, more of a reason to be online and showcase your most loyal clients referrals. Your website offers you 24h presence for your customers. While your shop might be closed at 11 PM, your clients still learn about you, about your products and services, about your schedule, your offers and so on. Your website offers you accessibility, you can reach thousands, hundreds of thousands people and potential clients with your website, and this thing is not possible only with your local presence. I do travel to different vicinities for specific products or services, I wouldn't have done it unless I've learned online about them. We treat our client's business as our own. We take a pragmatic approach, analyze the business and requirements, then focus on solving the most issues where we can have the biggest impact. In fewer words, what we deliver has to convert. If a client wants a website just for the sake of having a website, we won't do it. If the application we're tasked to build, has no clear later application or value, we simply will not build it. Convinced to at least have a discussion with us about an investment in your next website? A well designed and developed website by our experienced team is one of the best tools that will contribute to growing your business! Reach out to us [here](mailto:hello@graffino.com)! --- # How to Use Laravel JSON:API to Create a JSON API Compliant Backend in Laravel > A guide to building a standards-compliant JSON:API backend in Laravel using the Laravel JSON:API package, covering installation, server setup, model generation, and testing. Canonical: https://short.inc/blog/web-development/how-to-use-laravel-json-api-to-create-a-json-api-compliant-backend-in-laravel Published: SEP 30 2021 ## What we'll be doing In this article we'll build a simple JSON API compliant set of APIs which will allow us to create tasks and attach assignees to them. Additionally, we'll also test a few endpoints to make sure they work properly. In order to quickly prototype our APIs we'll be using an amazing Laravel library called [Laravel JSON:API](https://laraveljsonapi.io/docs/1.0/getting-started/core-concepts.html). ## Why use JSON:API? - Standardized, consistent APIs - Feature rich - some of which are: sparse fieldsets (only fetch the fields you need), filtering, sorting, pagination, eager loading for relationships (includes, which solve the [N+1 Problem](https://restfulapi.net/rest-api-n-1-problem/)) - Easy to understand ## Why use Laravel JSON:API? - It saves a lot of development time - Highly maintainable code - Great, extensive documentation - Strong conventions (in terms of naming), but highly customizable - Makes use of native laravel features such as policies and form requests to make the shift easier for developers (we'll see later what this is about) ## Prerequisites - Composer installed on your machine - A working database connection - A running (preferably fresh) Laravel application ## Main Packages used and their versions - Laravel 8.0 - Laravel JSON:API 1.0 - Laravel JSON:API Testing 1.0 ## Installation We'll start by installing the Laravel JSON:API core and testing packages: ```bash composer require laravel-json-api/laravel ``` ```bash composer require --dev laravel-json-api/testing ``` ## Setup Now that we have everything installed, let's publish (instruct Laravel to get all the "publishable" assets from the vendor package we choose and place them in our project directory in their respective folders) the configuration file and start customizing: ```bash php artisan vendor:publish --provider="LaravelJsonApi\Laravel\ServiceProvider" ``` The published config file will look like this: ```php return [ /* |-------------------------------------------------------------------------- | Root Namespace |-------------------------------------------------------------------------- | The root JSON:API namespace, within your application's namespace. | This is used when generating any class that does not sit *within* | a server's namespace. For example, new servers and filters. | By default this is set to `JsonApi` which means the root namespace | will be `\App\JsonApi`, if your application's namespace is `App`. */ 'namespace' => 'JsonApi', /* |-------------------------------------------------------------------------- | Servers |-------------------------------------------------------------------------- | A list of the JSON:API compliant APIs in your application, referred to | as "servers". They must be listed below, with the array key being the | unique name for each server, and the value being the fully-qualified | class name of the server class. */ 'servers' => [ // 'v1' => \App\JsonApi\V1\Server::class, ], ]; ``` Now we need to generate a server file and then uncomment the entry in the servers array: ```bash php artisan jsonapi:server v1 ``` With our application configured, we can start generating and writing the necessary code in order to achieve our goal. ## Laravel files In this section we will generate the necessary task model and migrations. Also, since we will test our endpoints at the end, we will create an additional factory for the tasks. However, we won't start filling out the factory until the testing phase. In order to generate these files run the following command: ```bash php artisan make:model Task -mf ``` With this command we instruct artisan to create a model and the corresponding migration and factory. ## Json Api Files Given that we have our migrations and models in place, we can start generating the Laravel JSON:API resources. ## Tests We've finally registered all the necessary resources! We just need to fill in the TaskFactory and we're ready to get on with testing: We'll stop here, but if you want to test the rest of the actions take a look at [this chapter](https://laraveljsonapi.io/docs/1.0/testing/resources.html) in the documentation. --- # First Steps in Elixir and Phoenix - Create a Blog Prototype > A hands-on walkthrough for learning Elixir and the Phoenix Framework by building a basic blog with posts and comments. Canonical: https://short.inc/blog/web-development/first-steps-in-elixir-and-phoenix-create-a-blog-prototype Published: SEP 10 2020 We always have a hands on approach when learning new stuff and this article will help you learn the basics of Elixir and the Phoenix Framework by building a basic blog. We'll assume you already have [Elixir](https://elixir-lang.org/install.html) and [Phoenix](https://hexdocs.pm/phoenix/installation.html) up and running. Our purpose here is to create a simple CRUD app which will allow us to use basic data operations like save, edit and delete. Let's start by creating a simple blog with posts and comments. ## #1 Setup our Elixir project To start a project in Elixir, we use [Mix](https://hexdocs.pm/mix/Mix.html), a build tool which provides everything necessary to create and manage Elixir apps. First, we need to use a mix task to create our project: ```elixir $ mix phx.new blog_app ``` The mix task creates our new blog_app template and files. You should see something like this: ```elixir * creating blog_app/config/config.exs * creating blog_app/config/dev.exs * creating blog_app/config/prod.exs * creating blog_app/config/prod.secret.exs * creating blog_app/config/test.exs * creating blog_app/lib/blog_app/application.ex * creating blog_app/lib/blog_app.ex ... * creating blog_app/assets/css/phoenix.css * creating blog_app/assets/static/images/phoenix.png * creating blog_app/assets/static/robots.txt Fetch and install dependencies? [Yn] y * running mix deps.get * running mix deps.compile * running cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development ``` We're almost there! Let's move into the project's folder: ```elixir $ cd blog_app ``` Then configure your database in config/dev.exs and run: ```elixir $ mix ecto.create ``` Finally, start your Phoenix app with: ```elixir $ mix phx.server ``` You can also run your app inside IEx (Interactive Elixir) as: ```elixir $ iex -S mix phx.server ``` If you chose "No" when asked to install dependencies, you can do it afterwards with the following mix command: ```elixir $ mix deps.get ``` For the next step open up `config/dev.exs` in a text editor and configure the database. Make sure that the username and password match the ones you have set up on your local machine. It should look like this: ```elixir config :blog_app, BlogApp.Repo, username: "postgres", password: "postgres", database: "blog_app_dev", hostname: "localhost", show_sensitive_data_on_connection_error: true, pool_size: 10 ``` As prompted earlier, we then need to `cd` into our newly created project and run the `$ mix ecto.create` task to create the database: ```elixir $ cd blog_app $ blog_app mix ecto.create Compiling 14 files (.ex) Generated blog_app app The database for BlogApp.Repo has been created ``` Let's see if everything works as it's supposed to. We'll start up the server by running either `mix phx.server` or `iex -S mix phx.server` (IEx stands for Interactive Elixir). Our application will be running under [http://localhost:4000](http://localhost:4000). We should be presented with the "Welcome to Phoenix!" page: !["Welcome to Phoenix!" page](https://graffino.com/_nuxt/img/6605ff6.jpg) ## #2 Create a Post resource Phoenix provides an easy way to setup the basic resources we need through the use of generators - mix tasks which will build the respective modules. What we need is the [phx.gen.html](https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Html.html#content), which will generate the controller, views and context. Fire up the terminal and enter this command: ```elixir $ mix phx.gen.html Posts Post posts title:string body:text ``` What we did here, was creating the `Post` resource. The resource belongs to the `Posts` context and has a `posts` schema, with a `title` field of type string and a `body` field of type text. The CRUD actions for our `Post` resource are now ready. The following files have been created: ```elixir $ mix phx.gen.html Posts Post posts title:string body:text * creating lib/blog_app_web/controllers/post_controller.ex * creating lib/blog_app_web/templates/post/edit.html.eex * creating lib/blog_app_web/templates/post/form.html.eex ... * creating lib/blog_app/posts.ex * injecting lib/blog_app/posts.ex * creating test/blog_app/posts_test.exs * injecting test/blog_app/posts_test.exs Add the resource to your browser scope in lib/blog_app_web/router.ex: resources "/posts", PostController Remember to update your repository by running migrations: $ mix ecto.migrate ``` If we take a look in the `lib/blog_app/posts/post.ex` file of our blog_app, we'll see the posts schema matching the database table 'posts' we created. ```elixir defmodule BlogApp.Posts.Post do use Ecto.Schema import Ecto.Changeset schema "posts" do field :body, :string field :title, :string timestamps() end @doc false def changeset(post, attrs) do post |> cast(attrs, [:title, :body]) |> validate_required([:title, :body]) end end ``` In `lib/blog_app_web/controllers/post_controller.ex` - you'll notice that we can access the Post resource via the `Posts` context we created. ```elixir defmodule BlogAppWeb.PostController do use BlogAppWeb, :controller alias BlogApp.Posts alias BlogApp.Posts.Post def index(conn, _params) do posts = Posts.list_posts() render(conn, "index.html", posts: posts) end def new(conn, _params) do changeset = Posts.change_post(%Post{}) render(conn, "new.html", changeset: changeset) end ... end ``` In the `lib/blog_app/posts.ex` we can see several functions that Phoenix implements by default. ```elixir def list_posts do Repo.all(Post) end def get_post!(id), do: Repo.get!(Post, id) def create_post(attrs \\ %{}) do %Post{} |> Post.changeset(attrs) |> Repo.insert() end def update_post(%Post{} = post, attrs) do post |> Post.changeset(attrs) |> Repo.update() end def delete_post(%Post{} = post) do Repo.delete(post) end def change_post(%Post{} = post, attrs \\ %{}) do Post.changeset(post, attrs) end ``` Now let's open the `lib/blog_app_web/router.ex` module and define the route for our new posts resource. Under the `get "/", PageController, :index` line, add `resources "/posts", PostController`. ```elixir scope "/", BlogAppWeb do pipe_through :browser get "/", PageController, :index resources "/posts", PostController end ``` This has generated a new database migration, therefore we need to run the task `mix ecto.migrate` to persist the changes. Now let's run our server again with `iex -S mix phx.server` and go to `http://localhost:4000/posts`. We'll see the Listing Posts page. Notice that we can do all the basic CRUD operations with posts. ![Creating blog posts in elixir and phoenix](https://graffino.com/_nuxt/img/ebb2402.jpg) ![Creating blog posts in elixir and phoenix](https://graffino.com/_nuxt/img/aa9533f.jpg) Using `mix phx.routes` we can inspect all the existing routes for our app. We can combine it with grep, `mix phx.routes | grep posts` to inspect only the posts routes. ```elixir $ mix phx.routes | grep posts post_path GET /posts BlogAppWeb.PostController :index post_path GET /posts/:id/edit BlogAppWeb.PostController :edit post_path GET /posts/new BlogAppWeb.PostController :new post_path GET /posts/:id BlogAppWeb.PostController :show post_path POST /posts BlogAppWeb.PostController :create post_path PATCH /posts/:id BlogAppWeb.PostController :update post_path PUT /posts/:id BlogAppWeb.PostController :update post_path DELETE /posts/:id BlogAppWeb.PostController :delete ``` ## #3 Add Comments to our Posts Let's enable comments for our posts by using another Phoenix generator, [phx.gen.context](https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Context.html#content). This will create another context and the comments ecto schema: ```elixir $ mix phx.gen.context Comments Comment comments name:string content:text post_id:references:posts ``` The `post_id:references:posts` is the way you tell the generator to setup a relationship between `Post` and `Comment`. We'll see the `post_id` field added to the `comments` schema. We're not finished yet, as we still need to define the association between the posts and the comments schemas ourselves. We'll make use of the [Ecto.Schema](https://hexdocs.pm/ecto/Ecto.Schema.html) function `has_many` for the post. ```elixir defmodule BlogApp.Posts.Post do use Ecto.Schema import Ecto.Changeset alias BlogApp.Comments.Comment schema "posts" do field :body, :string field :title, :string has_many :comments, Comment timestamps() end @doc false def changeset(post, attrs) do post |> cast(attrs, [:title, :body]) |> validate_required([:title, :body]) end end ``` Here we used the `alias` directive to reference the Comment like this: `has_many :comments, Comment`. In the comment schema, we already have the `post_id` field added by the mix task, so we only need to add the `post_id` to the changeset below. ```elixir defmodule BlogApp.Comments.Comment do use Ecto.Schema import Ecto.Changeset schema "comments" do field :content, :string field :name, :string field :post_id, :id timestamps() end @doc false def changeset(comment, attrs) do comment |> cast(attrs, [:name, :content, :post_id]) |> validate_required([:name, :content, :post_id]) end end ``` Now we need to run the `mix ecto.migrate` task again. After we're done with associations, we need to make it possible for the user to see and interact with post comments from the app interface. In the router module we need to add another resource for the comments, with the `add_comment` action and create its corresponding function in PostControler. ```elixir resources "/posts", PostController do post "/comment", PostController, :add_comment end ``` In the `post_controller.ex` file we'll add the function: This will allow the creation of a new comment in the database and associate it to a post. It will also load the post page and show a flash message with the status of the create operation. ```elixir def add_comment(conn, %{"comment" => comment_params, "post_id" => post_id}) do post = post_id |> Posts.get_post!() |> Repo.preload([:comments]) case Posts.add_comment(post_id, comment_params) do {:ok, _comment} -> conn |> put_flash(:info, "Added comment!") |> redirect(to: Routes.post_path(conn, :show, post)) {:error, _error} -> conn |> put_flash(:error, "Oops! Couldn't add comment!") |> redirect(to: Routes.post_path(conn, :show, post)) end end ``` Make sure to alias the `BlogApp.Repo` at the beginning of the post_controller file. Now into the `/lib/blog_app/posts.ex` module we'll add the `add_comment` action. Also remember to `alias BlogApp.Comments`. ```elixir def add_comment(post_id, comment_params) do comment_params |> Map.put("post_id", post_id) |> Comments.create_comment() end ``` We'll also need to create a simple form on the post's page in order to allow users to comment. To achieve this, we'll update the show action on the post controller. We need to preload comments from the Repo and include a `Comment.changeset` into its `show.html` template, and alias `BlogApp.Comments.Comment` to be able to use the `Comment.changeset`. ```elixir def show(conn, %{"id" => id}) do post = id |> Posts.get_post! |> Repo.preload([:comments]) changeset = Comment.changeset(%Comment{}, %{}) render(conn, "show.html", post: post, changeset: changeset) end ``` After that's done, we'll create a `comment_form.html.eex` template: ```html <%= form_for @changeset, @action, fn f -> %>
<%= text_input f, :name, class: "form-control" %>
<%= textarea f, :content, class:"form-control" %>
<%= submit "Add comment", class:"btn btn-primary" %>
<% end %> ``` Now let's get to the `lib/blog_app_web/templates/post/show.html.eex` template and add in this line above the `edit` and `back` links: ```elixir <%= render "comment_form.html", post: @post, changeset: @changeset, action: Routes.post_post_path(@conn, :add_comment, @post) %> ``` This will render our comment form on the post's page. ![Form for adding comments to a post](https://graffino.com/_nuxt/img/f29b761.jpg) We can now add comments to our posts, but we can't see them yet. Let's display them in the blog pages. ## #4 Displaying Post Comments We'll need to create yet another template for our posts. Let's call it `comments.html.eex`. ```elixir

Comments:

Name
Content
<%= for comment <- @comments do %>
<%= comment.name %>
<%= comment.content%>
<% end %>
``` Then we'll render this new template on our posts page next to the comment_form. ```elixir <%= render "comments.html", comments: @post.comments %> ``` Add a little bit of styling in `app.scss`: ```scss .comments { padding-bottom: 2em; } .comment { display: grid; grid-template-columns: 1fr 1fr; padding: 0.5em; border-bottom: 1px solid lightgrey; } .comment.header { font-weight: bold; } ``` The comments are now displayed: ![Blog comments displayed](https://graffino.com/_nuxt/img/ef49daa.jpg) What if we would like to see the total number of comments for a post? Let's do that too: We need to define a function to the get the number of posts in the BlogApp.Posts context. So let's get back to the `lib/blog_app/posts.ex` and add this function after `add_comment`: ```elixir def get_number_of_comments(post_id) do post = Posts.get_post!(post_id) |> Repo.preload([:comments]) Enum.count(post.comments) end ``` Now, let's update BlogApp.PostView module in `lib/blog_app_web/views/post_view.ex` like so: ```elixir defmodule BlogWeb.PostView do use BlogWeb, :view alias BlogApp.Posts def get_comments_count(post_id) do Posts.get_number_of_comments(post_id) end end ``` Finally, in the `index.html.eex` posts file we can add these lines to update our post. `Comments` in the table head, and `<%= get_comments_count(post.id) %>` in the corresponding table body. Here's how our blog looks now: ![Posts page with comment number](https://graffino.com/_nuxt/img/8777c5c.jpg) Hurray! We've got our basic blog up and running! Make sure you check out the official [Elixir](https://elixir-lang.org/docs.html) and [Phoenix](https://hexdocs.pm/phoenix/Phoenix.html) documentation, which covers more advanced topics. If we missed something, let's start a conversation on [X](https://x.com/Graffino). --- # Top 10 Web Development Companies in Romania on Clutch > Clutch has recognized Graffino as one of the top web development companies in Romania, validating our team's commitment to quality and client success. Canonical: https://short.inc/blog/software-development-outsourcing/clutch-recognizes-graffino-as-one-of-the-top-10-web-development-companies-in-romania Published: SEP 1 2020 In this digital age it's absolutely essential for your business to have an online presence, as this is where the audience is. No matter the industry you operate in, your business is bound to have an online presence whether you're consciously doing something about it or not. Outsourcing your web development [can relieve you of a burden](https://www.forbes.com/sites/deeppatel/2017/07/17/the-pros-and-cons-of-outsourcing-and-the-effect-on-company-culture/?sh=43935d6562d6), but outsourcing can be tedious and time consuming process. You're responsible for vetting different vendors, in an era when just about anyone can claim to be a an expert. Customer reviews can help you in the vetting process, by validating the legitimacy of service providers. This is where Clutch steps in. Clutch is the leading worldwide provider of B2B ratings and reviews. By collecting verified client feedback, Clutch's rankings make it easy for trusted B2B service providers to connect with businesses. ## Clutch recognizes Graffino as a one of the "Top Romanian Development Companies" Since 2014, Graffino has helped hundreds of business execute on their product vision from start to finish – plan, design, development and deployment. By combining heavy web development expertise, with a relentless focus on planning and execution processes, we are able to develop unique products quickly and reliably. We have a passionate, dedicated team, renowned for delivering qualitative product experiences. If you are one of the many companies looking to [increase tech spending in 2020](https://swzd.com/resources/state-of-it/), we would love to help you build your next big thing. Our clients say we deliver on Clutch, and Clutch just recognized us as a "Top Romanian Web Development company". We're also proud to feature on The Manifest, Clutch's sister site, a research hub and articles website that [shows off company ratings](https://themanifest.com/ro/web-development/companies#graffino). In a recent project featured on Clutch, we provided branding and web development services for a tax consulting company. We created their new brand, created a stunning online presence and integrated a complex JavaScript refund calculator. Their loved our methodic approach and focused workflow: ![Migroconsult - Clutch 5 star review for Graffino](https://graffino.com/_nuxt/img/19c950d.png) MIGRO.RO - [Tax return agency (Romanian: Recuperare impozit din Germania)](https://migro.ro) > "In one word, professionalism. They're experts in their field, and the team is up to date with all of their technology. Graffino introduced us to so many new possibilities, and our experience working with them was just excellent… Take advantage of their willingness to conduct research, and take the time to explain the mission, values, and long-term goals of your company so they can take you in the right direction." — Owner, Migroconsult Agency In another recent collaboration, we develped the online platform for a growing startup that develops software for the greenhouse industry. Integrating with their existing technology stack and leveraging new technologies we provided a custom fit experience for them, all in a tight deadline. Here's how they described our collaboration: ![Silver Fern Group - Clutch 5 star review for Graffino](https://graffino.com/_nuxt/img/50bd34b.png) Silver Fern - [Simplify your horticulture business with technology for growers.](https://silverfern.group/) > "The website increased the provider's credibility. The team at Graffino is flexible, communicative, and transparent. Customers can expect a skilled team that works well with a tight timeline." - Co-Founder, Silver Fern Group Our latest project is always our best work. We take most pride in our team's hunger for continuous improvement, and in the select, long lasting partnerships we've built during the years. If you are looking to start a development project, feel free to contact us today via email or phone. We'd be happy to help you transform your business! --- # How We Built Our Company Blog With Vue and Nuxt > How we ditched WordPress and built a fast, custom static blog on top of Vue and Nuxt, using GitHub for review and publishing. Canonical: https://short.inc/blog/frontend-development/how-we-built-our-company-blog-with-vue-and-nuxt Published: JUL 23 2020 We're an all design and code craftsmen agency, an experienced team of software engineers and designers that generate unique user experiences every day. We decided that sharing from our experience with others, should be something we should do more often. In order to do this, we would have to switch our blog from Medium to and integrate it with our site. This would allow us to give our readers a more polished experience, and at the same time to make our posts more versatile and unique. We have a long tradition of designing and developing WordPress sites. This time, as our website is built in Nuxt, we decided not to go with WordPress and build something from the ground up to suit our needs. We've been experimenting with various possible alternatives for WordPress. Among the shortlisted, we had Craft, Gatsby, Hugo as well as Strapi and Grav. After a while we decided none of them was suited for what we were trying to achieve. After years of rolling out content management systems for our clients, we knew exactly what we didn't want from our blog: - To be concerned with issues like whether the project we're building on is maintained, extensibility or plugin availability. - A database, we prefered instead a hassle-free approach to persistence and forget about database backups, fragile schema updates or rollbacks. - A fancy admin interface, as we're all more comfortable writing plain code. This would also allow for more flexibility and custom unique posts. - More server processes. Bonus: There's not much you can hack on a static site. What we wanted instead: - A review and publishing process that feels closer to our way of work. - Blazing fast page navigation and content load times. This was a critical requirement. - One command, no hassle deploys. - A modern tech-stack our team can enjoy. To sum it up, we wanted a truly static site generator with the minimum viable blog functionality that adds no extra complexity layer for our development team. Cloud is just another people's computer and serverless is just other peoples' servers. Don't get us wrong, we love the scalability and pricing tiers that come with cloud computing. We just wanted to keep it simple this time. Since we already had Vue and Nuxt in our tech stack, as the website was built on it, we decided to use it as a base for upcoming integrations. After "extensive research" we concluded VuePress is the closest thing to what I need. But not quite. So, we went on to devise our own custom solution. Our custom solution needed to feature the following concepts: - Blog categories - Blog articles - Related articles - Search functionality - Intuitive content navigation Other aspects we were concerned about: - Good discoverability and SEO - Server-side rendering - Reusable Vue components As most of the content on our blog will include work-related experiences, to a certain degree, the categories mirror Graffino's services. For example, as Frontend is a core service at Graffino, it will most certainly have its own category. If you're not familiar with how Nuxt works, I recommend going through the official docs at [nuxtjs.org](https://nuxtjs.org) to learn more about its intended use and structure. We'll try to provide you with the short version here: The unique selling point of Nuxt is an architecture that promises to make server-side rendering a breeze. It is pure Vue with a dash of pre-configuration and a simple build system. The directory structure represents a core concept of its architecture and it will drive the aspect of the router. ```javascript pages/ --| web-development/ ----| index.vue ----| how-we-built-our-company-blog-with-vue-and-nuxt.vue --| index.vue ``` In this scenario, every file under **pages** will be collected and turned into a page. Every folder becomes a parent route. The immediately nested **index** will become that parent route's template. Then, every other named file, such as my-page.vue will turn into a route of itself with a parent route corresponding to the parent folder name. Does it make sense? With this in mind, now **index.vue** makes now perfect sense to be promoted to be the category template of our future blog. All other sibling files to index.vue will be considered articles of the containing category and will be listed under graffino.com/frontend/my-super-duper-frontend-article. Alright! What do we have so far? We have an article and a category along with a logical route to navigate their URL locations. But we still lack some basic blog functionality, such as related content and content search, which are critical for a satisfying blog reading experience. Let's start with the first issue, the related content display. In our case, content is related by membership to the same category. If only we had a way to make our pages aware of their siblings without a database... There is! To achieve this, we will need to make use of Vue and Nuxt internals and take advantage of the router's omniscience about URL paths and file hierarchy. ```javascript ... created() { const currentRouteName = this.$router.history.current.path .match(/\/([a-zA-Z0-9'-]+$)/)[1] const parentRouteName = this.$router.history.current.name .replace(`-${currentRouteName}`, '') const articles = [] this.$router.options.routes .filter((route) => route.name.includes(parentRouteName) && route.name !== this.$router.history.current.name && route.name !== parentRouteName) .map((article) => { article.component().then((component) => { articles.push({ path: article.path, component, }) }) }) this.$set(this, 'articles', articles) }, ... ``` Here's what's happening in the snippet above: - 1. Get the current route name so we can exclude it at a later time. - 2. Get the parent route's name which will be used to represent the category - 3. Get all the routes and filter out those whose parent does not match our subject. - 4. We'll then create an array with all these and have them ready in order to render the article list at a later time. Here's the catch: we load the entire component before we hurl it in the array. It might seem we create the whole jungle in our pursuit of capturing the gorilla, but let's not optimize things too early. We have a couple of indisputable advantages by doing so: all the components' data is now available for use (thumbnails, alternative titles, content excerpts, authors). We can now loop through our article collection and display them however we please. ```handlebars {{ article.component.data().title }} ``` If we want to bring all the articles within a specific category, the code will be very similar to our previous snippet. Let's take this chance and add a small but useful feature. We might find it handy to have some kind of flag that allows us to keep articles as drafts before publishing or quickly disable a piece of content for maintenance without having to delete the whole thing. ```javascript ... created() { const currentRouteName = this.$router.history.current.name const articles = [] this.$router.options.routes .filter((route) => route.name.includes(currentRouteName) && route.name !== currentRouteName) .map((article) => { article.component().then((component) => { if (component.meta && component.meta.indexed === true) { articles.push({ path: article.path, component, }) } }) }) this.$set(this, 'articles', articles) }, ... ``` Now that we have a way to list our articles and a way to keep our user reading by further suggesting them interesting, related content, let's proceed to another important piece of functionality: Search. For the site navigation, we stuck to a service list that is embedded both in the footer of the site as well as the header, and a search widget that displays both articles and matching categories. It does not do full body searches but does a good job matching against titles and keywords. ```javascript ... search() { const routes = this.$router.options.routes const query = this.searchQuery const results = [] routes.map((result) => { result.component().then((data) => { if ( data.meta && data.meta.title && data.meta.indexed && data.meta.keywords && (result.path.split('-').join(' ') .toLowerCase().includes(query.toLowerCase()) || data.meta.title.toLowerCase() .includes(query.toLowerCase()) || data.meta.keywords.toLowerCase() .includes(query.toLowerCase())) ) { results.push({ path: result.path, component: data, }) } }) }) this.$set(this, 'results', results) } ... ``` That's about it! ## Version control and publishing We will use GitHub to review, contribute, edit, and publish all new articles. Each article becomes a pull request in which all team colleagues are invited to contribute with what they know best: content editing, visual enhancements, or if necessary, code review. As soon as the pull request gets tagged as **ready to merge**, the article is ready to be merged and deployed at the assigned go-live date. This flow fits our way of work nicely. We're not adding any new levels of complexity as the tools we're employing are already known to our team, because we're using them on a daily basis. No admin panels, no advanced settings, or obscure text revision ui controls. ## Results & Impressions Overall, the blog is blazing fast. You cannot believe how smooth it feels. There's zero loading time between page transitions and while we lazy-load most content, the load times are, again, unnoticeable. We were expecting this kind of experience, since there are no requests made to the server or database. The full transparency of the code puts zero limits on the creative potential of the contributors. Anything goes: partial or full customization of design and layout, math functions in the subject of an article, or custom interactivity done in JavaScript. All this to create a unique reading experience. The development of template pages with the Vue stack didn't take any more time that would have took to do it in WordPress for example. There are a couple of improvements that we would like to implement in the future: - Avoid loading the same components multiple times. For example, a section of the results returned by the search widget might already be present in the article list or related article list. - Introduce pagination. This will improve the site performance as well as the user experience. - We still have a small node process that takes care of email sending. We're planning on moving this to AWS Lambda functions or switch to plain old **mailto:**. - Add an archive-like functionality to allow for time-based navigation. - List all articles for a specific author. Other concerns: - We're loading a bunch of components in memory. This can backfire at some point in the future. - Migrating away to another platform in the future won't be a straightforward task. All being said, taking this approach instead of settling for a more classic solution has been a very rewarding experience. It was fun, It was challenging, and the results are fantastic. Building it in Vue and Nuxt is a central selling point. Amidst the rise of infinitely new contenders to front-end SPA development hegemony, not to mention some of the more classic competition like Angular and React, for us, Vue remains the more elegant and more productive framework. Thanks for reading this. Let us know your thoughts on [X](https://x.com/graffino). --- # Lazy Loading Modern Image Formats With Vue and Nuxt > Serve modern image formats like WebP and JPEG2000, defer loading until they enter the viewport, and boost your site speed with Vue and Nuxt. Canonical: https://short.inc/blog/frontend-development/lazy-loading-modern-image-formats-with-vue-and-nuxt Published: JUL 23 2020 One of the common optimizations for your website, which has an enormous impact on your site's speed, is the format and size of the image assets you're loading. Serving your images in modern formats such as WebP and JPEG2000, and deferring loading until your visitor reaches a specific section, will give you a substantial speed boost. This will also be reflected in your Google Page Speed Insights score. Your bandwidth restricted users will thank you, and you will also get an overall improved user experience. Our target platform is Nuxt. We'll assume you already have some basic experience building with VueJS and Nuxt as well. > Should I do this kind of optimization right from the project start, or wait until after my website is done? We've been asked this question a lot. Some say early optimizing pointless. We on the other hand, think that early optimization should be standard. It becomes increasingly difficult to optimize a project that has already been developed, especially if we're talking about large projects. ## Technologies - Vue components. We're going to create a component that will receive the asset path as a prop, process it, and return an optimized and context-aware asset. - Webpack. We'll use Webpack to convert and return optimized WebP and JPEG2000 assets. This process will strip the assets from unnecessary meta information and pipe them through different optimizers. - Lozad.js. Is a dependency-free JavaScript image loader, which uses the new Intersection Observer API to detect when our target image, enters the viewport. - LQIP. Is a low-quality image placeholder which will display a blurred version of our image asset until Lozad.js loads the full version. ## How it all works Initially every image will be deferred until it enters the viewport. If scrolling happens too fast, the full image won't have enough time to load, so a very low quality, blurry placeholder will be presented until the full image loads. As soon as a full image has loaded, the placeholder content will be swapped with the full image. All image assets will be optimized converted to WebP at compilation time. If the browser supports WebP, only the WebP version will load. If not, a lossless (or lossy) JPEG will load. ### There are other optimizations worth mentioning: - Implement a CDN for all assets. This is great for blazing static content delivery all around the world. - Implement image sprites where possible. This is an efficient way to aggregate lots of small assets as icons into a big image to prevent tens of small requests to your server. - Implement srcset and sizes tags for all your images. This will make help the browser decide which image to load. - Configure expiration tags for all assets and pages. This makes repeat loading of your website pages and assets a breeze by using already stored assets from the browser's cache. ## Let's get to work We assume you already have a working application set up. First, we have to install all the necessary libraries. ```bash yarn add lqip-loader webp-loader lozad ``` ### Template In the template we'll use a picture element with a JPG and a WebP source. ```markup ``` Later, we'll going to call it like this: ```markup ``` ### Script ```javascript ``` These are basic style to configure the low-resolution placeholder as the background of the image. The size and aspect ratio of the image are maintained via padding (check the style() function in the script above). The image uses an absolute position to be placed on top, as soon as it finishes loading. ```css .lazy-image { display: block; width: 100%; height: 0; background-size: cover; background-repeat: no-repeat; &__wrapper { position: relative; z-index: 200; } & > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } ``` ## What's next? As of last year, native image lazy-loading support has been announced and [supported in all major browsers](https://caniuse.com/loading-lazy-attr) except Safari. Safari has experimental support for lazy loading, so expect it to follow suit very soon. For more information, check this out [this extensive article](https://web.dev/browser-level-image-lazy-loading/) on the state of native lazy-loading for the web. Thanks for reading this. Let us know your thoughts on [X](https://x.com/graffino). --- # How to Send Emails From Phoenix in 4 Easy Steps > A practical walkthrough of using Thoughtbot's Bamboo library to send transactional emails from a Phoenix application, including configuration, mailers, delivery, and tests. Canonical: https://short.inc/blog/web-development/how-to-send-emails-from-phoenix-in-4-easy-steps Published: JUL 20 2020 Sooner or later your application will have to send out emails promoting its features or simply deliver notifications. Sending out emails is a core functionality for web applications nowadays. In this article we'll cover how to send e-mail using Phoenix and Elixir. We'll assume you already have some experience with Phoenix and elixir. If this is not the case, we whole-heartedly recommend checking out the official Phoenix documentation and go through the ["Up and Running"](https://hexdocs.pm/phoenix/up_and_running.html) tutorial before coming back here. Usually, the Elixir community, refrains from recommending libraries, preferring low-level OTP approaches, such as [gen_smtp](https://github.com/gen-smtp/gen_smtp). Our argument for using a high-level library, is the advantage of having many out-of-the-box solutions to a number of challenges such as queue management and templating. This approach also has the advantage of implementing better error handling and a unified interface to interact with the rest of your application. What do we need to consider before choosing one approach or the other? Well, our solution needs to: - Provide maintained drivers for the most popular email service providers like Mailgun, Mandrill or SendGrid. - Provide a way to send emails in the background and have the ability to schedule deliveries - Handle file attachments - Provide flexibility for email formatting If you prefer to do the heavy lifting yourself, you can check out [LibHunt](https://elixir.libhunt.com/categories/705-email). There are a couple of other viable options out there but for the scope of this tutorial we will use Thoughtbot's Bamboo library. Bamboo is probably the most popular solutions for Phoenix at the moment, and this is for good reasons: - It's easily testable, featuring both unit and integration tests - It integrates nicely with Phoenix's templating system Let's blade this. ## #1 Install the necessary dependencies First things first, we need to add Bamboo to the list of dependencies. ```elixir def deps do [{:bamboo, "~> 1.5"}] end ``` And then, with the newly added dependencies, run: ```elixir $ mix deps.get ``` Now let's add the necessary lines in our configuration files: ```elixir # config/dev.exs config :my_app, MyApp.Mailer, adapter: Bamboo.SendGridAdapter, api_key: System.get_env("SENDGRID_API_KEY") ``` **SENDGRID_API_KEY** is a variable stored in our local .env file. Make sure you run **source .env** before starting up the application again. The full list of adapters is available [here.](https://github.com/thoughtbot/bamboo#available-adapters) ## #2 Main files: Emails and Mailer Bamboo requires setting up at least two modules. These are in charge of email creation and email sending: 1. We need to specify the contents of the emails we'd like to send. It allows us to define fields such as the sender, email subject, layouts, and template or attachments. 1. We will need to define another module that will handle the sending of our previously crafted emails Let's first declare the mailer, as it's the more compact of the two. ```elixir # lib/my_app/mailer.ex defmodule MyApp.Mailer do use Bamboo.Mailer, otp_app: :my_app end ``` Now let's proceed with the definition of a base email function out of which all the following emails will be derived. We're aiming to bulk up the base email with all recurring information or default settings. Let's start with a simple **from** field for now. ```elixir defp base_email() do new_email() |> from("hello@myapp.io") end ``` Now let's use the **base_email/0** function to define the actual email we want to send for our use case. ```elixir defmodule MyApp.Email do use Bamboo.Phoenix, view: MyApp.EmailView def welcome_email(client) do base_email() |> to(client.email) |> subject("Welcome to MyApp. I'll be your guide") |> put_html_layout({MyApp.LayoutView, "email.html"}) |> assign(:client, client) |> render("welcome_new_client.html") end ... end ``` One of our favorite features in Bamboo is the use of composable functions via pipes. You can still write your emails with the help of keyword lists but making use of Elixir's pipe syntax is so much more fun. Notice that we've added a put_html_layout function to the email. Here's how the file looks like: ```html <%= @inner_content %> ``` We've kept the layout basic on purpose. You can add your own CSS styles later. We'll also create a template for our email implementation. It will make use of the email layout above. ```html

Welcome, <%= @client.name %>

``` Again, our example is basic. You get the idea... At some point, it will make more sense to move the layout function to the base email from which our particular email implementation is derived. Let's do it. ```elixir # lib/my_app_web/templates/layout/email.html.eex defp base_email() do new_email() |> from("hello@myapp.io") |> put_html_layout({MyApp.LayoutView, "email.html"}) end ``` We now have a working mailer in place. ## #3 Sending the mail We're now ready to send our email, as soon as a new client account has been created. We'll send it right from the client controller, the moment we have the confirmation that the record has successfully been inserted into the database. ```elixir def create(conn, %{"client" => client_params}) do case Agencies.create_client_for_agency(conn, client_params) do {:ok, client} -> # The important line is here client |> Email.welcome_email() |> Mailer.deliver_later() conn |> put_flash(:info, "Client created successfully.") |> redirect(to: Routes.client_path(conn, :show, client)) {:error, %Ecto.Changeset{} = changeset} -> render(conn, "new.html", changeset: changeset) end end ``` As soon as a new record is created, we'll proceed with sending the email and then return the **conn** like we would normally do. Notice the **deliver_later** bit. In most scenarios, we don't want the server to wait for the email to send. Bamboo smartly makes use of Eixir's Task to handle this scenario. If for some reason you prefer to send emails synchronously, use **deliver_now** instead. There you go, you've implemented a working mailer for your application. One that doesn't block the server while it does its thing. But don't take our word for it. Let's write a test to check whether or not our email has been sent. We can achieve this with the help of **Bamboo.Test** and **Bamboo.TestAdapter**. ## #4 Test Let's first make sure we add **Bamboo.TestAdapter** to config/test.exs. Follow the instructions at step one. ```elixir defmodule MyApp.ClientEnrollmentTest do use ExUnit.Case use Bamboo.Test @create_attrs %{email: "some email", name: "some name"} test "after enrolling a new client, the client gets a welcome email" do client = fixture(:client) expected_email = MyApp.Email.welcome_email(client) conn = post(conn, Routes.client_path(conn, :create), client: @create_attrs) assert_delivered_email expected_email end defp fixture(:client) do {:ok, client} = Agencies.create_client(@create_attrs) client end end ``` Great success! Make sure you check out the official Bamboo documentation, to learn about more advanced scenarios. If we missed something, let's start a conversation on [X](https://x.com/Graffino). --- # Figma: A Love-Hate Relationship > After leading design at Graffino and trying every modern UI tool, here's why Figma won me over — and the rough edges I still wrestle with. Canonical: https://short.inc/blog/web-design/figma-a-love-hate-relationship Published: DEC 5 2019 During my time as lead designer at [Graffino](https://graffino.com), I spent a lot of time trying to find the best tools that would enable us to deliver more consistent designs, tools that would also bridge the gap between design and development. There's no surprise that we settled on Figma, and after some time, I decided to share our experience with the world. Distance measurements in Figma are painful, and I bet I'm not the only one who thinks this way. If you're a designer or developer and you've used it before, you know what I'm talking about. Chances are you're in the same love-hate relationship with **Figma** as I am. Most of the time, the instrument of choice in crafting my designs was the iconic Adobe Photoshop. Great overall app, with everything you ever needed at your disposal, from image adjustments, manipulations and hardcore color grading to all the shapes destined to form those container-class divs on pages across the — little less than infinite — web. **Adobe Photoshop** used to be the greatest until various other side software started to come up on the market. Then, as any designer probably would, I started trying them to see how they fit in with my workflow and what they could bring new to the table. **Sketch** was good for a while. I liked the plugins it came with and loved that it doesn't overwhelm you with useless features nobody asked for. But the bad sides, and there are two from my point of view, are that it's not as fast as I would like it to be and that you can't correctly preview your work. **Adobe XD** is fast and straightforward, but it lacks many of the basic features a software like this really needs. The collaborative part isn't that great either. **InVision Studio** has the most potential at first glance, with plenty of integrations and features, but when it comes to performance, it's downright horrible, so I dropped it. The last but not the least is **Figma**. There were some compromises I had to make in the beginning, but it looked like the UI software I needed. Great UX, good performance, assets, collaboration and many other features I needed, Figma had. The most important of them all are the collaborative features for the designer-developer relation. ## The awesome side of Figma ![Welcome to the awesome side.](https://graffino.com/_nuxt/img/cd0605e.jpeg) Now on to the good stuff. The app improved my workflow speed a lot and added the possibility to keep all the projects I was working on in the same place. Flawless feature. Also, the option to share the project with my developer co-workers is amazing. I love the way you can make project versions using Figma's history feature and come back later if you change your mind about something or just need to grab some design element from a past version of your project. I also like that you can import and edit your SVG icons or vector art directly into Figma. It's a great time saver because it doesn't send you back and forth to Illustrator to do that. The fact that you can upload your components into a shared library so that the entire team can use them with a simple search through the library without ever leaving the app was another big plus for Figma. It's also a very useful feature for design systems, allowing you to keep all your assets into a single place. It makes it easy to find them as well, thus boosting your workflow and improving your effectiveness. My absolute favorite thing about Figma is their newest addition to the software. The plugins support. This feature opened lots of opportunities to further increase my workflow speed and add various other 'fancy' elements to the game without ever leaving the app. ## Some of my favorite plugins **Content Reel** is a plugin which helps you fill all your designs with mock data. Lorem ipsum, fake numbers, addresses, anything, they're all one click away. **Blobs** generates random vectorial blobs, and allows you to adjust their complexity. When it comes to inserting maps in the design, **Mapsicle** is the most efficient plugin out there. It's buggy at times but it allows easy customization of those maps. **Isometric** allows you to put almost any element from your design into a perspective view without quitting Figma. **Arc** is a plugin which allows you to bend any text into a curve or a circle, though sometimes it doesn't work very well. Figma's plugin library comes with many other nice — and some great — plugins right now and I hope we'll get to see more awesome stuff in there soon. ## The dark side of Figma ![Welcome to the dark side.](https://graffino.com/_nuxt/img/a914e12.jpeg) As nothing is perfect, Figma does have a dark side. Beyond the many features that I love, there are moments when using Figma is such an awful experience. While Figma improved my workflow speed, as I mentioned above, setting it up to begin with is no easy job. It's not even close to what you can do in other softs. And counting its other flaws, it can even become disruptive for your workflow. The first annoying thing about Figma are its alignment methods. The shortcuts for the alignments are awesome, but once you group your elements, you can say goodbye to art-board alignment. So, you need to make sure you align your elements to the art-board before grouping them or you're in for a nasty experience. Measuring distances can sometimes be a hard thing to do if you don't group your layers the way Figma wants you to do it. You need to draw rectangles to your desired paddings to make sure you've got proper spacing between elements. A simple thing like copying pixel values from the width or height inputs to another layer is… trickier than it sounds. If you want for example your grid to be as high as the art-board, you have to copy and paste the height value input three times before it works the way it's supposed to. Prototyping… it's there. But it's a lot less than what you'd expect from it. The development team managed to make the feature a bit more advanced, but compared to **Adobe XD** and other design tools, Figma's prototyping features and animations are a bit silly. Hope we'll see better control and a more natural feel to the animations soon enough. ## The conclusion ![Fireworks anyone?](https://graffino.com/_nuxt/img/eb6e4de.jpeg) **Figma** has its ups and downs, but overall, its future looks bright. The community is growing with each passing day, improving the user experience by building plugins, sharing designs on the community beta and much more. There's no doubt I will continue to use Figma for my actual and future UI projects here at [**Graffino**](https://graffino.com), as it's still the best option for me at the moment. I only hope that the development team at Figma will fix the issues I talked about in this post and will better this software until it's a little closer to that perfection we're all looking for. --- # The Do's and Don'ts of Designing for Accessibility > A practical guide to designing for users with disabilities — what to do, what to avoid, and why accessibility benefits everyone. Canonical: https://short.inc/blog/frontend-development/the-dos-and-donts-of-designing-for-accessibility Published: NOV 19 2019 Over the past ten years, we've been constantly improving the way we write code at Graffino, but I must admit, we just didn't consider accessibility when we started. Later on, we had the opportunity to work for a client that needed accessibility as a default for its product. We were ashamed to realize, what we usually delivered wasn't quite up to standards. A lot of developers think that, by implementing blindly ARIA properties everywhere, they will make their site accessible for disabled visitors, when in fact a lot of the spec isn't properly supported or documented, thus making their site less accessible. This is why we decided to write this article, which will be part of a series of articles on web accessibility, which we will write in the future. With designers and developers quick to jump on to the next best technology, accessibility best practices and principles are overlooked, so users with disabilities are often left behind. And it's easy to see why. Under the pressure of shorter deadlines and higher and more demanding standards from clients, oftentimes in competition with other companies promising to deliver faster and better products, designing for users with disabilities will add more to an already high workload. And let's be honest, most of us don't always feel like doing more if we can get away with less. But designing with accessibility in mind doesn't have to be all that hard. ## What is Accessibility and Why Should We Care? Web accessibility means creating designs, apps and content that almost any individual can use, including those who have visual, auditory, motor, and cognitive disabilities or various other impairments. When most of us think about a better web, top-notch technologies, outstanding visuals and sublime animations are what comes to mind. But how many among us are struggling with certain disabilities that make them incapable of seeing or interacting with the web in the way we think they should? ![Normal vision example](https://graffino.com/_nuxt/img/b4f3766.png) Imagine for a moment that you suffered from color blindness. You can't fully see the red and the green — which is the most common affection of color-blind users. What that means is that you won't be able to distinguish certain colors that contain red and green wavelengths, making it hard to choose between something like a purple — which contains red — and a shade of blue. Or see the pink in a funky design — it'll come off as some sort of washed-out yellow. In general, those who suffer from a moderate form of red/green color blindness can identify around 5 colors from a standard box of 24 pencil crayons. These are all people who might not enjoy that superb color palette you chose for your latest project. Since the web is a visual environment, a big and quite common issue are background and foreground color combinations which make web pages unreadable for color-blind users. You'd be surprised to find out that 1 in 12 men and 1 in 200 women have a certain degree and type of color blindness. And color blindness is only one type of problem. ![Protanopia (Red-blind) vision example](https://graffino.com/_nuxt/img/b4f3766.png) ![Deuteranopia (Green-blind) vision example](https://graffino.com/_nuxt/img/b4f3766.png) ![Tritanopia (Blue-blind) vision example](https://graffino.com/_nuxt/img/b4f3766.png) ## What do Studies and Statistics Have to Say The World Health Organization (WHO) estimates that there are over 217 million people who suffer from moderate to severe vision impairment. Now count in all the people with other problems. Deaf or with hearing problems, those who suffer from dyslexia, autistic spectrum or photosensitive epilepsy. Some have manual dexterity problems and various other motor disabilities. There are also: anxiety, learning disabilities and the elderly who suffer from various impairments caused by advanced age. The Click-Away Pound Survey made in UK in 2016 about customers of e-commerce sites, found out that there are around 6.1 million disabled internet users with special accessibility needs in the UK alone. Most of these people will spend their money on websites that have the fewest barriers in their way. Over 71 percent of them will click away from a website which they find difficult to use. The biggest issue are pages crowded with too much content. Then come poor link information and navigation, forms with a bad design, distracting moving images and graphics and poor legibility — bad color contrast and text layout. In the United States, there are over 56 million people who have a certain disability. That means approximately 1 in 6 individuals. Another report from the World Health Organization (WHO) tells that worldwide, there are over 1 billion people who live with some form of disability, which amounts for 15 percent of the world's population. That makes for quite a significant number of web users who can't see and interact with the online world in the way we think they should. And 9 out of 10 of them don't even bother to complain about website accessibility problems. Which makes website owners unaware of the potential users or customers they lose. ## Better Web Accessibility Benefits Us All Designing with accessibility in mind can actually foster innovation. The limitations it imposes on the design and development process can make things better for everyone. It's a known fact by now that constraints and limitations actually boost your creativity rather than hinder it. What's more, accessibility shouldn't add a lot more work to do if it's done from the start. Sure, fixing a website that doesn't have accessibility features already implemented will require some effort. Starting from scratch with this in mind should make things easier. ## The Do's and Don'ts on Designing for Accessibility The best and most beneficial approach when creating digital content with accessibility in mind should be creating it in collaboration with communities of people with disabilities. They are the ones who create true life-hacks when it comes to their impairments. ## 1. Designing for Users with Low Vision We've already talked about what some users with visual impairments can suffer from. Now let's see how designing with accessibility in mind can help make things better for them. Avoiding low color contrast is one of the most important things, as it's often overlooked. Having good color contrast allows users with low vision — and even those without issues, but with tired and sore eyes — read text from a background color with ease. Low contrast makes it almost impossible for some users to distinguish one color from another or even the text from the background. The World Wide Web Consortium (W3C) has several criteria when it comes to the minimum contrast ratio between the text and the background — at least 4.5 to 1. Fonts and sizes have a great impact as well, with heavier and larger fonts being easier to read at lower contrast. There are several tools available among which WebAIM's contrast checker is a good option. For Mac users, there's also the Contrast app. For a thorough check of the color combinations of all DOM elements on a website, you can use Check My Colours, which will give you a report of all the bad spots. Buttons and notifications should be put in context rather than having actions separated from the content. Color and color differences shouldn't be the only means to convey critical information on a website. Take error messages for example. A combination of text, shapes/icons and colors should be used instead. Designing for color-blind users should be made according to WCAG guidelines, and a helpful tool for that is Colorsafe. Additionally, all the important information should be available on the website rather than buried deep into files available for download only. Content should also follow a linear and logical layout rather than spread all over the page in a messy manner. ## 2. Designing for Users of Screen Readers The 2016 Click-Away Pound Survey we mentioned above found out that over half of those who participated in the survey used some form of assistive technology (AT) to help them interact with computers. Screen readers represented 58 percent of all, followed by screen magnifiers, dictation software, and refresh-able braille. While these technologies help visually impaired users, website design plays a key role in how well these devices function. That's why it's important to structure content by using correct markup, and not rely on text size or placement to give the structure of the page. Websites should be built for keyboard use also, without forcing mouse or screen use only. Links and headings should be descriptive and not uninformative. The alternative text for images or other non-text content should always be used. Though many people know about it, there are plenty of websites with no alt attributes on their images. We all know how ugly the default browser focus indicators can be so we are usually tempted to remove them. But things shouldn't end there. Designing usable focus states, which are both very visible and with good contrast is possible and should be the norm. For more info, you can check out this W3C document about visible focus states. ## 3. Designing for Users with Physical or Motor Disabilities While the web is a visual environment, that doesn't mean that users with physical or motor disabilities won't have a hard time accessing it. Physical or motor disabilities can have a negative influence on using a mouse, touch screens or the keyboard. That's why a website should be designed for keyboard operation or speech-only use and also with touchscreens in mind. Keyboard navigation, for example, is one of the most critical aspects of web accessibility. Not only people with motor disabilities or those relying on screen readers need it, but also power users who often make use of keyboard shortcuts for faster navigation. It's important to provide shortcuts and not force users with lots of typing, or force too much and too complex mouse movements. The clickable sections should be large and not demand precision. Also, developers and designers should avoid creating long and complex menus. ## 4. Designing for Users who are Deaf or Hard of Hearing More and more content on today's web comes under the form of audio. Think about podcasts and videos. Providing transcripts or subtitles is very important for users with hearing impairments. Allowing those users to choose their preferred means of communication support is also of importance. Think about booking various services or using support for example. The content should be broken up to make well use of text, images and videos, blended to create meaningful, logical and easy to consume content. Forcing users to read long blocks of text is the way to lose them in the long term. ## 5. Designing for Users on the Autistic Spectrum Autism Spectrum Disorders (ASD) is a range of mental disorders that includes what's usually known as autism and other issues such as the Asperger syndrome. Reports from 2015 showed that one percent of the global population — over 60 million people — suffers from one syndrome in the Autism Spectrum. People suffering from these disorders have trouble performing daily tasks, maintaining their jobs or keeping normal relationships. They can respond in abnormal ways to sensations like sights and sounds, which is a concern in the case of the web. They also have a slow development of learning skills, which again affects their ability to use complex websites. When designing with these kinds of users in mind, it's important to avoid bright colors and use a simple color palette instead. Writing in plain language and avoiding figures of speech and idioms is also recommended. Buttons, form fields or similar elements should be descriptive, not vague and unpredictable. The layout should be simple and consistent because a cluttered and complex layout would be impractical. Simple sentences and bullets always win over huge chunks of text. That's important even to normal users. ## 6. Designing for Users with Anxiety Disorders While anxiety is a normal human emotion, anxiety disorders are a different thing. They are defined as mental illnesses, which prevent one from living a normal life. Worry and fear are constant in their life. Panic attacks, phobias, and various social and general disorders can appear out of the blue in ordinary situations. For a user with some form of anxiety disorder, it's important to give him or her time to complete an action or fill in a form, without rushing them with timeout limits. It's important to give clear explanations on what's happening and reduce confusion about what the next step is. It's equally important to give users easy access to support when they need it without hiding it or making it hard to access. Also, allowing users to check their answers before submitting them is good practice. Leaving them questioning their answers will make them prone to anxiety hitting. ## 7. Designing for Users with Dyslexia Dyslexia, also known as reading disorder, is a learning disorder that affects one's ability to read — the most common, spell, write and speak. Caused by both genetic and environmental factors, dyslexia affects between 5 and 10 percent of the American population, both young and adult. Therefore, it's important to keep text properly aligned to the left, keeping a consistent layout and avoid underlining non-links, using italics or writing in capital letters. Images and diagrams should support the written content, as large blocks of heavy text won't help anyone. The content should be short, clear and simple and rely on accurate spelling. Using auto-correct or providing suggestions is also recommended. Forcing users to remember things from other pages isn't a good practice either, so this should be considered as well. ## It's Easier if You Think Disability First Good coding practices can easily include designing for users with disabilities and it doesn't have to take too much extra time if you start with it in the first place. The limitations this design imposes doesn't mean the end result should be ugly. Elegant design that works is possible, without sacrificing aesthetics for function or vice versa. What's more, throughout the world, talks about legislation related to web accessibility are taking place, and a future where designing for better web accessibility is not only morally correct but also a legal obligation is not too far away. --- # 10 Years in the Making > Looking back on a decade of building Graffino — what defines us, what we learned, and what it really takes to build a successful company. Canonical: https://short.inc/blog/software-development-outsourcing/10-years-in-the-making Published: SEP 16 2019 ## How it all started We started Graffino about 10 years ago. The web was young back then. We were too. A bunch of dreamers who worked well together and wanted to change the world. We were going through various names and designs until I stumbled onto "Graffino" due to a misheard name on a call with [Marius](https://marius.is). Late 2009, after a lot of debates, sleepless nights and tinkering we went online: ![October 2009 — WayBackMachine (The Internet Archive)](https://graffino.com/_nuxt/img/5aea730.png) This is how our story started. And here we are … this is our "there and back again". ## What defines us Last year, we decided to revisit our identity and website, as it was high time for a change. We went though a rebranding roughly every five years. Yes, that's twice in our lifetime, with a little "dark age" in the middle. I think we always loved our first logo, because its warmth, its smooth lines and the sense of perfection it enshrined. With this iteration, we wanted to go back to that feeling, that essence that's so quintessential to us. Marius helped us figure out who we really are, and how we changed along the way. We've gone back to our roots and it's like we're starting again. But this time, we're shaped by our past experiences and knowledge. It's time for us to bloom again. The website mirrors our environment: the colors are a copy of our code editor color scheme, as is the beautiful Inconsolata Monotype font. The black and gold combine to create a luxurious look, that embodies the value that our work creates. A lot of work went into the small details of the website, the custom calendar and small animations. All work in concert to represent who we've become. ## What does it take to build a successful company? This is a question we receive a lot, and everyone expects a simple answer. The answer is that there is no simple answer. There is no formula for building a successful business, you just have to put in the work and try to learn from your past mistakes. Time is a good provider of experience. ## What did work for us: ### Coding our DNA It took a lot of time to define who we are, how we work and what we want to achieve. Figuring what your core values are, your purpose and vision is hard. Find them and code them into your company's DNA. > Your company has to have a vision, core values, and purpose. If you don't have them, you're just like everybody else. ### Building our dream team Each one of our employees is valuable to us. We encourage them to speak freely and we invest a lot of time and work into developing them. They have a say in the direction of the company and we share our revenue with them. New employees are vetted by everyone because they will be the ones working with him/her. Each of them is unique and they often complete each other. > Our team is our most valuable asset. Their failure is our failure, and their success is our success. ### Create value We treat our client's business as our own. We take a pragmatic approach, analyze the business and requirements, then focus on solving the most issues where we can have the biggest impact. In fewer words, what we deliver has to convert. If a client wants a website just for the sake of having a website, we won't do it. If the application we're tasked to build, has no clear later application or value, we simply will not build it. We analyze, build, measure and correct. If you cannot measure the impact of your project, then you've failed. > Your work has to create value for your customer. If it does, his business will grow and he will bring in more business for you. It's that simple. It's been a hell of a ride till now, and I can't wait for the next ten years. Lastly, I want to extend our gratitude to Constantin, [Marius](https://marius.is), and [Nick](https://ciolpan.com), without them, we wouldn't have made it. Thanks to our friends at [NTT Data Romania](https://ro.nttdata.com/) and [Agile Freaks](https://www.agilefreaks.com) for staying with us through rough times, and helping us grow. Special mention to [Andra Zaharia](https://andrazaharia.com/) for perfecting our website copy, and to all of our clients and friends, that contributed to our success. --- # You Can Write Better jQuery: A DRY Approach to Multiple Configurations > One of the most recurrent jQuery bad practices, addressed with a DRY approach to multiple configurations. Canonical: https://short.inc/blog/frontend-development/better-jquery-dry-approach-to-multiple-configurations Published: SEP 28 2018 While almost every new article mentioning it, talks about its demise, I've decided to write about one of the most recurrent jQuery bad practices I came across. So, here it is: ```javascript $('.multiSelectOne').multiselect({ buttonClass: 'btn btn-default', buttonWidth: '100%', ... }); $('.multiSelectTwo').multiselect({ buttonClass: 'btn btn-default', buttonWidth: '100%', nonSelectedText: '---', ... }); ``` Once upon a time, while working with a new team of full-stack web developers, I've discovered a recurring pattern: The developer created a different class name for each new element with a slightly different configuration. I've approached this issue having three principles in mind: - HTML verbosity is cheaper than Javascript verbosity - Don't repeat yourself (DRY) - Open for extension, closed for modification To avoid repetition, we'll define a defaults object which we will extend later on with extra options. ```javascript // I'm keeping .class and $selector separated for edge cases in which dom-content is dynamic and can't be cached. const $multiSelect = $('.js-multiselect'), defaults = { buttonClass: 'btn btn-default', buttonWidth: '100%', nonSelectedText: '---', nSelectedText: ' selected', allSelectedText: 'All', includeSelectAllOption: false, numberDisplayed: 1, enableFiltering: false, enableCaseInsensitiveFiltering: false }; ``` The source of truth will be the HTML element itself. HTML verbosity is cheap, and what I mean by this, is that no matter how many lines of it gets loaded, it takes place in the initial page load. Also, the element makes a full disclosure of what to expect of it when the script steps in. ```html ``` By moving the options to the element we have eliminated the need for different selectors and separated initializations. ```javascript // The source of truth should be the element that initializes it. // Have a default fallback if ($multiSelect.length > 0) { $multiSelect.each(function() { let $this = $(this), dataset = $this.data(), options = defaults; // Since the number of options can vary, // non vital options that have no specified default // will be extracted from the dataset and added to options Object.entries(dataset) .map(property => options[property[0]] = property[1]); // We initialize the plugin with its // specific options for each instance $this.multiselect(options); }); } ``` ## Conclusion jQuery is often misused because it's so easy to use in the first place. The insane development velocity it gives you at the beginning of the project, makes you easily forget about code standards. The snippet above provides an easy to understand example of how you can architect jQuery, so your codebase stays easy to extend and to maintain. --- # Work Ethic for Software Developers > A reflection sparked by an honest mechanic on what work ethic looks like for programmers, with practical advice on standards, linting, code reviews, and refactoring. Canonical: https://short.inc/blog/web-development/work-ethic-for-software-developers Published: SEP 16 2018 One day while I was on the road heading back home, I heard a loud sound coming from the back of my car. The noise was familiar but couldn't point out what happened. I was happy the car didn't stop and I kept going hoping I'll reach a repair shop soon. After a couple of weeks waiting, I made it to the mechanic. A quick inspection and he gave me the news: The brake disc broke. This is something that happens when the brake pads are due to be replaced and creates unnecessary pressure on the disc. I said earlier the sound was familiar because it happened before. It happened to my old car, back in the day, and I repaired it myself. I've been given the tip that if I leave it in the summer sun heat for the whole day, it will melt back in place. So, I did. I've asked the mechanic if we could try and heat the brakes and see if this works. I was hoping to get to use the car for a couple of more months before I'll have to pay for the reparation. > He said: "Sir, I am afraid we can't do this here. Here, in this workshop, we do an honest job, we can't cut corners and risk your life and the good name of this workshop". This is called **work ethic**. Now be honest. How often do you deliver your best, state of the art piece of code? If the answer is often, congratulations! Unfortunately, more often than not, like in no other professional trade, programmers are quick to cut corners to meet the ends with a low regard for code quality which will most of the time create problems later on. Here's what you can do to make sure you're giving your job the due respect: ## Have some manners (standards) Be it PHP or JavaScript, make sure you and your team understand the necessity of respecting a coding standard. I'm not saying the whole world should go out of their way and have a single identical style to write code. Some put a comma after the last item in an array, some don't (PHP). Pick a side and stick to it. - It will be easier for your team to read through team code and jump in the code base right away. - It will help control code acrobatics (I've made up the word, it means to write code that works but it makes no sense to the naked eye, or it involves techniques not usually recommended for the situation) - The on-boarding process will run smoother Debate it with your team and come to common grounds. It is necessary that everyone is on board with whichever decision you come up as a team. Unanimity is required. ## Enforce. Use a linter to make your life easier. The one we use at [Graffino](https://graffino.com) and I recommend to you is XO for Javascript. But you're free to choose out of the many that are available out there. Plug it in your build tool as well as in your editor for real-time feedback on your poor discipline. Following a community style guide will make sure you rise to the expectations of the community. No matter what tools and tricks you choose to use, make sure you involve some sort of automatism ## Stop compromising Delivering in time is mandatory. Still, try instead of cutting corners every time, to take your time and fix the process. Estimate correctly. You'll hear people talk in terms of which is more important, deliver tons of features fast, or prefer high quality. This should not be a discussion. The two are not exclusive. - **Don't skip code reviews.** Use pull-requests and make sure it is unmergeable until it has been reviewed and approved by your fellow programmers. - **Pair program.** From time to time. It is the fastest way to discover unhealthy partners in your colleague's programming style and help them adjust in a timely manner. ![Pair Programming: Work Ethic for Software Developers](https://graffino.com/_nuxt/img/a3103a4.jpeg) *Welcome to the awesome side.* - **Build your tests.** Before or after you write your code? At this point, it doesn't matter and I don't care. But have them written down. It helps you reason better about your code; will help you maintain what you've written and others better understand what you want to achieve. - **Refactor.** Refactoring is not only code tinkering but also a personal process in which you admit to yourself that past you, be it 30 minutes ago or 30 days, is less savvy than today you and is your responsibility to make things right. ## Raise your standards Your last project should be your best project. Every new project you add to the portfolio is the quality the client expects to get in change. An agency should deliver like the agency, not like the team or the guy who worked most of the time on the project. This means that it requires the team to put effort into bringing everyone up to a certain level and encourage collaboration and self-development. Of course, a time will come when you'll have to call it a day, push your day's work, pack up your stuff and go home. Of course. But when you do it, do it proudly, knowing that you did a great job and nobody can tell you otherwise. --- # After My Post Went Viral Google Responded > My viral post about a Chrome Web Store takedown got Google's attention — but their response made it clear there's nothing they can do. Canonical: https://short.inc/blog/web-development/after-my-post-went-viral-google-responded-theres-nothing-we-can-do Published: SEP 16 2016 TL; DR: I've been through hell trying to get our extension back to the Chrome Web Store after a takedown for trademark infringement. You can read the whole story in my previous post: ["How Google obliterated my 4-year-old Chrome extension featuring 24k+ users".](https://graffino.com/web-development/how-google-obliterated-my-24k-users-chrome-extension) > I'm permanently removing our extensions from the Chrome store and closing my developer account. When I first started writing my post, I didn't imagine more than 200–300 people would be reading it. I wrote it as a statement to my Chrome Web Store experience and as an advice for developers who would consider developing for Chrome. Things started to get out of hand when someone shared it on Hacker News and it all went uphill from there. Digg took over the next day and things exploded. It reached over 124k views, 1.3k recommends, in just 5 days. > The community response was overwhelming: "You are not alone!" I received numerous messages of support, from users and developers, some sharing stories very similar to my own. I was amongst the lucky ones. My post got viral and for a few days the community generated an increasingly powerful voice. Google responded. ![First response from the Chrome Team after they've read my blog post](https://graffino.com/_nuxt/img/65acf67.png) My hopes were high at first. They seemed to offer me valid solutions to my issue. Later on, I realized the email was just a courtesy. Don't get me wrong, I'm grateful that James responded personally and tried to help me out as much as he could. I imagine his hands are tied. From the exchange we had during the next days I slowly began to realize that I will never get my extension back on the store. ![The email I sent to clarify some things in their email](https://graffino.com/_nuxt/img/4875383.png) ![The second response of the Chrome Team](https://graffino.com/_nuxt/img/42aab02.png) The rules set are simple: Once Google gets a takedown request, *it will enact the takedown until the original complainant retracts its request.* I'm guessing you can see the issue here: > If the original complainant doesn't respond, there's nothing you can do to reinstate your extension in the store. Google acts as trial, judge, jury and executioner. You're convicted without the possibility to defend yourself. This takedown system has been abused by Facebook in the past. From all the messages I've received, *this happens a lot.* And if it can be abused by Facebook, I imagine it is abused by others. They just submit the claim and never look back. Google is washing its hands clean, passing the problem to the complainant and developers are left stranded. > I want you to think twice before creating a revenue stream based on the Chrome Web Store. Developing for Chrome, as it stands right now, is a very risky business. There is a total lack of developer support, making it likely to receive little to no help if you have a problem. This could be easily solved by offering paid support tiers, like Apple does. The copyright and trademark infringement system is a flawed one, skewed towards the complainant. The developer has no options available to defend himself if such an issue appears. There isn't any option left to circumvent the Chrome Store. Starting with Chrome 53, extensions [cannot be side-loaded anymore](https://www.chromium.org/developers/extensions-deployment-faq). *Thank you for all your support, sadly there's no happy ending here :(.* --- # How Google Obliterated My 24k+ Users Chrome Extension > After three months of trying to recover a 24k-user Chrome extension hit by an opaque trademark takedown, I'm giving up on the Google ecosystem. Canonical: https://short.inc/blog/web-development/how-google-obliterated-my-24k-users-chrome-extension Published: SEP 4 2016 After 3 months of trying everything I could think of, I give up. I don't think I will ever develop anything for the Google ecosystem again. I'm not angry, I'm not doing this out of spite. I just don't think it is worth it to invest any amount of effort to build something on a platform that turned out to be so unreliable. ## Please scroll down to read the latest update. I started developing my first extension back in 2010, when Apple finally decided to implement proper extension support in Safari. Exciting times. I spent a weekend writing my first Safari Extension, an ad blocker called "Cleaner Facebook". I must confess it was ugly, and by today's standards, very poorly written, but it did the job. After a few weeks while browsing Facebook using Chrome, the annoying ads popped up and I figured that it'll be worthwhile to port it over, so I did. I also made it available to everyone via [Graffino's apps playground.](https://graffino.com/apps) Months later the due to some policy changes in Chrome, I moved to the Chrome Web Store where I made it available for free under the name "Cleaner Facebook". What happened next was beyond my wildest expectations. It quickly gathered around 4.000 users and over the last year it surged to 24.000+ users. Whenever I pushed an update, the numbers would spike. I got quite a few offers to sell it, so others could push advertising through it. Thing is, I never wanted to make any money off it and I felt like I was betraying my users. So, I kept it and improved it constantly. It worked so well because I needed it to work well, I was using it daily and my users loved it. It got a 5 stars rating and over 85 reviews. > Google has been notified that some of your materials allegedly infringe upon the trademarks of others. At the end of May this year, I received an email from Google telling me that my extension violated Facebook's trademark and got taken down. There was no information how to solve the issue, no way to appeal. Google washed its hands clean and directed all inquiries to an automatically generated email address. This email address was a black hole that never responded to any of my emails. ![Google's notification that they removed Graffino's Ads removal app from the store.](https://graffino.com/_nuxt/img/803f43a.png) I figured out that the name might be an issue although there were [a lot of other extensions](https://chrome.google.com/webstore/search/facebook?hl=en-US) with the same name in the store. Even so, I changed the name of my extension to "Cleaner — for Facebook" and resubmitted it to the store where it got placed "In review". Over the next weeks I never received any email from the Chrome Store other than the initial take down notice. When I logged in again, I found my extension was still "Taken down" and the "In review" flag gone. I went on to search for a Developer Support page, but after half an hour of searching I found out that there is none. There is no support whatsoever for the developer besides Google's own documentation. If you encounter an issue that you can't solve yourself, you're stranded. There's no contact info. No one to write to. After getting really frustrated that day, I vented out sending out a nasty email to removals@google.com. Not sure it helped. The next day I poked around and found a support form intended for Chrome Web Store users. In my desperation I figured this was my only option left. About a week later, I got my first reply from *Google*. Although it sounded nice, it wasn't really helpful. Most probably due to the fact it was a canned response, totally unrelated to my issue. ![Google's first email response to Graffino's complaint.](https://graffino.com/_nuxt/img/69ec781.png) Later that day, I fired a few other emails, telling them that my extension was not under review and the cause for the take down was not flagging. I also submitted another message via the support form I used before. My requests got closed with a *"Thanks for your feedback."* canned response. !["Thank you for your feedback" response](https://graffino.com/_nuxt/img/8704191.png) Meanwhile my extension's user base was dwindling, and I could do absolutely nothing about it. ![Screenshot from the Developer Dashboard made on the 18th of July.](https://graffino.com/_nuxt/img/82b1ec6.png) After another two weeks I finally gave up and sent this final email. I got a reply that my case was "Reopened". It's been a month and I didn't hear back since, so I don't think I will ever get my extension back on the store. ![Final email from my side.](https://graffino.com/_nuxt/img/aba09c2.png) I'm not playing the victim here, and I don't expect this post to solve anything for my extension. I just want you to think twice before creating a revenue stream based on the Chrome Web Store. Google has great automated tools and services, to help developers ramp up and deliver their apps to users quickly and painless. Most of the time these tools work perfectly. The problems arise when they don't. I have never experienced such frustration, and such feelings of helplessness from any other major player out there. A similar issue with the ["Cleaner Facebook" Safari extension"](https://apps.apple.com/us/story/id1377753262?id=com.graffino.cleaner-for-facebook-86755BRK69), got promptly solved by Apple in under three days. Google has a record of very bad user support. Basically, if your issue is not listed in the "Support Forums" you're screwed. If I would have based my business on the Chrome Web store, I would be out of business by now. ## Update 8.09.2016 I never imagined this would generate this amount of attention: featured by **Medium, 100k+** views, heated discussions on [Reddit](https://www.reddit.com/r/programming/comments/51mgix/how_google_obliterated_my_4_year_old_chrome/) or [Hackernews](https://news.ycombinator.com/item?id=12442048). I don't really expect this to change anything for me, but I'm glad people are speaking up. If Google would implement a paid support option like Apple does for its developers, I'm sure a lot of pain would be avoided. I try to read everything, but I don't respond on Medium (hate the commenting system), but you can ping me on X. ## To answer the most common questions: 1. *"Why don't you change the name completely?"* Well, because using "for Facebook" in the name is considered [fair use](http://www.inta.org/TrademarkBasics/FactSheets/Pages/FairUse.aspx). Also, when managing an app or extension with that many users, you don't really want to confuse the users by renaming it to a completely different thing over night. It's also an extension that only works on Facebook. I might also be infringing with the icon. So, you see, I really need guidelines to do this. Again, my problem is with the way this was handled, not the takedown itself. 2. *"The extension was taken down because it was blocking ads."* This is simply untrue. I don't believe I was intentionally targeted. I was simply unlucky enough to be targeted by automated tools. Even the way my requests were handled weren't done with malicious intent by Google. I think I'm just an edge case for which their support tools aren't equipped to deal with. ## Update: 9.09.2016 I received an email from Google today in which they're expressing their apologies about the incident. It seems that they cannot do anything for the current store entry until the original complainant retracts his complain. They offered me clear options though. We're currently assessing what the best option might be. As I said in the article, this wasn't an intentional targeting but a slip-up of their support which they're trying to fix. Hopefully I will have the time to write a follow-up once all this is over. I didn't expect or wanted this kind of attention, these have been 2 stressful days for me, trying to keep up with all the requests and messages, as I do have a job and my own company to run. It also happens that today is my birthday. I guess receiving a response from Google was my birthday present :). ## Update: 10.09.2016 You can still find the [ad blocker extension](https://graffino.com/apps) here. However, you will not be able to run it. Chrome made changes so that extensions cannot be side-loaded without an enterprise profile. ## Final Update: 12.09.2016 Unfortunately, there's no good news. I've decided to stop trying. Here's the follow-up: After my post went viral, Google responded: ["We're sorry. There's nothing we can do."](https://graffino.com/web-development/after-my-post-went-viral-google-responded-theres-nothing-we-can-do) --- # The Sad State of Apple's Safari Browser Extensions > A developer's frustrated reflection on Apple's neglected Safari Extensions Gallery and how poorly it stacks up next to the Chrome Web Store. Canonical: https://short.inc/blog/web-development/the-sad-state-of-apple-safari-browser-extensions Published: SEP 4 2016 Safari has always been my browser of choice. I love the integrated "Reading List", the "Reader View" that makes reading articles to much more enjoyable, the silky-smooth interface, the speed, but most of all the power management features that keep me going for a long time before I have to plug-in. I started developing browser extensions back in 2010. When Apple announced Safari 5 with HTML extension support, I remember being filled with excitement, thinking this would change everything. I spent that weekend writing my first Safari Extension, an ad blocker for Facebook. Generating all the needed icons and graphics needed for the gallery was the hardest part. I'm not a designer, and I must confess it was ugly. But it did the job, in fact, there's a healthy user base still using it today. > The submission process was crude, it felt that everything was managed manually, there was no possibility to edit or delete your extension after it was published and it took 3 months just to get it into the Gallery. The Gallery itself had no search function and was nothing more than a glorified static HTML page. This is part of the email message I received after my extension was accepted: > "If you need to update your extension listing on the Gallery (description, name, icon…), please email safariextupdates@group.apple.com and include the requested changes in your message." The last part really bothered me back then. I mean, sending updates via e-mail? How did anyone at Apple think this was OK? After my extension was published, I didn't give it further thought. The extension was easy to update via a *.plist file on my server and I didn't really need to update the description or graphics. Five years later, almost nothing has changed. Yes, the gallery has now a search function and advanced filters, and starting with last September, extensions are hosted by Apple, but everything else is the same. Last year they started charging for the Safari Developer Program, but there is basically no support offered via your paid developer subscription. They just redirect you to safari-extensions@apple.com. The only way to update your extension nowadays is to submit is as a new extension via a plain HTML form. There is no status page, no interface in your developer account where you can manage them. I've submitted updates to my three extensions in November. I did get a reply for non-compliance for one of them last week. For the others, I have no idea what's happening. When I ported my extension to Chrome back in 2011, I didn't know what to expect. But, when I used the Chrome Web Store for the first time as developer, I wept tears of joy. The experience with the Chrome Web Store is amazing. You can edit and submit different versions for your extensions, test your release on a subset of users, access real-time analytics with the Google Analytics integration, and when you submit a different version, all your information is autocompleted. The rating system is well thought of and treats you fairly. Every time I get a new positive review or push an update, I get a slight bump in users. My Chrome extension has passed now 21.790 weekly users. The Safari Developer Program is a sad joke when comparing it to the Chrome Web Store, and I suspect that this also is part of the reason why so few developers are writing or maintaining decent Safari extensions. The only maintained extensions are the ones belonging to well-known web services, that have to build one, to get services delivered to the users. I can't really imagine why Apple would launch such an important feature (if you remember, it was part of Steve's 2010 Keynote) only to abandon it later. It's such a pain to keep my Safari extension updated. If I wouldn't use it daily, I would have abandoned it years ago. PS: You can check out here some of the [web apps](https://graffino.com/apps) we're playing with at Graffino. --- # Looking Back at Our First Steps as a Company > After seven years in business, we finally took the time to share our story — who we are, why we started writing, and what we love to build. Canonical: https://short.inc/blog/software-development-outsourcing/graffino-first-steps Published: NOV 23 2015 Well this is awkward. We opened our doors for business seven years ago, but never found the time to do stuff for ourselves. Always busy with the next adventure, the next big thing, our next client, we forgot that we also must find time for ourselves. ## Us The name Graffino was born out of a coincidence. My partner called me one day, sounding excited, asking: "What do you think about *Grafzino*?". I misheard it as *Graffino*. That was it. It takes time for us to accept new people in. We only work with the best and we don't settle for good enough. In the past years, we grew to a six people team and another half a dozen collaborators. All talented and passionate individuals, just like us. Our refreshed website and identity reflects our beliefs: "*We're your kind of digital agency*". We only take on projects that we believe in, that we enjoy doing. Our clients are important to us and we strive to deliver the best of what we can offer. If we don't like it, we don't ship it. You can [check out our website](https://graffino.com) to find out more about Graffino. ## Why We changed our website and brand only three times in six years, we never felt the need to promote ourselves, because we didn't need to. We get recommended a lot, because we're committed to only deliver our best work. Our clients love working with us and they rarely do just one project with us. This is an actual quote from one of our recent clients: > This is amazing … I can't really even believe it … So pleased. > > — Bobby Gibson CEO Travelkeys When we get this kind of reaction from our clients, we know we did great. In the last months we felt that this wasn't enough anymore. We all have a lot of experience and something exciting to talk about, we all have something to share. So, we decided to start writing. ## What We'll write about the cool stuff we're experimenting with and our own opinions about design, code and the web. If you're wondering where the comment section is, you should know that comments are not our thing. The readers we write are people like us, and we're writing for them. We think comments distract from the conversation and add unneeded pressure on both the writer and the reader. If you feel the need to write us, you can do it on [X](https://x.com/graffino) or via [email](mailto:hello@graffino.com). Rest assured, we read every mention and every email. ## Free treats We play with bits and pieces in our free time: [Chrome, Safari and Alfred](https://graffino.com/apps) extensions we've build for ourselves. If you're a front-end developer, you might find our [Ninja](https://github.com/Graffino/Ninja) build tool interesting. --- # How We Became Better Front-End Developers > Lessons from years of front-end work — on naming, tooling, mentorship, and resisting the urge to chase every shiny new framework. Canonical: https://short.inc/blog/software-development-outsourcing/how-we-became-better-front-end-developers Published: NOV 23 2015 This is a story about things we learned on our journey through the past few years, how we managed to become better at what we love. It's a long read and there's no TL; DR. > Thing is, there's a lot of good and bad advice out there that newcomers take for granted. We've been reading a lot of articles revolving around front-end development lately. Some of them are great, others are outright ridiculous. Thing is, there's a lot of good and bad advice out there that newcomers take for granted. Last month I recollect reading an article that recommended PNG sprites. Who uses PNG sprites anymore, except for fallback? Yes, there are edge cases and SVG can have a big performance impact if used improperly. But, why would you use a decade old technique when in today's world you have to support multiple resolutions and pixel densities? Another article explained the revelation from switching from icon fonts to SVGs. We've been using SVG for the past 2 years. We never used icon fonts. (We tried but we stumbled on weird issues with Android that couldn't be reliably solved). SVGs are way more flexible than icon fonts and so much easier to maintain. My point is, take everything you read with a grain of salt. See if it fits your workflow, then *test the hell out of it* using a real project, with *real data*. We acknowledge that we don't know everything and that also some of the work we do might not be top notch. We're all learning new stuff every day. > Our latest project is the best project we've ever written. I'm not going to tell you how you should write your code. I'm telling you to periodically *re-evaluate your code* and try to improve it. Create your own style. See what works for you. I've met a lot of coders that told me they don't have time to change the way they work, because they are always too busy. That's same as saying: "I don't have time to put gasoline into my car's tank". Eventually you'll run out of gas. We book a few days from every project, to improve the tools we're using and the way we code. We sit around the office and discuss problems that arose in our previous projects and see if we can fix them. *This time is budgeted and paid by the current project.* We always end up tweaking our process here and there. That's why, our latest project is the best project we've ever written. > Naming is monumentally important for your project's success. Looking back and seeing how we wrote our CSS a few years ago, I can't help giggling. "What on earth were we thinking?". You might laugh, but when writing CSS, naming is the most difficult part. Naming is monumentally important for your project's success. Two years ago, we stumbled upon Harry Roberts article, "[MindBEMding](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)". It was an absolute game changer for us. Since then, we've became huge fans of [BEM](https://en.bem.info/) and spent lots of time adapting it to our needs. You should also read the follow up "[BEMMIT](https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/)", [Chainable BEM modifiers](https://webuild.envato.com/blog/chainable-bem-modifiers/) by Jordan Lewis. They'll blew your mind. These guys are the real pioneers and they changed the way we write our code. > CSS is the actual language, preprocessors are tools. We never jumped onto the SASS train from the start. Most people forget that *CSS is the actual language*. Preprocessors like LESS/SASS/Stylus are just the tools. If you don't master CSS first, you can't possibly write good, maintainable CSS. Regardless of the tools you're using. Stylus got picked in the end, because it actually allowed us to write CSS. (Edit: SCSS is comparable to Stylus nowadays). Our *BEM syntax* kept our code clean and the extra flexibility Stylus provided was worth it. When we're writing in Stylus, we're using the same old CSS syntax. We keep all colons, semicolons and accolades. We minimize the usage of mixins and use extends sparingly. Stylus is just the tool, not the language. > Be insane when it comes on how you write your own code. The way you write your code is where everything starts. This is the most important selection criterion for our new hires. We don't even bother with those who write messy code. It's almost impossible to change someone's bad coding habits and you can't possibly do exceptional work with the wrong people. No matter how hard you try. We went to great lengths to understand what we were doing wrong, and how we could build better projects. Someone we've worked with a while ago, told us we have impossibly high standards and that we're insane regarding to how he should write his code. Well, that's the point. Be insane when it comes on how you write your own code. It's the first step on your journey to become a better coder. You don't have to adopt "best practices" and implement them mindlessly. Be informed, *see what works for you*, develop your own style. As long as it's clean, organized and readable, it's OK. There is no perfect or "zen" style to write code. > Resist the urge to switch to something new the instance it comes out. Let it mature, consider all the implications beforehand. A few days ago, I sat with one of our developers and we talked about new tools and ways to improve our workflow. He showed me a new shiny new tool to replace our current [Gulp workflow](https://github.com/Graffino/GulpFlow). He talked about how "cool" it was and the stuff we could do with it. After a while we realized that most of the current custom tools and integrations that we spent tens of hours building wouldn't work with it. Ouch! We put all the other options on the table and we ended up deciding to switch to Gulp. Configuring Gulp to work with our other tools and integrations went rather smoothly. After initial tests, it was 50% faster than our current Gulp workflow. It's still a work in progress, but you can [find it here](https://github.com/Graffino/Ninja). What most young developers don't get is that improvement is mostly incremental. There are times when you scrap everything and start over, but these times are rare. You can't do great work when you start from scratch every time. Build solid foundations and improve incrementally. This is how exceptional work gets built. Resist the urge to switch to something new the instance it comes out. Let it mature, consider all the implications beforehand. > Be practical, use the tools at your disposal for the purpose they were created. I see a lot of concept work on CodePen and other sites. Some of it is cool, fun, or intriguing. Other concepts are created just for the sake of proving that is possible. I must confess, I never do concept work that has no real purpose. Let me give you a few examples. Recently, I stumbled upon one concept that was doing particle animation in CSS. Why use CSS when this would be trivial to create this using canvas and JS? There are also many that replicate vector graphics in CSS. We have Illustrator or GIMP for that. Why would one waste time doing things that have no real value or purpose? Just to prove that it can be done? The "*I did this in my free time*" phrase on such a concept, doesn't help either. It's obvious it took tens of hours to do it. So, be practical instead, use the tools at your disposal for the purpose they were created. Don't waste your time with valueless creations. Create something of real value. This actually improves your skills and pushes you further. > If your designer is not challenging you, find one that does. A great designer will make you become a better front-end developer. Working with a great designer will transform you as a front-end developer. Once you spend countless hours trying to implement the designer's vision, exactly how he wants it, pushing pixels around, having endless conversations, you'll create things you never thought were possible. If your designer is not challenging you, find one that does. A great designer will make you become a better front-end developer. > Travel, go to conferences, meet others like you. Developers are a special breed. We feel contempt in our own little world, as [Derek Powazek](http://powazek.com/) puts it: > Programmers are the Gods of their tiny worlds. They create something out of nothing. In their command-line universe, they say when it's sunny and when it rains. And the tiny universe complies. Thing is, you don't live in a vacuum. Travel, go to conferences, meet others like you. It's the best way you can share ideas, get honest feedback. Where else can you share a beer at 5am, with a geek just like you, from another other part of the world, and debate why "*Apes should take over the world*"? --- # Today I Learned — Short.inc > A small, dated archive of things the team picked up during the week — code snippets, AWS quirks, the occasional rant. Canonical: https://short.inc/today-i-learned - [Export channel messages from Teams for Slack CSV import](https://short.inc/today-i-learned/export-channel-messages-from-teams-for-slack-csv-import): 08 may 25 · Zeno Popovici - [TIL: How to quickly check which AWS regions support SES using a Bash script](https://short.inc/today-i-learned/check-aws-regions-supporting-ses): 06 oct 24 · Nick Ciolpan - [TypeScript `satisfies` vs `as`](https://short.inc/today-i-learned/typescript-satisfies-vs-as): 12 aug 24 · Nick Ciolpan - [About TIL](https://short.inc/today-i-learned/about) Raw Markdown for any entry: https://short.inc/today-i-learned/{slug}/raw --- # About Today I Learned — Short.inc > What "Today I Learned" is — and how to add to it. Canonical: https://short.inc/today-i-learned/about **Today I Learned** is a small, dated archive of things one of us picked up during the week — code snippets, AWS quirks, a Postgres incantation, a Figma keystroke, the occasional rant. Each post is short, dated, and signed. ## How posts are written Each TIL is a markdown file under `content/til/` with frontmatter for `title`, `slug`, `date`, and `author`. Code blocks use fenced syntax with a language hint and are syntax-highlighted at build time. - [All entries](https://short.inc/today-i-learned) --- # Export channel messages from Teams for Slack CSV import > Today I Learned: Export channel messages from Teams for Slack CSV import Canonical: https://short.inc/today-i-learned/export-channel-messages-from-teams-for-slack-csv-import Date: 08 may 25 Author: Zeno Popovici 1. Create an Entra App in App Registrations. 2. Go to API permissions and give all the necessary permissions via Microsoft Graph. Some permissions might be superfluous. You’ll figure it out. :) 3. Generate a client secret and store it somewhere safe — you only see the value once. 4. From a terminal, exchange the client credentials for a Graph access token, then call `/teams/{team-id}/channels/{channel-id}/messages?$top=50` and page through `@odata.nextLink` until you’ve drained the channel. ```bash curl -X POST "https://login.microsoftonline.com/$TENANT_ID/oauth2/v2.0/token" \ -H "Content-Type: application/x-www-form-urlencoded" \ -d "client_id=$CLIENT_ID&client_secret=$CLIENT_SECRET&scope=https://graph.microsoft.com/.default&grant_type=client_credentials" ``` 5. Map each message to a Slack-compatible CSV row: `timestamp,user,channel,text`. Slack’s importer is forgiving — keep the columns simple and it ingests. --- # TIL: How to quickly check which AWS regions support SES using a Bash script > Today I Learned: TIL: How to quickly check which AWS regions support SES using a Bash script Canonical: https://short.inc/today-i-learned/check-aws-regions-supporting-ses Date: 06 oct 24 Author: Nick Ciolpan Although it has improved lately for some services, AWS is still notoriously unfriendly when it comes to checking which services are activated and running across different regions. Here’s a script you can run in the console to quickly see which regions have SES (Simple Email Service) available: ```bash for region in $(aws ec2 describe-regions --query "Regions[].RegionName" --output text); do echo -n "$region: " aws ses get-account --region "$region" >/dev/null 2>&1 \ && echo "supported" \ || echo "not supported" done ``` It walks every enabled region, hits `ses get-account`, and prints support status. Handy when you’re standing up a new SES sender and need to know which region to bind your domain to. --- # TypeScript `satisfies` vs `as` > Today I Learned: TypeScript `satisfies` vs `as` Canonical: https://short.inc/today-i-learned/typescript-satisfies-vs-as Date: 12 aug 24 Author: Nick Ciolpan `as` lies. `satisfies` checks. ```ts const palette = { green: '#034c3c', orange: '#ec4e20', } as Record; // palette.green is now `string` — we lost the literal type. const palette2 = { green: '#034c3c', orange: '#ec4e20', } satisfies Record; // palette2.green is `'#034c3c'` — literal preserved AND shape verified. ``` Use `satisfies` when you want the literal types kept and the shape checked. Use `as` only when you genuinely know more than the compiler — and almost never on object literals.