<?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: J.P. Solano</title>
    <description>The latest articles on DEV Community by J.P. Solano (@jsolano).</description>
    <link>https://dev.to/jsolano</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%2F496073%2F8207bb95-bc7f-4425-bd6e-f5eb07977d56.png</url>
      <title>DEV Community: J.P. Solano</title>
      <link>https://dev.to/jsolano</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jsolano"/>
    <language>en</language>
    <item>
      <title>The Most Important Skill A Software Engineer Can Have</title>
      <dc:creator>J.P. Solano</dc:creator>
      <pubDate>Thu, 11 Nov 2021 16:28:37 +0000</pubDate>
      <link>https://dev.to/jsolano/the-most-important-skill-a-software-engineer-can-have-9cf</link>
      <guid>https://dev.to/jsolano/the-most-important-skill-a-software-engineer-can-have-9cf</guid>
      <description>&lt;p&gt;Sometimes people believe that Software Engineers are like monks, and they spend their days in silence and coding. Nothing more far from reality. On good days, software engineers will code only 40% of their days, other, maybe 10% or maybe 0%. But, what are they doing the rest of the time?, meditating?, eating food and drinking coffee?, playing Ping-Pong?&lt;/p&gt;

&lt;p&gt;No really.&lt;/p&gt;

&lt;p&gt;First, let’s remember the main purpose of a software engineer is not coding per se, it is &lt;strong&gt;solving problems&lt;/strong&gt;. To achieve that goal, an effective software engineer will need to interact with diverse members of the team throughout the life cycle of a problem until they find an acceptable solution. Within that cycle, code is a critical part, but it is not the most important. Instead, having a clear understanding of the problem and the most efficient solutions is critical before starting to code. This makes it more likely to end with successful results. Remember, &lt;strong&gt;the worst possible scenario for a software engineer is presenting a great piece of code that does not resolve the initial problem.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Here a list of activities software engineers do that are not coding, but can help do solve problems in their organizations:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Writing design docs&lt;/strong&gt;: These allow software engineers to share a high level overview of the problem and the potential solutions with key stakeholders.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Code reviews&lt;/strong&gt;: Reviewing somebody else’s code, giving feedback.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Whiteboarding sessions&lt;/strong&gt;: Talking with peers about potential implementations, systems design, solving scenarios, technologies.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Peer programming sessions&lt;/strong&gt;: When 2 people work together to crack especially hard problems with a brainstorming approach.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Status meetings&lt;/strong&gt;: When you have to give status updates of your project to the team.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;And many more&lt;/strong&gt;: Product requirement meeting, Design springs, API design springs, UX design springs, 1:1 with managers or direct reporters, Peer reviews, Self assessment reviews, Respond to emails, Collaboration chats.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;We (humans) can solve problems BECAUSE we are great communicators!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So, if for software engineers, all these activities would represent 60% to 80% of a their day, then you will agree on the importance of an effective communication skill. Moreover, and thanks to COVID-19, where are in remote office era, where written communication has taken special relevance. See this interesting twitter thread about the future of the remote office.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--h-iMEyKC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/1kdlnfma6qd7myjpznc5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--h-iMEyKC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/1kdlnfma6qd7myjpznc5.png" alt="Alt Text" width="880" height="288"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ScWQKr-i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/34uelzds4n7cwhiauzif.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ScWQKr-i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/34uelzds4n7cwhiauzif.png" alt="Alt Text" width="880" height="287"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Communication is the most important of your skills and will determine in high degree your ability to solve problems and in the long term, it will shape your career success. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PByzTbgi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/f6orxq7aodcvphwdw6jt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PByzTbgi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/f6orxq7aodcvphwdw6jt.png" alt="Alt Text" width="880" height="394"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here are some practices that will make you a better communicator, and will help you to solve problems in your organization (specially for engineers):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Be concrete or specific.&lt;/strong&gt; E.g. : If you are responding to a long email thread and you want to agree or disagree about something, don’t assume everybody has the same information that you have:, better rewrite the key points and close with a clear position.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Empathy&lt;/strong&gt;: Connecting with your audience sounds cliche, but is true. Try to understand who the audience is (1 or many) and, what their expectations are. Using this information to adapt your message will make a big difference in the interaction and collaboration.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Be a good listener&lt;/strong&gt;: Less is more, and effective communication is not about how long the message is, it’s more about the quality. Try not to be the first in talk; instead listen.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Prefer facts over emotions&lt;/strong&gt;: Trying to detach from a problem when it is very important for you is hard, but the risk from not doing so is high. If we reduce the discussion to how we feel about the solution vs what is important for solving a problem, we take the risk of leading the conversation to a dead (and very personal) end. People can disagree with your idea. So, be prepared to defend your points, but never take it personally.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Repetition&lt;/strong&gt;: On any interaction, be sure you have a clear idea what part of your message you want to break through: pick one or two words and repeat it regularly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Gestures / Voice&lt;/strong&gt;: Most communication, including zoom meetings, are managed by non-verbal body language and gestures. Be aware of your body language and what sign it may transmit to the receiver. Incorrect body language could trigger unconscious biases in your receiver that will hurt the whole conversation. Using some strategic pauses can increase the value of your ideas.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;On better writing skill, I recommend this video about the The Craft of Writing Effectively&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=vtIzMaLkCaM"&gt;https://www.youtube.com/watch?v=vtIzMaLkCaM&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Engineering is easy, people are hard. &lt;br&gt;
-- Google &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;initial inspiration from Clement Mihailescu's video about the topic.  &lt;/p&gt;

