<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Brylie Christopher Oxley</title>
    <description>The latest articles on DEV Community by Brylie Christopher Oxley (@brylie).</description>
    <link>https://dev.to/brylie</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F112445%2F4ab3f801-1981-4f7d-82ec-4541a4bb9519.jpeg</url>
      <title>DEV Community: Brylie Christopher Oxley</title>
      <link>https://dev.to/brylie</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/brylie"/>
    <language>en</language>
    <item>
      <title>GitHub Copilot Agent Mode: Enhancing Developer Workflows</title>
      <dc:creator>Brylie Christopher Oxley</dc:creator>
      <pubDate>Sun, 13 Apr 2025 06:51:43 +0000</pubDate>
      <link>https://dev.to/brylie/github-copilot-agent-mode-enhancing-developer-workflows-2ae0</link>
      <guid>https://dev.to/brylie/github-copilot-agent-mode-enhancing-developer-workflows-2ae0</guid>
      <description>&lt;p&gt;GitHub Copilot has transformed how developers write code, offering suggestions and completing code blocks to speed up development. Now, with the introduction of Agent mode, GitHub has taken AI-assisted development to a new level. This post explores how Copilot Agent mode can enhance your development workflow and help you become more productive.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/xgRY8vSYCCk"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  What is GitHub Copilot Agent Mode?
&lt;/h2&gt;

&lt;p&gt;Agent mode represents a significant evolution in how GitHub Copilot interacts with developers. Unlike the standard Copilot experience, which primarily focuses on line-by-line code suggestions, Agent mode offers a more conversational and context-aware approach to AI assistance.&lt;/p&gt;

&lt;p&gt;The key distinction lies in Agent mode's ability to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Understand complex, multi-step requests&lt;/li&gt;
&lt;li&gt;Maintain context throughout a development session&lt;/li&gt;
&lt;li&gt;Execute sequences of operations to solve problems&lt;/li&gt;
&lt;li&gt;Reason about code structure and architectural decisions&lt;/li&gt;
&lt;li&gt;Provide explanations and educational insights alongside code&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This shift from reactive suggestions to proactive assistance makes Agent mode feel more like working with a knowledgeable pair programmer than a prediction tool.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setting Up GitHub Copilot Agent
&lt;/h2&gt;

&lt;p&gt;Before you can leverage Agent mode in your workflow, you'll need to ensure proper setup:&lt;/p&gt;

&lt;h3&gt;
  
  
  Prerequisites
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;An active GitHub Copilot subscription&lt;/li&gt;
&lt;li&gt;Visual Studio Code with the GitHub Copilot extension installed&lt;/li&gt;
&lt;li&gt;The latest extension updates are applied&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Configuration Process
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Open VS Code and ensure your GitHub Copilot extension is updated&lt;/li&gt;
&lt;li&gt;Access the Copilot menu through the status bar icon&lt;/li&gt;
&lt;li&gt;Enable Agent mode from the settings menu&lt;/li&gt;
&lt;li&gt;Restart VS Code to apply changes&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Verification
&lt;/h3&gt;

&lt;p&gt;Try asking a complex question in a comment to verify Agent mode is working correctly. For example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;h1&gt;
  
  
  Can you help me implement a function that reads a CSV file, filters rows based on a condition, and writes the results to a new file?
&lt;/h1&gt;
&lt;/blockquote&gt;

&lt;p&gt;If Agent mode is configured correctly, you'll see a more comprehensive response that addresses the multi-step nature of your request rather than just code completion.&lt;/p&gt;

&lt;h2&gt;
  
  
  Practical Applications in Development Workflows
&lt;/h2&gt;

&lt;p&gt;Agent mode shines in several key areas of the development process, offering convenience and efficiency in tasks such as code refactoring, debugging assistance, documentation generation, and architecture planning.&lt;/p&gt;

&lt;h3&gt;
  
  
  Code Refactoring
&lt;/h3&gt;

&lt;p&gt;Agent mode excels at understanding the structure and purpose of existing code, making it an invaluable tool for refactoring:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="c1"&gt;# Before refactoring
&lt;/span&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;process_data&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;item&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;item&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;status&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;active&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt; &lt;span class="ow"&gt;and&lt;/span&gt; &lt;span class="n"&gt;item&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;value&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="n"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;item&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;id&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;result&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With Agent mode, you can ask:&lt;/p&gt;

&lt;blockquote&gt;
&lt;h1&gt;
  
  
  Refactor this function to use list comprehension and add proper error handling
&lt;/h1&gt;
&lt;/blockquote&gt;

&lt;p&gt;Agent mode will understand both the code's function and your refactoring goals, providing a comprehensive solution.&lt;/p&gt;

&lt;h3&gt;
  
  
  Debugging Assistance
&lt;/h3&gt;

&lt;p&gt;When facing challenging bugs, Agent mode can help analyze the problem and suggest solutions:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="c1"&gt;# This function sometimes returns None unexpectedly. Can you identify potential issues?
&lt;/span&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;get_user_data&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;request&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;users&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;user_id&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;status&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;data&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;status&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;404&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="nf"&gt;log_error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;User not found&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Agent mode will indicate that the function does not have a return statement in the 404 case, which explains why it returns None in that scenario.&lt;/p&gt;

&lt;h3&gt;
  
  
  Documentation Generation
&lt;/h3&gt;

&lt;p&gt;Creating comprehensive documentation is often tedious but essential. Agent mode can generate detailed documentation based on existing code:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Generate JSDoc comments for this function&lt;br&gt;
function processPayment(userId, amount, currency, method) {&lt;br&gt;
    // Implementation details...&lt;br&gt;
}&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Agent mode will create appropriate documentation that explains parameters, return values, and potential exceptions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Architecture Planning
&lt;/h3&gt;

&lt;p&gt;Perhaps most impressively, Agent mode can assist with higher-level architecture decisions:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I need to design a system for processing large CSV files, extracting specific data, &lt;br&gt;
   and storing results in a database. What components should I consider, and how might &lt;br&gt;
   they interact?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Agent mode can provide architectural guidance, suggesting component structures, potential libraries, and design patterns suited to your needs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Advanced Techniques
&lt;/h2&gt;

&lt;p&gt;To get the most from Agent mode, consider these advanced techniques:&lt;/p&gt;

&lt;h3&gt;
  
  
  Customizing Prompts
&lt;/h3&gt;

&lt;p&gt;The effectiveness of Agent mode largely depends on how you communicate your needs. Well-structured prompts yield better results:&lt;/p&gt;

&lt;p&gt;Basic prompt:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;How do I parse JSON?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Improved prompt:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I need to parse a JSON API response that might contain nested arrays of user objects.&lt;br&gt;
Each user has an 'id', 'name', and 'permissions' field. Show me how to extract all users &lt;br&gt;
with 'admin' in their permissions array.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The detailed context helps Agent mode provide more relevant and helpful assistance.&lt;/p&gt;

&lt;h3&gt;
  
  
  Integrating With Testing Workflows
&lt;/h3&gt;

&lt;p&gt;Agent mode can streamline test creation:&lt;/p&gt;

&lt;blockquote&gt;
&lt;h1&gt;
  
  
  Write unit tests for this function using pytest
&lt;/h1&gt;

&lt;p&gt;def calculate_discount(order_total, loyalty_tier):&lt;br&gt;
    if loyalty_tier == 'gold':&lt;br&gt;
        return order_total * 0.15&lt;br&gt;
    elif loyalty_tier == 'silver':&lt;br&gt;
        return order_total * 0.10&lt;br&gt;
    else:&lt;br&gt;
        return order_total * 0.05&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Agent mode can generate comprehensive tests covering scenarios, edge cases, and expected behaviors.&lt;/p&gt;

&lt;h3&gt;
  
  
  Using Agent Mode for Code Reviews
&lt;/h3&gt;

&lt;p&gt;Beyond writing code, Agent mode can help with reviewing code:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Review this function for potential issues:&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;updateUserProfile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userData&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;connect&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;users&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;findOne&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;userData&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;userData&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;userData&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;users&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;save&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;success&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Agent mode might identify issues like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Missing error handling&lt;/li&gt;
&lt;li&gt;No connection closure&lt;/li&gt;
&lt;li&gt;No validation of input data&lt;/li&gt;
&lt;li&gt;Always returning success even when the user isn't found&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Combining With Other Development Tools
&lt;/h3&gt;

&lt;p&gt;Agent mode works best as part of a broader toolset. Consider integrating it with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Git operations for version control management&lt;/li&gt;
&lt;li&gt;Project management tools for task tracking&lt;/li&gt;
&lt;li&gt;Testing frameworks for automated quality assurance&lt;/li&gt;
&lt;li&gt;Documentation generators for comprehensive technical documentation&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Best Practices
&lt;/h2&gt;

&lt;p&gt;To make the most of Agent mode while maintaining code quality:&lt;/p&gt;

&lt;h3&gt;
  
  
  When to Use Agent Mode vs. Standard Copilot
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Use standard Copilot for straightforward code completion, simple functions, and routine coding tasks&lt;/li&gt;
&lt;li&gt;Use Agent mode for complex problem-solving, architecture decisions, refactoring, and educational insights&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Setting Appropriate Boundaries
&lt;/h3&gt;

&lt;p&gt;While Agent mode is powerful, establish clear boundaries:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Maintain critical thinking about suggestions&lt;/li&gt;
&lt;li&gt;Verify security-sensitive code manually&lt;/li&gt;
&lt;li&gt;Don't rely on AI for business logic validation&lt;/li&gt;
&lt;li&gt;Review generated code for alignment with project standards&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Maintaining Code Quality and Ownership
&lt;/h3&gt;

&lt;p&gt;Agent mode is a tool to enhance your capabilities, not replace them:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Understand all code before committing it&lt;/li&gt;
&lt;li&gt;Run generated code through your normal testing processes&lt;/li&gt;
&lt;li&gt;Document when and how AI assistance was used&lt;/li&gt;
&lt;li&gt;Take ownership of the final implementation&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Security Considerations
&lt;/h3&gt;

&lt;p&gt;When using AI coding tools:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Never paste sensitive data or credentials in prompts&lt;/li&gt;
&lt;li&gt;Review generated code for security vulnerabilities&lt;/li&gt;
&lt;li&gt;Be cautious with automatically generated database queries or API calls&lt;/li&gt;
&lt;li&gt;Consider running security scanning tools on AI-assisted code&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Case Study: Real-World Implementation
&lt;/h2&gt;

&lt;p&gt;Let's examine how Agent mode can transform a real development task:&lt;/p&gt;

&lt;h3&gt;
  
  
  The Challenge
&lt;/h3&gt;

&lt;p&gt;A developer needs to process a large dataset of customer transactions, identify patterns, and generate a report.&lt;/p&gt;

&lt;h3&gt;
  
  
  Traditional Approach
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Write code to parse the data file&lt;/li&gt;
&lt;li&gt;Create filtering logic for relevant transactions&lt;/li&gt;
&lt;li&gt;Implement pattern analysis algorithms&lt;/li&gt;
&lt;li&gt;Design report generation functionality&lt;/li&gt;
&lt;li&gt;Debug each component separately&lt;/li&gt;
&lt;li&gt;Integrate the components&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This process might take hours or days, depending on complexity.&lt;/p&gt;

