mouthporn.net
@codeblankets on Tumblr

//codeblankets

@codeblankets / codeblankets.tumblr.com

a little collection of interesting coding & UI/UX stuff
Avatar
Avatar
chaipluscode

Bubble Sort

**DISCLAIMER: This code is in C++, but the logic applies to other languages**

1) What is bubble sort?

Bubble sort is a sorting algorithm that checks adjacent numbers and swaps them if the number being checked is larger than the number ahead of it. The numbers are ordered from the bottom (end) of the list to the top (beginning). Kinda reminds me of the way bubbles rise to the surface of water *gasp!*

Visual Example:

2) An example problem:

  • Sort the numbers in the array [23, 123, 234, 54, 44, 2, 1432, 123, 8, 0].
  • Create a bubble sorting algorithm to order the numbers from least to greatest.

3) How I attempted to solve it:

  • I knew I needed to make a for-loop to iterate through the array.
  • I knew I also needed an if-statement to check if the indexed number was larger than the indexed number adjacent to the right of it.
  • My code logic* looked like this:

4) What happened?

  • This is what I got: [23, 123, 54, 44, 2, 234, 123, 8, 0, 1432, ]
  • So it seems like 1432 is in the correct position (based on the definition of bubble sort), but everything else seems to be off. I couldn’t figure out what was wrong.

5) What I ended up realizing:

  • After writing and rewriting the list and solving the sorting by hand 100 times, I realized I hadn’t even been following the structure of my own logic.
  • Once the if statement is complete, the loop iterates to the next index in the array. Therefore the number at index 0 of the array will always stay at the position. Hmm, if only there was a way to reset the loop to index 0 and run it again and again until the list was sorted…………….

6) THE FIX!!

  • There is! Another loop! I created an outer for-loop. The code now looks like this:

(I took this screenshot w/ more white space on the right so it looks better. The first screenshot is really in your face. Don’t worry, I know.)

  • I printed all the numbers returned after every iteration. This is the result:
  1. [23, 123, 54, 44, 2, 234, 123, 8, 0, 1432]
  2. [23, 54, 44, 2, 123, 123, 8, 0, 234, 1432]
  3. [23, 44, 2, 54, 123, 8, 0, 123, 234, 1432]
  4. [23, 2, 44, 54, 8, 0, 123, 123, 234, 1432]
  5. [2, 23, 44, 8, 0, 54, 123, 123, 234, 1432]
  6. [2, 23, 8, 0, 44, 54, 123, 123, 234, 1432]
  7. [2, 8, 0, 23, 44, 54, 123, 123, 234, 1432]
  8. [2, 0, 8, 23, 44, 54, 123, 123, 234, 1432]
  9. [0, 2, 8, 23, 44, 54, 123, 123, 234, 1432]

(I took out the end comma, added brackets, and numerically listed them to make it easy for y’all to read so don’t @ me. :D )

Hope this helped! Thanks for reading :)

7) Summary and run-time:

  1. Iterate through the array (inner for-loop).
  2. Check to see if the current number is greater than the one on its right (if-statement inside inner for-loop).
  3. Restart the for-loop over and over again until the list is sorted (outer for-loop).
  4. Run times:
  5. Worst Case: O(n^2)
  6. Best Case: O(n)
  7. Average Case: O(n^2)

*I wrote this code, but this isn’t the problem I was assigned. I wrote this code replaying my thought process in figuring out the solution. That is why this is an example problem.

*Also, I make lots of mistakes. There may very well be mistakes in my code even though it produces the correct output. Kindly correct me so misinformation isn’t spread. Thanks! :)

Avatar
reblogged
Avatar
decodering
Visualize The CSS Color Function.

Tyler Gaw:

ColorMe is a site I built to make working with the CSS Color Function easier. It provides a UI for applying adjusters to a base color and gives a visual of the adjustments.
The Color Function is a CSS feature in editor’s draft stage of specification. This means it will be a while before it lands in any browser. That doesn’t mean you can’t use the proposed syntax today though.
Avatar
reblogged
Avatar
decodering

Monica Dinculescu:

I spent a week traveling around Taiwan, on my awesome free roaming 2G data plan, and friends, we need to talk about your web fonts. Also cats. They really love cats there. Anyway, the thing about 2G is that I fully understand that it will take me 10 seconds to load a page. What sucks is the fresh rage of the following 4 seconds where instead of content I get phantom underlines, waiting for a slightly-different-sans-serif to download.
Listen: it doesn’t have to be this way. You can lazy load your font. It’s 4 lines of JavaScript. 7 if you’re being ambitious.
Avatar
Avatar
code-bug

I was asked to make a masterpost on websites like Codecademy, so I’ve tried to compile a list of the best (and mostly free!!). In no particular order: 

1. Codecademy [x]

I couldn’t not include Codecademy! Just in case you haven’t checked it out, it’s pretty neat. It has courses for learning languages and web developer skills.