</description>
      <category>webdev</category>
      <category>skill</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Building a React app to solve every Sudoku puzzle.  </title>
      <dc:creator>J.P. Solano</dc:creator>
      <pubDate>Thu, 22 Oct 2020 01:25:41 +0000</pubDate>
      <link>https://dev.to/jsolano/building-a-react-app-to-solve-every-sudoku-puzzle-3c95</link>
      <guid>https://dev.to/jsolano/building-a-react-app-to-solve-every-sudoku-puzzle-3c95</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Peter Norvig, the legendary Google mogul and AI titan, wrote &lt;a href="http://norvig.com/sudoku.html" rel="noopener noreferrer"&gt;a python essay to solve every Sudoku puzzle&lt;/a&gt; 10 years ago. Back then, he may not have expected that his code will inspire so many other posts and to be ported to so many different languages. For JavaScript, the latest version of the solver that I found was &lt;a href="https://github.com/einaregilsson/sudoku.js/" rel="noopener noreferrer"&gt;@einaregilsson/sudoku&lt;/a&gt; from 2014 .   &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I thought it would be interesting to create a react app that uses Peter Norvig's solver ideas and adds some learning layers to the UI.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Here are some details from the &lt;a href="https://www.industrialempathy.com/posts/design-docs-at-google/" rel="noopener noreferrer"&gt;design document&lt;/a&gt; that I used to create the app. Let's start. &lt;/p&gt;

&lt;p&gt;If you want to check it out before reading, go to the &lt;a href="http://jsolano.github.io/react-sudoku-solver" rel="noopener noreferrer"&gt;LIVE DEMO&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;or the github repo &lt;a href="https://github.com/jsolano/react-sudoku-solver" rel="noopener noreferrer"&gt;jsolano/react-sudoku-solver&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Plan and Scope
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Designing and implementing a HTML/JS/CSS Web app using React (with hooks).&lt;/li&gt;
&lt;li&gt;Designing and implementing an algorithm that solves Sudoku puzzles in JavaScript.  (From easy to extra heavy-hard levels)&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Goals and non-goals
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Goals:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Build a HTML/JavaScript application that solves a given Sudoku puzzle. &lt;/li&gt;
&lt;li&gt;Use React components and React hooks.&lt;/li&gt;
&lt;li&gt;Cover aesthetics and usability. &lt;/li&gt;
&lt;li&gt;Support entering puzzle strings in the format described in Peter Norvig's article.
&lt;/li&gt;
&lt;li&gt;Cover Performance of the algorithm (Easy, Medium, Hard, Expert).&lt;/li&gt;
&lt;li&gt;Display time taken to solve a puzzle.&lt;/li&gt;
&lt;li&gt;Cover Unit testing.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Non-Goals:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;UI level automation-tests. &lt;/li&gt;
&lt;li&gt;Generate new unsolved puzzle.&lt;/li&gt;
&lt;li&gt;Print a Sudoku.&lt;/li&gt;
&lt;li&gt;Storage any session data (local or remote).&lt;/li&gt;
&lt;li&gt;Accept user solutions to the puzzle.&lt;/li&gt;
&lt;li&gt;Make the solver stop in a specific step.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  The Initial Design
&lt;/h2&gt;