&lt;h3&gt;
  
  
  Agent Mode Approach
&lt;/h3&gt;

&lt;p&gt;The developer provides Agent mode with the high-level requirements:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I need to:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Read a CSV file of transactions (date, customer_id, amount, category)&lt;/li&gt;
&lt;li&gt;Identify customers who made &amp;gt; 5 transactions in the "electronics" category&lt;/li&gt;
&lt;li&gt;Calculate their average transaction value&lt;/li&gt;
&lt;li&gt;Generate a PDF report with this data and some basic visualizations
Help me implement this step by step.&lt;/li&gt;
&lt;/ol&gt;
&lt;/blockquote&gt;

&lt;p&gt;Agent mode can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Generate code for each component&lt;/li&gt;
&lt;li&gt;Suggest appropriate libraries for each task&lt;/li&gt;
&lt;li&gt;Provide integration guidance&lt;/li&gt;
&lt;li&gt;Offer optimization suggestions&lt;/li&gt;
&lt;li&gt;Help with debugging issues&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The result is a significant reduction in development time and a more robust solution.&lt;/p&gt;

&lt;h3&gt;
  
  
  Common Challenges
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Learning the proper prompting techniques takes practice&lt;/li&gt;
&lt;li&gt;Some developers report becoming over-reliant on AI suggestions&lt;/li&gt;
&lt;li&gt;Complex, domain-specific problems sometimes require additional guidance&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;GitHub Copilot Agent mode represents a significant advancement in AI-assisted development. By moving beyond simple code completion to a more conversational, context-aware assistant, Agent mode offers developers a powerful tool for enhancing productivity, quality, and learning.&lt;/p&gt;

&lt;p&gt;As with any tool, understanding its capabilities and limitations is the key to success. When used thoughtfully, agent mode can transform your development workflow, freeing you to focus on the most creative and challenging aspects of software creation.&lt;/p&gt;

&lt;h2&gt;
  
  
  Additional Resources
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;GitHub Copilot Documentation&lt;/li&gt;
&lt;li&gt;Effective Prompting Techniques&lt;/li&gt;
&lt;li&gt;GitHub Community Forums&lt;/li&gt;
&lt;li&gt;VS Code Extension Marketplace&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Note: This blog post reflects the capabilities of GitHub Copilot Agent mode as of April 2025. Features and functionality may evolve as the technology continues to develop.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>github</category>
      <category>githubcopilot</category>
      <category>ai</category>
      <category>development</category>
    </item>
    <item>
      <title>Gemini 2.5 Pro: A Developer's Guide to Google's Most Advanced AI</title>
      <dc:creator>Brylie Christopher Oxley</dc:creator>
      <pubDate>Tue, 01 Apr 2025 05:51:02 +0000</pubDate>
      <link>https://dev.to/brylie/gemini-25-pro-a-developers-guide-to-googles-most-advanced-ai-53lf</link>
      <guid>https://dev.to/brylie/gemini-25-pro-a-developers-guide-to-googles-most-advanced-ai-53lf</guid>
      <description>&lt;p&gt;Google recently unveiled Gemini 2.5 Pro, their most intelligent AI model to date. This comprehensive guide examines how it can transform your development workflow, its key capabilities, and practical applications—backed by benchmark data and real-world testing.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/SNlX3RhNJOU"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Capabilities That Matter for Developers
&lt;/h2&gt;

&lt;p&gt;Gemini 2.5 Pro introduces several groundbreaking features that distinguish it from both previous Google models and competitors:&lt;/p&gt;

&lt;h3&gt;
  
  
  Massive Context Window
&lt;/h3&gt;

&lt;p&gt;The most immediately noticeable improvement is the expanded context window—currently 1 million tokens with plans to expand to 2 million tokens. To put this in perspective:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;GPT-4 offers 128K tokens&lt;/li&gt;
&lt;li&gt;Claude 3.5 Sonnet offers 200K tokens&lt;/li&gt;
&lt;li&gt;Gemini 2.5 Pro offers 1,000K tokens (and soon 2,000K)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This isn't just a number on a spec sheet. For developers, this means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Analyzing entire codebases (up to ~30,000 lines) in a single prompt&lt;/li&gt;
&lt;li&gt;Including comprehensive documentation alongside code&lt;/li&gt;
&lt;li&gt;Maintaining context across complex multi-file projects&lt;/li&gt;
&lt;li&gt;Eliminating the need for complex chunking and RAG pipelines for most projects&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Enhanced Reasoning Capabilities
&lt;/h3&gt;

&lt;p&gt;Gemini 2.5 Pro is designed as a "thinking model," approaching problems with a step-by-step reasoning process rather than rushing to generate a response. This results in:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;More accurate debugging of complex issues&lt;/li&gt;
&lt;li&gt;Better architectural recommendations that consider multiple factors&lt;/li&gt;
&lt;li&gt;Higher quality code generation with fewer bugs and edge cases missed&lt;/li&gt;
&lt;li&gt;Improved ability to understand project requirements and constraints&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Native Multimodality
&lt;/h3&gt;

&lt;p&gt;While multimodal capabilities aren't new, Gemini 2.5 Pro builds on this foundation with improved integration between different types of inputs:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Analyzing screenshots alongside code&lt;/li&gt;
&lt;li&gt;Understanding diagrams and architectural schemas&lt;/li&gt;
&lt;li&gt;Processing data visualizations to provide insights&lt;/li&gt;
&lt;li&gt;Integrating audio instructions with visual elements&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Benchmark Performance: How It Compares
&lt;/h2&gt;

&lt;p&gt;Google has published extensive benchmark data showing Gemini 2.5 Pro's performance across various tasks. Here's how it performs in areas most relevant to developers:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Benchmark&lt;/th&gt;
&lt;th&gt;Gemini 2.5 Pro&lt;/th&gt;
&lt;th&gt;GPT-4.5&lt;/th&gt;
&lt;th&gt;Claude 3.7 Sonnet&lt;/th&gt;
&lt;th&gt;Significance for Developers&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;SWE-Bench Verified&lt;/td&gt;
&lt;td&gt;63.8%&lt;/td&gt;
&lt;td&gt;38.0%&lt;/td&gt;
&lt;td&gt;70.3%&lt;/td&gt;
&lt;td&gt;Real-world coding task performance&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;LiveCodeBench v5&lt;/td&gt;
&lt;td&gt;70.4%&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;Live coding capabilities&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Aider Polyglot&lt;/td&gt;
&lt;td&gt;74.0%&lt;/td&gt;
&lt;td&gt;44.9%&lt;/td&gt;
&lt;td&gt;64.9%&lt;/td&gt;
&lt;td&gt;Cross-language code editing&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;MRCR (128k context)&lt;/td&gt;
&lt;td&gt;91.5%&lt;/td&gt;
&lt;td&gt;48.8%&lt;/td&gt;
&lt;td&gt;-&lt;/td&gt;
&lt;td&gt;Long document comprehension&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The data shows that while Claude 3.7 Sonnet still leads in some coding-specific benchmarks, Gemini 2.5 Pro offers substantially better performance in long-context understanding—a crucial advantage for complex projects.&lt;/p&gt;

&lt;h2&gt;
  
  
  Practical Applications for Your Development Workflow
&lt;/h2&gt;

&lt;p&gt;After testing Gemini 2.5 Pro extensively, I've identified several use cases where it excels:&lt;/p&gt;

&lt;h3&gt;
  
  
  Codebase Analysis and Documentation
&lt;/h3&gt;

&lt;p&gt;With its massive context window, Gemini 2.5 Pro can analyze an entire repository in one go:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Example prompt:&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I'm sharing my project's codebase. Please analyze its structure,
identify potential architectural issues, and suggest improvements.
Focus on scalability concerns and code organization.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;

&lt;span class="c1"&gt;// Then upload the entire project or multiple key files&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The model provides comprehensive analysis that considers interactions between components that other models might miss due to context limitations.&lt;/p&gt;

&lt;h3&gt;
  
  
  Building Complex Web Applications
&lt;/h3&gt;

&lt;p&gt;Gemini 2.5 Pro can generate end-to-end web applications with clean, production-ready code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Example prompt:&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Create a React application that displays cryptocurrency price data.
Include a chart component using Recharts, implement pagination,
add filtering by date range, and use proper error handling.
Ensure the code follows best practices for state management.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The generated applications include proper error handling, performance optimizations, and clean component separation—elements often missing from other models' outputs.&lt;/p&gt;

&lt;h3&gt;
  
  
  Architecture Pattern Implementation
&lt;/h3&gt;

&lt;p&gt;The model excels at implementing complex architectural patterns:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Example prompt:&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I need to implement a command pattern in my Node.js application
to handle user actions in a more maintainable way. Please provide
a complete implementation with appropriate folder structure,
base classes, and examples of at least 3 different commands.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The results maintain consistency across the implementation, showing understanding of the entire pattern rather than just individual components.&lt;/p&gt;

&lt;h2&gt;
  
  
  Accessing Gemini 2.5 Pro
&lt;/h2&gt;

&lt;p&gt;You can access Gemini 2.5 Pro through several platforms:&lt;/p&gt;

&lt;h3&gt;
  
  
  Google AI Studio (Free)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Web-based platform for experimentation&lt;/li&gt;
&lt;li&gt;Supports text, image, video, and audio inputs&lt;/li&gt;
&lt;li&gt;Offers more prompt control than the Gemini app&lt;/li&gt;
&lt;li&gt;Visit &lt;a href="https://makersuite.google.com/" rel="noopener noreferrer"&gt;Google AI Studio&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Gemini Advanced ($19.99/month)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Part of Google One AI Premium subscription&lt;/li&gt;
&lt;li&gt;Offers integration with Google Workspace&lt;/li&gt;
&lt;li&gt;Includes expanded context window and file upload capabilities&lt;/li&gt;
&lt;li&gt;Access via &lt;a href="https://one.google.com/" rel="noopener noreferrer"&gt;Google One&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Vertex AI (Coming Soon)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Enterprise-focused platform&lt;/li&gt;
&lt;li&gt;Will offer advanced customization&lt;/li&gt;
&lt;li&gt;Suitable for larger teams and projects&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Limitations to Be Aware Of
&lt;/h2&gt;

&lt;p&gt;Despite its capabilities, Gemini 2.5 Pro has some limitations developers should consider:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Occasional Code Consistency Issues&lt;/strong&gt;: When generating very complex applications, it sometimes introduces inconsistencies between components.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Performance Variability&lt;/strong&gt;: Early users report some inconsistency in performance between the Google AI Studio version and the Gemini app implementation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Rate Limits&lt;/strong&gt;: On Vertex AI, the experimental version has strict rate limits (10 queries per minute).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Clarification Patterns&lt;/strong&gt;: The model sometimes asks multiple clarifying questions, particularly in the Gemini app version, which can slow down the workflow.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Practical Workflow Integration Tips
&lt;/h2&gt;