Languages: Python, Ruby, Java, PHP, jQuery, JavaScript, HTML/CSS

Extras: Git, SQL, Command Line, AngularJS, Ruby on Rails

2. Code School [x]

This is pretty similar to Codecademy with the in-browser coding and such. It also has additional features like teaching videos. A good introduction to programming languages.

Languages: Python, Ruby, Javascript, HTML/CSS

Extra: iOS development with Objective-C or Swift, Git, SQL

3. Learnaroo [x]

Has tutorials followed by mini challenges based on the concepts you’ve just learnt! It also has some reference pages called “Learn x by Example”. Looks pretty good.

Languages: Python, Java, Ruby, HTML/CSS

Extra: Algorithms, Mathematics, + a bunch of premium membership stuff

4. Learn … 

A set of related websites (see below) which have mini tutorials on language concepts followed by mini challenges, similar to Learnaroo.

Languages: Python, Java, C, C#,  JavaScipt, PHP, Shell

5. Code Combat [x]

Basically, it turns learning to code into a game! As you move through the levels, new concepts are introduced, so the code you need to write to play the game gets harder. 

Languages: Python, Java, JavaScript, CoffeeScript, Clojure, Lua

6. Codingame [x]

Similar idea to Code Combat, but a little more advanced. 

Languages: Python, Java, Ruby, C, C++, C#, Haskell, VB … there’s actually loads it supports.

7. Code Wars [x]

This is more for ‘training’ with a language you already know. It offers plenty of practice through challenges, so it’s really good for improving your coding skills. 

Languages: Python, Ruby, Java, C#, Haskell, JavaScript, CoffeeScript, Clojure

8. Coderbyte [x]

This offers some video tutorials and challenges for a few languages, plus special courses on specific algorithms and bootcamp/interview prep. You need a premium membership for quite a lot of things, though (e.g. I don’t think you can watch any of the videos with a free membership).

Languages: Python, Ruby, JavaScript

Extras: Algorithms, Bootcamp Prep, Job Interview Prep

9. Free Code Camp [x]

Mini tutorials followed by mini challenges. Has a number of courses on the languages below!

Languages: HTML/CSS, jQuery, JavaScript

Extras: Git, Algorithms, + a bunch of projects to complete

10. Programmr [x]

Has courses to learn various languages through doing little exercises/challenges in the browser, similar to previous examples. Also has ‘zones’ for more languages, where you can find challenges, example code and projects people have shared. 

Languages: Python, Java, C++, C#, PHP, jQuery

11. CheckIO [x]

Only offers Python, but I still think it’s really great. You move from level to level, getting challenges which are gradually trickier. Learn by doing!

12. Rails for Zombies [x]

For people who already know a bit of Ruby, but nothing about Ruby on Rails!  Each level begins with a short video followed by interactive challenges where you program Rails in the browser.

That’s all (for now!) Hope this is helpful! (ノ^∇^)ノ゚

Avatar
reblogged
Avatar
decodering

Barry Schwartz, Search Engine Land:

Google has just released the full version of their Search Quality Rating Guidelines, a 160-page PDF document, aimed at helping Google Search Quality Raters understand how to rate the search results they are testing.
Earlier this week, the October version of the document was leaked, as it was in 2008, 2001, 2012 and other times. Google did officially release an abridged version back in 2013 but has now decided to release the full 160-page version that was previously only available to these Search Quality Raters.

Well, this seems significant!

Avatar
reblogged
Avatar
decodering

Sara Soueidan:

  1. Create Simple Shapes Using Simple Shape Elements, Not <path>s.
  2. Convert Text to Outlines.. Or Don’t.
  3. Simplify Paths.
  4. Avoid Merging Paths Unless You Don’t Need Control Over Individual Paths.
  5. Create Filters Using SVG Filters, Not Photoshop Effects.
  6. Fit Artboard to Drawing.
  7. Use Good Naming, Grouping and Layering Conventions.
  8. Choose The Best Suitable Export Options for the Web.
  9. Communicate. Communicate early.
Avatar
reblogged
Avatar
stayplucky

My Top 5 Coding Resources

This website would not be alive if I was not able to look up instructions for html, css and even javascript to make the pages and layout look the way it does. Although let it be known now and forever that me and javascript have a really tough relationship. It’s true- I’ve been angrily doing javascript tutorials and failing since I got a D in Java Programming my sophomore year of college.

Javascript fueled anger aside, one thing I love about using tumblr is that I can access the code of my blog anytime I like and edit what I need to edit. Themes designed by people way more skilled than I am are great, but sometimes there are things in the themes that aren’t exactly right. That’s where these websites come in. These are my go to resources to figuring out how to make it right (if I don’t just type the question directly into google, which works as well)

I don’t know how long W3Schools has existed but I swear it’s always been there. From my early days on the internet trying to figure out how to change the color of what I’m writing on a Harry Potter forum discussion, to a couple weeks ago figuring out how to make those cute rounded boxes that I see all over the internet on my about me page- W3 has been there. If you type into google:

How do I write HTML for…

they are usually one of the first results. They have extensive tutorials on HTML, CSS, Bootstrap, Javascript and even some stuff on the server side like PHP and SQL but I find myself almost exclusively up in their HTML section or making sure the CSS thing I’m trying to do is actually a real thing. 

Annnnd- they also offer certificates, i’ve never done it, but it sounds cool. 

Bootstrap is super cool and it helps you make super cool looking websites, don’t get me wrong. It’s snazzy and as soon as you learn about it you wanna start using it like right now- but it’s kind of daunting. 

Luckily, we have the Bootply and Bootsnip. Bootply has a text editor that comes with useful templates for making bootstrap-tastic navigation and tons of other cool stuff, also coming with just templates for your basic bootstrap website

Look at that majesty. It’s just fabulous and easy. They also have a drag and drop visual website maker, but honestly I find drag and drop code makers more trouble than their worth. 

Bootsnip rather than all out templates, is a community of people that post cool stuff that they made in bootstrap in different categories. 

Like you can look at every navigation menu anyone has ever had (as you can see I’m a little fixated on navigation- tbh I’m still not happy with the state of this blog’s menu)

Look at that. I love these sites. Even if I can’t make everything in these exactly happen, looking at the code that makes the things that these people made happen can help me look at the code that works for me. 

Speaking of getting help from other people, Github is the hub. It’s the place where everyone posts their code and looks at it and helps eachother with it. The idea really is amazing. With it I can do searches and look at tools people made. And fun fact for us non-programmers: a lot of people post tumblr themes on here. Even more, a lot of people post boilerplate themes to help other people develop from because that’s what they use and I find it incredibly useful. 

As you can tell, I flit on and off of the site. Sometimes it’s useful and sometimes it isn’t. 

Maybe Code Academy isn’t perfect, but it’s a site I end up going to again and again. You could look up all the code in the world but if you don’t understand it, it’s gonna be super hard for you to make it work. I would say that the guided lessons don’t necessarily help me memorize or know languages by heart- you know no way, it doesn’t, but it helps you get familiar and there are classes for everything on there. I’d say if you even want to exist on Tumblr and want to really impact the way your blog looks- go on Code Academy. You can search through all the themes in the world and you’re never going to find the one that fits you completely. It could just be little things. But just do it. You can make the blog you want with your head held high. I’d say with Code Academy and any of these other sites, it’s not being fluent in the language. That’s only going to come with practice. But if you take the lessons, you’ll have a roadmap. 

Free Code Camp is one of the coolest things I’ve ever found. I don’t even remember how I found it, I think it was promoted on twitter or something. But it’s a comprehensive program that takes you through each of the languages and eventually pairs you with a nonprofit to help them with their website and to help you build a portfolio. Their goal is to get people on their site jobs when they finish. Not to mention, they’re registered as a school on LinkedIn, so you can add it to ‘Education’ on your profile. I do it when I can and I’ve fallen off the boat recently but I really think it’s a great resource. The lessons are great and when I’m on there it really feels like something clicks. 

And there are tons more resources out there

I’ve watched so many videos and gone on so many websites and there are communities everywhere so that if this is something you want to learn, it really is an option. These 5 are just the tipping point and I hope you use them.

Avatar

Description from their FB page: Free Code Camp helps people build job-worthy portfolios of real apps used by real people, while helping nonprofits. Our 1,600-hour full stack JavaScript curriculum is completely self-paced, browser-based, and free. We serve people who are traditionally underserved in the coding community: 80% of our students are 25 or older, and nearly a fifth are women. Come join our open source community at FreeCodeCamp.com

Avatar
Avatar
uiuxart

Reddit UX / UI Design Subreddits

If you use Reddit (or are addicted like me) to stay up to date on UX or UI design best practices here are a few subreddits you should be aware of. 

· r/UI_Design - Topics related to UI design, mobile UI design, mobile app design, etc. · r/userexperience - Focus on user experience design, the process of enhancing user satisfaction by improving the usability, ease of use, and pleasure provided in the interaction between the user and the product. · r/usability - Interested in Usability? Know of links to sites, or interesting articles about User experience, Interface design, or Human Factors? Look no further.

Still got a design itch to scratch? Here are 5 more design related subreddits you also may be interested in:

Avatar
reblogged
Avatar
decodering
  • z-index should be called z-order or depth and should Just Work on all elements (like it does on flex items).
  • word-wrap/overflow-wrap should not exist. Instead, overflow-wrap should be a keyword on ‘white-space’, like nowrap (no-wrap).
  • The top and bottom margins of a box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil.

(via DN)

You are using an unsupported browser and things might not work as intended. Please make sure you're using the latest version of Chrome, Firefox, Safari, or Edge.
mouthporn.net