&lt;p&gt;The idea was to create a sense of flow in the UI, where users can easily understand how to use it. &lt;/p&gt;

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

&lt;h2&gt;
  
  
  System Context Diagram
&lt;/h2&gt;

&lt;p&gt;There are two main modules of the app: &lt;/p&gt;

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

&lt;p&gt;First, I made a raw version of the basic JS components and utilities:&lt;/p&gt;

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

&lt;p&gt;Then, I started working on the solver service using JEST for testing. &lt;/p&gt;

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

&lt;p&gt;Later, I implemented the react components for the board, modal, messages and buttons, and then integrated with the solver service using react hooks.  &lt;/p&gt;

&lt;h3&gt;
  
  
  The Learning Layer.
&lt;/h3&gt;

&lt;p&gt;Here's when things started to get interesting.  On one side, the UI learning column helped me understand how the solver was working and how to improve the implementation.  But, after I ported Peter Norvig's algorithm, which uses a backtracking search strategy and solves ALL SUDOKUS, I realized the learning column was useless because in the search of a solution, it created temp steps that were not valid. I needed to change my approach. &lt;/p&gt;

&lt;h3&gt;
  
  
  The Turning Point
&lt;/h3&gt;

&lt;p&gt;I could've just removed the learning feature and lived with just a simple solver but instead, I chose to implement other solving strategies that provided the detailed solutions. &lt;/p&gt;

&lt;p&gt;I did my research about Sudoku solving strategies, and there were more than 38 options. I was totally hooked. &lt;a href="https://www.sudokuwiki.org/sudoku.htm" rel="noopener noreferrer"&gt;See more here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But all of these strategies come with a &lt;em&gt;caveat&lt;/em&gt;: you can work on many lines of code while trying to implement some of these strategies and still not solve all the puzzles. (I learned this the hard way). So, I found a solution: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Creating a react app that uses human solving strategies (for learning purposes and for fun), and only applying Backtracking Search as the last resort.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So now, the app will apply this strategies :&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Hidden Singles &lt;/li&gt;
&lt;li&gt;Naked Pairs/Triples &lt;/li&gt;
&lt;li&gt;Pointing Pairs &lt;/li&gt;
&lt;li&gt;And as a last option: &lt;strong&gt;Backtracking Search&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Also, it comes with a prevention for infinity loops and a spinner while it's solving the puzzle. &lt;/p&gt;

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

&lt;p&gt;Update #1:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Added Pick Just One link to load a random puzzle. (Thanks Andre for the suggestion!) 
&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fxmvvigk3v56ddoqfwgha.png" alt="Alt Text"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Update #2:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Added a message when the entered board is solve in the parsing moment. (Thanks Andre for the hint!) This could happens after filtering for cell possible values and all cell get solved. (not common, but possible e.g.: ..6.....2.81.4293.25...34..4.8.1..76..2...8..17..6.3.9..35...94.9732.51.5.....7.. )
&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;Update #3:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Added responsive layout for mobile&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;Update #4:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Changed the useState hook for useReducer to decouple the state management from the component and also added localStorage persistence.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you are a Sudoku fan and want to collaborate, take a look of the &lt;a href="https://github.com/jsolano/react-sudoku-solver" rel="noopener noreferrer"&gt;github repo&lt;/a&gt;. Join me in implementing the other 34 strategies!&lt;/p&gt;

&lt;p&gt;/JP&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The enemies of people who work with ideas are not the people with the opposing ideas. They're those who want to ban the discussion altogether. -Paul Graham &lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>css</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