&lt;p&gt;Based on extensive testing, here are some best practices for incorporating Gemini 2.5 Pro into your development workflow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Start with Architecture&lt;/strong&gt;: Use it first for high-level architecture planning and design patterns before diving into implementation details.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Hybrid Approach for Large Projects&lt;/strong&gt;: For very large projects, combine its analysis capabilities with your own expertise rather than relying on it entirely.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Clear Context Setting&lt;/strong&gt;: Explicitly define project goals, constraints, and preferences in your prompts for better results.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Incremental Implementation&lt;/strong&gt;: For complex features, have it generate code incrementally with feedback at each stage rather than all at once.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Platform Selection&lt;/strong&gt;: Use Google AI Studio for more direct coding tasks and Gemini Advanced when you need deeper integration with Google Workspace.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Conclusion: Is It Worth Adopting?
&lt;/h2&gt;

&lt;p&gt;Gemini 2.5 Pro represents a significant advancement in AI-assisted development, particularly for complex projects requiring deep contextual understanding. While it doesn't completely outperform specialized coding models like Claude 3.7 Sonnet in all benchmarks, its expanded context window and reasoning capabilities make it uniquely valuable for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Large-scale codebase analysis&lt;/li&gt;
&lt;li&gt;Complex architectural planning&lt;/li&gt;
&lt;li&gt;Projects spanning multiple files and technologies&lt;/li&gt;
&lt;li&gt;Documentation generation and improvement&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For most developers, the free Google AI Studio access provides an excellent entry point to experiment with these capabilities and determine if the advanced features warrant a Gemini Advanced subscription.&lt;/p&gt;




&lt;h3&gt;
  
  
  Resources
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://makersuite.google.com/" rel="noopener noreferrer"&gt;Google AI Studio&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://ai.google.dev/docs/gemini_api_overview" rel="noopener noreferrer"&gt;Official Gemini Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://deepmind.google/technologies/gemini/pro/" rel="noopener noreferrer"&gt;Benchmark Results&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Have you tried Gemini 2.5 Pro for your development work? Share your experiences in the comments below!&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This post is part of our AI for Developers series exploring practical applications of AI models in software development workflows.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>llm</category>
      <category>programming</category>
      <category>news</category>
    </item>
    <item>
      <title>The State of Open-Source Tailwind CSS Component Frameworks: A Developer's Guide</title>
      <dc:creator>Brylie Christopher Oxley</dc:creator>
      <pubDate>Sat, 22 Feb 2025 15:13:41 +0000</pubDate>
      <link>https://dev.to/brylie/the-state-of-open-source-tailwind-css-component-frameworks-a-developers-guide-gc0</link>
      <guid>https://dev.to/brylie/the-state-of-open-source-tailwind-css-component-frameworks-a-developers-guide-gc0</guid>
      <description>&lt;p&gt;As &lt;a href="https://tailwindcss.com/" rel="noopener noreferrer"&gt;Tailwind CSS&lt;/a&gt; continues to reshape the frontend development landscape, we're seeing a flourishing ecosystem of component frameworks emerge. This 'State of Open-Source Tailwind CSS Component Frameworks' is a comprehensive overview of the current landscape, highlighting the most notable frameworks that embrace open-source principles and avoid freemium models favoring community-driven development. While commercial options like Tailwind UI offer polished solutions, many developers are turning to open-source alternatives that provide greater flexibility and transparency. Let's explore the most notable frameworks that embrace open-source principles, avoiding freemium models favoring community-driven development.&lt;/p&gt;

&lt;h2&gt;
  
  
  FlyonUI: Bridging Semantic Classes and JavaScript Functionality
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://flyonui.com/" rel="noopener noreferrer"&gt;FlyonUI&lt;/a&gt; is not just another component library. It's an innovative approach that combines the benefits of semantic class naming with the power of headless JavaScript plugins. Built on the solid foundations of Tailwind CSS and DaisyUI, it incorporates Preline's JavaScript capabilities to create a comprehensive solution for modern web development.&lt;/p&gt;

&lt;p&gt;What makes FlyonUI particularly interesting is its solution to a common challenge in Tailwind development: balancing maintainable code and interactive functionality. While Tailwind's utility classes offer tremendous flexibility, they can also lead to cluttered HTML that is difficult to maintain. FlyonUI addresses this by providing 'semantic class names ', which are class names that describe the content they are applied to. This makes the HTML clean and readable while still incorporating the interactive elements modern applications require.&lt;/p&gt;

&lt;p&gt;The framework offers several compelling features:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Semantic styling that keeps HTML clean and readable&lt;/li&gt;
&lt;li&gt;Integration with headless JavaScript plugins for interactive components&lt;/li&gt;
&lt;li&gt;Universal framework compatibility across React, Vue, and other ecosystems&lt;/li&gt;
&lt;li&gt;Built-in support for RTL languages and responsive design&lt;/li&gt;
&lt;li&gt;Extensive theming capabilities for customization&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;FlyonUI's approach is particularly valuable for teams transitioning from traditional CSS frameworks to the utility-first world of Tailwind, as it provides a familiar semantic structure while maintaining access to Tailwind's powerful features.&lt;/p&gt;

&lt;h2&gt;
  
  
  DaisyUI: Semantic Simplicity in the Tailwind Ecosystem
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://daisyui.com/" rel="noopener noreferrer"&gt;DaisyUI&lt;/a&gt; has established itself as a foundational component library in the Tailwind ecosystem. It offers a familiar, Bootstrap-like development experience. Its semantic class system simplifies component reuse, providing pre-styled elements without requiring proprietary dependencies.&lt;/p&gt;

&lt;p&gt;DaisyUI strikes a perfect balance between simplicity and customization. It's not just about providing pre-styled elements; it offers surprising flexibility through its extensive theming capabilities and modifier classes. This reassures developers that they can achieve design uniformity in collaborative environments without sacrificing creative freedom.&lt;/p&gt;

&lt;h2&gt;
  
  
  Shadcn/ui: Rethinking Component Distribution
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://ui.shadcn.com/" rel="noopener noreferrer"&gt;Shadcn/ui&lt;/a&gt; takes an innovative approach to component distribution that's worth understanding. Rather than operating as a traditional npm package, it provides unstyled, accessible components that developers copy directly into their projects. This "copy-paste" methodology, combined with Tailwind's utility classes, offers several advantages:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Complete control over component implementation&lt;/li&gt;
&lt;li&gt;There are no runtime dependencies to manage&lt;/li&gt;
&lt;li&gt;Freedom to modify and adapt components without framework constraints&lt;/li&gt;
&lt;li&gt;Direct integration with your project's design system&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This approach has sparked an entire ecosystem of derivative works, including adaptations for frameworks like Svelte and Blazor. The growing community around shadcn/ui demonstrates how open-source principles can foster innovation while maintaining high standards for accessibility and performance.&lt;/p&gt;

&lt;h2&gt;
  
  
  Preline UI: Enterprise Focus with Developer Freedom
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://preline.co/" rel="noopener noreferrer"&gt;Preline UI&lt;/a&gt; distinguishes itself by focusing on enterprise applications while maintaining the flexibility developers need. Its MIT license and comprehensive documentation make it particularly appealing for teams building complex applications. The framework excels in providing components for data-intensive interfaces and administrative dashboards.&lt;/p&gt;

&lt;p&gt;One of Preline's standout features is its design system integration, which offers Figma resources to ensure consistency between design and implementation. This bridge between design and development workflows has made Preline increasingly popular among full-stack teams that need to maintain coherent user experiences across large applications.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Rise of Headless Components
&lt;/h2&gt;

&lt;p&gt;The trend toward headless components, exemplified by libraries like shadcn/ui and integrated into frameworks like FlyonUI, represents a significant shift in how we think about component libraries. These frameworks provide the logic and accessibility features while leaving styling decisions entirely to developers. This approach offers several benefits:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Greater design flexibility&lt;/li&gt;
&lt;li&gt;Reduced bundle sizes&lt;/li&gt;
&lt;li&gt;Better integration with existing design systems&lt;/li&gt;
&lt;li&gt;Improved performance through customization&lt;/li&gt;
&lt;li&gt;Enhanced debugging capabilities&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The success of this model has influenced newer frameworks to adopt similar principles, leading to a more modular and maintainable ecosystem.&lt;/p&gt;

&lt;h2&gt;
  
  
  Evaluating Open-Source Frameworks: Key Considerations
&lt;/h2&gt;

&lt;p&gt;When choosing an open-source Tailwind component framework, consider these factors:&lt;/p&gt;

&lt;h3&gt;
  
  
  Community Activity
&lt;/h3&gt;

&lt;p&gt;Look for active GitHub repositories with regular commits, thoughtful issue discussions, and responsive maintainers. A vibrant community often translates to better documentation, more examples, and faster bug fixes.&lt;/p&gt;

&lt;h3&gt;
  
  
  Documentation Quality
&lt;/h3&gt;

&lt;p&gt;Comprehensive documentation with live examples and clear implementation guidelines is crucial. The best frameworks provide both basic usage examples and advanced customization scenarios.&lt;/p&gt;

&lt;h3&gt;
  
  
  Framework Compatibility
&lt;/h3&gt;

&lt;p&gt;Ensure the library works well with your chosen JavaScript framework. While many libraries focus on React, some offer excellent support for Vue, Angular, or Svelte.&lt;/p&gt;

&lt;h3&gt;
  
  
  Customization Options
&lt;/h3&gt;

&lt;p&gt;The ability to modify components without fighting the framework is essential. Look for libraries that provide clear customization APIs and don't lock you into specific design decisions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Bundle Size Impact
&lt;/h3&gt;

&lt;p&gt;Consider how the framework affects your application's bundle size. Headless components and tree-shakeable libraries often provide better performance optimization opportunities.&lt;/p&gt;

&lt;h2&gt;
  
  
  Looking Ahead
&lt;/h2&gt;

&lt;p&gt;The Tailwind CSS component ecosystem continues evolving, with new frameworks and existing ones adapting to changing developer needs. The trend toward truly open-source solutions has fostered innovation and improved code quality across the ecosystem.&lt;/p&gt;

&lt;p&gt;When evaluating these frameworks for your next project, remember that the best choice depends on your specific needs:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;For a balance of semantic classes and JavaScript functionality, FlyonUI offers a comprehensive solution&lt;/li&gt;
&lt;li&gt;For rapid prototyping and quick wins, DaisyUI provides an excellent starting point&lt;/li&gt;
&lt;li&gt;When maximum control is needed, shadcn/ui's copy-paste approach provides unmatched flexibility&lt;/li&gt;
&lt;li&gt;For enterprise applications, Preline UI delivers a robust foundation with professional-grade components&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The future looks promising for open-source Tailwind component frameworks, with an increasing focus on accessibility, performance, and developer experience. We expect to see even more innovative component distribution and customization approaches as these libraries mature.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;The rise of open-source Tailwind CSS component frameworks has democratized access to high-quality UI components while promoting transparency and community collaboration. Whether you're building a small project or an extensive enterprise application, these frameworks offer compelling alternatives to commercial solutions.&lt;/p&gt;

