Opensource.com https://opensource.com/ en New developments at Opensource.com https://opensource.com/article/23/6/new-developments-opensourcecom <span class="field field--name-title field--type-string field--label-hidden">New developments at Opensource.com</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/users/admin" class="username">admin</a></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2023-06-06T13:30:00-04:00" title="Tuesday, June 6, 2023 - 13:30" class="datetime">Tue, 06/06/2023 - 13:30</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>You may have noticed that it's been quiet here on Opensource.com lately. That's because there's a new project in the works, and while there aren't many specific details to announce yet, there's plenty to talk about. What better way to start than with the entire internet?</p> <h2>The internet, and top-level domains</h2> <p>You may know that the internet is a network. A network, by definition, is a group of connections. The term "internet" is in fact a portmanteau of "interconnected" and "network". The internet is a network of interconnected networks, and originally it consisted of two: The military network and the academic network. Once the internet got popular outside those two groups, it became apparent that different designations were needed to differentiate, say, a commercial entity from a charitable organization from a university or a governmental department.</p> <p>These designations are called top-level domains (TLD). There are many available today, but for a long time there were only a handful. The original TLDs remain popular, and you probably know that when you go to, for instance, a .<code>com</code> address, you're visiting a commercial site, but when you visit a <code>.org</code> address you're going to a non-profit website.</p> <h2>Open source is a network</h2> <p>Open source can be many things. It can be commercial, it can be non-profit, it can be academic, it can be cultural. No matter what form it takes, though, it's always a network. Sometimes (but not always) it's a network of computers, but most importantly it's a network of people. Whether people are gathering at a conference or a pub or in an <a href="https://opensource.com/education/16/3/mattermost-open-source-chat" target="_blank">online chat room</a>, open source is a community of people.</p> <p>The website Opensource.com has been supported by a commercial entity for 12 years. But the people (that's you and me) that make up the Opensource.com community aren't commercial entities, we're people.</p> <p>In one month, Opensource.com is going to resolve that bug. Stay tuned!</p> </div> <div class="clearfix text-formatted field field--name-field-article-subhead field--type-text-long field--label-hidden field__item"><p>The community is hard at work on something new.</p> </div> <div class="field field--name-field-lead-image field--type-entity-reference field--label-hidden field__item"><article class="media media--type-image media--view-mode-caption"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/2023-06/camylla-battani-ABVE1cyT7hk-unsplash.webp" width="960" height="640" alt="Hands in a circle" /> </div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>Image by <a href="https://unsplash.com/fr/@camylla93?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="ugc">Camylla Battani</a></p> </div> </article> </div> <div class="hidden field field--name-field-listicle-title field--type-string field--label-hidden field__item">What to read next</div> <div class="field field--name-field-default-license field--type-list-string field--label-hidden field__item"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> <img alt="Creative Commons License" src="/themes/osdc/assets/img/cc-by-sa-4.png" title="This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License." /></a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.</div> <section id='comments' class="field field--name-field-comments field--type-comment field--label-hidden comment-wrapper"> <div class="comments__count"> <h2>4 Comments</h2> <div class="login">These comments are closed.</div> </div> <article data-comment-user-id="14486" id="comment-220207" class="comment js-comment"> <mark class="hidden" data-comment-timestamp="1686313542"></mark> <footer class="comment__meta"> <article class="media media--type-image media--view-mode-byline"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/styles/medium/public/osdc_default_avatar_1.png?itok=G0WcUo3c" width="100" height="100" alt="Avatar" title="Avatar" class="image-style-medium" /> </div> </article> <div> <div class="comment__submitted"> <a href="/users/bbehrens">Bryan Behrenshausen</a> | June 9, 2023 <div class="rate-widget thumbsup"><form class="comment-content-220207-updown-rate-widget-0 vote-form" id="rate-widget-base-form" data-drupal-selector="comment-content-220207-updown-rate-widget-0" action="/feed" method="post" accept-charset="UTF-8"> <div class="rate-widget-thumbs-up"> <div class="thumbsup-rating-wrapper rate-disabled" can-edit="false"><div class="form-item js-form-item form-type-radio js-form-type-radio form-item-value js-form-item-value form-disabled"> <label class="form-item js-form-item form-type-radio js-form-type-radio form-item-value js-form-item-value form-disabled rating-label thumbsup-rating-label thumbsup-rating-label-up vote-pending rate-thumbs-up-btn-up"><input twig-suggestion="rating-input" class="rating-input thumbsup-rating-input form-radio" data-drupal-selector="edit-value-1" disabled="disabled" type="radio" id="edit-value-1" name="value" value="1" /> </label> </div> </div><input autocomplete="off" data-drupal-selector="form-ff0cpbolz91sy7sgcmvtj-nwqb-mxuetbbi48s86bos" type="hidden" name="form_build_id" value="form-FF0CpbolZ91sY7SgcMvtj-NWQb-mxueTbBI48s86BOs" /> <input data-drupal-selector="edit-comment-content-220207-updown-rate-widget-0" type="hidden" name="form_id" value="comment_content_220207_updown_rate_widget_0" /> <input class="thumbsup-rating-submit button button--primary js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit--2" name="op" value="Save" /> <div class="vote-result js-form-wrapper form-wrapper" data-drupal-selector="edit-result" id="edit-result"><div class="rate-widget-thumbs-up rate-score"> 1 reader likes this. </div> </div> <div class="rate-score"></div> </div> </form> </div> </div> <div class="content"> <div class="clearfix text-formatted field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>I, for one, continue to <a href="https://youtu.be/8lcUHQYhPTE" rel="ugc">welcome our non-commercial overlords</a>. All best to the team working on these new developments, and many thanks for your endless diligence and patience. We appreciate you.</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=220207&amp;1=full&amp;2=en&amp;3=" token="RslAIEq3kFuLA3zOl2ZQttABezbjaHsUxc0ow1iDdjo"></drupal-render-placeholder> </div> </div> </footer> </article> <article data-comment-user-id="15542" id="comment-220208" class="comment js-comment"> <mark class="hidden" data-comment-timestamp="1686330448"></mark> <footer class="comment__meta"> <article class="media media--type-image media--view-mode-byline"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/styles/medium/public/osdc_default_avatar_1.png?itok=G0WcUo3c" width="100" height="100" alt="Avatar" title="Avatar" class="image-style-medium" /> </div> </article> <div> <div class="comment__submitted"> <a href="/users/don-watkins">Don Watkins</a> | June 9, 2023 <div class="rate-widget thumbsup"><form class="comment-content-220208-updown-rate-widget-0 vote-form" id="rate-widget-base-form--2" data-drupal-selector="comment-content-220208-updown-rate-widget-0" action="/feed" method="post" accept-charset="UTF-8"> <div class="rate-widget-thumbs-up"> <div class="thumbsup-rating-wrapper rate-disabled" can-edit="false"><div class="form-item js-form-item form-type-radio js-form-type-radio form-item-value js-form-item-value form-disabled"> <label class="form-item js-form-item form-type-radio js-form-type-radio form-item-value js-form-item-value form-disabled rating-label thumbsup-rating-label thumbsup-rating-label-up vote-pending rate-thumbs-up-btn-up"><input twig-suggestion="rating-input" class="rating-input thumbsup-rating-input form-radio" data-drupal-selector="edit-value-1-2" disabled="disabled" type="radio" id="edit-value-1--2" name="value" value="1" /> </label> </div> </div><input autocomplete="off" data-drupal-selector="form-bcic8fdbixv2xpvaj8eju9e81ooonglwqk1yynppijw" type="hidden" name="form_build_id" value="form-BCic8fdBIXv2xpvaj8EjU9e81oOoNGlWqK1YYnppijw" /> <input data-drupal-selector="edit-comment-content-220208-updown-rate-widget-0" type="hidden" name="form_id" value="comment_content_220208_updown_rate_widget_0" /> <input class="thumbsup-rating-submit button button--primary js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit--4" name="op" value="Save" /> <div class="vote-result js-form-wrapper form-wrapper" data-drupal-selector="edit-result" id="edit-result--2"><div class="rate-widget-thumbs-up rate-score"> 1 reader likes this. </div> </div> <div class="rate-score"></div> </div> </form> </div> </div> <div class="content"> <div class="clearfix text-formatted field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>I agree with Bryan! Glad for the opportunity to grow this community and appreciative of your efforts. </p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=220208&amp;1=full&amp;2=en&amp;3=" token="E8gRdz1GaADkM9e6rHCayb-ENzda_dHRhEQ3RwPjoPA"></drupal-render-placeholder> </div> </div> </footer> </article> <article data-comment-user-id="12445" id="comment-220209" class="comment js-comment"> <mark class="hidden" data-comment-timestamp="1686544324"></mark> <footer class="comment__meta"> <article class="media media--type-image media--view-mode-byline"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/styles/medium/public/osdc_default_avatar_1.png?itok=G0WcUo3c" width="100" height="100" alt="Avatar" title="Avatar" class="image-style-medium" /> </div> </article> <div> <div class="comment__submitted"> <a href="/users/kattekrab">Donna Benjamin</a> | June 12, 2023 <div class="rate-widget thumbsup"><form class="comment-content-220209-updown-rate-widget-0 vote-form" id="rate-widget-base-form--3" data-drupal-selector="comment-content-220209-updown-rate-widget-0" action="/feed" method="post" accept-charset="UTF-8"> <div class="rate-widget-thumbs-up"> <div class="thumbsup-rating-wrapper rate-disabled" can-edit="false"><div class="form-item js-form-item form-type-radio js-form-type-radio form-item-value js-form-item-value form-disabled"> <label class="form-item js-form-item form-type-radio js-form-type-radio form-item-value js-form-item-value form-disabled rating-label thumbsup-rating-label thumbsup-rating-label-up vote-pending rate-thumbs-up-btn-up"><input twig-suggestion="rating-input" class="rating-input thumbsup-rating-input form-radio" data-drupal-selector="edit-value-1-3" disabled="disabled" type="radio" id="edit-value-1--3" name="value" value="1" /> </label> </div> </div><input autocomplete="off" data-drupal-selector="form-nd1lsw-jrpenyi5ufblxjoukolz4-t8fsumr7tbnzem" type="hidden" name="form_build_id" value="form-nD1LsW-jrPEnyI5ufBlXJoukOLZ4_t8fsUMR7tbnzeM" /> <input data-drupal-selector="edit-comment-content-220209-updown-rate-widget-0" type="hidden" name="form_id" value="comment_content_220209_updown_rate_widget_0" /> <input class="thumbsup-rating-submit button button--primary js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit--6" name="op" value="Save" /> <div class="vote-result js-form-wrapper form-wrapper" data-drupal-selector="edit-result" id="edit-result--3"><div class="rate-widget-thumbs-up rate-score"> 1 reader likes this. </div> </div> <div class="rate-score"></div> </div> </form> </div> </div> <div class="content"> <div class="clearfix text-formatted field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>Colour me intrigued! Where might the curious learn more, or perhaps even contribute?</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=220209&amp;1=full&amp;2=en&amp;3=" token="-ijuF6Q8fHgkeiY0nO5dpHSTJ_dRr3G3XOInx9gTBVk"></drupal-render-placeholder> </div> </div> </footer> </article> <article data-comment-user-id="30666" id="comment-220210" class="comment js-comment"> <mark class="hidden" data-comment-timestamp="1686575768"></mark> <footer class="comment__meta"> <article class="media media--type-image media--view-mode-byline"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/styles/medium/public/osdc_default_avatar_1.png?itok=G0WcUo3c" width="100" height="100" alt="Avatar" title="Avatar" class="image-style-medium" /> </div> </article> <div> <div class="comment__submitted"> <a href="/users/greg-p">Greg Pittman</a> | June 12, 2023 <div class="rate-widget thumbsup"><form class="comment-content-220210-updown-rate-widget-0 vote-form" id="rate-widget-base-form--4" data-drupal-selector="comment-content-220210-updown-rate-widget-0" action="/feed" method="post" accept-charset="UTF-8"> <div class="rate-widget-thumbs-up"> <div class="thumbsup-rating-wrapper rate-disabled" can-edit="false"><div class="form-item js-form-item form-type-radio js-form-type-radio form-item-value js-form-item-value form-disabled"> <label class="form-item js-form-item form-type-radio js-form-type-radio form-item-value js-form-item-value form-disabled rating-label thumbsup-rating-label thumbsup-rating-label-up vote-pending rate-thumbs-up-btn-up"><input twig-suggestion="rating-input" class="rating-input thumbsup-rating-input form-radio" data-drupal-selector="edit-value-1-4" disabled="disabled" type="radio" id="edit-value-1--4" name="value" value="1" /> </label> </div> </div><input autocomplete="off" data-drupal-selector="form-uoef5ieksstx-3q9cd-z3e1aaoimzi72acslppqltj0" type="hidden" name="form_build_id" value="form-UOEF5IEkSsTX_3q9CD_z3E1aAoimZI72ACslpPqLtj0" /> <input data-drupal-selector="edit-comment-content-220210-updown-rate-widget-0" type="hidden" name="form_id" value="comment_content_220210_updown_rate_widget_0" /> <input class="thumbsup-rating-submit button button--primary js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit--8" name="op" value="Save" /> <div class="vote-result js-form-wrapper form-wrapper" data-drupal-selector="edit-result" id="edit-result--4"><div class="rate-widget-thumbs-up rate-score"> No readers like this yet. </div> </div> <div class="rate-score"></div> </div> </form> </div> </div> <div class="content"> <div class="clearfix text-formatted field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>It's a nice thought that maybe opensource.com might be able to paraphrase Mark Twain and say, "The reports of my death are greatly exaggerated."</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=220210&amp;1=full&amp;2=en&amp;3=" token="9FKjAyJX8lT0sZwHd55OCsKgNR_ZSgLhBUKhD-p65sA"></drupal-render-placeholder> </div> </div> </footer> </article> </section> Tue, 06 Jun 2023 17:30:00 +0000 admin 70621 at https://opensource.com https://opensource.com/article/23/6/new-developments-opensourcecom#comments Tips for running virtual, in-person, and hybrid events https://opensource.com/article/23/5/virtual-in-person-events <span class="field field--name-title field--type-string field--label-hidden">Tips for running virtual, in-person, and hybrid events</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/users/rpaik" class="username">rpaik</a></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2023-05-03T03:00:00-04:00" title="Wednesday, May 3, 2023 - 03:00" class="datetime">Wed, 05/03/2023 - 03:00</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Over the past few years, virtual events have thrived. In-person events are back now, but it's important to keep in mind that virtual events didn't just come out of nowhere. Many of us were actually doing a lot of different online events even before they became popular. Many communities held hackathons, bug and issue triaging, webinars, and so on, as virtual events. They brought community members together for collaboration and education. Virtual events have improved since then, largely out of necessity, and I think we've all learned a lot. In this article, I consider how virtual and physical events can co-exist to render an improved event experience for everyone.</p> <h2>Costs and crowds</h2> <p>I don't think anyone wants to go back to the days when all events were happening on screens. But virtual events do have important advantages compared to in-person events. To begin with, it is relatively easy to start a virtual event as you often don't need much beyond meeting and streaming platforms. It can be as basic as live streaming from a <a href="https://opensource.com/article/20/5/open-source-video-conferencing">video chat platform</a>. This is especially useful for small communities that don't have a large events budget. In fact, a virtual event platform provides an opportunity to build an audience before you start making significant investments in in-person events.</p> <p>The lower cost and logistical hurdles of virtual meetings don't just apply to the event organizer. It matters to attendees and community members too. A typical meetup is likely to last for 60 to 90 minutes. Is everyone always happy to commute 30 minutes each way to get to the meeting venue? A meetup in a virtual format can lower the participation barrier for attendees. I think this is one of the reasons that many meetups are continuing in virtual formats today.</p> <p>The cost of doing virtual events is much lower, so there's low-risk of experimenting with different content, format, target audiences, and so on. Even if a new event isn't a huge success, you won't have to invest a large budget on the venue, equipment, people, travel, and so on. And you're able to get some valuable learning from the event no matter what.</p> <h2>Practical events</h2> <p>In addition, there are some activities that are just well-suited for virtual events. Things like documentation and bug triaging are crucial in open source communities. Despite this most people see them more like chores that they'd rather avoid. Why not have a short one to two day window where community members come together online so they can work on these chores together while supporting each other?</p> <h2>Hybrid events</h2> <p>Many events are going hybrid now, with both in-person and virtual components. By hybrid, I don't mean just broadcasting in-person sessions from conference facilities. Many have separate tracks for in-person and virtual participants. FOSDEM 2023 is a great example of a hybrid event, with <a href="https://fosdem.org/2023/schedule/rooms/" rel="noopener" target="_blank">separate online rooms</a>.</p> <p>Some utilize virtual tracks for "Day 0" events (orientation, project team meetings, meetups, and so on). This way, people who aren't able to travel to the in-person conference can still participate in the earliest events. By having a separate virtual track, you can potentially reduce the total length of the in-person conference. This means people don't have to be away from home as long as a 100% in-person event.</p> <h2>The dos and don'ts</h2> <p>Here are some tips based on my experience of attending and organizing virtual events.</p> <ul><li> <p><strong>DON'T</strong> have the same structure as in-person events. When you have an event online, you wouldn't want to ask the audience to sit through a full day of presentations. It's difficult for most people to stare at their screens for a long period of time. If you have more than four hours of content, consider spreading the event over a few days so that attendees only need to sit through a maximum of a couple of hours of presentations each day. You also don't always need to add breaks between sessions in virtual events because people aren't moving to different rooms. As a matter of fact, by hot switching to the next session, you're less likely to lose attendees between presentations.</p> </li> <li> <p><strong>DON'T</strong> put a wall around the content after the event. I recently registered and attended an event and was told that slides and recordings would be available a few weeks after the event. When I returned to the event page a few weeks later, it asked me to register with my email address to get access to the content! I understand people's desire to collect leads. But if people had to register for the event already, or the event was live-streamed, it's not appropriate to ask them to share their contact information. Instead, make the content accessible to anyone.</p> </li> <li> <p><strong>DON'T</strong> force synchronous participation from attendees. One of the key benefits of virtual events is that it's easier for everyone to attend or participate. If a person cannot watch a presentation live, provide ways for them to interact with presenters and other attendees asynchronously.</p> </li> <li> <p><strong>DO</strong> make content available prior to events. Online events make it easier for community members to participate asynchronously. Things like publishing slides or Q&amp;A pages ahead of time allow attendees to review content and post questions that presenters can address during and after the session. Also, if you're doing a hands-on workshop, publishing a prep guide before the event allows attendees to set up their environment so that it's easier to follow along during the presentation and play around in their sandbox.</p> </li> <li> <p><strong>DO</strong> have presenters available for asynchronous Q&amp;A sessions. Some of the virtual events I enjoyed had dedicated Q&amp;A channels (Mattermost or Discourse are great open source options) where you could interact with presenters well after their session ended. At an in-person conference, you're often limited to a 10 or 15 minute break after a session to talk to the presenter. Virtual events allow you to have a Q&amp;A channel available for a few days after the event.  This let's both synchronous and asynchronous attendees communicate with presenters.</p> </li> </ul><h2>Best of both worlds</h2> <p>I'm definitely glad that in-person events are back and I'm able to see my open source friends again in real life. However, I don't think we need to completely put virtual events behind us. In particular, hybrid events with "virtual tracks" can make events accessible to more community members and help you reach a wider audience. I think society has learned some important lessons, so let's put them to good use.</p> </div> <div class="clearfix text-formatted field field--name-field-article-subhead field--type-text-long field--label-hidden field__item"><p>Create the perfect blend of virtual and in-person events.</p> </div> <div class="field field--name-field-lead-image field--type-entity-reference field--label-hidden field__item"><article class="media media--type-image media--view-mode-caption"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/lead-images/people_remote_teams_world.png" width="520" height="292" alt="Remote people connected on clouds" title="Remote people connected on clouds" /> </div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>Opensource.com</p> </div> </article> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/tags/conferences-and-events" hreflang="en">Conferences and events</a></div> </div> <div class="hidden field field--name-field-listicle-title field--type-string field--label-hidden field__item">What to read next</div> <div class="field field--name-field-default-license field--type-list-string field--label-hidden field__item"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> <img alt="Creative Commons License" src="/themes/osdc/assets/img/cc-by-sa-4.png" title="This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License." /></a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.</div> <section id='comments' class="field field--name-field-comments field--type-comment field--label-hidden comment-wrapper"> <div class="comments__count"> <h2>Comments are closed.</h2> <div class="login">These comments are closed.</div> </div> </section> Wed, 03 May 2023 07:00:00 +0000 rpaik 70594 at https://opensource.com https://opensource.com/article/23/5/virtual-in-person-events#comments Generate web pages from Markdown with Docsify-This https://opensource.com/article/23/5/docsify-markdown-html <span class="field field--name-title field--type-string field--label-hidden">Generate web pages from Markdown with Docsify-This</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/users/paulhibbitts" class="username">paulhibbitts</a></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2023-05-02T03:00:00-04:00" title="Tuesday, May 2, 2023 - 03:00" class="datetime">Tue, 05/02/2023 - 03:00</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Are you interested in leveraging Markdown for online content without any website setup or build process? How about seamlessly embedding constraint-free Markdown or HTML into multiple platforms (such as a content management system or learning management system)? The open source project <a href="https://docsify-this.net" target="_blank">Docsify-This</a>, built with <a href="https://docsify.js.org" target="_blank">Docsify.js</a>, provides an easy way to publish, share, and reuse Markdown content.</p> <p><strong>[ Get the <a href="https://opensource.com/downloads/cheat-sheet-markdown" target="_blank">Markdown cheat sheet</a> ]</strong></p> <h2 id="docsify-this">What is Docsify-This?</h2> <p>With Docsify-This, you can instantly turn any publicly available Markdown file into a responsive standalone web page. You can also link multiple Markdown files to create a simple website. Designers can alter the visual appearance of displayed pages with the point-and-click Web Page Builder interface or URL parameters. You can also use a set of provided Markdown CSS classes when creating your own Markdown content. In addition, if you use Codeberg or GitHub to store your Markdown files, an <strong>Edit this Page</strong> link can be automatically provided for each page to support collaborative authoring.</p> <p>It's open source, so you can host a Docsify-This instance using your own custom domain without the risk of platform lock-in.</p> <h2 id="web-page-builder">Use the Docsify-This Web Page Builder</h2> <p>To use the Web Page Builder, open a browser and navigate to the <a href="https://docsify-this.net" target="_blank">Docsify-This website</a> or your local instance. In the <strong>Web Page Builder</strong> section, enter the URL of a Markdown file in a public repo of Codeberg or GitHub (other Git hosts can also be used via Docsify-This URL parameters but not in the Web Page Builder), and then click the <strong>Publish as Standalone Web Page</strong> button.</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/docsify-this-web-page-builder.webp" width="2028" height="1441" alt="The Docsify-This web page builder interface" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Paul Hibbitts, CC BY-A 4.0)</p> </div> </article><p>The Markdown file is rendered as a standalone web page with a URL you can copy and share. Here's an example URL:</p> <pre> <code class="language-html">https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&amp;homepage=home.md</code></pre><p>Docsify-This rendered web pages are perfect for embedding, with the ability to visually style Docsify-This pages to the destination platform.</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/docsify-this-rendered-markdown-file.webp" width="2083" height="1360" alt="Docsify-This rendered Markdown file" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Paul Hibbitts, CC BY-A 4.0)</p> </div> </article><h2 id="render">Render other files in the same repository</h2> <p>You can render other Markdown files in the same repository by directly editing the Docsify-This URL parameter <strong>homepage</strong>. For example:</p> <pre> <code class="language-html">https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&amp;homepage=anotherfile.md</code></pre><h2 id="appearance">Modify the web page's appearance</h2> <p>You can change the appearance of any Markdown file displayed in Docsify-This by using <a href="https://docsify-this.net/#/?id=page-appearance-url-parameters" target="_blank">URL parameters</a>. For example, <code>font-family</code>, <code>font-size</code>, <code>link-color</code>, and <code>line-height</code> are all common CSS attributes and are valid parameters for Docsify-This:</p> <pre> <code>https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&amp;homepage=home.md&amp;font-family=Open%20Sans,sans-serif</code></pre><p>You can also alter the visual appearance using a set of special <a href="https://docsify-this.net/#/?id=supported-markdown-css-classes" target="_blank">Markdown CSS classes</a>. For example, you can add the <code>button</code> class to a link:</p> <pre> <code class="language-text">[Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button') </code></pre><p>This produces a button image instead of just a text link:</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/button.webp" width="612" height="84" alt="A button rendered by Docsify-This" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Paul Hibbitts, CC BY-A 4.0)</p> </div> </article><p>In addition to the Markdown CSS classes supported by Docsify-This, you can define your own custom classes within your displayed Markdown files. For example:</p> <pre> <code class="language-text">&lt;style&gt; .markdown-section .mybutton, .markdown-section .mybutton:hover { cursor: pointer; color: #CC0000; height: auto; display: inline-block; border: 2px solid #CC0000; border-radius: 4rem; margin: 2px 0px 2px 0px; padding: 8px 18px 8px 18px; line-height: 1.2rem; background-color: white; font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; font-weight: bold; text-decoration: none; } &lt;/style&gt; [Custom CSS Class Button](# ':class=mybutton')</code></pre><p>Produces this:</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/custom-css-button.webp" width="528" height="86" alt="A custom button image rendered with Docsify-This" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Paul Hibbitts, CC BY-A 4.0)</p> </div> </article><h2 id="html-snippets">Include HTML snippets</h2> <p>As supported by standard Markdown, you can include HTML snippets. This allows you to add layout elements to your HTML render. For example:</p> <pre> <code class="language-html">&lt;div class="row"&gt; &lt;div class="column"&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/div&gt; &lt;div class="column"&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/div&gt; &lt;/div&gt;</code></pre><h2 id="iframe">Embed Docsify-This as an iFrame</h2> <p>You can embed Docsify-This web pages using an iFrame in almost any platform. You can also use URL parameters to ensure your embedded content matches your destination platform:</p> <pre> <code class="language-html">&lt;p&gt;&lt;iframe style="overflow: hidden; border: 0px #ffffff none; margin-top: -26px; background: #ffffff;" src="https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&amp;homepage=home.md&amp;font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&amp;font-size=1&amp;hide-credits=true" width="800px" height="950px" allowfullscreen="allowfullscreen"&gt;&lt;/iframe&gt;&lt;/p&gt;</code></pre><article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/docsify-this-iframe.webp" width="2872" height="1484" alt="A Docsify-This page embedded in an LMS" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Paul Hibbitts, CC BY-A 4.0)</p> </div> </article><h2 id="external-url">Embed Docsify-This with an external URL</h2> <p>In certain learning management systems (LMS), including the open source <a href="https://opensource.com/article/21/3/moodle-plugins" target="_blank">Moodle</a> and even the proprietary <a href="https://github.com/instructure/canvas-lms" target="_blank">Canvas</a>, you can link external web pages to a course navigation menu and sometimes more. For example, you can use the Redirect Tool in Canvas to display Docsify-This web pages.</p> <pre> <code class="language-html">url=https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&amp;homepage=resources.md&amp;edit-link=https://github.com/paulhibbitts/cmpt-363-222-pages/blob/main/resources.md&amp;font-family=Lato%20Extended,Lato,Helvetica%20Neue, Helvetica,Arial,sans-serif&amp;font-size=1&amp;hide-credits=true</code></pre><p></p><div class="embedded-resource-list callout-float-right"> <a href="#bottom-list" class="visually-hidden focusable skip-link">Skip to bottom of list</a> <div data-analytics-region="sidebar"> <div class="field field--name-title field--type-string field--label-hidden field__item">Our favorite resources about open source</div> <div class="field field--name-links field--type-link field--label-hidden field__items"> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheet-git?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Git cheat sheet">Git cheat sheet</a></div> <div class="field__item"><a href="https://developers.redhat.com/cheat-sheets/advanced-linux-commands/?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Advanced Linux commands cheat sheet">Advanced Linux commands cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/tags/alternatives?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Open source alternatives">Open source alternatives</a></div> <div class="field__item"><a href="https://www.redhat.com/en/services/training/rh024-red-hat-linux-technical-overview?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Free online course: RHEL technical overview">Free online course: RHEL technical overview</a></div> <div class="field__item"><a href="https://console.redhat.com?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Register for your free Red Hat account">Register for your free Red Hat account</a></div> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheets?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Check out more cheat sheets">Check out more cheat sheets</a></div> </div> </div> </div> <a id="bottom-list" tabindex="-1"></a> <h2 id="docsify-git">Integrate Docsify-This and Git</h2> <p>To fully leverage the benefits of version control and potentially collaboration using an optional <strong>Edit this Page</strong> link, store your Docsify-This Markdown pages in a Git repository on either Codeberg or GitHub. Several open source tools provide a graphical interface for Git, including <a href="https://github.com/desktop/desktop" target="_blank">GitHub Desktop</a> (recently released as open source), <a href="https://opensource.com/article/20/3/git-cola" target="_blank">Git-Cola</a>, and <a href="https://opensource.com/article/19/4/file-sharing-git" target="_blank">SparkleShare</a>. The text editors VSCode and Pulsar Edit (formerly <a href="https://opensource.com/article/20/12/atom" target="_blank">Atom.io</a>) both feature Git integration, too.</p> <p><strong>[ Get the <a href="https://opensource.com/downloads/git-tricks-tips" target="_blank">Git tips and tricks</a> eBook ]</strong></p> <h2 id="conclusion">Markdown publishing made easy</h2> <p>The benefits of Markdown-based publishing are available to everyone, thanks to Docsify. And thanks to Docsify-This, it's easier than ever. Try it out at the <a href="https://docsify-this.net" target="_blank">Docsify-This website</a>.</p> </div> <div class="clearfix text-formatted field field--name-field-article-subhead field--type-text-long field--label-hidden field__item"><p>This open source tool makes it easier than ever to convert Markdown to web pages.</p> </div> <div class="field field--name-field-lead-image field--type-entity-reference field--label-hidden field__item"><article class="media media--type-image media--view-mode-caption"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/lead-images/browser_web_internet_website.png" width="1040" height="584" alt="Digital creative of a browser on the internet" title="Digital creative of a browser on the internet" /> </div> </article> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/tags/web-development" hreflang="en">Web development</a></div> </div> <div class="field field--name-field-listicle-title field--type-string field--label-hidden field__item">What to read next</div> <div class="field field--name-field-listicles field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/article/23/4/open-source-design-system-patternfly" hreflang="en">5 best practices for PatternFly, an open source design system</a></div> <div class="field__item"><a href="/article/23/4/my-website-compromised" hreflang="en">How I learned the hard way to keep my website updated</a></div> </div> <div class="field field--name-field-default-license field--type-list-string field--label-hidden field__item"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> <img alt="Creative Commons License" src="/themes/osdc/assets/img/cc-by-sa-4.png" title="This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License." /></a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.</div> <section id='comments' class="field field--name-field-comments field--type-comment field--label-hidden comment-wrapper"> <div class="comments__count"> <h2>Comments are closed.</h2> <div class="login">These comments are closed.</div> </div> </section> Tue, 02 May 2023 07:00:00 +0000 paulhibbitts 70580 at https://opensource.com https://opensource.com/article/23/5/docsify-markdown-html#comments How I used guilt as a motivator for good https://opensource.com/article/23/4/guilt-motivation <span class="field field--name-title field--type-string field--label-hidden">How I used guilt as a motivator for good</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/users/its-surya" class="username">its-surya</a></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2023-04-28T03:00:00-04:00" title="Friday, April 28, 2023 - 03:00" class="datetime">Fri, 04/28/2023 - 03:00</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Recently, I was asked by a friend and colleague if I were interested in speaking together at a conference. I was pleasantly surprised because I hadn't contributed much to the project they were presenting, but I expressed interest. We met to discuss the presentation, and that's when I learned the real reason I was asked to participate: The conference's <a href="https://opensource.com/tags/diversity-and-inclusion" target="_blank">diversity, equity, and inclusion (DEI)</a> initiatives required there to be at least one speaker that does not identify as a man. I was offended; it felt like I was approached only because of my gender, not based on merit.</p> <p>My friend assured me that wasn't the only reason I'd been asked. They needed new contributors to the project because there was a lot of work to be done, and they were hoping I could help fill that gap.</p> <p><strong>[ Want to create your own event? Read the <a href="https://opensource.com/downloads/hackathon-guide?intcmp=7013a000002qLH8AAM" target="_blank">10-step guide for a successful hackathon</a> ]</strong></p> <p>I gave it some thought and tried to understand why the DEI initiatives were in place.  I also thought about the other side of the coin, where the people who wanted to present couldn't, unless they found someone from a minority group to present alongside them.</p> <p>As I thought about the bigger picture and the benefits this opportunity would bring to me, I decided to forego my ego being hurt. Once I let go of feeling offended, I realized that I was also feeling very uncomfortable presenting something that I hadn't contributed directly to. My ethics didn't agree with that. How could I possibly step onto a stage and act as the face of something I hadn't worked on?</p> <h2 id="contributing">Resolving to help more</h2> <p>I did some research on the project. The technology was not totally alien to me, and I had a good grasp of the fundamentals it was trying to achieve. In fact, its overall goal made me feel excited to contribute. If done well, it would be super useful to users.</p> <p>I made a resolution that I would go ahead with this speaking opportunity only if I got the opportunity to give back to the community tenfold and become a key contributor. My friend was more than willing to help me on that journey.</p> <p>With that resolve, we submitted our talk. My co-presenters were supportive and made me feel welcome. They said that as long as I was interested and had a passion for the project, nothing else mattered.</p> <p><strong>[ Also read <a href="https://opensource.com/article/23/3/open-source-after-grief" target="_blank">How I returned to open source after facing grief</a> ]</strong></p> <p>Participating in the conference was a huge opportunity, and it had such a <a href="https://opensource.com/article/23/4/tips-tech-conference" target="_blank">positive impact</a> on me. I met a lot of experienced people across the open source community and I felt inspired! I learned a <em>lot</em> of new things from the people and the various panels, sessions, and discussions at the conference. Our presentation went well, and I consider giving a talk at such a big conference quite an achievement.</p> <p>However, once the conference was over the <em>guilt</em> started kicking in.</p> <p></p><div class="embedded-resource-list callout-float-right"> <a href="#bottom-list" class="visually-hidden focusable skip-link">Skip to bottom of list</a> <div data-analytics-region="sidebar"> <div class="field field--name-title field--type-string field--label-hidden field__item">More open source career advice</div> <div class="field field--name-links field--type-link field--label-hidden field__items"> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheets?intcmp=7013a000002DRawAAG" data-analytics-category="resource list" data-analytics-text="Open source cheat sheets">Open source cheat sheets</a></div> <div class="field__item"><a href="https://developers.redhat.com/learn/linux-starter-kit-for-developers/?intcmp=7013a000002DRawAAG" data-analytics-category="resource list" data-analytics-text="Linux starter kit for developers">Linux starter kit for developers</a></div> <div class="field__item"><a href="https://www.redhat.com/sysadmin/questions-for-employer?intcmp=7013a000002DRawAAG" data-analytics-category="resource list" data-analytics-text="7 questions sysadmins should ask a potential employer before taking a job">7 questions sysadmins should ask a potential employer before taking a job</a></div> <div class="field__item"><a href="https://www.redhat.com/architect/?intcmp=7013a000002DRawAAG" data-analytics-category="resource list" data-analytics-text="Resources for IT architects">Resources for IT architects</a></div> <div class="field__item"><a href="https://enterprisersproject.com/article/2019/3/article-cheat-sheet?intcmp=7013a000002DRawAAG" data-analytics-category="resource list" data-analytics-text="Cheat sheet: IT job interviews">Cheat sheet: IT job interviews</a></div> <div class="field__item"><a href="https://console.redhat.com?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Register for your free Red Hat account">Register for your free Red Hat account</a></div> </div> </div> </div> <a id="bottom-list" tabindex="-1"></a> <h2 id="motivation">Guilt as a motivator</h2> <p>I felt like I owed the community and the people who had given me this chance. I wanted to focus on the promise I'd made, but it was hard with other higher-priority things getting in the way. Whenever I deviated from my plan, the guilt kept me on track. It reminded me that I had to give back to the community that had given me such a good opportunity. After a few months of struggling and juggling, I can proudly say that I didn't give up. Today, I'm an active contributor to that project.</p> <p>I love the challenges it presents, and I enjoy solving some of the key issues in the project's area. I also have been able to take the lead in implementing this upstream project in our downstream ecosystem. As icing on the cake, I was again invited to present with the team and give the community updates for the project. This time, it was not because of a DEI initiative, as the ratio was already balanced.</p> <p>Feeling guilt isn't so bad after all!</p> <p>I'm glad that I took the opportunity, and I'm glad it turned out to be a win-win situation for everyone involved. If I hadn't been approached about being a co-presenter, I probably would have never gotten involved in this project, and that would have been such a miss! I'm grateful to the people who gave me this chance and supported me.</p> <p>I'm probably not the only woman who has faced this. I want to tell all the women out there if such an opportunity presents itself, there's no need to feel guilt, or that you "owe" anyone or any kind of pressure. If you feel such pressure, turn that emotion into a weapon and do good with it! I encourage you to take the opportunity if it will benefit you and make the most out of it. Later on, if you can do the same for another person and uplift them, that’s how you can really pay back to the community. After all, this is what open source community is all about. It's as much about the people as is about the technology being built!</p> <p><strong>[ Ready to level up your communication skills? Get advice from IT leaders. Download <a href="https://enterprisersproject.com/communication-ebook?intcmp=70160000000h0aXAAQ?intcmp=7013a000002qLH8AAM" target="_blank">10 resources to make you a better communicator</a>. ]</strong></p> </div> <div class="clearfix text-formatted field field--name-field-article-subhead field--type-text-long field--label-hidden field__item"><p>Guilt is usually considered a negative emotion, but by steering it well, you can achieve surprising success.</p> </div> <div class="field field--name-field-lead-image field--type-entity-reference field--label-hidden field__item"><article class="media media--type-image media--view-mode-caption"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/lead-images/microphone_speak.png" width="520" height="290" alt="photo of microphone" title="photo of microphone" /> </div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p><a href="https://pixabay.com/en/audio-microphone-bokeh-bright-1851517/" target="_blank" rel="ugc">Pixabay</a>. <a href="https://creativecommons.org/publicdomain/zero/1.0/deed.en" target="_blank" rel="ugc">CC0 1.0</a></p> </div> </article> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/tags/careers" hreflang="en">Careers</a></div> <div class="field__item"><a href="/tags/diversity-and-inclusion" hreflang="en">Diversity and inclusion</a></div> </div> <div class="field field--name-field-listicle-title field--type-string field--label-hidden field__item">What to read next</div> <div class="field field--name-field-listicles field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/article/22/6/open-source-standards-diversity" hreflang="en">Create a more diverse and equitable open source project with open standards</a></div> <div class="field__item"><a href="/article/20/5/tips-conference-proposals" hreflang="und">13 tips for getting your talk accepted at a tech conference</a></div> </div> <div class="field field--name-field-default-license field--type-list-string field--label-hidden field__item"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> <img alt="Creative Commons License" src="/themes/osdc/assets/img/cc-by-sa-4.png" title="This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License." /></a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.</div> <section id='comments' class="field field--name-field-comments field--type-comment field--label-hidden comment-wrapper"> <div class="comments__count"> <h2>Comments are closed.</h2> <div class="login">These comments are closed.</div> </div> </section> Fri, 28 Apr 2023 07:00:00 +0000 its-surya 70598 at https://opensource.com https://opensource.com/article/23/4/guilt-motivation#comments 3 reasons to host a docathon for your open source project https://opensource.com/article/23/4/open-source-docathon <span class="field field--name-title field--type-string field--label-hidden">3 reasons to host a docathon for your open source project</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/users/lmalivert" class="username">lmalivert</a></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2023-04-28T03:00:00-04:00" title="Friday, April 28, 2023 - 03:00" class="datetime">Fri, 04/28/2023 - 03:00</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Your open source project's documentation is essential to your customers. Your target audience must understand the purpose of your project and how to use it, and documentation is what bridges that gap. A project is rarely ever truly done, so it's equally important for resources to be maintained and updated with your project's continuous improvement.</p> <p>But what happens when you have lots of documentation to maintain but lack the resources to keep it current? The answer is pretty simple: Host a docathon!</p> <h2 id="what-docathon">What is a docathon?</h2> <p>A docathon is like a hackathon. A hackathon is an event where engineers and community leaders gather to improve or add new features to an existing application. In a docathon, the same kind of collaboration focuses on improving documentation.</p> <p><strong>[ Learn about writing <a href="https://opensource.com/article/22/10/docs-as-code" target="_blank">Docs as Code</a>. ]</strong></p> <p>A docathon can fill gaps within content, restructure large documentation sets, fix broken links, or just correct typos. The intent behind hosting a docathon is to improve a large amount of documentation in a relatively brief timeframe.</p> <p>Some examples of product documentation include:</p> <ul><li>Training manuals</li> <li>User manuals</li> <li>Installation guides</li> <li>Troubleshooting guides</li> <li>Quickstart guides</li> <li><a href="https://www.redhat.com/en/topics/api/what-are-application-programming-interfaces?intcmp=7013a000002qLH8AAM" target="_blank">API</a> documentation</li> <li>Tutorials</li> </ul><p>At my organization, our documentation team hosted a docathon and successfully revamped a 102-page installation guide. The docathon enabled us to focus on the project's scope, which was reorganizing for simplicity, removing duplicate content, and following the customer journey. Hosting a docathon left a lasting impression on my team and improved customer success.</p> <p><strong>[ Read <a href="https://opensource.com/article/23/3/community-documentation" target="_blank">Write documentation that actually works for your community</a> ]</strong></p> <h2 id="docathon-reasons">3 things you can achieve with a docathon</h2> <p>Here are my top three reasons to host a docathon:</p> <h3 id="backlog">1. No more backlog</h3> <p>Most documentation must evolve along with the product it supports. As the product changes or updates, so must the documentation. In some cases, documentation teams release new versions of their documentation alongside the engineering team's release cycle. As priorities within a team change and <a href="https://opensource.com/article/19/7/what-golden-image" target="_blank">GA releases</a> continue, documentation teams face the challenge of keeping up with new features, bug fixes, and tasks to complete. The changes that get left behind become part of a backlog—an accumulation of work that needs to be completed at a later time.</p> <blockquote><p><strong>Docathon tip: </strong>During a docathon, participants can triage backlog items and complete them as they progress through the list. Non-technical participants can work on fixes related to typos, broken links, and other text-related issues.</p> </blockquote> <p></p><div class="embedded-resource-list callout-float-right"> <a href="#bottom-list" class="visually-hidden focusable skip-link">Skip to bottom of list</a> <div data-analytics-region="sidebar"> <div class="field field--name-title field--type-string field--label-hidden field__item">Our favorite resources about open source</div> <div class="field field--name-links field--type-link field--label-hidden field__items"> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheet-git?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Git cheat sheet">Git cheat sheet</a></div> <div class="field__item"><a href="https://developers.redhat.com/cheat-sheets/advanced-linux-commands/?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Advanced Linux commands cheat sheet">Advanced Linux commands cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/tags/alternatives?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Open source alternatives">Open source alternatives</a></div> <div class="field__item"><a href="https://www.redhat.com/en/services/training/rh024-red-hat-linux-technical-overview?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Free online course: RHEL technical overview">Free online course: RHEL technical overview</a></div> <div class="field__item"><a href="https://console.redhat.com?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Register for your free Red Hat account">Register for your free Red Hat account</a></div> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheets?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Check out more cheat sheets">Check out more cheat sheets</a></div> </div> </div> </div> <a id="bottom-list" tabindex="-1"></a> <h3 id="update-docs">2. Revamp large-scale guides</h3> <p>By the time your documentation team realizes it's time to revamp a guide, it's probably several chapters in and hundreds of pages deep. Once the content plan has been developed, the complexity of restructuring begins. Restructuring a large amount of documentation is not for the faint of heart.</p> <blockquote><p><strong>Docathon tip:</strong> Assemble a team to lead the docathon and provide incentives for organization-wide participation from different teams or departments. Depending on the scope of work and time constraints, your team can successfully restructure an entire guide in less time than you probably expect.</p> </blockquote> <h3 id="collaboration">3. Collaboration between cross-functional teams</h3> <p>It is common for different groups within an organization to work in isolation. Engineering, product, customer support, marketing, and documentation teams may not collaborate on projects as often as they should.</p> <p>Imagine hosting an event where each team member can use their expertise to improve product documentation. Docathons foster subject matter expert (SME) diversity, real-time collaboration, and communication. They also allow for an inclusive environment where individuals residing in different geographical locations can participate in person or remotely. Your documentation receives the undivided attention of experts with different viewpoints and specializations, minimizing isolated siloes, unconscious bias, and burnout.</p> <blockquote><p><strong>Docathon tip:</strong> Enable cross-functional teams to come together for a common cause.</p> </blockquote> <p><strong>[ Learn what it takes to <a href="https://www.redhat.com/en/resources/build-a-resilient-it-culture-ebook?intcmp=7013a000002qLH8AAM" target="_blank">build a resilient IT culture</a> ]</strong></p> <h2 id="conclusion">Documentation marathon</h2> <p>The next time your team has a seemingly insurmountable backlog or is tasked with restructuring a huge documentation project, consider hosting a docathon. It's easy, and its productivity may surprise you. For more information on hosting an event like this, read Tiffany Long's excellent <a href="https://opensource.com/downloads/hackathon-guide?intcmp=7013a000002qLH8AAM" target="_blank">10-step guide to hosting a hackathon</a>.</p> </div> <div class="clearfix text-formatted field field--name-field-article-subhead field--type-text-long field--label-hidden field__item"><p>A marathon for documentation is a great way to produce or improve the docs for your open source project.</p> </div> <div class="field field--name-field-lead-image field--type-entity-reference field--label-hidden field__item"><article class="media media--type-image media--view-mode-caption"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/lead-images/files_documents_paper_folder.png" width="1041" height="584" alt="Files in a folder" title="Files in a folder" /> </div> </article> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/tags/documentation" hreflang="en">Documentation</a></div> <div class="field__item"><a href="/tags/conferences-and-events" hreflang="en">Conferences and events</a></div> </div> <div class="field field--name-field-listicle-title field--type-string field--label-hidden field__item">What to read next</div> <div class="field field--name-field-listicles field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/article/22/8/writing-project-documentation-html" hreflang="en">Writing project documentation in HTML</a></div> <div class="field__item"><a href="/article/22/12/dynamic-documentation-javascript" hreflang="en">Improve your documentation with JavaScript</a></div> <div class="field__item"><a href="/article/22/12/markup-languages-documentation" hreflang="en">Our favorite markup languages for documentation</a></div> </div> <div class="field field--name-field-default-license field--type-list-string field--label-hidden field__item"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> <img alt="Creative Commons License" src="/themes/osdc/assets/img/cc-by-sa-4.png" title="This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License." /></a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.</div> <section id='comments' class="field field--name-field-comments field--type-comment field--label-hidden comment-wrapper"> <div class="comments__count"> <h2>Comments are closed.</h2> <div class="login">These comments are closed.</div> </div> </section> Fri, 28 Apr 2023 07:00:00 +0000 lmalivert 70575 at https://opensource.com https://opensource.com/article/23/4/open-source-docathon#comments Run a virtual conference using only open source tools https://opensource.com/article/23/4/open-source-tools-virtual-conference <span class="field field--name-title field--type-string field--label-hidden">Run a virtual conference using only open source tools</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/users/mairin" class="username">mairin</a></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2023-04-27T03:00:00-04:00" title="Thursday, April 27, 2023 - 03:00" class="datetime">Thu, 04/27/2023 - 03:00</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p><a href="https://fedoraproject.org/wiki/Design" target="_blank">The Fedora Design Team</a> discovered that using open source tools to run a virtual conference can be quite effective by hosting the first <a href="http://creativefreedomsummit.com/" target="_blank">Creative Freedom Summit</a> in January 2023.</p> <p>In this article, I'll share some background on the conference, why using open source tools to run it was important to us, and the specific tools and configurations our team used to make it all work. I'll also talk about what worked well and what will need improvement at our next summit in 2024.</p> <h2>What is Creative Freedom Summit?</h2> <p>The Creative Freedom Summit was an idea Marie Nordin came up with after reviewing talk submissions for <a href="http://flocktofedora.org/" target="_blank">Flock, the annual Fedora users and contributors conference</a>. She received many talk submissions for the August 2022 Flock relating to design and creativity in open source—far more than we could possibly accept. With so many great ideas for open source design-related talks out there, she wondered if there would be space for a separate open source creativity conference focused on creatives who use open source tools to produce their work.</p> <p>Marie brought this idea to the Fedora Design Team in the fall of 2022, and we started planning the conference, which took place January 17-19, 2023. Since it was our first time running a new conference like this, we decided to start with invited speakers based on some of the Flock submissions and our own personal network of open source creatives. Almost every speaker we asked gave a talk, so we didn't have room to accept submissions. We will need to figure out this next year, so we don't have an open source CFP (Call for Papers) management tool for that to tell you about yet.</p> <p></p><div class="embedded-resource-list callout-float-right"> <a href="#bottom-list" class="visually-hidden focusable skip-link">Skip to bottom of list</a> <div data-analytics-region="sidebar"> <div class="field field--name-title field--type-string field--label-hidden field__item">More Linux resources</div> <div class="field field--name-links field--type-link field--label-hidden field__items"> <div class="field__item"><a href="https://developers.redhat.com/cheat-sheets/linux-commands-cheat-sheet/?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="Linux commands cheat sheet">Linux commands cheat sheet</a></div> <div class="field__item"><a href="https://developers.redhat.com/cheat-sheets/advanced-linux-commands/?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="Advanced Linux commands cheat sheet">Advanced Linux commands cheat sheet</a></div> <div class="field__item"><a href="https://www.redhat.com/en/services/training/rh024-red-hat-linux-technical-overview?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="Free online course: RHEL technical overview">Free online course: RHEL technical overview</a></div> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheet-networking?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="Linux networking cheat sheet">Linux networking cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheet-selinux?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="SELinux cheat sheet">SELinux cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/downloads/linux-common-commands-cheat-sheet?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="Linux common commands cheat sheet">Linux common commands cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/resources/what-are-linux-containers?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="What are Linux containers?">What are Linux containers?</a></div> <div class="field__item"><a href="https://console.redhat.com?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Register for your free Red Hat account">Register for your free Red Hat account</a></div> <div class="field__item"><a href="https://opensource.com/tags/linux?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="Our latest Linux articles">Our latest Linux articles</a></div> </div> </div> </div> <a id="bottom-list" tabindex="-1"></a> <h2>Using open source for open source conferences</h2> <p>Since the initial COVID pandemic lockdowns, Fedora's Flock conference has been run virtually using Hopin, an online conference platform that isn't open source but is friendly to open source tools. Fedora started using it some years ago, and it definitely provides a professional conference feel, with a built-in sponsor booth/expo hall, tracks, hallway chat conversations, and moderation tools. Running the Creative Freedom Summit using Hopin was an option for us because, as a Fedora-sponsored event, we could access Fedora's Hopin setup. Again, Hopin is not open source.</p> <p>Now, as a long-term (~20 years) open source contributor, I can tell you that this kind of decision is always tough. If your conference focuses on open source, using a proprietary platform to host your event feels a little strange. However, as the scale and complexity of our communities and events have grown, the ability to produce an integrated open source conference system has become more challenging.</p> <p>There is no right or wrong answer. You have to weigh a lot of things when making this decision:</p> <ul><li>Budget</li> <li>People power</li> <li>Infrastructure</li> <li>Technical capability</li> <li>Complexity/formality/culture of the event</li> </ul><p>We didn't have any budget for this event. We did have a team of volunteers who could put some work hours into it. We had the Fedora Matrix Server as a piece of supported infrastructure we could bring into the mix and access to a hosted WordPress system for the website. Teammate Madeline Peck and I had the technical capability/experience of running the live, weekly Fedora Design Team <a href="https://opensource.com/article/23/3/video-templates-inkscape" target="_blank">video calls</a> using PeerTube. We wanted the event to be low-key, single-track, and informal, so we had some tolerance for glitches or rough edges. We also all had a lot of passion for trying an open source stack.</p> <p>Now you know a little about our considerations when making this decision, which might help when making decisions for your event.</p> <h2>An open source conference stack</h2> <p>Here is how the conference tech stack worked.</p> <h3>Overview</h3> <p><strong>Live components</strong></p> <ul><li><strong>Livestream</strong>: We streamed the stage and the social events to a PeerTube channel. Conference attendees could watch the stream live from our PeerTube channel. PeerTube includes some privacy-minded analytics to track the number of livestream viewers and post-event views.</li> <li><strong>Live stage + social event room</strong>: We had one live stage for speakers and hosts using Jitsi, ensuring only those with permission could be on camera. We had an additional Jitsi meeting room for social events that allowed anyone who wanted to participate in the social event to go on camera.</li> <li><strong>Backstage</strong>: We had a "Backstage" Matrix channel to coordinate with speakers, hosts, and volunteers in one place while the event was going on.</li> <li><strong>Announcements and Q&amp;A</strong>: We managed Q&amp;A and the daily schedule for the conference via a shared Etherpad (which we later moved to Hackmd.io).</li> <li><strong>Integrated and centralized conference experience</strong>: Using Matrix's Element client, we embedded the livestream video and an Etherpad into a public Matrix room for the conference. We used attendance in the channel to monitor overall conference attendance. We had a live chat throughout the conference and took questions from audience members from the chat and the embedded Q&amp;A Etherpad.</li> <li><strong>Conference website</strong>: We had a beautifully-designed website created by Ryan Gorley hosted on WordPress, which had the basic information and links for how to join the conference, the dates/times, and the schedule.</li> </ul><h3>Post-event components</h3> <ul><li><strong>Post-event survey</strong>: We used the open source LimeSurvey system to send out a post-event survey to see how things went for attendees. I use some of the data from that survey in this article.</li> <li><strong>Post-event video editing and captioning</strong>: We didn't have a live captioning system for the conference, but as I was able, I typed live notes from talks into the channel, which attendees greatly appreciated. Post-event, we used Kdenlive (one of the tools featured in talks at the event) to edit the videos and generate captions.</li> <li><strong>Event recordings</strong>: PeerTube automagically posts livestream recordings to channels, making nearly instant recordings available for attendees for talks they may have missed.</li> </ul><p>I'll cover some details next.</p> <h2>Livestream with PeerTube</h2> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/homepage.webp" width="1213" height="2048" alt="Screenshot showing the Creative Freedom Summit PeerTube channel, with the logo, a description of the event, and a set of video thumbnails" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p>We used the <a href="https://peertube.linuxrocks.online/c/creativefreedom/videos" target="_blank">LinuxRocks PeerTube platform</a> generously hosted by <a href="https://linuxrocks.online/" target="_blank">LinuxRocks.online</a> for the Creative Freedom Summit's livestream. PeerTube is a free and open source decentralized video platform that is also part of the Fediverse.</p> <p>One of the best features of PeerTube (that other platforms I am aware of don't have) is that after your livestream ends, you get a near-instant replay recording posted to your channel on PeerTube. Users in our chatroom cited this as a major advantage of the platform. If an attendee missed a session they were really interested in, they could watch it within minutes of that talk's end. It took no manual intervention, uploading, or coordination on the part of the volunteer organizing team to make this happen; PeerTube automated it for us.</p> <p>Here is how livestreaming with PeerTube works: You create a new livestream on your channel, and it gives you a livestreaming URL + a key to authorize streaming to the URL. This URL + key can be reused over and over. We configured it so that the recording would be posted to the channel where we created the livestreaming URL as soon as a livestream ended. Next, copy/paste this into Jitsi when you start the livestream. This means that you don't have to generate a new URL + key for each talk during the conference—the overhead of managing that for organizers would have been pretty significant. Instead, we could reuse the same URL + key shared in a common document among conference organizers (we each had different shifts hosting talks). Anyone on the team with access to that document could start the livestream.</p> <h3>How to generate the livestream URL + key in PeerTube</h3> <p>The following section covers generating the livestream URL + key in PeerTube, step-by-step.</p> <p><strong>1. Create stream video on PeerTube</strong></p> <p>Log into PeerTube, and click the <strong>Publish</strong> button in the upper right corner:</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/publish.png" width="221" height="114" alt="Screenshot of the PeerTube Publish button" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p><strong>2. Set options</strong></p> <p>Click on the <strong>Go live</strong> tab (fourth from the left) and set the following options:</p> <ul><li>Channel: (The channel name you want the livestream to publish on)</li> <li>Privacy: Public</li> <li>Radio buttons: Normal live</li> </ul><p>Then, select <strong>Go Live</strong>. (Don't worry, you won't really be going live quite yet, there is more data to fill in.)</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/go-live.png" width="1449" height="878" alt="Screenshot of the Go Live button in PeerTube" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p><strong>3. Basic info (don't click update yet)</strong></p> <p>First, fill out the <strong>Basic Info</strong> tab, then choose the <strong>Advanced Settings</strong> tab in the next step. Fill out the name of the livestream, description, add tags, categories, license, etc. Remember to publish after the transcoding checkbox is turned on.</p> <p>This ensures once your livestream ends, the recording will automatically post to your channel.</p> <p><strong>4. Advanced settings</strong></p> <p>You can upload a "standby" image that appears while everyone is watching the stream URL and waiting for things to start.</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/advdsettings.png" width="2232" height="875" alt="Screenshot of PeerTube Advanced Settings" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p>This is the standby image we used for the Creative Freedom Summit:</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/cfsbanner.png" width="1920" height="1080" alt="Screenshot of the Creative Freedom Summit banner" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p><strong>5. Start livestream on PeerTube</strong></p> <p>Select the <strong>Update</strong> button in the lower right corner. The stream will appear like this—it's in a holding pattern until you start streaming from Jitsi:</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/startlivestream.jpg" width="2543" height="1317" alt="Screenshot of starting the live stream on PeerTube" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p><strong>6. Copy/paste the livestream URL for Jitsi</strong></p> <p>This is the final step in PeerTube. Once the livestream is up, click on the <strong>…</strong> icon under the video and towards the right:</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/pasteURL.png" width="718" height="499" alt="Copy and paste the URL" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p>Select <strong>Display live information</strong>. You'll get a dialog like this:</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/liveinformation.png" width="925" height="566" alt="Screenshot of Display live information option" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p>You must copy both the live RTMP URL and the livestream key. Combine them into one URL and then copy/paste that into Jitsi.</p> <p>The following are examples from my test run of these two text blocks to copy:</p> <ul><li>Live RTMP Url: <strong>rtmp://peertube.linuxrocks.online:1935/live</strong></li> <li>Livestream key: <strong>8b940f96-c46d-46aa-81a0-701de3c43c8f</strong></li> </ul><p>What you'll need to paste into Jitsi is these two text blocks combined with a<strong> /</strong> between them, like so:</p> <p><strong>rtmp://peertube.linuxrocks.online:1935/live/8b940f96-c46d-46aa-81a0-701de3c43c8f</strong></p> <h2>Live stage + social event room: Jitsi</h2> <p>We used the free and open source hosted <a href="https://meet.jit.si/" target="_blank">Jitsi Meet</a> video conferencing platform for our "live stage." We created a Jitsi meeting room with a custom URL at <strong><a href="https://meet.jit.si">https://meet.jit.si</a></strong> and only shared this URL with speakers and meeting organizers.</p> <p>We configured the meeting with a lobby (this feature is available in meeting settings once you join your newly-created meeting room) so speakers could join a few minutes before their talk without fear of interrupting the presentation before theirs. (Our host volunteers let them in when the previous session finished.) Another option is to add a password to the room. We got by just by having a lobby configured. It did seem, upon testing, that the moderation status in the room wasn't persistent. If a moderator left the room, they appeared to lose moderator status and settings, such as the lobby setup. I kept the Jitsi room available and active for the entire conference by leaving it open on my computer. (Your mileage may vary on this aspect.)</p> <p>Jitsi has a built-in livestreaming option, where you can post a URL to a video service, and it will stream your video to that service. We had confidence in this approach because it is how we host and livestream weekly <a href="https://peertube.linuxrocks.online/c/fedora_design_live/videos" target="_blank">Fedora Design Team meetings</a>. For the Creative Freedom Summit, we connected our Jitsi Live Stage (for speakers and hosts) to <a href="https://peertube.linuxrocks.online/c/creativefreedom/videos" target="_blank">a channel on the Linux Rocks PeerTube</a>.</p> <p>Jitsi lets speakers share their screens to drive their own slides or live demos.</p> <h2>Livestreaming Jitsi to PeerTube</h2> <p>1. Join the meeting and click the <strong>…</strong> icon next to the red hangup button at the bottom of the screen.</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/moreactions.png" width="233" height="127" alt="Join the Jitsi meeting" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p>2. Select <strong>Start live stream</strong> from the pop-up menu.</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/startlivestream.png" width="233" height="674" alt="Screenshot of starting the live stream in Jitsi" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p>3. Copy/paste the PeerTube URL + key text</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/copypastekey.png" width="400" height="391" alt="Screenshot of copying and pasting the livestream key" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p>4. Listen for your Jitsi Robot friend</p> <p>A feminine voice will come on in a few seconds to tell you, "Live streaming is on." Once she sounds, smile! You're livestreaming.</p> <p>5. Stop the livestream</p> <p>This stops the PeerTube URL you set up from working, so repeat these steps to start things back up.</p> <h3>Jitsi tips</h3> <p><strong>Managing Recordings by turning the Jitsi stream on and off</strong></p> <p>We learned during the conference that it is better to turn the Jitsi stream off between talks so that you will have one raw recording file per talk posted to PeerTube. We let it run as long as it would the first day, so some recordings have multiple presentations in the same video, which made using the instant replay function harder for folks trying to catch up. They needed to seek inside the video to find the talk they wanted to watch or wait for us to post the edited version days or weeks later.</p> <p><strong>Preventing audio feedback</strong></p> <p>Another issue we figured out live during the event that didn't crop up during our tests was audio feedback loops. These were entirely my fault (sorry to everyone who attended). I was setting up the Jitsi/PeerTube links, monitoring the streams, and helping host and emcee the event. Even though I knew that once we went live, I needed to mute any PeerTube browser tabs I had open, I either had more PeerTube tabs open than I thought and missed one, or the livestream would autostart in my Element client (which I had available to monitor the chat). I didn't have an easy way to mute Element. In some of the speaker introductions I made, you'll see that I knew I had about 30 seconds before the audio feedback would start, so I gave very rushed/hurried intros.</p> <p>I think there are simpler ways to avoid this situation:</p> <ul><li>Try to ensure your host/emcee is not also the person setting up/monitoring the streams and chat. (Not always possible, depending on how many volunteers you have at any given time.)</li> <li>If possible, monitor the streams on one computer and emcee from another. This way, you have one mute button to hit on the computer you're using for monitoring, and it simplifies your hosting experience on the other.</li> </ul><p>This is something worth practicing and refining ahead of time.</p> <h2>Backstage: Element</h2> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/backstage.webp" width="838" height="304" alt="A screenshot showing three chat room listings in Element: Creative Freedom Summit with a white logo, Creative Freedom Summit Backstage with a black logo, and Creative Freedom Summit Hosts with an orange logo" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p>We set up a "Backstage" invite-only chat room a week or so before the conference started and invited all our speakers to it. This helped us ensure a couple of things:</p> <ul><li>Our speakers were onboarded to Element/Matrix well before the event's start and had the opportunity to get help signing up if they had any issues (nobody did).</li> <li>We started a live communication channel with all speakers before the event so that we could send announcements/updates pretty easily.</li> </ul><p>The channel served as a useful place during the event to coordinate transitions between speakers, give heads up about whether the schedule was running late, and in one instance, quickly reschedule a talk when one of our speakers had an emergency and couldn't make their original scheduled time.</p> <p>We also set up a room for hosts, but in our case, it was extraneous. We just used the backstage channel to coordinate. We found two channels were easy to monitor, but three were too many to be convenient.</p> <h2>Announcements and Q&amp;A: Etherpad/Hackmd.io</h2> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/hackmd.webp" width="1377" height="907" alt="Screenshot of an etherpad titled &quot;General information&quot; that has some info about the Creative Freedom Summit" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p>We set up a pinned widget in our main Element channel with general information about the event, including the daily schedule, code of conduct, etc. We also had a section per talk of the day for attendees to drop questions for Q&amp;A, which the host read out loud for the speaker.</p> <p>We found over the first day or two that some attendees were having issues with the Etherpad widget not loading, so we switched to an embedded hackmd.io document pinned to the channel as a widget, and that seemed to work a little better. We're not 100% sure what was going on with the widget loading issues, but we were able to post a link to the raw (non-embedded) link in the channel topic, so folks could get around any problems accessing it via the widget.</p> <h2>Integrated and centralized conference experience</h2> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/integratedexperience.webp" width="2035" height="1399" alt="A video feed is in the upper left corner, a hackmd.io announcement page in the upper right, and an active chat below." /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p>Matrix via Fedora's Element server was the single key place to go to attend the conference. Matrix chat rooms in Element have a widget system that allows you to embed websites into the chat room as part of the experience. That functionality was important for having our Matrix chat room serve as the central place to attend.</p> <p>We embedded the PeerTube livestream into the channel—you can see it in the screenshot above in the upper left. Once the conference was over, we could share a playlist of the unedited video replays playlist. Now that our volunteer project for editing the videos is complete, the channel has the playlist of edited talks in order.</p> <p>As discussed in the previous section, we embedded a hackmd.io note in the upper right corner to post the day's schedule, post announcements, and an area for Q&amp;A right in the pad. I had wanted to set up a Matrix bot to handle Q&amp;A, but I struggled to get one running. It might make for a cool project for next year, though.</p> <p>Conversations during the conference occurred right in the main chat under these widgets.</p> <p>There are a couple of considerations to make when using a Matrix/Element chat room as the central place for an online conference, such as:</p> <ul><li>The optimal experience will be in the Element desktop client or a web browser on a desktop system. However, you can view the widgets in the Element mobile client (although some attendees struggled to discover this, the UI is less-than-obvious). Other Matrix clients may not be able to view the widgets.</li> <li>Attendees can easily DIY their own experience piecemeal if desired. Users not using the Element client to attend the conference reported no issues joining in on the chat and viewing the PeerTube livestream URL directly. We shared the livestream URL and the hackmd URL in the channel topic, making it accessible to folks who preferred not to run Element.</li> </ul><h2>Website</h2> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/website.webp" width="1271" height="1290" alt="Screenshot showing the top of creativefreedomsummit.com, with the headline &quot;Create. Learn. Connect.&quot; against a blue and purple gradient background." /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p><a href="https://mastodon.social/@ryangorley" target="_blank">Ryan Gorley</a> developed the <a href="https://creativefreedomsummit.com/" target="_blank">Creative Freedom Summit website</a> using <a href="https://wordpress.com/" target="_blank">WordPress</a>. It is hosted by WPengine and is a one-pager with the conference schedule embedded from sched.org.</p> <h2>Post-event</h2> <h3>Post-event survey</h3> <p>We used the open source survey tool LimeSurvey. We sent it out within a week or two to attendees via the Element Chat channel and our PeerTube video channel to learn more about how we handled the event. The event organizers continue to meet regularly. One topic we focus on during these post-event meetings is developing the questions for the survey in a shared hackmd.io document. The following are some things we learned from the event that might be of interest to you in planning your own open source powered online conference:</p> <ul><li>By far, most event attendees learned about the event from Mastodon and Twitter (together, covering 70% of respondents).</li> <li>33% of attendees used the Element desktop app to attend, and 30% used the Element Chat web app. So roughly 63% of attendees used the integrated Matrix/Element experience. The rest watched directly on PeerTube or viewed replays after.</li> <li>35% of attendees indicated they made connections with other creatives at the event via the chat, so the chat experience is pretty important to events if part of your goal is enabling networking and connections.</li> </ul><h3>Captioning</h3> <p>During the event, we received positive feedback from participants who appreciated when another attendee live-captioned the talk in the chat and wished out loud for live captioning for better accessibility. While the stack outlined here did not include live captioning, there are open source solutions for it. One such tool is Live Captions, and Seth Kenlon covered it in an opensource.com article, <a href="https://opensource.com/article/23/2/live-captions-linux" target="_blank">Open source video captioning on Linux</a>. While this tool is meant for the attendee consuming the video content locally, we could potentially have a conference host running it and sharing it to the livestream in Jitsi. One way to do this is using the open source broadcasting tool <a href="https://obsproject.com/" target="_blank">OBS</a> so everyone watching the livestream could benefit from the captions.</p> <p>While editing the videos post-event, we discovered a tool built into <a href="https://kdenlive.org/" target="_blank">Kdenlive</a>, our open source video editor of choice, that generates and automatically places subtitles in the videos. There are basic instructions on how to do this in the <a href="https://docs.kdenlive.org/en/effects_and_compositions/speech_to_text.html" target="_blank">Kdenlive manual</a>. Fedora Design Team member Kyle Conway, who helped with the post-event video editing, put together a <a href="https://gitlab.com/groups/fedora/design/-/epics/23#video-captioning-and-handoff" target="_blank">comprehensive tutorial (including video instruction) on automatically generating and adding subtitles to videos in Kdenlive</a>. It is well worth the read and watch if you are interested in this feature.</p> <h3>Video editing volunteer effort</h3> <p>When the event was over, we rallied a group of volunteers from the conference Element channel to work together on editing the videos, including title cards and intro/outro music, and general cleanup. Some of our automatic replay recordings were split across two files or combined in one file with multiple other talks and needed to be reassembled or cropped down.</p> <p>We used a <a href="https://gitlab.com/groups/fedora/design/-/epics/23" target="_blank">GitLab epic to organize the work</a>, with an FAQ and call for volunteer help organized by skillset, with issues attached for each video needed. We had a series of custom labels we would set on each video so it was clear what state the video was in and what kind of help was needed. All the videos have been edited, and some need content written for their description area on the <a href="https://peertube.linuxrocks.online/c/creativefreedom/videos" target="_blank">Creative Freedom Summit channel</a>. Many have auto-generated subtitles that have not been edited for spelling mistakes and other corrections common with auto-generated text.</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/availablevideos_0.webp" width="915" height="522" alt="Screenshot of the list of videos needing editing help in GitLab" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Máirín Duffy, CC BY-SA 4.0)</p> </div> </article><p></p><div class="embedded-resource-list callout-float-right"> <a href="#bottom-list" class="visually-hidden focusable skip-link">Skip to bottom of list</a> <div data-analytics-region="sidebar"> <div class="field field--name-title field--type-string field--label-hidden field__item">Open multimedia and art resources</div> <div class="field field--name-links field--type-link field--label-hidden field__items"> <div class="field__item"><a href="https://www.redhat.com/sysadmin/music-video-linux-terminal?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Music and video at the Linux terminal">Music and video at the Linux terminal</a></div> <div class="field__item"><a href="https://opensource.com/article/22/2/open-source-creative-apps?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="26 open source creative apps to try this year">26 open source creative apps to try this year</a></div> <div class="field__item"><a href="https://www.redhat.com/en/open-source-stories?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Film series: Open Source Stories">Film series: Open Source Stories</a></div> <div class="field__item"><a href="https://opensource.com/downloads/blender-hotkey-cheat-sheet?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Blender cheat sheet">Blender cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/downloads/kdenlive-cheat-sheet?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Kdenlive cheat sheet">Kdenlive cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/content/cheat-sheet-gimp?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="GIMP cheat sheet">GIMP cheat sheet</a></div> <div class="field__item"><a href="https://console.redhat.com?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Register for your free Red Hat account">Register for your free Red Hat account</a></div> <div class="field__item"><a href="https://opensource.com/tags/audio-and-music?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Latest audio and music articles">Latest audio and music articles</a></div> <div class="field__item"><a href="https://opensource.com/tags/video-editing?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Latest video editing articles">Latest video editing articles</a></div> </div> </div> </div> <a id="bottom-list" tabindex="-1"></a> <p>We passed the videos around—the files could be quite large—by having volunteers download the raw video from the unedited recording on the main PeerTube channel for the Creative Freedom Summit. When they had an edited video ready to share, we had a private PeerTube account where they could upload it. Admins with access to the main channel's account periodically grabbed videos from the private account and uploaded them to the main account. Note that PeerTube doesn't have a system where multiple accounts have access to the same channel, so we had to engage in a bit of password sharing, which can be nerve-wracking. We felt this was a reasonable compromise to limit how many people had the main password but still enable volunteers to submit edited videos without too much hassle.</p> <h2>Ready to give it a try?</h2> <p>I hope this comprehensive description of how we ran the Creative Freedom Summit conference using an open source stack of tools inspires you to try it for your open source event. Let us know how it goes, and feel free to reach out if you have questions or suggestions for improvement! Our channel is at: <a href="https://matrix.to/#/#creativefreedom:fedora.im" target="_blank">https://matrix.to/#/#creativefreedom:fedora.im</a></p> <hr /><p><em>This article is adapted from <a href="https://blog.linuxgrrl.com/2023/04/10/run-an-open-source-powered-virtual-conference/" target="_blank">Run an open source-powered virtual conference</a> and is republished with permission.</em></p> </div> <div class="clearfix text-formatted field field--name-field-article-subhead field--type-text-long field--label-hidden field__item"><p>Here&#039;s how to use open source tools to run your next virtual event.</p> </div> <div class="field field--name-field-lead-image field--type-entity-reference field--label-hidden field__item"><article class="media media--type-image media--view-mode-caption"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/lead-images/chat_video_conference_talk_team.png" width="1040" height="585" alt="Two people chatting via a video conference app" title="Two people chatting via a video conference app" /> </div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>Opensource.com</p> </div> </article> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/tags/conferences-and-events" hreflang="en">Conferences and events</a></div> <div class="field__item"><a href="/tags/tools" hreflang="en">Tools</a></div> </div> <div class="hidden field field--name-field-listicle-title field--type-string field--label-hidden field__item">What to read next</div> <div class="field field--name-field-default-license field--type-list-string field--label-hidden field__item"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> <img alt="Creative Commons License" src="/themes/osdc/assets/img/cc-by-sa-4.png" title="This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License." /></a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.</div> <section id='comments' class="field field--name-field-comments field--type-comment field--label-hidden comment-wrapper"> <div class="comments__count"> <h2>Comments are closed.</h2> <div class="login">These comments are closed.</div> </div> </section> Thu, 27 Apr 2023 07:00:00 +0000 mairin 70599 at https://opensource.com 3 key open source challenges in developing countries https://opensource.com/article/23/4/challenges-open-source-developing-countries <span class="field field--name-title field--type-string field--label-hidden">3 key open source challenges in developing countries</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/users/ahmed-sobeh" class="username">Ahmed Sobeh</a></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2023-04-27T03:00:00-04:00" title="Thursday, April 27, 2023 - 03:00" class="datetime">Thu, 04/27/2023 - 03:00</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>When I go back home and talk to people in the tech industry, or any other industry for that matter, about what I do and the topics I'm involved in daily, I'm usually met with bemusement at the idea of an <a href="https://opensource.com/article/20/5/open-source-program-office" target="_blank">Open Source Programs Office (OSPO)</a>. The concept of a company contributing to an open source project without obvious immediate financial benefit can be culturally strange to understand or explain.</p> <p>As someone born and raised in a country that has been trying to develop for quite some time, I understand and relate to that. There was a point in time when my only understanding of open source was that it was software that I could use without paying and without needing to wait for a specific issue or additional feature to be released. I could just do whatever I needed myself, locally.</p> <p>Open source faces many struggles in developing countries that make how it's perceived and its associations inaccurate and out of touch. I will discuss these struggles in this article.</p> <h2>Open source challenges in developing countries</h2> <p>The challenges that open source faces in these regions can be divided into three main areas:</p> <ul><li>Society and culture</li> <li>Resources and infrastructure</li> <li>Governance</li> </ul><h2>Society and culture</h2> <p>It's no secret that the culture of tech in general, and specifically the open source part of it, feeds off the culture of the society where it exists. That's why, in today's world, open source has a better chance of being sustained and maintained in the more developed parts of the world.</p> <p>But imagine a perfect society, optimal for open source to grow, be sustained, and maintained. What does the culture of that society look like? What are its main characteristics?</p> <h3>Open and transparent</h3> <p>For open source to thrive, the society's culture must be as open and transparent as possible. Information must be freely and publicly accessible, which is a huge issue in many underdeveloped regions. Information is often red-taped and is unavailable to the average citizen, let alone someone who's trying to contribute to open source.</p> <p><strong>[ Related read <a href="https://opensource.com/article/21/10/global-communication-open-source" target="_blank">Global communication in open source projects</a> ]</strong></p> <h3>Free</h3> <p>The word "free" has many different meanings and implications. There's freedom of speech, expression, choice, belief, religion, and many others. The aspect of freedom I'm most concerned with in this context is the ability to start new communities and organizations without a higher authority intervening. That's the essence of open source. Distributed modes of collaboration, in which large groups work together without a strong centralized authority directing them, are highly effective. This is another major challenge in most of these regions. New communities and organizations are often questioned, closely monitored, and unfortunately, in some cases, even prosecuted and eventually shut down for fear of the new ideas that may emerge or other reasons.</p> <h3>Dynamic</h3> <p>A dynamic culture is essential for the growth of open source. A culture that's ready to accept and implement new ideas is the perfect place for open source to grow. Being resistant to change and preferring to stick with traditional approaches can limit society's willingness to adopt new technologies and solutions, which is a major issue in most underdeveloped countries.</p> <p>The greatest and most common reason behind resistance to change in these regions is the fear of the unknown. It would be unfair to discuss fear of the unknown as a "developing countries" problem. It's a common issue everywhere, even in the developed world. But some reasons behind this fear are specific to underdeveloped regions. The two main reasons are a lack of trust in the competence of the tech industry and a lack of accountability. Businesses and individuals do not trust the capabilities of the software solutions on offer, let alone open source solutions. There's an idea that open source software is unsafe and insecure. This concern is magnified when people do not trust the competence of the software developers. Second, people do not trust the system to hold anyone accountable for any possible mistakes or issues arising from using the software or in legal conflicts.</p> <h2>Resources, infrastructure, and economy</h2> <p>Economic challenges are the most obvious struggle for open source in developing countries, impacting open source developers and communities in these regions.</p> <h3>Access and funds</h3> <p>Open source developers struggle with issues of accessibility in developing countries. Whether it's access to the internet or equipment, it can be difficult to become a regular open source contributor when you struggle to reach resources daily. The digital divide in these regions is huge. There are still many areas without regular, stable, and high-speed internet connections. There's also a market gap between these regions and the rest of the world when it comes to equipment. There's always the challenge of not having enough funds to buy the latest, most powerful machines, but there's also an availability problem. The modern, powerful tech equipment needed to build and run the biggest open source projects isn't always available in these regions.</p> <p>These concerns make self-education and learning challenging. It's difficult for an open source developer to pick an open source project, learn all about it on their own, and start contributing to it due to these access issues.</p> <p>And how do you build an open source community under these circumstances? Projects would end up being maintained by the privileged few with access to stable high-speed internet connections and the latest equipment. The rest would be spotty, occasional contributions from others that can hardly be considered a community. And even those would disappear once the chance of paid work appears. I've personally seen it multiple times. Someone would start learning about an open source project to research a specific stack or improve their skills and begin contributing to it. But once the opportunity of paid work appeared, even as a second job, they dropped the open source project completely. It makes sense. Any individual must prioritize a means of survival for themselves and their family.</p> <p>This lack of resources and dependence on a privileged few would also make it almost impossible to fund marketing campaigns, community-building events, and, last but not least, documentation localization attempts.</p> <p></p><div class="embedded-resource-list callout-float-right"> <a href="#bottom-list" class="visually-hidden focusable skip-link">Skip to bottom of list</a> <div data-analytics-region="sidebar"> <div class="field field--name-title field--type-string field--label-hidden field__item">Our favorite resources about open source</div> <div class="field field--name-links field--type-link field--label-hidden field__items"> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheet-git?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Git cheat sheet">Git cheat sheet</a></div> <div class="field__item"><a href="https://developers.redhat.com/cheat-sheets/advanced-linux-commands/?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Advanced Linux commands cheat sheet">Advanced Linux commands cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/tags/alternatives?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Open source alternatives">Open source alternatives</a></div> <div class="field__item"><a href="https://www.redhat.com/en/services/training/rh024-red-hat-linux-technical-overview?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Free online course: RHEL technical overview">Free online course: RHEL technical overview</a></div> <div class="field__item"><a href="https://console.redhat.com?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Register for your free Red Hat account">Register for your free Red Hat account</a></div> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheets?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Check out more cheat sheets">Check out more cheat sheets</a></div> </div> </div> </div> <a id="bottom-list" tabindex="-1"></a> <h3>Localization</h3> <p>English is the language of the internet, but not for many these countries. While almost all developers speak English at a basic level, not everyone has the ability to comprehend and understand documentation, architecture resources, and technical specifications to the level that enables them to meaningfully <a href="https://opensource.com/article/22/3/contribute-open-source-2022" target="_blank">contribute to an open source project</a>. The non-existence of adapted documentation makes it difficult for developers in developing countries to find an entry point into open source projects. The time and resources required to do that usually discourage potential contributors from these regions.</p> <p><strong>[ Also read <a href="https://opensource.com/article/22/11/open-source-weaves-connections-between-countries" target="_blank">How open source weaves connections between countries</a> ]</strong></p> <h3>Employee contracts</h3> <p>Almost all software employee contracts are designed to monetize every single line of code, contribution, or thought the developer might have. Any participation in external projects can be a cause for questioning by the employing company, which all too often discourages developers from contributing to open source to avoid legal issues. Laws favor corporations and organizations and prevent software developers from making external contributions.</p> <h3>Intellectual property laws</h3> <p>Legal frameworks in developing countries are often ill-equipped to handle the nuances of intellectual property rights and open source licensing. Intellectual property laws in developing countries may be weaker or less comprehensive than those in developed countries, and enforcement may be less effective. This can make it difficult for creators and contributors to protect their work and prevent others from using it without permission.</p> <p>In addition, open source licensing can be complex. Many developing countries may not have the legal expertise or resources to navigate these licenses effectively. This can make it tough for developers to contribute to open source projects without inadvertently violating the terms of the license.</p> <p>Another issue is that intellectual property laws and open source licensing are sometimes seen as hindrances to innovation and development in developing countries. Critics argue that these laws and licenses can stifle creativity and prevent the spread of knowledge and technology, particularly in areas where access to resources and technology is limited.</p> <p>Overall, the challenges surrounding intellectual property laws and open source contributions in developing countries are complex and multifaceted, requiring a nuanced approach that accounts for the unique circumstances and challenges these countries face.</p> <h2>Proprietary software deals</h2> <p>Tech giants based in the US and Europe enter into billion-dollar, decades-long deals with governments in developing regions to supply them with software. On the off chance that someone gets elected into a position and decides to start an initiative to adopt open source software, they find that getting out of these deals would cost a fortune.</p> <h2>Open isn't always easy</h2> <p>These are just some of the struggles open source faces in developing countries. There's much to be done to improve the situation and make adopting and growing open source feasible. In future articles, I will delve into specific solutions, but for now, I'll note that, as with everything, it starts with the individual. As we each "crowdsource" an open culture, the culture of the regions where we live and work changes. Bring open source to your community in whatever small way you can, and see where it leads.</p> </div> <div class="clearfix text-formatted field field--name-field-article-subhead field--type-text-long field--label-hidden field__item"><p>Open source faces many struggles in developing countries that make how it&#039;s perceived and its associations inaccurate and out of touch.</p> </div> <div class="field field--name-field-lead-image field--type-entity-reference field--label-hidden field__item"><article class="media media--type-image media--view-mode-caption"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/lead-images/cloud-globe.png" width="520" height="292" alt="Introduction to the Domain Name System (DNS)" title="Introduction to the Domain Name System (DNS)" /> </div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>Jason Baker. CC BY-SA 4.0. Source: Cloud, Globe. Both CC0.</p> </div> </article> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/tags/diversity-and-inclusion" hreflang="en">Diversity and inclusion</a></div> <div class="field__item"><a href="/tags/licensing" hreflang="en">Licensing</a></div> </div> <div class="hidden field field--name-field-listicle-title field--type-string field--label-hidden field__item">What to read next</div> <div class="field field--name-field-default-license field--type-list-string field--label-hidden field__item"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> <img alt="Creative Commons License" src="/themes/osdc/assets/img/cc-by-sa-4.png" title="This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License." /></a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.</div> <section id='comments' class="field field--name-field-comments field--type-comment field--label-hidden comment-wrapper"> <div class="comments__count"> <h2>Comments are closed.</h2> <div class="login">These comments are closed.</div> </div> </section> Thu, 27 Apr 2023 07:00:00 +0000 Ahmed Sobeh 70574 at https://opensource.com Test your Drupal website with Cypress https://opensource.com/article/23/4/website-test-drupal-cypress <span class="field field--name-title field--type-string field--label-hidden">Test your Drupal website with Cypress</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/users/cobadger" class="username">cobadger</a></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2023-04-26T03:00:00-04:00" title="Wednesday, April 26, 2023 - 03:00" class="datetime">Wed, 04/26/2023 - 03:00</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>If you don't include tests in your Drupal development, chances are it's because you think it adds complexity and expense without benefit. <a href="https://www.cypress.io/" target="_blank">Cypress</a> is an open source tool with many benefits:</p> <ul><li>Reliably tests anything that runs in a web browser</li> <li>Works on any web platform (it's great for testing projects using front-end technologies like <a href="https://opensource.com/article/20/11/reactjs-tutorial" target="_blank">React</a>)</li> <li>Highly extensible</li> <li>Increasingly popular</li> <li>Easy to learn and implement</li> <li>Protects against regression as your projects become more complex</li> <li>Can make your development process more efficient</li> </ul><p>This article covers three topics to help you start testing your Drupal project using Cypress:</p> <ol type="1"><li><a href="https://opensource.com/article/23/4/website-test-drupal-cypress#install-cypress">Installing Cypress</a></li> <li><a href="https://opensource.com/article/23/4/website-test-drupal-cypress#write-run">Writing and running basic tests using Cypress</a></li> <li><a href="https://opensource.com/article/23/4/website-test-drupal-cypress#customize-cypress">Customizing Cypress for Drupal</a></li> </ol><h2 id="install-cypress">Install Cypress</h2> <p>For the purposes of this tutorial I'm assuming that you have built a local dev environment for your Drupal project using the `drupal/recommended-project` project. Although details on creating such a project are outside of the scope of this piece, I recommend <a data-saferedirecturl="https://www.google.com/url?q=https://www.specbee.com/blogs/getting-started-with-lando-and-drupal-9&amp;source=gmail&amp;ust=1682166790617000&amp;usg=AOvVaw1yMfzaJ_OGC0TLLv57DNlz" href="https://www.specbee.com/blogs/getting-started-with-lando-and-drupal-9" target="_blank">Getting Started with Lando and Drupal 9</a>.</p> <p>Your project has at least this basic structure:</p> <pre> <code class="language-bash">vendor/ web/ .editorconfig .gitattributes composer.json composer.lock</code></pre><p>The cypress.io site has <a href="https://docs.cypress.io/guides/getting-started/installing-cypress" target="_blank">complete installation instructions</a> for various environments. For this article, I installed Cypress using <a href="https://docs.npmjs.com/downloading-and-installing-node-js-and-npm" target="_blank">npm</a>.</p> <p>Initialize your project using the command <code>npm init</code>. Answer the questions that Node.js asks you, and then you will have a <code>package.json</code> file that looks something like this:</p> <pre> <code class="language-javascript">{ "name": "cypress", "version": "1.0.0", "description": "Installs Cypress in a test project.", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" &amp;&amp; exit 1" }, "author": "", "license": "ISC" }</code></pre><p>Install Cypress in your project:</p> <pre> <code class="language-bash">$ npm install cypress --save-dev</code></pre><p>Run Cypress for the first time:</p> <pre> <code class="language-bash">$ npx cypress open</code></pre><p>Because you haven't added a config or any scaffolding files to Cypress, the Cypress app displays the welcome screen to help you configure the project. To configure your project for E2E (end-to-end) testing, click the <strong>Not Configured</strong> button for E2E Testing. Cypress adds some files to your project:</p> <pre> <code class="language-bash">cypress/ node_modules/ vendor/ web/ .editorconfig .gitattributes composer.json composer.lock cypress.config.js package-lock.json package.json</code></pre><p>Click <strong>Continue</strong> and choose your preferred browser for testing. Click <strong>Start E2E Testing in [your browser of choice]</strong>. I'm using a Chromium-based browser for this article.</p> <p>In a separate window, a browser opens to the <strong>Create your first spec</strong> page:</p> <article class="align-center media media--type-image media--view-mode-default"><div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="https://opensource.com/sites/default/files/2023-04/cypress-in-browser.webp" width="1182" height="656" alt="Cypress in a web browser" /></div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>(Jordan Graham, CC BY-SA 4.0)</p> </div> </article><p>Click on the <strong>Scaffold example specs</strong> button to create a couple of new folders with example specs to help you understand how to use Cypress. Read through these in your code editor, and you'll likely find the language (based on JavaScript) intuitive and easy to follow.</p> <p>Click on <strong>any</strong> in the test browser. This reveals two panels. On the left, a text panel shows each step in the active spec. On the right, a simulated browser window shows the actual user experience as Cypress steps through the spec.</p> <p>Open the <code>cypress.config.js</code> file in your project root and change it as follows:</p> <pre> <code class="language-javascript">const { defineConfig } = require("cypress"); module.exports = defineConfig({ component: { fixturesFolder: "cypress/fixtures", integrationFolder: "cypress/integration", pluginsFile: "cypress/plugins/index.js", screenshotsFolder: "cypress/screenshots", supportFile: "cypress/support/e2e.js", videosFolder: "cypress/videos", viewportWidth: 1440, viewportHeight: 900, }, e2e: { setupNodeEvents(on, config) { // implement node event listeners here }, baseUrl: "https://[your-local-dev-url]", specPattern: "cypress/**/*.{js,jsx,ts,tsx}", supportFile: "cypress/support/e2e.js", fixturesFolder: "cypress/fixtures" }, });</code></pre><p>Change the <code>baseUrl</code> to your project's URL in your local dev environment.</p> <p>These changes tell Cypress where to find its resources and how to find all of the specs in your project.</p> <h2 id="write-run">Write and run basic tests using Cypress</h2> <p>Create a new directory called <code>integration</code> in your <code>/cypress</code> directory. Within the <code>integration</code> directory, create a file called <code>test.cy.js</code>:</p> <pre> <code class="language-bash">cypress/ ├─ e2e/ ├─ fixtures/ ├─ integration/ │ ├─ test.cy.js ├─ support/ node_modules/ vendor/ web/ .editorconfig .gitattributes composer.json composer.lock cypress.config.js package-lock.json package.json</code></pre><p>Add the following contents to your <code>test.cy.js</code> file:</p> <pre> <code class="language-javascript">describe('Loads the front page', () =&gt; { it('Loads the front page', () =&gt; { cy.visit('/') cy.get('h1.page-title') .should('exist') }); }); describe('Tests logging in using an incorrect password', () =&gt; { it('Fails authentication using incorrect login credentials', () =&gt; { cy.visit('/user/login') cy.get('#edit-name') .type('Sir Lancelot of Camelot') cy.get('#edit-pass') .type('tacos') cy.get('input#edit-submit') .contains('Log in') .click() cy.contains('Unrecognized username or password.') }); });</code></pre><p></p><div class="embedded-resource-list callout-float-right"> <a href="#bottom-list" class="visually-hidden focusable skip-link">Skip to bottom of list</a> <div data-analytics-region="sidebar"> <div class="field field--name-title field--type-string field--label-hidden field__item">Our favorite resources about open source</div> <div class="field field--name-links field--type-link field--label-hidden field__items"> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheet-git?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Git cheat sheet">Git cheat sheet</a></div> <div class="field__item"><a href="https://developers.redhat.com/cheat-sheets/advanced-linux-commands/?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Advanced Linux commands cheat sheet">Advanced Linux commands cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/tags/alternatives?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Open source alternatives">Open source alternatives</a></div> <div class="field__item"><a href="https://www.redhat.com/en/services/training/rh024-red-hat-linux-technical-overview?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Free online course: RHEL technical overview">Free online course: RHEL technical overview</a></div> <div class="field__item"><a href="https://console.redhat.com?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Register for your free Red Hat account">Register for your free Red Hat account</a></div> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheets?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Check out more cheat sheets">Check out more cheat sheets</a></div> </div> </div> </div> <a id="bottom-list" tabindex="-1"></a> <p>When you click on <code>test.cy.js</code> in the Cypress application, watch each test description on the left as Cypress performs the steps in each <code>describe()</code> section.</p> <p>This spec demonstrates how to tell Cypress to navigate your website, access HTML elements by ID, enter content into input elements, and submit the form. This process is how I discovered that I needed to add the assertion that the <code>&lt;input id="edit-submit"&gt;</code> element contains the text <strong>Log in</strong> before the input was clickable. Apparently, the flex styling of the submit input impeded Cypress' ability to "see" the input, so it couldn't click on it. Testing really works!</p> <h2 id="customize-cypress">Customize Cypress for Drupal</h2> <p>You can write your own custom Cypress commands, too. Remember the <code>supportFile</code> entry in the <code>cypress.config.js</code> file? It points to a file that Cypress added, which in turn imports the <code>./commands</code> files. Incidentally, Cypress is so clever that when importing logic or data fixtures, you don't need to specify the file extension, so you import <code>./commands</code>, not <code>./commands.js</code>. Cypress looks for any of a dozen or so popular file extensions and understands how to recognize and parse each of them.</p> <p>Enter commands into <code>commands.js</code> to define them:</p> <pre> <code class="language-javascript">/** * Logs out the user. */ Cypress.Commands.add('drupalLogout', () =&gt; { cy.visit('/user/logout'); }) /** * Basic user login command. Requires valid username and password. * * @param {string} username * The username with which to log in. * @param {string} password * The password for the user's account. */ Cypress.Commands.add('loginAs', (username, password) =&gt; { cy.drupalLogout(); cy.visit('/user/login'); cy.get('#edit-name') .type(username); cy.get('#edit-pass').type(password, { log: false, }); cy.get('#edit-submit').contains('Log in').click(); });</code></pre><p>This example defines a custom Cypress command called <code>drupalLogout()</code>, which you can use in any subsequent logic, even other custom commands. To log a user out, call <code>cy.drupalLogout()</code>. This is the first event in the custom command <code>loginAs</code> to ensure that Cypress is logged out before attempting to log in as a specific user.</p> <p>Using environment variables, you can even create a Cypress command called <code>drush()</code>, which you can use to execute Drush commands in your tests or custom commands. Look at how simple this makes it to define a custom Cypress command that logs a user in using their UID:</p> <pre> <code class="language-javascript">/** * Logs a user in by their uid via drush uli. */ Cypress.Commands.add('loginUserByUid', (uid) =&gt; { cy.drush('user-login', [], { uid, uri: Cypress.env('baseUrl') }) .its('stdout') .then(function (url) { cy.visit(url); }); });</code></pre><p>This example uses the <code>drush user-login</code> command (<code>drush uli</code> for short) and takes the authenticated user to the site's base URL.</p> <p>Consider the security benefit of never reading or storing user passwords in your testing. Personally, I find it amazing that a front-end technology like Cypress can execute Drush commands, which I've always thought of as being very much on the back end.</p> <h2 id="testing-testing">Testing, testing</h2> <p>There's a lot more to Cypress, like fixtures (files that hold test data) and various tricks for navigating the sometimes complex data structures that produce a website's user interface. For a look into what's possible, watch the <a href="https://atendesigngroup.com/webinar/cypress-testing-drupal-websites" target="_blank">Cypress Testing for Drupal Websites</a> webinar, particularly <a href="https://youtu.be/pKiBuYImoI8?t=1113" target="_blank">the section on fixtures that begins at 18:33</a>. That webinar goes into greater detail about some interesting use cases, including an Ajax-enabled form. Once you start using it, feel free to use or fork <a href="https://bitbucket.org/aten_cobadger/cypress-for-drupal/src/main/" target="_blank">Aten's public repository of Cypress Testing for Drupal</a>.</p> <p>Happy testing!</p> <hr /><p><em>This article originally appeared on the <a href="https://atendesigngroup.com/articles" target="_blank">Aten blog</a> and is republished with permission.</em></p> </div> <div class="clearfix text-formatted field field--name-field-article-subhead field--type-text-long field--label-hidden field__item"><p>Testing makes everything better. Learn how to use Cypress for your Drupal website.</p> </div> <div class="field field--name-field-lead-image field--type-entity-reference field--label-hidden field__item"><article class="media media--type-image media--view-mode-caption"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/lead-images/lenovo-thinkpad-laptop-concentration-focus-windows-office.png" width="799" height="447" alt="Business woman on laptop sitting in front of window" title="Woman using laptop concentrating" /> </div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>Image by Mapbox Uncharted ERG, <a href="https://creativecommons.org/licenses/by/3.0/us/" rel="ugc" target="_blank">CC-BY 3.0 US</a></p> </div> </article> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/tags/drupal" hreflang="en">Drupal</a></div> <div class="field__item"><a href="/tags/web-development" hreflang="en">Web development</a></div> </div> <div class="hidden field field--name-field-listicle-title field--type-string field--label-hidden field__item">What to read next</div> <div class="field field--name-field-default-license field--type-list-string field--label-hidden field__item"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> <img alt="Creative Commons License" src="/themes/osdc/assets/img/cc-by-sa-4.png" title="This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License." /></a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.</div> <section id='comments' class="field field--name-field-comments field--type-comment field--label-hidden comment-wrapper"> <div class="comments__count"> <h2>Comments are closed.</h2> <div class="login">These comments are closed.</div> </div> </section> Wed, 26 Apr 2023 07:00:00 +0000 cobadger 70572 at https://opensource.com 5 open ways to help UX designers and developers collaborate better https://opensource.com/article/23/4/designers-developers-collaborate <span class="field field--name-title field--type-string field--label-hidden">5 open ways to help UX designers and developers collaborate better</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/users/kriker" class="username">kriker</a></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2023-04-26T03:00:00-04:00" title="Wednesday, April 26, 2023 - 03:00" class="datetime">Wed, 04/26/2023 - 03:00</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Ideally, designers have a good relationship with their product team and users. However, the relationship between designers and developers is more difficult to build and maintain. The lack of a close relationship makes it difficult to solve problems or improve.</p> <p>In my experience, the open source <a href="https://opensource.com/open-organization/resources/open-decision-framework" target="_blank">Open Decision Framework</a> can overcome many of these obstacles.</p> <p>The Open Decision Framework asserts that <a href="https://opensource.com/open-organization/20/6/open-management-practices" target="_blank">open decision-making</a> is transparent, inclusive, and customer-centric. It involves clearly sharing problems, requirements, and constraints with affected parties. It enables collaboration with multiple stakeholders to secure diverse opinions and comprehensive feedback. Most importantly, it manages relationships and expectations across competing needs and priorities.</p> <p>These principles probably resonate with anyone involved in the many decisions around designing a product, feature, or service. For a designer, developers are key stakeholders in making the best design decisions. If you're a designer, it's time to embrace the opportunity to get diverse opinions.</p> <h2 id="backend-ux">The backend and the user experience</h2> <p>Developers are key stakeholders because a user's product or service experience is more than just the pixels on the screen or the workflow designs. It encompasses the service's performance, the speediness of <a href="https://www.redhat.com/en/topics/api/what-are-application-programming-interfaces?intcmp=7013a000002qLH8AAM" target="_blank">API</a> calls, the way user data is treated, and even the design of the data for scalability. When they're considered full stakeholders in the design, developers can contribute their expertise on the backend and architecture of services to assist the overall design of the experience.</p> <p>A user experience (UX) designer is a stakeholder for the items the dev team is responsible for. A performance deficit, or the effects of an architecture on what data is available, can hinder the user experience. An open, <a href="https://www.redhat.com/architect/keycloak-ui-architecture?intcmp=7013a000002qLH8AAM" target="_blank">collaborative relationship between dev and design</a> allows for trust and transparency in all areas.</p> <p></p><div class="embedded-resource-list callout-float-right"> <a href="#bottom-list" class="visually-hidden focusable skip-link">Skip to bottom of list</a> <div data-analytics-region="sidebar"> <div class="field field--name-title field--type-string field--label-hidden field__item">Our favorite resources about open source</div> <div class="field field--name-links field--type-link field--label-hidden field__items"> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheet-git?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Git cheat sheet">Git cheat sheet</a></div> <div class="field__item"><a href="https://developers.redhat.com/cheat-sheets/advanced-linux-commands/?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Advanced Linux commands cheat sheet">Advanced Linux commands cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/tags/alternatives?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Open source alternatives">Open source alternatives</a></div> <div class="field__item"><a href="https://www.redhat.com/en/services/training/rh024-red-hat-linux-technical-overview?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Free online course: RHEL technical overview">Free online course: RHEL technical overview</a></div> <div class="field__item"><a href="https://console.redhat.com?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Register for your free Red Hat account">Register for your free Red Hat account</a></div> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheets?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Check out more cheat sheets">Check out more cheat sheets</a></div> </div> </div> </div> <a id="bottom-list" tabindex="-1"></a> <h2 id="collaboration-tips">Make space for collaboration</h2> <p>An open and transparent relationship between developers and design is not as common as it should be. This way of working may be new to both sides. Here are my top five tips for making collaboration a success:</p> <ol type="1"><li> <p><strong>Set up a recurring time to collaborate</strong>: Establish a recurring time for design and development to meet between once a week and once a month. The invitation should at least include UX, lead engineering, and quality engineering. Ideally, all developers on the team should be invited to attend as schedules permit.</p> </li> <li> <p><strong>Make sharing the main agenda:</strong> UX should share the current use cases and features they are working on, along with any relevant user research data. UX designers should demonstrate workflow designs, wireframes, and high-fidelity mockups to the development team. Development should share any design decisions made on their side that may affect how the user experience works.</p> </li> <li> <p><strong>Encourage questions:</strong> Collaboration is the ideal scenario. Encourage all attendees to ask questions and give feedback. Answers to questions and responses to feedback are opportunities to discuss design and direction, as well as a chance to learn from one another.</p> </li> <li> <p><strong>Embrace a learning mindset</strong>: Avoid lecturing or "telling." Instead, aim to learn from each other. Use mutual expertise to design and build a great experience for users and customers. Ask for explanations of unfamiliar technology or concepts.</p> </li> <li> <p><strong>Consider formal learning</strong>: A collaborative relationship can be easier when groups speak the same language. Consider formal learning paths, such as:</p> <ul><li><strong>Designers</strong>: A coding foundations course, such as the open source <a href="https://www.theodinproject.com/" target="_blank">Odin Project</a>, can be helpful for learning the fundamentals of how a service is constructed and built.</li> <li><strong>Developers</strong>: An understanding of UX principles can help guide questions and feedback. You can find a good overview at UX design principles or in various books and articles.</li> </ul></li> </ol><h2 id="open-collaboration">An example of open collaboration</h2> <p>In an early design review with a developer on my team, I showed a specific interaction for displaying more data about an object. I communicated the user's need and demonstrated the interaction when the developer asked, "Does it need to be done in exactly this way?"</p> <p>He mentioned that with a few minor design changes, the effort to develop it would be significantly lower. We agreed that the changes would not negatively affect the user experience, and the user would still be able to achieve their goals.</p> <p>This feedback saved the development team time, leaving more opportunity to address bugs, build additional features, and preserve a healthy work-life balance. The user experience remained strong, and the team was even stronger. This result would not have been possible without the early feedback from a developer with whom I had a strong working relationship.</p> <h2 id="conclusion">Your next steps</h2> <p>Creating an experience is a series of decisions made by a collaborative team. Product, design, and development need to work together as experts in their respective fields and stakeholders in the others. I encourage you to engage development and design for more collaborative feedback and work together to create the best product with the best user experience.</p> </div> <div class="clearfix text-formatted field field--name-field-article-subhead field--type-text-long field--label-hidden field__item"><p>Designing with open decisions can help increase collaboration between user experience and dev teams.</p> </div> <div class="field field--name-field-lead-image field--type-entity-reference field--label-hidden field__item"><article class="media media--type-image media--view-mode-caption"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/lead-images/checklist_hands_team_collaboration.png" width="520" height="292" alt="a checklist for a team" title="a checklist for a team" /> </div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>Opensource.com</p> </div> </article> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/tags/art-and-design" hreflang="en">Art and design</a></div> <div class="field__item"><a href="/tags/web-development" hreflang="en">Web development</a></div> </div> <div class="field field--name-field-listicle-title field--type-string field--label-hidden field__item">What to read next</div> <div class="field field--name-field-listicles field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/open-organization/20/8/making-open-decisions-five-steps" hreflang="und">Making open decisions in five steps</a></div> <div class="field__item"><a href="/article/22/7/awesome-ux-cli-application" hreflang="en">3 steps to create an awesome UX in a CLI application</a></div> <div class="field__item"><a href="/article/18/5/9-ways-improve-collaboration-developers-designers" hreflang="und">9 ways to improve collaboration between developers and designers</a></div> </div> <div class="field field--name-field-default-license field--type-list-string field--label-hidden field__item"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> <img alt="Creative Commons License" src="/themes/osdc/assets/img/cc-by-sa-4.png" title="This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License." /></a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.</div> <section id='comments' class="field field--name-field-comments field--type-comment field--label-hidden comment-wrapper"> <div class="comments__count"> <h2>Comments are closed.</h2> <div class="login">These comments are closed.</div> </div> </section> Wed, 26 Apr 2023 07:00:00 +0000 kriker 70569 at https://opensource.com https://opensource.com/article/23/4/designers-developers-collaborate#comments What's new in GNOME 44? https://opensource.com/article/23/4/linux-gnome-44-features <span class="field field--name-title field--type-string field--label-hidden">What&#039;s new in GNOME 44?</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/users/jim-hall" class="username">Jim Hall</a></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2023-04-25T03:00:00-04:00" title="Tuesday, April 25, 2023 - 03:00" class="datetime">Tue, 04/25/2023 - 03:00</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>I use GNOME as my primary desktop environment on my Linux PC at home. GNOME gives me an easy-to-use graphical desktop that provides the flexibility I need yet doesn't get in my way when I focus on my work.</p> <p>GNOME recently released GNOME 44 with a bunch of new features. I reached out to the GNOME team to ask about the latest version and what was in it. Here's what team members Caroline Henriksen (brand manager), Matthias Clasen (GNOME developer and release team member), and Allan Day (design team) had to share.</p> <h2 id="gnome-44-features">New GNOME features</h2> <p><strong>Jim Hall:</strong> What are some of the new and updated features in GNOME 44 that you're most excited about?</p> <p><strong>GNOME Team:</strong> I am very excited to see how fresh and modern our user interfaces look. Not just in the core apps like <a href="https://opensource.com/article/22/12/linux-file-manager-gnome" target="_blank">Files</a> (the file manager, Nautilus) but also in our Settings, which have seen a lot of work in the last cycle—many Settings panels have been improved. If you have a chance, you should try the new Mouse &amp; Touchpad panel and enjoy the animated illustrations.</p> <p>There's a lot to like in GNOME 44. For example, I think that a lot of people are going to be really happy about the new grid view in the file chooser, as well as being able to easily connect devices from the new Bluetooth menu in the quick settings.</p> <p><strong>Jim:</strong> The release notes mention GNOME Circle and that a few new apps have been added. What is GNOME Circle?</p> <p><strong>Team:</strong> GNOME Circle is a collection of fantastic apps that use the GNOME platform. It's GNOME's way of promoting the best apps that use our technologies and supporting app developers.</p> <p>To be included in GNOME Circle, an app has to meet a set of requirements. Once it does, the developers get things like extra publicity and GNOME Foundation membership. That, in turn, gives them access to additional infrastructure and travel sponsorship. More information and how to apply can be found on the <a href="https://circle.gnome.org/" target="_blank">GNOME Circle</a> page.</p> <p>We're thrilled with how successful GNOME Circle has been. It contains more than 50 apps now! I particularly like that not all of these apps revolve around computing. You can find apps like a health tracker, a metronome, or a chess clock.</p> <p><strong>Jim:</strong> GNOME is the standard desktop in several Linux distributions. Where can we expect to see GNOME 44?</p> <p><strong>Team:</strong> The upcoming Fedora 38 release will include GNOME 44 and should be out sometime in April, as will Ubuntu 23.04. And GNOME 44 builds have already landed in openSUSE's Tumbleweed and MicroOS, to name just a few of the major distros.</p> <p></p><div class="embedded-resource-list callout-float-right"> <a href="#bottom-list" class="visually-hidden focusable skip-link">Skip to bottom of list</a> <div data-analytics-region="sidebar"> <div class="field field--name-title field--type-string field--label-hidden field__item">More Linux resources</div> <div class="field field--name-links field--type-link field--label-hidden field__items"> <div class="field__item"><a href="https://developers.redhat.com/cheat-sheets/linux-commands-cheat-sheet/?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="Linux commands cheat sheet">Linux commands cheat sheet</a></div> <div class="field__item"><a href="https://developers.redhat.com/cheat-sheets/advanced-linux-commands/?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="Advanced Linux commands cheat sheet">Advanced Linux commands cheat sheet</a></div> <div class="field__item"><a href="https://www.redhat.com/en/services/training/rh024-red-hat-linux-technical-overview?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="Free online course: RHEL technical overview">Free online course: RHEL technical overview</a></div> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheet-networking?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="Linux networking cheat sheet">Linux networking cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/downloads/cheat-sheet-selinux?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="SELinux cheat sheet">SELinux cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/downloads/linux-common-commands-cheat-sheet?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="Linux common commands cheat sheet">Linux common commands cheat sheet</a></div> <div class="field__item"><a href="https://opensource.com/resources/what-are-linux-containers?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="What are Linux containers?">What are Linux containers?</a></div> <div class="field__item"><a href="https://console.redhat.com?intcmp=7016000000127cYAAQ" data-analytics-category="resource list" data-analytics-text="Register for your free Red Hat account">Register for your free Red Hat account</a></div> <div class="field__item"><a href="https://opensource.com/tags/linux?intcmp=70160000000h1jYAAQ" data-analytics-category="resource list" data-analytics-text="Our latest Linux articles">Our latest Linux articles</a></div> </div> </div> </div> <a id="bottom-list" tabindex="-1"></a> <h2 id="gnome-community">The GNOME community</h2> <p><strong>Jim:</strong> The release name for GNOME 44 is Kuala Lumpur. Where does this name come from?</p> <p><strong>Team:</strong> GNOME has two major yearly conferences, <a href="https://events.gnome.org/event/101/" target="_blank">GUADEC</a> in the middle of the year (the next conference will take place in Latvia in July 2023) and <a href="https://events.gnome.org/event/100/" target="_blank">GNOME Asia</a> towards the end of the year. We are very thankful to the local team in Malaysia who welcomed us for GNOME Asia 2022 in Kuala Lumpur.</p> <p>Organizing these events takes a lot of effort and commitment from the GNOME staff and the local teams. As a small sign of our appreciation, GNOME releases are named after the location of the most recent conference. This naming scheme was introduced a number of years ago. GNOME 3.18, Gothenburg, was the first.</p> <p><strong>Jim:</strong> GNOME has a strong user community with active members. How does GNOME keep the community so engaged?</p> <p><strong>Team:</strong> GNOME has always been a community-driven project with a strong sense of collaboration and inclusivity. That's part of what makes being a GNOME contributor and user so rewarding. Being a member of the GNOME community means that you get to interact with people from all over the world to work on common goals and exchange ideas. It is an enriching and inspiring experience, and I think that is what helps keep our community excited and engaged.</p> <p>One important aspect of fostering that engagement is meeting our community where they're at and making our events more accessible to people from all over the world. For example, our flagship conference, GUADEC, was hosted in Guadalajara, Mexico, last year. This was the first time GUADEC happened outside of Europe, and this helped make it easier for GNOME users and contributors in Latin America to attend.</p> <p>We also make an effort to meet our community members not just online and at our own conferences but at other events such as Linux Application Summit, FOSDEM, or <a href="https://opensource.com/tags/scale" target="_blank">SCaLE</a>. If you see a GNOME booth at any of these events, please stop by and say hi. You'll often find developers, designers, foundation staff, and board members all happy to chat and answer questions.</p> <h2 id="contribute-to-gnome">Get involved with GNOME</h2> <p><strong>Jim:</strong> How can folks get started with writing their own apps for GNOME? If I wanted to learn how to write my first "hello world" app for GNOME, is there a tutorial I can follow?</p> <p><strong>Team:</strong> The <a href="https://developer.gnome.org/" target="_blank">Get started developing for GNOME</a> site includes a collection of tutorials, including a guide on quickly creating your first app. With new technologies like <a href="https://opensource.com/article/21/5/launch-flatpaks-linux-terminal" target="_blank">Flatpak</a> and GNOME Builder, it's amazing just how easy it is to create your own app nowadays. Fire up Builder, click "new project," fill in some details, and you'll have your own running GNOME app. It really is that easy.</p> <p><strong>Jim:</strong> What are some ways that people can contribute?</p> <p><strong>Team:</strong> If someone is interested in GNOME and is motivated to get involved, there are definitely things they can do to help. Participating in discussions on our Discourse instance or reporting issues is a great place to start if you're a beginner. There are also lots of non-technical jobs that need doing, like helping with our documentation, translating GNOME into different languages, or even helping organize our annual conferences. A lot of these activities have friendly teams working on them who will help you to get started.</p> <p>Alternatively, if you have coding experience, you can browse our <a href="https://gitlab.gnome.org/dashboard/issues?scope=all&amp;state=opened&amp;label_name%5B%5D=4.%20Newcomers" target="_blank">"newcomer" tickets</a> for tasks that might interest you.</p> <p>Another way to contribute is through <a href="https://www.gnome.org/donate/" target="_blank">donating to GNOME</a>. As an open source project and a non-profit foundation, regular donations help us continue to build up GNOME, provide necessary infrastructure, and power new initiatives.</p> <p><strong>[ Get the <a href="https://opensource.com/downloads/installing-linux-applications-ebook?intcmp=7013a000002qLH8AAM" target="_blank">guide to installing applications on Linux</a> ]</strong></p> </div> <div class="clearfix text-formatted field field--name-field-article-subhead field--type-text-long field--label-hidden field__item"><p>The GNOME Linux desktop&#039;s latest release is now available. Find out about the new and improved Bluetooth, user interface, apps, and other features in GNOME 44.</p> </div> <div class="field field--name-field-lead-image field--type-entity-reference field--label-hidden field__item"><article class="media media--type-image media--view-mode-caption"> <div class="field field--name-field-media-image field--type-image field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/lead-images/custom_gnomes.png" width="520" height="292" alt="GNOME" title="GNOME" /> </div> <div class="field field--name-field-caption field--type-text-long field--label-hidden caption field__item"><span class="caption__byline">Image by: </span><p>Gunnar Wortmann via Pixabay. Modified by Opensource.com. CC BY-SA 4.0.</p> </div> </article> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/tags/linux" hreflang="en">Linux</a></div> </div> <div class="field field--name-field-listicle-title field--type-string field--label-hidden field__item">What to read next</div> <div class="field field--name-field-listicles field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/article/22/8/linux-gnome-console" hreflang="en">My first impression of GNOME Console on Linux</a></div> <div class="field__item"><a href="/article/22/6/kde-vs-gnome-linux-desktop" hreflang="en">Linux desktops: KDE vs GNOME</a></div> <div class="field__item"><a href="/article/20/5/linux-desktops" hreflang="und">24 Linux desktops you need to try</a></div> </div> <div class="field field--name-field-default-license field--type-list-string field--label-hidden field__item"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> <img alt="Creative Commons License" src="/themes/osdc/assets/img/cc-by-sa-4.png" title="This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License." /></a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.</div> <section id='comments' class="field field--name-field-comments field--type-comment field--label-hidden comment-wrapper"> <div class="comments__count"> <h2>Comments are closed.</h2> <div class="login">These comments are closed.</div> </div> </section> Tue, 25 Apr 2023 07:00:00 +0000 Jim Hall 70571 at https://opensource.com https://opensource.com/article/23/4/linux-gnome-44-features#comments