diff options
| author | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
|---|---|---|
| committer | bt <bt@btxx.org> | 2024-06-08 13:22:19 -0400 |
| commit | dcfb172704f3afb68a30425029ec834be2883274 (patch) | |
| tree | 02ac480745db802d7af03f3213a0c568322170e3 /build/learning-to-floss | |
| parent | e146f8a64c793c337999ce316b16ebe5fe6f2dab (diff) | |
More content porting, on-going markdown changes for lowdown support
Diffstat (limited to 'build/learning-to-floss')
| -rw-r--r-- | build/learning-to-floss/index.html | 72 |
1 files changed, 45 insertions, 27 deletions
diff --git a/build/learning-to-floss/index.html b/build/learning-to-floss/index.html index 356f6bd..66a0a23 100644 --- a/build/learning-to-floss/index.html +++ b/build/learning-to-floss/index.html @@ -1,55 +1,73 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>How to "FLOSS" as a Web Designer</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> - <a href="#menu">Menu ↓</a> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>How to "FLOSS" as a Web Designer</h1> +<h1 id="how-to-floss-as-a-web-designer">How to “FLOSS” as a Web Designer</h1> + <p>2020-02-07</p> -<p>I have a profound respect for the open source community. I most likely wouldn't have the skills or knowledge I do today with it. Unfortunately, when I was just starting out in "web dev" some 10 years ago, proprietary software was the main go-to for a newbie designer. </p> + +<p>I have a profound respect for the open source community. I most likely wouldn’t have the skills or knowledge I do today with it. Unfortunately, when I was just starting out in “web dev” some 10 years ago, proprietary software was the main go-to for a newbie designer. </p> + <p>Dreamweaver. Fireworks (those were the days). Photoshop. Illustrator. Adobe products basically had a stranglehold on the web design community. Any company you joined at the time more than likely required you to know and use these tools, making it hard for designers to try out new software for their day-to-day needs. Not to mention the <em>cost</em> associated with these products.</p> -<p>Fast forward a handful of years and we have a lot more options in terms of design / development software (whether Windows, Mac or Linux). UI design tools like Figma, Sketch and Adobe XD have since popped up and become the most popular among designers. New text editors and terminals hit the scene, fighting for developer attention (Atom, Sublime Text, VSCode, LightTable, iTerm2, Hyper, etc.).</p> -<p>But what if a designer wanted to go completely <span class="help-text" title="Free/Libre and Open Source Software">FLOSS</span>?</p> + +<p>Fast forward a handful of years and we have a lot more options in terms of design / development software (whether Windows, Mac or Linux). UI design tools like Figma, Sketch and Adobe XD have since popped up and become the most popular among designers. New text editors and terminals hit the scene, fighting for developer attention (Atom, Sublime Text, VSCode, LightTable, iTerm2, Hyper, etc.).</p> + +<p>But what if a designer wanted to go completely FLOSS?</p> + <p>Below you will find my own personal list of FLOSS applications I use across design, development and simple document management:</p> -<p><h2 id="floss-apps">FLOSS Application Breakdown</h2></p> -<h3>Web Browsers</h3> + +<h3 id="web-browsers">Web Browsers</h3> + <ul> -<li>Firefox <a href="https://www.mozilla.org/en-CA/firefox/">https://www.mozilla.org/en-CA/firefox/</a></li> -<li>Brave <a href="https://brave.com/">https://brave.com/</a></li> +<li>Firefox <a href="https://www.mozilla.org/en-CA/firefox/">https://www.mozilla.org/en-CA/firefox/</a></li> +<li>Brave <a href="https://brave.com/">https://brave.com/</a></li> </ul> -<h3>Visual Design</h3> + +<h3 id="visual-design">Visual Design</h3> + <ul> -<li>GIMP <a href="https://www.gimp.org/">https://www.gimp.org/</a></li> -<li>Inkscape <a href="https://inkscape.org/">https://inkscape.org/</a></li> -<li>Pencil <a href="https://pencil.evolus.vn/">https://pencil.evolus.vn/</a></li> +<li>GIMP <a href="https://www.gimp.org/">https://www.gimp.org/</a></li> +<li>Inkscape <a href="https://inkscape.org/">https://inkscape.org/</a></li> +<li>Pencil <a href="https://pencil.evolus.vn/">https://pencil.evolus.vn/</a></li> </ul> -<h3>Code / Text Editors</h3> + +<h3 id="code-text-editors">Code / Text Editors</h3> + <ul> -<li>Brackets <a href="http://brackets.io/">http://brackets.io/</a></li> -<li>Visual Studio Code <a href="https://github.com/Microsoft/vscode">https://github.com/Microsoft/vscode</a></li> -<li>Atom <a href="https://atom.io/">https://atom.io/</a></li> +<li>Brackets <a href="http://brackets.io/">http://brackets.io/</a></li> +<li>Visual Studio Code <a href="https://github.com/Microsoft/vscode">https://github.com/Microsoft/vscode</a></li> +<li>Atom <a href="https://atom.io/">https://atom.io/</a></li> </ul> -<h3>Terminal Shells</h3> + +<h3 id="terminal-shells">Terminal Shells</h3> + <ul> -<li>Terminus <a href="https://eugeny.github.io/terminus/">https://eugeny.github.io/terminus/</a></li> -<li>Hyper <a href="https://hyper.is/">https://hyper.is/</a></li> +<li>Terminus <a href="https://eugeny.github.io/terminus/">https://eugeny.github.io/terminus/</a></li> +<li>Hyper <a href="https://hyper.is/">https://hyper.is/</a></li> </ul> -<h3>Documents</h3> + +<h3 id="documents">Documents</h3> + <ul> -<li>LibreOffice <a href="https://www.libreoffice.org/">https://www.libreoffice.org/</a></li> +<li>LibreOffice <a href="https://www.libreoffice.org/">https://www.libreoffice.org/</a></li> </ul> -<h2>Nothing special</h2> -<p>This small list I've compiled isn't earth-shattering by any means, but I wanted to put this out into the world for any newbie designer that might be starting out. You don't need to spend a ridiculous amount of money just to get your feet wet in the design industry. By using the tools listed above, beginners can get a solid head-start on creating for the web without burning a hole in their pocket. </p> + +<h2 id="nothing-special">Nothing special</h2> + +<p>This small list I’ve compiled isn’t earth-shattering by any means, but I wanted to put this out into the world for any newbie designer that might be starting out. You don’t need to spend a ridiculous amount of money just to get your feet wet in the design industry. By using the tools listed above, beginners can get a solid head-start on creating for the web without burning a hole in their pocket. </p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> |