&lt;p&gt;Remember that the best framework for your project isn't necessarily the one with the most components or features but the one that best aligns with your team's workflow and project requirements. Experiment with different options and contribute to the communities that resonate with your development philosophy.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This article reflects the state of Tailwind CSS component frameworks as of early 2025. Given the rapid evolution of frontend development, check the latest documentation and community discussions when deciding.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>tailwindcss</category>
      <category>ui</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Crafting a Theme-Toggle Flutter App: Switch Between Light and Dark Modes with Ease</title>
      <dc:creator>Brylie Christopher Oxley</dc:creator>
      <pubDate>Tue, 07 Nov 2023 06:53:26 +0000</pubDate>
      <link>https://dev.to/brylie/crafting-a-theme-toggle-flutter-app-switch-between-light-and-dark-modes-with-ease-99e</link>
      <guid>https://dev.to/brylie/crafting-a-theme-toggle-flutter-app-switch-between-light-and-dark-modes-with-ease-99e</guid>
      <description>&lt;p&gt;As more users come to expect a customizable viewing experience in their apps, providing a light/dark mode toggle has become a staple in app development. Flutter, with its rich set of widgets and properties, makes this not only possible but pleasantly straightforward. In this post, we'll walk through how to add a theme toggle to your Flutter app, complete with intuitive sun and moon icons.&lt;/p&gt;

&lt;p&gt;Let's start by setting the stage with our main function and &lt;code&gt;DarkLightApp&lt;/code&gt; widget. We launch our app with &lt;code&gt;runApp(const DarkLightApp())&lt;/code&gt;, which serves as the entry point. Our &lt;code&gt;DarkLightApp&lt;/code&gt; is a &lt;code&gt;StatefulWidget&lt;/code&gt; because theme toggling will change the app's state.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;runApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;DarkLightApp&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;DarkLightApp&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;StatefulWidget&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;DarkLightApp&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="nd"&gt;@override&lt;/span&gt;
  &lt;span class="n"&gt;_DarkLightAppState&lt;/span&gt; &lt;span class="n"&gt;createState&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;_DarkLightAppState&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, we define &lt;code&gt;_DarkLightAppState&lt;/code&gt; to hold our theme state. We initialize our theme mode to dark with &lt;code&gt;ThemeMode _themeMode = ThemeMode.dark&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;_DarkLightAppState&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;State&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;DarkLightApp&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;ThemeMode&lt;/span&gt; &lt;span class="n"&gt;_themeMode&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;ThemeMode&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;dark&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;...&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Our &lt;code&gt;_toggleTheme&lt;/code&gt; function takes a boolean &lt;code&gt;isOn&lt;/code&gt; and sets the theme mode to light or dark, depending on the switch's position. This is where &lt;code&gt;setState&lt;/code&gt; shines, notifying the framework to redraw the widget with the updated theme mode.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;_toggleTheme&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;bool&lt;/span&gt; &lt;span class="n"&gt;isOn&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;_themeMode&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;isOn&lt;/span&gt; &lt;span class="o"&gt;?&lt;/span&gt; &lt;span class="n"&gt;ThemeMode&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;light&lt;/span&gt; &lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="n"&gt;ThemeMode&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;dark&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the &lt;code&gt;build&lt;/code&gt; method, we craft our &lt;code&gt;MaterialApp&lt;/code&gt;, which now includes the theme toggling logic. By setting &lt;code&gt;debugShowCheckedModeBanner&lt;/code&gt; to &lt;code&gt;false&lt;/code&gt;, we ensure a clean UI without the debug tag.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="nd"&gt;@override&lt;/span&gt;
&lt;span class="n"&gt;Widget&lt;/span&gt; &lt;span class="nf"&gt;build&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BuildContext&lt;/span&gt; &lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;MaterialApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nl"&gt;title:&lt;/span&gt; &lt;span class="s"&gt;'Dark/Light App'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="nl"&gt;debugShowCheckedModeBanner:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;...&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For our themes, we define both &lt;code&gt;darkTheme&lt;/code&gt; and &lt;code&gt;theme&lt;/code&gt;. The &lt;code&gt;darkTheme&lt;/code&gt; uses &lt;code&gt;Brightness.dark&lt;/code&gt;, while &lt;code&gt;theme&lt;/code&gt; uses a color scheme seeded with blue for light mode.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="nl"&gt;darkTheme:&lt;/span&gt; &lt;span class="n"&gt;ThemeData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="nl"&gt;brightness:&lt;/span&gt; &lt;span class="n"&gt;Brightness&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;dark&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;),&lt;/span&gt;
&lt;span class="nl"&gt;theme:&lt;/span&gt; &lt;span class="n"&gt;ThemeData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="nl"&gt;colorScheme:&lt;/span&gt; &lt;span class="n"&gt;ColorScheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;fromSeed&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;seedColor:&lt;/span&gt; &lt;span class="n"&gt;Colors&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="nl"&gt;useMaterial3:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;),&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, the star of our UI: the &lt;code&gt;Scaffold&lt;/code&gt; within &lt;code&gt;MaterialApp&lt;/code&gt;'s &lt;code&gt;home&lt;/code&gt;. The &lt;code&gt;AppBar&lt;/code&gt; not only holds our title but also a &lt;code&gt;Row&lt;/code&gt; of &lt;code&gt;Icons&lt;/code&gt; and a &lt;code&gt;Switch&lt;/code&gt; that control the theme mode.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="nl"&gt;home:&lt;/span&gt; &lt;span class="n"&gt;Scaffold&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="nl"&gt;appBar:&lt;/span&gt; &lt;span class="n"&gt;AppBar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nl"&gt;title:&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'Dark/Light App'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="nl"&gt;actions:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
      &lt;span class="n"&gt;Icon&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Icons&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;dark_mode&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="n"&gt;Switch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="nl"&gt;value:&lt;/span&gt; &lt;span class="n"&gt;_themeMode&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="n"&gt;ThemeMode&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;light&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="nl"&gt;onChanged:&lt;/span&gt; &lt;span class="n"&gt;_toggleTheme&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="n"&gt;Icon&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Icons&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;light_mode&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="nl"&gt;body:&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;Center&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nl"&gt;child:&lt;/span&gt; &lt;span class="n"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'Hello World'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="p"&gt;),&lt;/span&gt;
&lt;span class="p"&gt;),&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;Switch&lt;/code&gt; widget toggles the theme mode and, flanked by the sun (&lt;code&gt;Icons.light_mode&lt;/code&gt;) and moon (&lt;code&gt;Icons.dark_mode&lt;/code&gt;) icons, provides a clear visual cue for its function.&lt;/p&gt;

&lt;p&gt;By using Flutter's &lt;code&gt;ThemeData&lt;/code&gt; and &lt;code&gt;ThemeMode&lt;/code&gt;, we created a seamless way to allow users to switch between light and dark themes. This not only caters to their visual preferences but also can help save battery life on OLED screens and reduce eye strain in low-light conditions.&lt;/p&gt;

&lt;p&gt;Implementing a theme toggle in your Flutter app not only enhances the user experience but also showcases the dynamic capabilities of your app. With just a few lines of code, you can give your users the power to choose their preferred theme, making your app more inclusive and user-friendly.&lt;/p&gt;

&lt;p&gt;Happy coding!&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>programming</category>
      <category>ux</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>The Role of Software Engineers in Combatting Climate Change</title>
      <dc:creator>Brylie Christopher Oxley</dc:creator>
      <pubDate>Thu, 15 Jun 2023 11:29:17 +0000</pubDate>
      <link>https://dev.to/brylie/the-role-of-software-engineers-in-combating-climate-change-3h34</link>
      <guid>https://dev.to/brylie/the-role-of-software-engineers-in-combating-climate-change-3h34</guid>
      <description>&lt;p&gt;Climate change is a global issue affecting everyone on this planet. It is one of the most significant challenges that we are facing today. The effects of climate change can be devastating, and we need to take urgent action to combat it. Software engineers can play a significant role in combating climate change. In this article, we will discuss the role of software engineers in combating climate change.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Develop Sustainable Software&lt;/li&gt;
&lt;li&gt;Participate in climate-change hackathons&lt;/li&gt;
&lt;li&gt;Collaborate with climate scientists&lt;/li&gt;
&lt;li&gt;Influence Public Policy&lt;/li&gt;
&lt;li&gt;
Tools and Resources for Sustainable Software Development

&lt;ul&gt;
&lt;li&gt;Energy-Efficient Coding Libraries&lt;/li&gt;
&lt;li&gt;Tools for Measuring Energy Consumption&lt;/li&gt;
&lt;li&gt;Tutorials and Courses&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

Tangible Benefits of Combating Climate Change for Software Developers

&lt;ul&gt;
&lt;li&gt;Skill Enhancement and Career Advancement&lt;/li&gt;
&lt;li&gt;Increased Efficiency and Cost Savings&lt;/li&gt;
&lt;li&gt;Networking and Collaboration&lt;/li&gt;
&lt;li&gt;Making a Positive Impact&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;Roadmap for an Environmentally-Focused Engineering Career&lt;/li&gt;

&lt;li&gt;Call to Action&lt;/li&gt;

&lt;/ul&gt;

&lt;h2&gt;
  
  
  Develop Sustainable Software
&lt;/h2&gt;

&lt;p&gt;Software engineers can develop sustainable software that is environmentally friendly. Sustainable software is designed to minimize the impact on the environment. It is designed to be energy-efficient, use fewer resources, and have a minimal carbon footprint. For example, software engineers can develop software that uses less power, which can reduce the energy consumption of a data center. They can also develop software for low-power devices like smartphones and tablets.&lt;/p&gt;

&lt;p&gt;Software engineers can develop sustainable software by implementing several practices and technologies. Here are a few examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Energy-efficient algorithms&lt;/strong&gt;: Develop algorithms requiring less computation or parallel processing to reduce energy consumption.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Virtualization&lt;/strong&gt;: Use virtualization technologies to consolidate servers and reduce the number of physical servers required, reducing energy consumption.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cloud computing&lt;/strong&gt;: Moving applications and data to the cloud can help reduce energy consumption by leveraging economies of scale.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Optimizing code&lt;/strong&gt;: Optimize code to reduce CPU usage and memory consumption, which can lead to energy savings.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Energy-aware programming&lt;/strong&gt;: Use energy-aware programming techniques to optimize energy consumption, such as reducing screen brightness on mobile devices.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By incorporating these practices into their software development projects, software engineers can contribute to combating climate change by reducing the carbon footprint of their software.&lt;/p&gt;

&lt;h2&gt;
  
  
  Participate in climate-change hackathons
&lt;/h2&gt;

&lt;p&gt;Hackathons focused on climate modeling can be an excellent way for developers to get involved and contribute to open science. These events bring together experts from different fields to work on climate modeling projects and develop innovative solutions.&lt;/p&gt;

