Guide to Integrating Data Sources with ToolJet App
Ganesh PatilToolJet is a low-code platform enabling developers to rapidly build and deploy custom internal tools. It offers drag-and-drop pre-built components for developers to build complex applications with ease. It also provides a wide range of data sources and APIs. This tutorial aims to integrate data sources with the Tooljet app we will build. How to Create Tooljet App Launch the ToolJet web platform on the browser and select Try for free. Fill the required information and create an account. Select Create an app from the left side panel. Give it a nice name and you are done. Congrats, you created your first Tooljet app. Now we have successfully created our first app on ToolJet. It's time to integrate data sources. In this tutorial, we use GitHub API as a data source and will integrate and display the data on Canvas with the pre-built Table component. How to Integrate Data Source with App Right now the interface of our application is similar to below. There are three different sections of our app left side panel for app controls right side panel for components middle panel is divided into two sub-sections one is our app canvas Query panel. Connect Data Source Click on the Add button from the data source and select REST API. Add this API (https://api.github.com/users) in the URL input box and click on run button. We are successfully able to get the data in JSON format. Now drag and drop the table component from the right side panel. The table component comes with dummy data you can see it on the table component. Click on the Table component and the right side you can see the default data we need to remove. Write the query {{queries.restapi1.data}} in the data section. We can see our data on the Table component. Conclusion By following this guide, you have successfully connected to a data source in ToolJet, fetched data, and displayed it in a Table component. This process can be applied to various data sources and use cases, enabling you to create dynamic and data-driven applications with ToolJet.
Mastering CSS3: Strategies for Writing Clean Code and Boosting Performance
Ganesh PatilCascading Style Sheet (CSS3) is changing, and evolving continuously. There are different ways to write CSS. Some developers choose to write separate files for better understanding or to organize structure, other people write single CSS files. It depends on what kind of project you're working on. OLD V/S NEW CSS CSS3 is a complete game changer. The new CSS3 is amazing and it's more powerful with new features including responsive layouts, animations, variables, properties like calc functions, etc.In the old way, people wrote CSS and found it difficult to make websites responsive and optimized but now can be done easily. Examples of Writing Bad CSS Most of the time people write the same code again and again for example <div class="item-1"> Hello </h1> <h2 class="item-2"> Amazing </h1> <h3 class="item-3"> Developers </h1> Now, I want to change the back color of every individual element. I have to write the following CSS code app.css .item-1{ background-color: red; } .item-2{ background-color: red; } .item-3{ background-color: red; } Effective Way to Write CSS3 In the previous example, we had to write three different lines to change color right, and now assume you're working with a large codebase and your team lead assigns you the task to change every <h1> element color so you have to find each heading change the color. app.css .item-1{ background-color: yellow; } .item-2{ background-color: yellow; } .item-3{ background-color: yellow; } It's time-consuming and a bad way to solve problems. Here's an effective way to solve this. Create systemDesign.css as a separate file and add all your styling rules. systemDesign.css :root { --color: red; --back-color: yellow; --h1: 32px --h2: 24px; } /** * ? You can write all CSS styles here. **/ Now let's take the previous example if you have to change the back color of all heading tags all you have to update is a back-color style from the syetmDesign.css file. index.html <div class="item-1"> Hello </h1> <h2 class="item-2"> Amazing </h1> <h3 class="item-3"> Developers </h1> systemDesign.css :root { --color: red; --back-color: yellow; --h1: 32px --h2: 24px; } /** * ? Write your CSS classes **/ .item-1{ background-color: --var(back-color) } .item-2{ background-color: --var(back-color) } .item-3{ background-color: --var(back-color) } Now if you want to change back color change the variable value and that's it. You can also use the sibling concept of CSS to solve this issue but always use standard practices. Second Example Another way is to not repeat your code again and again. Assume you have two classes .one and .two that require the same properties. <button class="one"> Web </button> <button class="two"> Development </button> .one{ padding: 10px 40px; margin: 10px; font-size: 32px; color: black; background-color: white; } .two{ padding: 10px 40px; margin: 10px; font-size: 32px; color: white; // color changes background-color: black; // back-color changes } You're using the same code here and just two properties are changing back-color and color. Solutions .one, .two { padding: 10px 40px; margin: 10px; font-size: 32px; color: black; background-color: white; } .two{ color: white; background-color: } In CSS, when you use a comma between selectors, it allows you to apply the same set of styles to multiple selectors. This grouping of selectors with a comma is a way to apply a common style block to multiple elements without duplicating the styles for each selector. I'm a developer learning something new every day and sharing his learnings through this platform. if you find any wrong in the code, or typos mistakes I will highly appreciate it and will fix it ASAP. Let me know in the comments if you find some bugs. That's it! Let's chat on Twitter! Support my YouTube channel 👇 https://youtu.be/OxR_Ekfz_gc?si=QyDhPpzCbLa2UCCk
Getting Started with HTML: The Ultimate Beginner's Tutorial
Ganesh PatilHypertext Markup Language(HTML). The difference between HTML and HTML5 is the latest version of the language with new features, powers, and more positive results nothing fancy. Starting with HTML The below elements that we are going to explore in this article remember no course or guide will teach you the whole programming. The modern way approach is to understand the basics and build and explore. HTML Document Format Meta tags preloading & prefetching HTML Tags (Self-closing & open-close tags) Semantic HTML Forms Table 1. Document Format <!DOCTYPE html> <html lang="en"> <head> <!-- meta tags & CSS file goes here --> </head> <body> <!-- The body of HTML element --> </body> </html> The first line tells the browser this is the HTML document. <!DOCTYPE HTML> The second line is used for defining the language of the webpage you're building. You can also put another language as well but for best practices, we used en(English) or any one language. <html lang="en"> Meta tags enable superpower to your project when you share something on social media it automatically shows the preview images and ranks your website on top of Google with targeted keywords. 2. Meta Tags <!-- Meta Tags --> <meta name="title" content="Personal blog Page"> <meta name="description" content=" This is a personal blog website."> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> The first two meta tags are used to define the title and description of your webpage and charset meta tags are used to support different characters(emojis) and the rest are for device width so on. Another approach you can use is Opengraph Protocol which is highly recommended. 3. Preloading and Prefetching These two techniques are really powerful and even used in next, React and modern web frameworks to optimize resources. Preloading and prefetching are techniques in HTML to optimize the loading of resources, such as images, scripts, stylesheets, and more, to enhance the overall performance and user experience of a web page. Preloading: Preloading is used to load certain resources in advance, before they are needed by the page, to reduce latency and improve performance. Use the tag with the rel="preload" attribute to specify the resource to be preloaded. <link rel="preload" href="example-image.jpg" as="image"> Prefetching Prefetching is used to fetch resources in the background that might be needed for future navigation, improving the loading speed of subsequent pages. <link rel="prefetch" href="next-page.html"> Self-Closing Tags & Paired Tag In HTML, elements can be classified into two main types: self-closing tags and paired tags (also known as open and close tags). <!-- Slef Closing Tags --> <img src="image.jpg" alt="Description"> <be> <input type="text"> <!-- Paired Tags--> <div> <h1>This is inside a div.</h1> <p>Another paragraph inside the same div.</p> </div> These are just basic tags you can explore more tags here! Semantic HTML Semantic HTML refers to the use of HTML markup that carries meaning about the structure and content of a web page, making it more descriptive and meaningful both for developers and browsers. <!-- Semantic HTML Tags --> <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> Forms The forms are an essential part of HTML when it comes to taking input from users for multiple purposes like login, registration, etc. <form action="demo.php method="get"> <!-- Email Input --> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <!-- Radio Buttons --> <label>Gender:</label> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">Male</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label> </form> We use two methods form action="demo.php" and method="get". The first action page is executed when the user clicks on the submit button of the form and the data submitted by the user goes to a server that's how the frontend backend communicates in the way. The second thing is a method and there are different methods like get, post, and delete depending on the need you can use them. Table HTML tables are used to display data in rows and columns. <table> <thead> <tr> <th>Student</th> <th>Subject</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>Math</td> <td>A</td> </tr> <tr> <td>Jane Smith</td> <td>English</td> <td>B</td> </tr> </table> The table will show something like this. Cool, right! This is enough HTML knowledge you need as a beginner but this is not complete HTML. You can explore and learn more about it but this is important HTML stuff you know. I appreciate it if someone finds something wrong (Code, typos, grammar mistakes) in the article do share it in the comment will correct it. Support to my Youtube Channel Here👇 https://youtu.be/MHwR4HGZdoE?si=g8xjXC8bgDlY-wjt
Tap into Global Markets: 5 Open-Source Tools for Localization in 2024
Ganesh PatilThe world of software development is rapidly growing, and reaching a global audience can be a challenge. Whether you're selling products or offering services, ensuring the best experience for users is crucial. Localization becomes a key ally in connecting users seamlessly with your software. What is Localization? Localization involves translating content from one language to another. The primary goal is to make an app multilingual. Although localization can be challenging, advancements in technology have simplified the process. Localization is about adapting your product or service to different languages and cultures to make it more accessible and appealing to a wider audience. Users prefer content in their local language, and implementing this feature through localization is now more accessible than ever. Ultimately, localization fosters genuine connections with your global users. Benefits of Localization Product localization can benefit businesses in several ways. Global Reach: Expand your software's accessibility to users worldwide. Market Expansion: Enter new markets by adapting your software to local preferences. Increased Adoption: Attract more users by removing language barriers. Streamlined Communication: Facilitate clearer communication between users and your software. Improved User Satisfaction: Make users happier by ensuring the software feels familiar and relevant. Strengthen Product trust: Show your commitment to local markets and build stronger user relationships. Better market insights: Gain valuable data and feedback from localized user interactions Why Opensource Tools for Localization? Open-source tools are community-oriented for better discussion on product innovation and improvements. Open-source tools focus on involving the community to discuss and make the product better. This helps with innovation and improvements. Cost-Effective: Eliminate licensing fees and reduce overall localization expenses. Flexibility: Customize tools to align with your workflows and language requirements. Scalability: Manage localization efforts across various initiatives without limitations. Community Support: Tap into a global network of developers, translators, and localization professionals for assistance and collaboration Fostering Innovation: Open-source tools encourage the exploration of new localization approaches and technologies. 5 Open-source Localization Tools to Consider 1. Tolgee Tolgee is an open-source solution for painless localization. Tolgee provides fast integration to web apps, auto-machine translation, in-context translating, automatic generation of screenshots, and many more features. Are you curious to know more about Tolgee? Here's the GitHub repo to explore. 2. Pontoon Pontoon is an open-source translation management system developed by the Mozilla Localization Community. Pontoon provides a web-based interface for software localization to the users. The translations are stored in the Version Control System (Git etc.) to ensure accuracy. Pontoon provides a context suggestion feature to help efficient localization. Its community-oriented platform, allows people to contribute to their project for improvements. Here's the GitHub repo to explore. 3. Weblate Weblate is an open-source, web-based platform for localization that manages the entire process and it's used by over 2,000+ projects. Weblate offers several features to make the localization process easier, faster, and collaborative. It supports various file formats like websites, strings, content, and code. Weblate provides descriptive analytics on localized projects that can help various areas to improve. Here's the GitHub repo to explore. 4. i18n-Tasks i18n-Tasks is an open-source solution for software localization. The problem with efficient translation is solved by the i18n-Tasks which offers more efficient translation. i18n-Tasks able to manage numerous translation files and simplify the process. It supports several file formats for localization. i18n-Tasks produces high-quality translations for the user and is error-free, clear, and professional. The i18n-Tasks automates the repetitive tasks to work on other business strategies. Here's the GitHub repo to explore. 5. Traduora Traduora is an open-source translation management platform. Traduora supports modern automated localization workflow for translation. Traduora offers import and export translation features, auto-translation of the project, and updates. Traduora allows you to work with the team in a collaborative space once you set up your project. It controls and customizes the entire localization process from API access to workflow. Here's the GitHub repo to explore. Wrap up In a world going digital, language shouldn't be a barrier. These five open-source localization tools empower you to reach global audiences on a budget. In 2024, break down those barriers and deliver exceptional user experiences for everyone. So, choose your open-source localization tool and start your journey!
A Comprehensive Deep Dive into JavaScript: Mastering the Fundamentals
Ganesh PatilIntroduction Hey Everyone, Welcome to the new article of the "DEEP DIVE SERIES" where we're focusing on going in-depth to learn a particular technology. The first article has already been published on the platform and here's the link to the article "Deep Dive Into Web Development" Visit and spread love to the community. There are multiple videos and articles out there about the JavaScript roadmap. In this tutorial, we are exploring JS topics in detail. Web development is a vast field every week you'll see new frameworks coming out and you have to learn that but the fundamentals are the same which is JavaScript. Basic Fundamentals The key to a good software engineer or full-stack developer is to know the fundamentals well. The better clarity you have on the fundamentals the easier you solve the problem. | Programming by definition is problem-solving. Operators String Functions Loops Conditional Statements (if, else, nested if-else) Arrays Objects Document Object Model These are the fundamentals of JavaScript and there are lot to learn in the above-listed topics. Operators (Arithmetic, Comparison, Conditional, Assignment, Bitwise) etc. DOM(Changing HTML elements, Creating new elements, Action Listeners, Events), etc. Advanced Topics ES6+ Concepts (const, let, map, set, arrow func, Promises, Array Methods) Closures Event Loop V8 Engine Call Stack Prototypes JSON API format Import Export Module These are the most key topics you have to learn as a JavaScript Developer and the interviewer expects you to know these concepts. Learning is not enough proof is important to showcase your ability to work for that you have to build projects along with learning. | Confidence comes from doing one thing again and again. Data Structures & Objects The essential concept of programming as a developer is Data Structures. The arrays, objects, maps, sets, etc are part of DSA in JavaScript. | This section is for people who want to build a career in JavaScript. Arrays Objects String Destructing Mutability Functions High Order Functions (Filter, Map, Reduce, Find) OOPs in JavaScript Object-oriented programming is a must for every developer whether you're a frontend or backend developer you should know the four pillars of OOP's. The JavaScript OOP's topics include: Classes and new keyword this keyword Method and Properties Polymorphism Abstraction Encapsulation Inheritance Getters, Setters Conclusion In this tutorial, we cover Basic JavaScript, Advanced topics, DSA, and OOP concepts. These are a complete guide for anyone who wants to explore JavaScript in depth. We are not done here JavaScript is vast you have to learn continuously. | JavaScript Developers are lifetime students. Want to connect, Let's chat on Twitter. Recent Articles 👇 Deep Dive into Web Development Linux for Beginners How to Make Money as a Technical Writer What is a Developer Relationship How to Master the Art of Content Creation Support My YouTube work here 👇 https://www.youtube.com/watch?v=52biDlBTrhQ&t=401s
"A Comprehensive Deep Dive into Web Development: From Basics to Advanced Techniques
Ganesh PatilLearn What Matters Introduction Hey Everyone, I starting with web development where we are going to deep dive into frontend development part one. The second part will focus on the backend area in the next article. We are focusing on concepts that actually matter. Full stack development is the best path you can follow to get a job in tech because of the availability of content and ease to learn. JavaScript is everywhere from the front end to the back end you can't ignore JS. We are going to start with the basic foundations of web development. HTML Hyper-Text Markup Language (HTML) is not limited to the structuring web page. HTML5 is more powerful right now in terms of SEO. There are a lot of things introduced in HTML5 for better results. Semantic HTML5 (SEO Focus Tags) Navbar Article Strong (Bold) em (Italic) Mark Header Article Open Graph Protocol Web Components Preloading & Prefetching Forms & Data Validations The above topics may be completely new for you all or maybe not but it's better to know what exists out there. Open Graph protocol is highly important for anyone who wants to learn web development in depth. CSS The latest CSS3 is a complete game changer. You can do everything with it Animations, Responsiveness & everything without any third-party library. Also, one thing you have to keep in mind CSS is a long journey you can't master it without practice so don't fall into a loop of learning everything. Box Model Layouts(FlexBox, Grid Layout, Float) Units (%, px, em, rem, vh, wh) Calc functions & CSS variables Responsive Web Development (Media Queries) Animations (Keyframe, Transform) CSS preprocessor(SAAS, LESS, PostCSS) CSS3 is incredible and the only thing you have to do is project building. Learn Advance HTML & CSS for free. JavaScript JavaScript is the key. Web development is really easy if you have a good command of JS. React, Next, TypeScript, Node, and all other advance frameworks and libraries build top on JavaScript. There is no perfect roadmap to master JS but required topic you can learn as follows : Basic Fundamentals ES6+ Syntax Template Literals Functions (Regular + Arrow) Array Methods (map, sort, filter, forEach ) Shorthand object Property Destructuring Fetch API Async/Await Syntax Import and Export Debugging Webpack and Babel Closures, Callbacks & Prototypes React React is a JavaScript library that provides a fast & Scalable approach for better results in web development. Components reusability, Hooks, and components are core features of react. File & Folder Structure Components JSX (JavaScript XML) Props & Hooks State & Events Conditional rendering React Ecosystem These are the required concepts you should know as a front-end developer. As a Developer Never Stop Learning...!! Git & GitHub Version control systems are highly recommended to learn as a developer. Git (CLI System) & GitHub(Web Platform) are popular ones but both are different. The version control system helps you track your code and every change you made in your code. There are multiple options are available such as Bitbucket & CMVC and many more. Learn Complete Version Control System for free. Git Basics Git Branching Git on the Server Distributed Git GitHub Git Tools Testing Applications Testing is required because as a developer you should be able to test & improve the performance of your applications. Jest is an open-source javascript testing framework. There are different platforms that help you to test your web apps but Jest is better to learn. How to Start Testing Your React Apps Using the React Testing Library and Jest What Next? This is the complete guide on frontend development and the next article will be a guide on Backend Development. Everyone has their own path to learn web development but here I shared the common suitable way for everyone. Stay tuned for the next article. 🎉 Learn with well-structured roadmaps. Conclusion Hey Everyone, I'm Ganesh Computer Science student from India. I shared everything about tech. Creating content to document my journey with articles, videos (Youtube), and short content. Connect with me on Twitter. I create video content on youtube support here 👇 https://www.youtube.com/watch?v=52biDlBTrhQ&t=47s
How to Build a No-Code Developer Portfolio: Step-by-Step Process
Ganesh PatilHello amazing People on the internet, After a long time we are going to know how to build a code portfolio with GitHub. I'm working on my YouTube channel where you will get content related to open-source development, freelance work, Technical Writing, and opportunities through open-source. Here is the Link to My Channel - https://www.youtube.com/@GaneshsYTif you Love the content, Consider subscribing. Introduction ✨ A building developer portfolio from scratch is time-consuming but believe me, it is worthwhile in the previous article we talked about git showcase and now we are going to implement the same idea. What is GitHub Showcase In this article, we are going to build a smart developer portfolio in less than 5 clicks. Building a portfolio is time time-consuming process and if you are looking for a simple way to build a portfolio with less time you're in the right place. What You Need ✍ This is a very important section because here we need GitHub Account Git Basics Projects Repo's on Github That's it. Your portfolio is ready. If you don't know what is git & Github here you can check A Complete Guide on Git & Github There are three simple steps you have already have a GitHub account Sign in with Github Authorize Git Showcase Portfolio is ready It's simple to build a portfolio with git showcase and host to GitHub pages or Netlify you don't need to put extra effort everything is prebuilt. No Code Portfolio - GitHub 👩🏻‍💻 Here are the steps you should follow to build a no-code portfolio with Git Showcase - Visit to GitShowcase Sign in with a GitHub Account Authorize Github Account Done. Live Demo Here is the Live Demo of your portfolio which you build with node code - Git Showcase Live Demo Link to Git Showcase Portfolio Conclusion That's it and your portfolio is ready to launch also Git showcase provides free domain & hosting as showcase/username you can also use your custom domain. 📌Actively Looking for opportunities in Developer Relationships share some if you have. 👇🏻 📌Reach out to me via Twitter📌Check out my YouTube channel here 👇 https://www.youtube.com/watch?v=52biDlBTrhQ&t=407s
A Complete Case Study on Replit: Exploring Features, Use Cases, and Alternative
Ganesh PatilIntroduction to Replit Replit is an online, collaborative, and user-friendly IDE platform that contains everything we need as a developer from the online supportive compiler, technical news, and developers community. Replit was officially launched in 2016 by Amjad Masad & Faris Masad. n The idea behind launching replit is to provide a fully browser-based collaborative environment with the full power of IDE. Replit based on the top three fundamentals Collaborative Replit provides a collaborative space where authorize users can join the workspace with a single link. It's simplifying the idea of a version control system where developers can collaborate and work together with amazing features like code highlighting. Online You can access the replit workspace from anywhere on any device also you can code on mobile devices as well. Replit is a similar concept to google workspace(docs) where you can share your work and collaborate with others. IDE Installing and setting up a new development environment is not easy on your local machine but replit solves this problem with the help of the global package manager. You can simply code and build applications without worrying about development environments. These are three strong fundamentals that replit based on. Product Features Free Hosting in 5 Sec - After building the final product the next step is hosting and it's one more step to deploy your application to production but replit hosts your application in less than seconds with username.replit.co domain. Simple UI Design - A completely new beginner can code on replit due to the simple UI design structure of the platform. The complete replit platform is simple to understand anyone can start building & learning code with replit. Real-Time Collaboration On replit, you can share, connect and collaborate with other developers with the amazing feature available on replit also you can communicate with the replit chat feature. Replit provides real-time collaboration for users. Replit Marketing Strategy Replit collaborated with the top online educational brands for marketing and brand awareness. Replit focuses on developers-based communities for collaboration because it's easy to promote products to the target audience. Content Marketing Replit blog provides trending news and valuable resource for developers and the article, and blog posts written by experienced developers help beginners to get actual insights into the industry and trending technical news. Community Support Replit collaborated with education brands, institutes, and coding boot camps to offer their product and that helps to increase brand awareness as well as to get new users on the platform. Social Media content Replit has an amazing support audience on its social media channels, especially on Twitter & Reddit where most active developers’ communities are available. It automatically helps to get the attention of the developers and promote a product. Referral Marketing Replit has a referral marketing program to get a hacker plan for free and it works win-win for both users loyal user promote platform and new user get benefits of the platform and it automatically increases the users count on replit. Overall, Replit marketing strategy focuses on building a community for developers and providing valuable resources through content that helps replit build strong brand value among developers. Right now replit has 20M+ developers on their platform. Replit Business Model Replit has two different plans for users free and paid but the revenue of the replit business model comes from paid partnerships and offers paid solutions for small enterprises. All possible revenue streams of the replit business are listed below Freemium - Replit provides limited free features to the users and then users have to pay for the additional features such as extra storage space, fast execution speed, and team collaboration. The replit hacker plan charges the user 7$ per month and the pro plan 20$ with additional features like ghostwriter(AI Tool). Partnerships Replit partners with educational institutes and companies to provide required solutions to them and to target a specific audience that helps replit generate more revenue. Enterprise Solutions Replit also provides solutions to enterprises based on their requirements with additional security features and team collaboration. It includes a single sign-on feature and a dedicated support team. Marketplace On replit, developers can build and share their creations on the platform and replit take a commission from each sale. This helps the platform to build another revenue stream. Product Market Size The specific market size of IDE is $3 billion in 2018 to $23+ billion by 2029 but replit is not only IDE that's one part of the replit platform. Replit earning money through a subscription model. In 2022 replit earns most of its revenue from individual users that purchase the hacker plan. The other code editors and online IDE platforms are indirect competitors to the replit but it already captured a large space of the market and replit wouldn't consider them as a replacement for a traditional IDE. Codedamn vs Replit Overall, Replit is an online IDE that helps users to code without worrying about development environments with the freemium business model but codedamn is a providing a complete solution to learning “how to code” with structured roadmaps. Codedamn playground is a major component of the platform but codedamn is focusing more on complete development by providing courses, resources, playgrounds, and community support whereas replit is focusing more on providing an online development environment to the user. The target audience is the same for both communities. Where We Can Improve There is space where we can improve at codedamn. Chat Feature Replit has a chat feature on replit to communicate with others and that's amazing for developers to get actual feedback on the product. UI Can Be Better Replit UI is simple and beginners can easily start with replit and similar for the codedamn but we can improve the UI of the codedamn user dashboard. Social War Replit marketing strategy focuses on the active developer's platforms such as Twitter & Reddit. | Platforms | Codedamn | Replit | | --- | --- | --- | | Twitter | 16k | 85k | | Youtube | 354K | 14.9K | | Instagram | 21.7K | 3K | Conclusion The overall conclusion from this case study is Replit is focusing on building a developer’s community through content, marketing, and partnership and that helps to scale their platform with a number of active users. Twitter is developer oriented platform and replit has a strong presence on Twitter that help replit to get real-time feedback from the target audience for platform improvements as well it helps to platform growth. Codedamn is a space where people can learn code, collaborate with others, and get opportunities through the platform, It's not only limited to the playgrounds where codedamn stands out as compared to replit. Connect with me on Twitter ...!! https://youtu.be/gxsGZ22oKvI
Experience as a Community DevRel: Strategies for Building Engagement and Fostering Relationships
Ganesh PatilHey, Amazing Community Peeps Recently I worked as a community manager intern at aviyel. Aviyel is a Bangalore-based startup with the idea of building & scaling FOSS (Free and Open Source Software) & COSS(Commercial and Open Source Software) by providing community insights and tools. In this article will be sharing my learnings and experience I got through this internship as a community manager. Introduction I joined the aviyel community as a contributor last year. I contributed to the aviyel community by writing tutorials, guides, and articles for open-source projects available at aviyel. The idea behind aviyel is that, building & scaling communities by getting real community insights and tools. Most of the open-source communities failed to scale because lack of support and not understanding of community needs and where aviyel came into the picture. Aviyel provides you with everything you need to build and scale communities. You can check aviyel onboarded projects from here! How did It happen? I contributed to the aviyel for more than 6 months. Then I got an opportunity to work with the internal team as a community manager where most of my work surrounded creating content and managing the community. And it all started with writing blogs on the dev community platform. One day got a mail from the aviyel community to work with them as a creator then started contributing blogs and project tutorials on their platform and worked with open-source project maintainers & founders. Responsibilities of Community Manager The Community Manager role includes a mixture of things content creation, building, and managing the community, hosting community events and etc. and also it depends on what kind of community you're building. I personally worked on content creation + discord community management + marketing a mixture of two or more things. On the marketing side, I try to reach out to project founders or maintainers and explaining them about aviyel and how we can help you out to build and scale their community and get them on board. On another side, I have to connect with the content team to create and modify available content to push on the platform. It includes blogs, templates, guides, and newsletter stuff as well as replying to discord user queries. Also, it depends on the community you're part of and the vision of the company. I also know community managers who are completely community-oriented and focus on product, community, and open-source contributions. What I learned As a CM Deadlines - Believe me if you're someone who is willing to work at startups then you have to consider deadlines highly important. At startup, no one is going to guide you on what to do next you have to take complete ownership of the work. How we can improve, How to scale, and how to figure out then you can successfully survive at a startup. Track Everything - Everything means everything, Excel helps a lot and I suggest improving your Excel skills as more as you can. In the startup industry, everyone trusts results & proof and definitely it comes from data. While working try to track everything in Excel sheets to show the progress of work. Complete Ownership - You're responsible for your work and you have to take complete ownership of the assigned task. If you don't have an idea how to done? then ask but don't make it complex for yourself. Be a Fantastic Team Player - Everyone loves a person who knows how to work with others. Be polite and helpful to others and that's how teamwork. This skill helps you in the long-term game because it's easy to scale with support and it's not a one-man show. Keep learning New Things - The more you know the more you grow and it's true at a startup because if know something or you have skills apart from your specific domain believe me it is worth it. Closing Remarks 🎉 After sustainable growth, Aviyel is looking for more experienced people to work on the company's vision and then aviyel introduced a subscription model for communities. We launched our GitHub readme generator & Community Dashboard on a product hunt. I did three months of work at aviyel and learned so many things and the most important thing is growthful connections. Learned a lot from Jose (Founder of aviyel), Pramit Maratha, Issac Jacob, and Ram Kumar. What Next? After working at aviyel, I realized Content + Development is something that excites me more as compared to any task, and then started exploring javascript framework, python, and fav one java in a more serious way. Then got to know about the Developer Advocate role which is not completely similar but CM is also the domain of the Dev Advocate role. Right now I'm building projects and looking for junior Dev Advocate roles to join early-stage startups. If you're looking to connect with me then here is my Twitter profile. Conclusion In the end, I would like to encourage you all to work in startups once in a career because here you will learn the product, consumer, marketing, development, etc. things in a short span of time with amazing experience folks. Note: Before picking to work at any startup do your own research as well as ask past their employees about the experience and working culture. This is what exactly I want to share with you all. Share your thoughts in the comment section would love to hear from you all. That's it! ♥