&lt;p&gt;Here are some climate modeling hackathons that focus on public participation in science and promoting a sustainable future:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Hack4Climate&lt;/strong&gt;: An annual hackathon that aims to create solutions to combat climate change and promote a sustainable future.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Climathon&lt;/strong&gt;: A global movement that brings together cities, innovators, and businesses to find solutions to climate change challenges.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Earth Hacks&lt;/strong&gt;: A hackathon focusing on creating solutions to environmental problems, including climate change.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hack the Planet&lt;/strong&gt;: A hackathon that focuses on finding solutions to mitigate the effects of climate change.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;EcoHack&lt;/strong&gt;: A hackathon that brings developers, designers, and sustainability experts together to create solutions for a sustainable future.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Participating in these hackathons is an excellent way for developers to get involved in climate modeling and contribute to promoting a sustainable future.&lt;/p&gt;

&lt;h2&gt;
  
  
  Collaborate with climate scientists
&lt;/h2&gt;

&lt;p&gt;Collaboration with climate scientists can help developers better understand the challenges of climate modeling and how they can contribute to open science. By working closely with climate scientists, developers can gain insights into the data and models used in climate research and contribute to open science by improving these models and making them more accessible.&lt;/p&gt;

&lt;p&gt;Software engineers can help develop &lt;strong&gt;climate models&lt;/strong&gt; that can help predict future weather patterns. These models can help us better understand the impact of climate change and develop strategies to combat it. Climate models can help us predict the effects of rising sea levels, increased temperatures, and extreme weather events. Software engineers can design and develop these models, which can help us make informed decisions about combatting climate change.&lt;/p&gt;

&lt;p&gt;Many open-source climate modeling software projects accept contributions from developers. Contributing to these projects can help improve the accuracy of climate models and make them more accessible to researchers and policymakers.&lt;/p&gt;

&lt;p&gt;Here are a few open-source climate modeling software projects or initiatives:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://www.cesm.ucar.edu/" rel="noopener noreferrer"&gt;Community Earth System Model (CESM)&lt;/a&gt;&lt;/strong&gt;: is a fully coupled global climate model developed collaboratively by the research community. It is primarily supported by the National Science Foundation (NSF) and is maintained by the Climate and Global Dynamics Laboratory (CGD) at the National Center for Atmospheric Research (NCAR). The CESM project has a public code repository on GitHub that developers can contribute to.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="http://climateprediction.net/" rel="noopener noreferrer"&gt;ClimatePrediction.net&lt;/a&gt;&lt;/strong&gt;: is a volunteer computing climate modeling project. They run climate models on people's home computers to help answer questions about how climate change affects our world. The data generated from these models are then sent back and incorporated into the climate prediction projects. This project is run by the University of Oxford and the Open University.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The Climate Data Initiative&lt;/strong&gt;: An initiative launched by the White House to make climate data more accessible and valuable to researchers, businesses, and the public. The initiative includes several open-data projects that developers can contribute to.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://www.giss.nasa.gov/tools/modelE/" rel="noopener noreferrer"&gt;The Goddard Institute for Space Studies (GISS) ModelE&lt;/a&gt;&lt;/strong&gt;: A global climate model developed by NASA's Goddard Institute for Space Studies. The GISS series of coupled atmosphere-ocean models use a framework called ModelE, which can simulate many different configurations of Earth System Models. This series has been used since 2004. The GISS ModelE project has a public code repository on GitHub that developers can contribute to.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://www.ecmwf.int/en/about" rel="noopener noreferrer"&gt;The European Centre for Medium-Range Weather Forecasts (ECMWF)&lt;/a&gt;&lt;/strong&gt;: A European intergovernmental organization that provides numerical weather predictions to its member states. The ECMWF provides a public data archive for developers to develop and test climate models.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://www.cesm.ucar.edu/models/ccsm" rel="noopener noreferrer"&gt;The Community Climate System Model (CCSM)&lt;/a&gt;&lt;/strong&gt;: A suite of climate models developed by the National Center for Atmospheric Research (NCAR) and supported by the National Science Foundation (NSF).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://www.mmm.ucar.edu/models/wrf" rel="noopener noreferrer"&gt;The Weather Research and Forecasting Model (WRF)&lt;/a&gt;&lt;/strong&gt; is a state-of-the-art mesoscale numerical weather prediction system designed for atmospheric research and operational forecasting applications. It's currently in operational use at the National Centers for Environmental Prediction (NCEP) and other national meteorological centers and in real-time forecasting configurations at laboratories, universities, and companies. The WRF project has a public code repository on GitHub that developers can contribute to.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By contributing to these projects and initiatives, developers can collaborate with climate scientists to tackle significant issues with climate change and make a difference in the fight against climate change.&lt;/p&gt;

&lt;h2&gt;
  
  
  Influence Public Policy
&lt;/h2&gt;

&lt;p&gt;Software developers have a unique perspective on the practicalities of implementing sustainable software practices, and this insight is valuable in shaping public policy. Developers can contribute to policy discussions, advocate for legislation that supports sustainable software practices, and work on open-source projects that provide the tools and data needed for informed policy-making.&lt;/p&gt;

&lt;p&gt;Here are a few ways that developers can influence public policy:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Engage in Discussions&lt;/strong&gt;: Developers can participate in public forums, write articles, or use social media to discuss the impact of software on the environment and the importance of sustainable practices. By sharing their knowledge and experiences, they can help inform the public and policymakers about these critical issues.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Advocate for Legislation&lt;/strong&gt;: Developers can advocate for laws and regulations that promote energy-efficient coding practices and sustainable software development. This could involve writing to local representatives, signing petitions, or supporting organizations that lobby for these issues.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Contribute to Open-Source Projects&lt;/strong&gt;: Many open-source projects provide vital data and tools for climate change research and policy-making. By contributing to these projects, developers can help improve the resources available for creating informed climate policies.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Partnerships with Policymakers&lt;/strong&gt;: Developers can also collaborate directly with policymakers by providing technical advice or developing software tools for policy analysis.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Remember, policy change often starts with awareness. By using their skills and knowledge, developers have the power to drive significant policy changes that support a sustainable future.&lt;/p&gt;

&lt;h2&gt;
  
  
  Tools and Resources for Sustainable Software Development
&lt;/h2&gt;

&lt;p&gt;Whether you're just starting your journey toward sustainable software development or looking to refine your skills, numerous resources can guide you. From energy-efficient coding libraries to tools for measuring the energy consumption of software, the following resources can help developers create more sustainable, climate-friendly software:&lt;/p&gt;

&lt;h3&gt;
  
  
  Energy-Efficient Coding Libraries
&lt;/h3&gt;

&lt;p&gt;Libraries like Google's &lt;a href="https://www.tensorflow.org/lite/guide" rel="noopener noreferrer"&gt;TensorFlow Lite&lt;/a&gt; and &lt;a href="https://arxiv.org/abs/1905.11946" rel="noopener noreferrer"&gt;Facebook's EfficientNet&lt;/a&gt; are designed to create efficient machine learning models for mobile and the web. They optimize for performance and size, making them energy-efficient options.&lt;/p&gt;

&lt;h3&gt;
  
  
  Tools for Measuring Energy Consumption
&lt;/h3&gt;

&lt;p&gt;Tools such as &lt;a href="https://www.intel.com/content/www/us/en/developer/tools/oneapi/vtune-profiler.html" rel="noopener noreferrer"&gt;Intel's Energy Profiler&lt;/a&gt; or &lt;a href="https://www.joulescope.com/" rel="noopener noreferrer"&gt;Joulescope&lt;/a&gt; can help you understand the energy consumption of your software and embedded hardware. These tools provide insights into how your code uses energy, allowing you to identify areas for optimization.&lt;/p&gt;

&lt;h3&gt;
  
  
  Tutorials and Courses
&lt;/h3&gt;

&lt;p&gt;Many online resources can help you learn how to code more sustainably. For instance, &lt;a href="https://greensoftware.foundation/" rel="noopener noreferrer"&gt;The Green Software Foundation&lt;/a&gt; offers best practices, case studies, and other resources to promote sustainable software engineering. Websites like Coursera, edX, and Udacity also offer courses on sustainable software development and related topics.&lt;/p&gt;

&lt;p&gt;These resources are just the starting point—there's a wealth of knowledge and tools for developers interested in sustainable software development. By leveraging these resources, developers can create powerful, efficient, and environmentally friendly software.&lt;/p&gt;

&lt;h2&gt;
  
  
  Tangible Benefits of Combating Climate Change for Software Developers
&lt;/h2&gt;

&lt;p&gt;While the benefits of sustainable software development to the environment are clear, the advantages for software developers themselves are just as significant. By engaging in sustainable practices and initiatives, software developers stand to gain valuable skills, experiences, and opportunities that can enhance their careers and personal growth. Here are a few concrete benefits that may inspire software developers to dive into the realm of climate change mitigation:&lt;/p&gt;

&lt;h3&gt;
  
  
  Skill Enhancement and Career Advancement
&lt;/h3&gt;

&lt;p&gt;Sustainable software development requires a unique set of skills and knowledge. Developers can expand their skill sets and differentiate themselves in the job market by learning to develop energy-efficient algorithms, optimize code for low energy consumption, and employ virtualization and cloud computing effectively.&lt;/p&gt;

&lt;p&gt;Additionally, contributing to open-source climate modeling projects allows developers to work on complex, high-impact problems. These experiences can be significant resume boosters and lead to advanced career opportunities in data science, machine learning, and high-performance computing.&lt;/p&gt;

&lt;h3&gt;
  
  
  Increased Efficiency and Cost Savings
&lt;/h3&gt;

&lt;p&gt;Sustainability practices often align with principles of efficient software development. For example, energy-efficient code is typically faster and uses fewer resources, which can lead to significant cost savings, especially at scale. This is not only beneficial for the environment but also for the bottom line of businesses.&lt;/p&gt;

&lt;h3&gt;
  
  
  Networking and Collaboration
&lt;/h3&gt;

&lt;p&gt;Engaging in climate change initiatives offers excellent opportunities for networking and collaboration. Participating in hackathons or contributing to open-source projects allows developers to connect with experts from diverse fields, including climate science, data analysis, and policy-making. These collaborations can lead to lasting professional relationships and open new opportunities.&lt;/p&gt;

&lt;h3&gt;
  
  
  Making a Positive Impact
&lt;/h3&gt;

&lt;p&gt;Last, contributing to the fight against climate change can bring a strong sense of purpose and fulfillment. As a software developer, you have the potential to make a significant positive impact on one of the most pressing issues of our time. Your work can directly contribute to developing climate models that inform policy decisions or creating sustainable software that reduces carbon emissions. This sense of purpose can lead to increased job satisfaction and motivation.&lt;/p&gt;

&lt;h2&gt;
  
  
  Roadmap for an Environmentally-Focused Engineering Career
&lt;/h2&gt;

&lt;p&gt;Starting a career in environmentally-focused software engineering may seem daunting, but with a clear roadmap, you can navigate this path effectively. Here's a step-by-step guide to help you get started:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Equip Yourself with Necessary Knowledge&lt;/strong&gt;: Start by educating yourself about climate change, its causes, and its impacts. This understanding will help you grasp the urgency of the issue and the role that technology can play in mitigating it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Learn About Sustainable Software Engineering Practices&lt;/strong&gt;: This includes familiarizing yourself with energy-efficient algorithms, optimizing code for energy efficiency, understanding the principles of green software engineering, and learning how to measure the environmental impact of your software. Many online resources and courses are available that cover these topics.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hands-On Experience&lt;/strong&gt;: Participate in environmentally-focused hackathons or projects. These events offer practical experience and expose you to the latest ideas and technologies in the field. They also provide opportunities to network with like-minded individuals and organizations.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Contribute to Open Source Projects&lt;/strong&gt;: Open source projects like the Community Earth System Model (CESM), the Goddard Institute for Space Studies (GISS) ModelE, and the Weather Research and Forecasting Model (WRF) are great platforms to contribute to. Working on such projects will help you understand the real-world applications of your skills and contribute to meaningful climate change solutions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Collaborate with Climate Scientists&lt;/strong&gt;: Software engineers and climate scientists can achieve more by working together. Seek opportunities to work with climate scientists, understand their data and models, and contribute to their refinement and accessibility.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Continuous Learning and Improvement&lt;/strong&gt;: The field of green software engineering is dynamic and evolving. Stay updated with the latest research, tools, and practices. Attend seminars, workshops, and conferences on sustainable software development and climate change.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Advocate and Educate&lt;/strong&gt;: As you gain experience and knowledge, share it with others. Advocate for sustainable practices within your organization, write blog posts, give talks, and educate others about the importance of sustainable software engineering.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Remember, this is a journey. Each step you take towards becoming an environmentally-focused software engineer makes a difference. In the wise words of Lao Tzu, "A journey of a thousand miles begins with a single step." Start today and code for a better tomorrow.&lt;/p&gt;

&lt;h2&gt;
  
  
  Call to Action
&lt;/h2&gt;

&lt;p&gt;Now that you understand how software development intersects with climate change and sustainability, it's time to take action. As a software developer, you have the power to impact the future of our planet directly.&lt;/p&gt;

&lt;p&gt;Whether it's optimizing your code to be more energy-efficient, contributing to open-source climate modeling projects, or integrating sustainable practices into your workplace, every action counts. The tools and resources are at your fingertips—use them to create powerful, efficient, and environmentally conscious software.&lt;/p&gt;

&lt;p&gt;Remember, the code we write today will shape the world of tomorrow. Let's code for a sustainable future.&lt;/p&gt;

</description>
      <category>climate</category>
      <category>science</category>
      <category>opensource</category>
      <category>career</category>
    </item>
    <item>
      <title>Enhancing GitHub Copilot's Efficiency: Providing Meaningful Context</title>
      <dc:creator>Brylie Christopher Oxley</dc:creator>
      <pubDate>Fri, 02 Jun 2023 06:45:46 +0000</pubDate>
      <link>https://dev.to/brylie/enhancing-github-copilots-efficiency-providing-meaningful-context-4fd9</link>
      <guid>https://dev.to/brylie/enhancing-github-copilots-efficiency-providing-meaningful-context-4fd9</guid>
      <description>&lt;p&gt;Hello, fellow coders!&lt;/p&gt;

&lt;p&gt;Let's will delve into a simple yet crucial aspect of leveraging the power of AI in our coding journey, mainly focusing on GitHub Copilot, an AI-powered coding assistant.&lt;/p&gt;

&lt;h2&gt;
  
  
  Contents
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Why Context Matters in AI Coding&lt;/li&gt;
&lt;li&gt;The Power of Import Statements&lt;/li&gt;
&lt;li&gt;More Than Just Imports&lt;/li&gt;
&lt;li&gt;Code example&lt;/li&gt;
&lt;li&gt;The Human Touch&lt;/li&gt;
&lt;li&gt;Conclusion&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Why Context Matters in AI Coding
&lt;/h2&gt;

&lt;p&gt;Just like humans, AI tools like GitHub Copilot need a good amount of context to provide the best possible assistance.&lt;/p&gt;

&lt;p&gt;Suppose you ask Copilot to generate code, such as a unit test. It will produce a better result if it understands the broader scenario. That's where 'import statements' come in handy.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Power of Import Statements
&lt;/h2&gt;

&lt;p&gt;In most programming languages, such as Dart, Python, or JavaScript, we use import statements to include libraries or modules in our project. These imports allow us to utilize prewritten code, like functions or classes, while keeping our project organized. For instance, if you plan to manipulate data in Python, you might import pandas at the start of your code.&lt;/p&gt;

&lt;p&gt;Adding these import statements before asking Copilot to generate code gives the AI a clear idea of what resources it has at hand. So, if you've imported pandas, Copilot knows it can use pandas' functions in the code it generates!&lt;/p&gt;

&lt;h2&gt;
  
  
  More Than Just Imports
&lt;/h2&gt;

&lt;p&gt;While imports are a good start, you can provide even more context. For example, naming your variables meaningfully, specifying their types, or writing explicit comments about what you want to do can help Copilot generate more accurate and helpful code.&lt;/p&gt;

&lt;p&gt;Imagine if a friend asked you to write a story but gave no details. That's like being asked to find the 'most whimsical seagull' on a beach. But, if they told you they wanted a saga about a seagull who moonlights as a detective solving the mystery of missing french fries (plot twist, the seagull is also the thief), you'd instantly have more direction, wouldn't you? Similarly, the more detail you give Copilot, the better it can assist you.&lt;/p&gt;

&lt;h2&gt;
  
  
  Code example
&lt;/h2&gt;

&lt;p&gt;A quick code example will help illustrate these prompting techniques.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="c1"&gt;# Importing Python's built-in `re` module for regex operations 
# since it will be useful
&lt;/span&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;re&lt;/span&gt;

&lt;span class="c1"&gt;# We have a text description of our cozy, secluded beach town.
# Perhaps it holds some clues about our missing french fries!
&lt;/span&gt;&lt;span class="n"&gt;a_cozy_secluded_beach_town&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
Welcome to our cozy, secluded beach town 🏖️. With a vibrant 
community of seagulls, it&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;s well known for its delectable 
boardwalk french fries, which tend to mysteriously disappear 
occasionally.
&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;

&lt;span class="c1"&gt;# Now, let's create a function to hunt down mentions of these famous french fries.
&lt;/span&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;find_french_fries_in_text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
    🔎 This function searches for the term &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;french fries&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt; 
    in the provided text.
    💬 It prints a message indicating whether the fries 
    have been found or not.
    &lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;
    &lt;span class="c1"&gt;# Let's ask Copilot to write the regex search for us.
&lt;/span&gt;    &lt;span class="c1"&gt;# Remember, GitHub Copilot, we are searching for 'french fries'.
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With this setup, you can use GitHub Copilot to generate the following code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;    &lt;span class="n"&gt;match&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;re&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;search&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;french fries&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;text&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;match&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;🍟 We&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;ve found the french fries!&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;else&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="nf"&gt;rprint&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;😭 The fries are still missing!&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Admittedly, the amount of prompting outweighs the generated code in this example. However, you can imagine a more complex situation where the desired code output isn't as straightforward as finding "french fries" in a description of a beach town. So remember, the more breadcrumbs (or should we say crispy fries?) you leave for Copilot, the better it can help you!&lt;/p&gt;

&lt;h2&gt;
  
  
  The Human Touch
&lt;/h2&gt;

&lt;p&gt;As impressive as AI is, remember it's not perfect (and nor are we.) It's important to always review the code that Copilot generates, similarly to how we have peer-review for our code. This way, you help ensure the code is correct, efficient, and secure.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;In summary, GitHub Copilot is a fantastic tool to enhance our coding productivity. However, it is most effective when provided with ample context. And, like any other tool, it should be used with a healthy dose of human judgment and review.&lt;/p&gt;

&lt;p&gt;So, next time you use GitHub Copilot, try these tips and see how they can help you code more efficiently!&lt;/p&gt;

&lt;p&gt;Keep coding and stay curious!&lt;/p&gt;

</description>
      <category>ai</category>
      <category>github</category>
      <category>githubcopilot</category>
      <category>promptengineering</category>
    </item>
    <item>
      <title>Steering the Future: An Introduction to Artificial Intelligence Alignment</title>
      <dc:creator>Brylie Christopher Oxley</dc:creator>
      <pubDate>Wed, 31 May 2023 12:27:15 +0000</pubDate>
      <link>https://dev.to/brylie/steering-the-future-an-introduction-to-artificial-intelligence-alignment-557e</link>
      <guid>https://dev.to/brylie/steering-the-future-an-introduction-to-artificial-intelligence-alignment-557e</guid>
      <description>&lt;p&gt;Artificial Intelligence (AI) has become an integral part of our daily lives, with applications spanning various industries such as healthcare, finance, transportation, and entertainment. As AI systems become more complex and autonomous, ensuring they act according to human values and societal expectations becomes a paramount concern. This concept is often referred to as "AI alignment." In this article, we will delve into the heart of AI alignment, exploring its significance, challenges, and strategies to solve it.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is AI Alignment?
&lt;/h2&gt;

&lt;p&gt;AI alignment is a field of research primarily concerned with ensuring that the behavior of AI systems is in line with human values. The goal is to ensure that as AI advances, the systems we create are not just competent but also beneficial to us and act in ways that we deem acceptable, ethical, and advantageous.&lt;/p&gt;

&lt;p&gt;AI alignment involves two crucial components: designing AI that wants to do what humans wish to (the "value alignment" problem) and creating AI that understands what humans want to do (the "interpretation" problem). Both are considerably challenging but also profoundly essential to ensure advanced AI's safe and beneficial use.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Importance of AI Alignment
&lt;/h2&gt;

&lt;p&gt;AI alignment is a critical concern for several reasons:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Safety&lt;/strong&gt;: Misaligned AI could potentially pose risks. Even if an AI system is not inherently malicious, it might inadvertently cause harm if its objectives aren't correctly aligned with human values.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Ethics&lt;/strong&gt;: AI systems are being deployed in increasing sectors, making decisions that affect human lives. Therefore, these systems must reflect our ethical standards and societal norms.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Long-term Future&lt;/strong&gt;: As we create more advanced and general AI systems, the consequences of misalignment could become increasingly severe, possibly life threatening. Thus, it's vital to proactively address AI alignment.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Challenges of AI Alignment
&lt;/h2&gt;

&lt;p&gt;AI alignment is an active research field due to several significant challenges:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Complexity of Human Values&lt;/strong&gt;: Human values are complex, context-dependent, and often implicit, making them challenging to define and encode into an AI system.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Value Extrapolation&lt;/strong&gt;: Even if we manage to encode our values into an AI system, those values might need to evolve as our society progresses, requiring the AI system to understand and extrapolate these changes appropriately.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Diverse Perspectives&lt;/strong&gt;: Humans do not all share the same values or priorities, creating challenges for designing universally acceptable AI systems.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Current Strategies and Research Directions
&lt;/h2&gt;

&lt;p&gt;AI researchers are exploring various strategies to address the problem of AI alignment:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Inverse Reinforcement Learning (IRL)&lt;/strong&gt;: IRL is a technique to infer the desired goals from observed behavior. The hope is to apply similar methods to infer human values and implement them into AI systems.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Cooperative Inverse Reinforcement Learning (CIRL)&lt;/strong&gt;: CIRL is an extension of IRL where both the AI system and the human are seen as part of the same team, collaborating to achieve the desired goal.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Interpretability Research&lt;/strong&gt;: Understanding how AI makes decisions can help humans correct misaligned behavior. Hence, there's significant interest in making AI systems more interpretable.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Debate and Amplification&lt;/strong&gt;: These are techniques where multiple AI systems are pitted against each other to debate a given question or take turns improving each other's answers under human supervision.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;AI alignment is our guide star in the fast-moving world of artificial intelligence. It's a nuanced issue, but with forethought and persistence we can plot the course. By defining our values, taking measured actions, and doing careful research, we're sure to make AI our powerful ally in building a brighter, more prosperous future for all.&lt;/p&gt;

&lt;h2&gt;
  
  
  Further reading
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Russell, S., Dewey, D., &amp;amp; Tegmark, M. (2015). Research Priorities for Robust and Beneficial Artificial Intelligence. AI Magazine, 36(4), 105–114. &lt;a href="https://www.aaai.org/ojs/index.php/aimagazine/article/view/2577" rel="noopener noreferrer"&gt;Link&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Hadfield-Menell, D., Russell, S. J., Abbeel, P., &amp;amp; Dragan, A. (2016). Cooperative inverse reinforcement learning. In Advances in neural information processing systems. &lt;a href="https://people.eecs.berkeley.edu/~russell/papers/russell-nips16-cirl.pdf" rel="noopener noreferrer"&gt;Link&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Amodei, D., Olah, C., Steinhardt, J., Christiano, P., Schulman, J., &amp;amp; Mané, D. (2018). Concrete Problems in AI Safety. ArXiv, abs/1606.06565. &lt;a href="https://arxiv.org/abs/1606.06565" rel="noopener noreferrer"&gt;Link&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Anthropic. (2023) Core Views on AI Safety: When, Why, What, and How. Anthropic &lt;a href="https://www.anthropic.com/index/core-views-on-ai-safety" rel="noopener noreferrer"&gt;Link&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;OpenAI. (2019). Our approach to alignment research. OpenAI Blog. &lt;a href="https://openai.com/blog/our-approach-to-alignment-research" rel="noopener noreferrer"&gt;Link&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Irving, G., Christiano, P. (2019). AI Safety via Debate. ArXiv, abs/1805.00899. &lt;a href="https://arxiv.org/abs/1805.00899" rel="noopener noreferrer"&gt;Link&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>llm</category>
      <category>ai</category>
      <category>ethics</category>
      <category>chatgpt</category>
    </item>
    <item>
      <title>Pagination with Django and Bootstrap 5</title>
      <dc:creator>Brylie Christopher Oxley</dc:creator>
      <pubDate>Mon, 14 Mar 2022 09:56:32 +0000</pubDate>
      <link>https://dev.to/brylie/pagination-with-django-and-bootstrap-5-2bj3</link>
      <guid>https://dev.to/brylie/pagination-with-django-and-bootstrap-5-2bj3</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/HPpgPwTWhxM"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;In this recipe, we will use &lt;a href="https://docs.djangoproject.com/en/4.0/topics/pagination/" rel="noopener noreferrer"&gt;Django pagination&lt;/a&gt; to display a paginated list of &lt;code&gt;Item&lt;/code&gt;s and add &lt;a href="https://getbootstrap.com/" rel="noopener noreferrer"&gt;Bootstrap 5&lt;/a&gt; styles. Replace the &lt;code&gt;Item&lt;/code&gt; class with any Django model in your own project.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5bcbhg6zc7cufs5f27u6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5bcbhg6zc7cufs5f27u6.png" alt="Image description" width="524" height="214"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Create the paginated list
&lt;/h2&gt;

&lt;p&gt;In the View, such as in the &lt;code&gt;get_context&lt;/code&gt; method of a class-based view:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="c1"&gt;# Add these imports at the top of your View file
&lt;/span&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;django.core.paginator&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;Paginator&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;EmptyPage&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;PageNotAnInteger&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;# Then, in the view, such as the get_context method:
&lt;/span&gt;
&lt;span class="c1"&gt;# Get page number from request, 
# default to first page
&lt;/span&gt;&lt;span class="n"&gt;default_page&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
&lt;span class="n"&gt;page&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;request&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;GET&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;page&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;default_page&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;# Get queryset of items to paginate
&lt;/span&gt;&lt;span class="n"&gt;items&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;objects&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="c1"&gt;# Paginate items
&lt;/span&gt;&lt;span class="n"&gt;items_per_page&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;
&lt;span class="n"&gt;paginator&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Paginator&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;items&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;items_per_page&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;items_page&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;paginator&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;page&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;page&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;except&lt;/span&gt; &lt;span class="n"&gt;PageNotAnInteger&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;items_page&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;paginator&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;page&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;default_page&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;except&lt;/span&gt; &lt;span class="n"&gt;EmptyPage&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;items_page&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;paginator&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;page&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;paginator&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;num_pages&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;# Provide filtered, paginated library items
&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;items_page&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;items_page&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Render the paginated items and paginator widget
&lt;/h2&gt;

&lt;p&gt;Once you have passed the paginated items to the template, render the items along with a paginated &lt;a href="https://getbootstrap.com/docs/5.0/components/button-group/" rel="noopener noreferrer"&gt;button group&lt;/a&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jinja"&gt;&lt;code&gt;&lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="nv"&gt;items_page&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
    &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="nv"&gt;item&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nv"&gt;items_page&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"card mb-1"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"card-body"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
              &lt;span class="nt"&gt;&amp;lt;p&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"card-title"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;{{&lt;/span&gt; &lt;span class="nv"&gt;item.title&lt;/span&gt; &lt;span class="cp"&gt;}}&lt;/span&gt;&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;endfor&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;

    &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="nv"&gt;items_page.has_other_pages&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"btn-group"&lt;/span&gt; &lt;span class="na"&gt;role=&lt;/span&gt;&lt;span class="s"&gt;"group"&lt;/span&gt; &lt;span class="na"&gt;aria-label=&lt;/span&gt;&lt;span class="s"&gt;"Item pagination"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="nv"&gt;items_page.has_previous&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"?page=&lt;/span&gt;&lt;span class="cp"&gt;{{&lt;/span&gt; &lt;span class="nv"&gt;items_page.previous_page_number&lt;/span&gt; &lt;span class="cp"&gt;}}&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"btn btn-outline-primary"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;&lt;span class="ni"&gt;&amp;amp;laquo;&lt;/span&gt;&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
        &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;endif&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;

        &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="nv"&gt;page_number&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nv"&gt;items_page.paginator.page_range&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
            &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="nv"&gt;items_page.&lt;/span&gt;&lt;span class="nb"&gt;number&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nv"&gt;page_number&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"btn btn-outline-primary active"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class="nt"&gt;&amp;lt;span&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;{{&lt;/span&gt; &lt;span class="nv"&gt;page_number&lt;/span&gt; &lt;span class="cp"&gt;}}&lt;/span&gt; &lt;span class="nt"&gt;&amp;lt;span&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"sr-only"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;(current)&lt;span class="nt"&gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
            &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"?page=&lt;/span&gt;&lt;span class="cp"&gt;{{&lt;/span&gt; &lt;span class="nv"&gt;page_number&lt;/span&gt; &lt;span class="cp"&gt;}}&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"btn btn-outline-primary"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class="cp"&gt;{{&lt;/span&gt; &lt;span class="nv"&gt;page_number&lt;/span&gt; &lt;span class="cp"&gt;}}&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
            &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;endif&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
        &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;endfor&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;

        &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="nv"&gt;items_page.has_next&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"?page=&lt;/span&gt;&lt;span class="cp"&gt;{{&lt;/span&gt; &lt;span class="nv"&gt;items_page.next_page_number&lt;/span&gt; &lt;span class="cp"&gt;}}&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"btn btn-outline-primary"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;&lt;span class="ni"&gt;&amp;amp;raquo;&lt;/span&gt;&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
        &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;endif&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;endif&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
&lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;No items found.&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
&lt;span class="cp"&gt;{%&lt;/span&gt; &lt;span class="k"&gt;endif&lt;/span&gt; &lt;span class="cp"&gt;%}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>django</category>
      <category>python</category>
      <category>bootstrap</category>
    </item>
    <item>
      <title>Install Flutter on Ubuntu 21.10 with Snap and APT</title>
      <dc:creator>Brylie Christopher Oxley</dc:creator>
      <pubDate>Thu, 24 Feb 2022 11:39:54 +0000</pubDate>
      <link>https://dev.to/brylie/install-flutter-on-ubuntu-2110-with-snap-and-apt-599</link>
      <guid>https://dev.to/brylie/install-flutter-on-ubuntu-2110-with-snap-and-apt-599</guid>
      <description>&lt;p&gt;Follow these steps to install Flutter, Java (OpenJDK), Android Studio, Chromium, and Visual Studio Code on Ubuntu 21.10.&lt;/p&gt;

&lt;p&gt;We use Snap and APT to make it easy to keep these packages up-to-date.&lt;/p&gt;

&lt;h2&gt;
  
  
  Flutter
&lt;/h2&gt;

&lt;p&gt;Install the official &lt;a href="https://snapcraft.io/flutter" rel="noopener noreferrer"&gt;Flutter&lt;/a&gt; Snap package with classic permissions.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;snap &lt;span class="nb"&gt;install &lt;/span&gt;flutter &lt;span class="nt"&gt;--classic&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Java SDK (OpenJRE)
&lt;/h2&gt;

&lt;p&gt;As of this writing, &lt;a href="https://openjdk.java.net/" rel="noopener noreferrer"&gt;OpenJDK&lt;/a&gt; 11 is the default JDK on Ubuntu 21.10.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;apt &lt;span class="nb"&gt;install &lt;/span&gt;default-jdk
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Android Studio
&lt;/h2&gt;

&lt;p&gt;Install &lt;a href="https://snapcraft.io/android-studio" rel="noopener noreferrer"&gt;Android Studio&lt;/a&gt; via Snap with classic permissions.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;snap &lt;span class="nb"&gt;install &lt;/span&gt;android-studio &lt;span class="nt"&gt;--classic&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Chromium
&lt;/h2&gt;

&lt;p&gt;Install the &lt;a href="https://snapcraft.io/chromium" rel="noopener noreferrer"&gt;Chromium browser&lt;/a&gt; via Snap.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;snap &lt;span class="nb"&gt;install &lt;/span&gt;chromium
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  CHROME_EXECUTABLE
&lt;/h3&gt;

&lt;p&gt;Next, set the &lt;code&gt;CHROME_EXECUTABLE&lt;/code&gt; to the Chromium installation path.&lt;/p&gt;

&lt;p&gt;Assuming your default shell is &lt;code&gt;bash&lt;/code&gt;, add the following to &lt;code&gt;.profile&lt;/code&gt; or &lt;code&gt;.bash_profile&lt;/code&gt; if it exists.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt;: you may need to log out and back in after running the following command.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"export CHROME_EXECUTABLE=/snap/bin/chromium"&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; ~/.profile
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Visual Studio Code
&lt;/h2&gt;

&lt;p&gt;Install the &lt;a href="https://snapcraft.io/code" rel="noopener noreferrer"&gt;Visual Studio Code&lt;/a&gt; IDE via Snap.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;snap &lt;span class="nb"&gt;install &lt;/span&gt;code &lt;span class="nt"&gt;--classic&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Flutter extension
&lt;/h3&gt;

&lt;p&gt;Open Visual Studio Code and install the &lt;a href="https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter" rel="noopener noreferrer"&gt;Flutter&lt;/a&gt; extension.&lt;/p&gt;

&lt;h2&gt;
  
  
  Flutter Doctor
&lt;/h2&gt;

&lt;p&gt;Finally, verify that everything was installed correctly by running Flutter Doctor.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;flutter doctor
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;In this quick overview, we have installed a full Flutter development environment in Ubuntu 21.10.&lt;/p&gt;

&lt;p&gt;I hope you enjoy seeing your ideas take flight with Flutter :-)&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>ubuntu</category>
      <category>mobile</category>
      <category>beginners</category>
    </item>
    <item>
      <title>PostgreSQL Foreign Data Wrapper tutorial</title>
      <dc:creator>Brylie Christopher Oxley</dc:creator>
      <pubDate>Fri, 18 Dec 2020 10:20:56 +0000</pubDate>
      <link>https://dev.to/brylie/postgresql-foreign-data-wrapper-2f9m</link>
      <guid>https://dev.to/brylie/postgresql-foreign-data-wrapper-2f9m</guid>
      <description>&lt;p&gt;A PostgreSQL Foreign Data Wrapper (FDW) allows you to write queries against a remote database.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F9h57jhpea1c8igmu1kp5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F9h57jhpea1c8igmu1kp5.png" alt="Alt Text" width="526" height="191"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Considerations
&lt;/h2&gt;

&lt;p&gt;While some FDW tradeoffs are not immediately apparent, at least a few come to mind more readily.&lt;/p&gt;

&lt;h3&gt;
  
  
  Schema drift
&lt;/h3&gt;

&lt;p&gt;The remote schema may change. However, the FDW schema is generated at a single point in time (based on the remote schema). This may lead to the FDW schema being out of sync with the remote schema.&lt;/p&gt;

&lt;p&gt;One solution to this issue would be to re-generate the FDW schema on a periodic basis.&lt;/p&gt;

&lt;h2&gt;
  
  
  User permissions
&lt;/h2&gt;

&lt;p&gt;Each database user needs an individual user mapping for the remote database server. This may not be an issue on a single-user system, but can be a bit more annoying in a multi-user environment.&lt;/p&gt;

&lt;h2&gt;
  
  
  Queries
&lt;/h2&gt;

&lt;p&gt;The following sections outline the queries necessary to connect to a remote database, create a mirror schema, and assign user permissions to the foreign data source.&lt;/p&gt;

&lt;h3&gt;
  
  
  Create FDW extension
&lt;/h3&gt;

&lt;p&gt;Make sure PostgreSQL has the FDW extension enabled.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;create extension if not exists postgres_fdw;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Create FDW server
&lt;/h3&gt;

&lt;p&gt;Create the FDW server by giving it a local name and remote connection details.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;create server &amp;lt;fdw_server_name&amp;gt;
foreign data wrapper postgres_fdw
options (host 'dbms.example.com', dbname 'database_name');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Create mirror schema
&lt;/h3&gt;

&lt;p&gt;Create an empty schema in the local database and populate it with matching table definitions from the remote database schema.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;create schema &amp;lt;local_schema_name&amp;gt;;

import foreign schema &amp;lt;remote_schema_name&amp;gt;
from server &amp;lt;fdw_server_name&amp;gt;
into &amp;lt;local_schema_name&amp;gt;;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Create FDW user mapping
&lt;/h3&gt;

&lt;p&gt;For each user who needs to interact with the foreign server, we need to create a user mapping. &lt;/p&gt;

&lt;p&gt;The local user will have the same permissions on the FDW server as the remote user defined in the user mapping.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;create user mapping for &amp;lt;user_name&amp;gt;
server &amp;lt;fdw_server_name&amp;gt;
options (user 'remote_user_name', password 'remote_user_password');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;PostgreSQL (current) documentation - &lt;a href="https://www.postgresql.org/docs/current/postgres-fdw.html" rel="noopener noreferrer"&gt;postgres_fdw module&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;thoughtbot - &lt;a href="https://thoughtbot.com/blog/postgres-foreign-data-wrapper#handling-schema-changes" rel="noopener noreferrer"&gt;PostgreSQL's Foreign Data Wrapper&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>postgres</category>
      <category>sql</category>
      <category>database</category>
    </item>
    <item>
      <title>Mailchimp makes contact management difficult</title>
      <dc:creator>Brylie Christopher Oxley</dc:creator>
      <pubDate>Wed, 22 May 2019 14:42:53 +0000</pubDate>
      <link>https://dev.to/brylie/mailchimp-makes-contact-management-difficult-1k4m</link>
      <guid>https://dev.to/brylie/mailchimp-makes-contact-management-difficult-1k4m</guid>
      <description>&lt;p&gt;&lt;strong&gt;TLDR:&lt;/strong&gt; Mailchimp should offer a unified 'contacts manager' to help users effectively manage their contact list. This would help reduce waste and honor communications preferences for recipients.&lt;/p&gt;

&lt;h2&gt;
  
  
  Background
&lt;/h2&gt;

&lt;p&gt;While helping our marketing team manage contacts, I learned that we had around 45% - 55% duplicate records across several of what Mailchimp calls "audiences". At first, I was concerned about the data practices of the marketing team, but then I realized that part of the issue was related to the Mailchimp interface. In particular, &lt;strong&gt;Mailchimp doesn't seem to allow customers to manage a unified contacts list&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Current design
&lt;/h2&gt;

&lt;p&gt;The Mailchimp Dashboard menu consists of the following top-level sections:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3293slxg5b2l03qw0x6f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3293slxg5b2l03qw0x6f.png" alt="Mailchimp dashboard menu" width="589" height="47"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Of note, the &lt;strong&gt;Audience&lt;/strong&gt; link is singular, implying that there is one core audience, perhaps broken into overlapping segments (my interpretation). &lt;/p&gt;

&lt;p&gt;Having a segmented audience is easy to understand from a marketing perspective. Conceptually, &lt;em&gt;an audience is all of the people interested in your offering&lt;/em&gt;. Segments would then be audience members grouped into various demographics, useful for tailored communication.&lt;/p&gt;

&lt;h2&gt;
  
  
  Design implications
&lt;/h2&gt;

&lt;p&gt;In practice, &lt;strong&gt;Mailchimp audiences are distinct contact lists that allow duplicate contacts to exist in multiple audiences&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;Contacts can sometimes have opted out of one "audience", having no effect on their communications preferences in another audience. This can cause frustration when contacts receive communications after having opted-out. It can also lower a company's reputation, particularly when users report the company's communications as SPAM.&lt;/p&gt;

&lt;p&gt;Likewise, your company will be billed for duplicate contacts across audiences, as if they were distinct contacts. This might be unnoticeable for smaller contact lists, but is still wasteful (like leaving the lights on when you're not home).&lt;/p&gt;

&lt;h2&gt;
  
  
  Impact
&lt;/h2&gt;

&lt;p&gt;In our case, we had the same contacts in as many as five audiences. This was adding up to several hundred euros a month, just to pay for duplicate contacts.&lt;/p&gt;

&lt;p&gt;After archiving and merging contacts from the multiple duplicate "audiences" that our marketing team had created, we reduced our contact count by almost half!&lt;/p&gt;

&lt;h2&gt;
  
  
  Financial conflict-of-interest
&lt;/h2&gt;

&lt;p&gt;Whenever we use a service company (be it AWS, Mailchimp, etc) that charges based on resource usage, that company has financial incentive to encourage inefficient, or excessive, use of the related resource(s). &lt;/p&gt;

&lt;p&gt;In this case, Mailchimp stands to lose a considerable portion of recurring revenue, if it were to engineer unified contact management and de-duping into its platform. That said, it is not a foregone conclusion that Mailchimp won't offer effective contact management at some point in the future.&lt;/p&gt;

&lt;h2&gt;
  
  
  Not placing blame
&lt;/h2&gt;

&lt;p&gt;I don't believe the fault here lies completely on the marketing team or Mailchimp, but the combination of inadequacies in Mailchimp contact management and choices made by the marketing team added up to a costly monthly bill.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;I am not saying that Mailchimp is a bad actor here -- far from that since they provide a user-friendly, honest service. &lt;/p&gt;

&lt;p&gt;I am just staying that &lt;strong&gt;Mailchimp contact management could use some significant improvement.&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;&lt;a rel="license noopener noreferrer" href="http://creativecommons.org/licenses/by/4.0/"&gt;&lt;img alt="Creative Commons License" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.creativecommons.org%2Fl%2Fby%2F4.0%2F88x31.png" width="88" height="31"&gt;&lt;/a&gt;&lt;br&gt;This work is licensed under a &lt;a rel="license noopener noreferrer" href="http://creativecommons.org/licenses/by/4.0/"&gt;Creative Commons Attribution 4.0 International License&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>communication</category>
      <category>expenses</category>
      <category>outreach</category>
      <category>marketing</category>
    </item>
    <item>
      <title>Don't use "sudo" with NPM "install"</title>
      <dc:creator>Brylie Christopher Oxley</dc:creator>
      <pubDate>Tue, 09 Apr 2019 08:18:22 +0000</pubDate>
      <link>https://dev.to/brylie/don-t-use-sudo-with-npm-install-56p9</link>
      <guid>https://dev.to/brylie/don-t-use-sudo-with-npm-install-56p9</guid>
      <description>&lt;p&gt;Using "sudo" when installing NPM packages may put your computer at risk, by giving untrusted code administrative privileges. Please do not use "sudo" when installing NPM packages.&lt;/p&gt;

&lt;p&gt;Instead, use the following instructions to allow NPM to install global packages without administrative privileges:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally" rel="noopener noreferrer"&gt;https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;&lt;a rel="license noopener noreferrer" href="http://creativecommons.org/licenses/by/4.0/"&gt;&lt;img alt="Creative Commons License" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.creativecommons.org%2Fl%2Fby%2F4.0%2F88x31.png" width="88" height="31"&gt;&lt;/a&gt;&lt;br&gt;This work is licensed under a &lt;a rel="license noopener noreferrer" href="http://creativecommons.org/licenses/by/4.0/"&gt;Creative Commons Attribution 4.0 International License&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>npm</category>
      <category>security</category>
    </item>
  </channel>
</rss>
