Skip to content

Kismet Arts Tangent

Art Collective

    • Kismet Arts Tangent
    • About
    • Blog
    • Contact

recent posts

  • Make up looks
  • Images from re Patient’s Schedule
  • Self Intake
  • Inspiration Pool for zine
  • Photo shoot with Kayleigh Shawn

  • Instagram
  • Python Day 2: Kwargs and Methods

    October 14, 2015

     

    Joe Parente and Joey Perrott are doing afternoon sessions with the Web Coding Bootcamp. I’m learning a lot and transcribing my notes down below.

    In our first python project, we’re working on a quote database using The Python NDB Datastore API.

    Methods

    As started the day before, the afternoon session continued on with fleshing out the methods associated with the QuoteModel class in our database. The first step was to list all of the behaviors and then write the methods.

    In this project, we used both Class and Instance methods.

    The instructors emphasized how simple methods are. You describe what they take, what they do, and what they return. In class, we split up into groups to write different methods that will be used in the data base.

    Delete Method

    I was in the delete group. We broke down the method into parts. Select the quote, confirm delete, put quote in the trash box, and hide quote on display. And we were wrong. The instructors told us to think like a computer. We’re deep into the back-end of the process. We’re at the point of actually deleting something.

    The process of deleting a thing in a database. You get the id. In this method, we start out with the id, then find the entity it’s attached to, then delete the key. Apparently, if you delete a key to an entity, you essentially delete the entity.¹

    In the making of a method, developers ask themselves, now, how would I break this. In this case, it would be to give a nonexisting ID number. So, we must validate that the id exists in the database. A simple “if not” (I like python, so clean.) will do the trick.

    At first we raised a generic exception, but we were advised to make a custom exception, that way when we’re debugging, it will point to the exact problem and we will be better able to handle it. To make a custom exception, create a new class outside of the class (put it with the rest of your exception classes, you’ll probably have a few) and then call it in the method (as seen below).

     

    delete-code-python
    Delete Method (this is a class method)

    Kwargs

    In the following method, one of the parameters it takes in is **kwargs. It’s kind of a way of saying “stuff.” The important part is the asterisks and by convention, should name it kwargs, but you can name it anything. It just means that it can handle what you throw in.

    edit-code-python
    Edit Method  (this is an instance method)

    “You would use *args when you’re not sure how many arguments might be passed to your function, i.e. it allows you pass an arbitrary number of arguments to your function.” — and kwargs are named arguments.

    Source: python – *args and **kwargs? – Stack Overflow

     

    Doc Strings

    One can tell that one of the instructors wrote this code. There’s really excellent code comments. Each code comment states what the method does, what it takes in and what it returns. As for knowing what expressions to use, that could be found in the NDB Datastore API. Finding what you need takes some time and knowledge about how databases work.

    kwargs-etc-code-python
    a list method and a sorted list method (both class methods)

    Upvoting Method

    This group’s challenge was to make sure that a person could only upvote a thing once and to remove the vote if the method was called again by the same user (a functionality similar to the “like button” on Facebook). Their solution was to require the username of the user to run the method and then storing that in the list and if that person’s name is already in the list they are taken out of the list.

    upvoting-code-python
    Upvoting Method (this is a instance method)

    Footnotes

    1. My question for the instructor: What do keys, IDs and entities look like in a hierarchical diagram explaining the structure of a database?
      Answer: “There is no hierarchy. In a non-relational database everything is flat. Each object has one key that you can use to identify the object or you can query the object by one of its attributes.” -Joe

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • Leaf falling under bridge in a small town

    October 14, 2015

     

    leafA couple of days ago, I painted this. It was an afternoon where I had a friend over and thought it would be a fun time to break out the acrylics. I call this painting “Leaf falling under bridge in a small town.” I was talking to Ryan, as we were trying to name it, giving examples of pretentious titles for works and I liked it and thought it fit. I was originally going to call it “Birth” because the central figure kind of looks like a fetus.

    pegasus

    Here’s the painting underneath it. A couple of months ago, I was painting under the influence and started to see things in the painting and elaborated on that. The swooping yellow became too phallic to ignore, so I tried to make it more “kid friendly” by adding a pegasus playing chess, but that became a strangely square pepperoni pizza. I knew then that I would paint this over the first chance I got.

    IMG_0184
    Ryan in the process of painting

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • Introduction to Python: Day 1

    October 13, 2015

    Joe Parente and Joey Perrott are doing afternoon sessions with the Web Coding Bootcamp. I’m learning a lot and transcribing my notes down below.

    Python is an interpreted¹ programming language. It supports multiple programming paradigms, but the instructors mostly focused on the object oriented (OO) style. Everything can be understood as an object. Functions (methods²) and classes define actions and attributes for objects. There are statements (if, for, while, try, etc.) and expressions. Included data types are integers, strings, dictionaries, lists and my favorite tuple³ (mostly because it sounds cute).

    I’m approaching this subject after becoming somewhat familiar with javascript so a lot of my learning is a bit of a translation from one programming language to another. Some things are the same like “append” but “prompt” becomes “raw input.” The list of Python reserved words and builtins will be good to memorize. The slicing is a little different from JavaScript Array slice() Method syntatically.

    sample-ofa-class
    Example of a Function

    Class

    There was a lot to be learned about classes. Classes have attributes and methods. Def__init__ defines the construction.

    “The __init__ method (init for initialise) is called when the object is instantiated. Instantiation is done by (effectively) calling the class.”

    Source: Introduction to OOP with Python

    Handling Exceptions is the way Python doesn’t break when expected disconnects occur. Using a try block you can catch an error and have the program do something else.

    Python works in and with other frameworks and languages:

    • The Web framework for perfectionists with deadlines | Django
    • LAMP (software bundle)
    • App Engine — Google Cloud Platform
    • Amazon Web Services (AWS) – Cloud Computing Services
    • Interactive Wireframe Software & Mockup Tool | Axure (They mentioned this and I’m curious to see how we could use that.)

    Databases

    There are two types of databases, relational and non-relational⁴. In our first python project, we’ll be working on a quote database using The Python NDB Datastore API.

    First, as a class, we created a model (a well defined data structure) with just attributes. Then, we translated that into a syntactically correct model that used Property Classes such as StringProperty.

    pseudo-model
    A class written in pseudocode
    the-beginningofa-database
    A class and class method

    Best Practices

    • Name variables well (i.e. def Add (firstnumber, secondnumber).
    • When programming, think of user experience along the way (in their example, they used “enumerate” to make the selection from the list easier.
    • Except as narrow of an error as possible in try blocks.
    • Never store a user’s password in a database in plain text.
    • Do not expose your data base to the public.
    • Always document your code (code comments called doc strings). When you comment on methods: say what it does, and talk about the required arguments and what they look like and what it returns.

    Footnotes

    1. Compiling vs. interpreting is mostly a matter of how the work of “understanding” the program is divided up between different processes, and the line is a bit blurry these days as languages and products try to offer the best of both worlds.

    Source: java – Compiled vs. Interpreted Languages – Stack Overflow

    2. Methods are associated with a class or instance, and “standalone functions” are not.

    Source: python – Difference between methods and functions – Stack Overflow

    3. The point of a tuple is that the i-th slot means something specific. In other words, it’s a index-based (rather than name based) datastructure.

    Source: James Tauber : Python Tuples are Not Just Constant Lists

    4. Therefore, in my opinion, the main difference is about how do you store the data and the storage level of the relationships between them.

    Source: What is the difference between a Relational and Non-Relational Database? – Stack Overflow

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • JQuery Quandary

    September 25, 2015
    1. Why am I seeing “hover” “mouseenter/mouseleave” and “mouseover”?

    .mouseover(): source

    Bind an event handler to the “mouseover” JavaScript event, or trigger that event on an element.

    .hover(): source

    Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters andleaves the elements.

    Calling $(selector).hover(handlerIn, handlerOut) is shorthand for: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

    .mouseenter(): source

    Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

    mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.

    What this means

    Because of this, .mouseover() is not the same as .hover(), for the same reason .mouseover() isnot the same as .mouseenter().

    $('selector').mouseover(over_function) // may fire multiple times
    
    // enter and exit functions only called once per element per entry and exit
    $('selector').hover(enter_function, exit_function) 

    from Nerketur Kamachi at Mouseover vs Hove

    2. Why am I seeing “hover” “mouseenter/mouseleave” and “mouseover”?

     

    “In OO [object oriented] world, the two are commonly used to mean the same thing.

    From a pure Math and CS perspective, a function will always return the same result when called with the same arguments ( f(x,y) = (x + y) ). A method on the other hand, is typically associated with an instance of a class. Again though, most modern OO languages no longer use the term “function” for the most part. Many static methods can be quite like functions, as they typically have no state (not always true).”

    from TheSoftwareJedi at the Difference between a Method and a Function

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • Grid Classes Vs. Class Definition

    September 14, 2015
    my-code-vs-his-code
    The top row is code I am examining that is being taught in a web development class this year (2015). The bottom row is the initial workings of how I think it would be optimal to define HTML.

    When working on Project 4 of the coding program I’m currently in, I was initially stumped by the wireframe that goes from a 3 column layout (for desktop) to a 2 column layout (for tablet) and then a single column layout (for smart phones). Lately, I’ve been pondering creating a simple framework that makes the developer work a little smarter.

    I think defining a div with a class that is named for its desktop orientation is biased towards desktop being the primary viewport. I also think it’s limiting if you want to have a different distribution for the tablet mode.

    Creating a CSS/HTML5 system that uses pseudoclasses to select the last item in each row without defining rows  seems like the way to go. Using exact math via Flexible Math, you can use only the classes you need and be able to control the divs without extra classes.

    I would also propose to work this into a HML/SASS formula that will generate the same code only faster.

    This is a working theory and as I continue with Bootstrap (in an aside–the version bootstrap I downloaded is not HTML5 compliant, so ideally, I’d like to create a new framework that utilizes these features, too…)

    Like Loading…
  • Group Project- Assignment 5

    September 11, 2015

    wireframe-to-finish

    Didier Ken and I worked on a team project this week where there was a “senior designer” and two “junior designers.” The notable component of the end product was the off canvas menu using CSS and HTML5 only. I was mostly supervising and at the end used Didier’s code to add some content (see: Scoops).

    Links

    Media Queries a website featuring the differing responsive layouts for inspiration
    Dirty Markup my team really appreciated this tool
    Off Canvas Menu in Code Pen we forked code from this website

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • Assignment #4: Responsive Page

    September 3, 2015

    In JobTrain’s Web Developer Coding Bootcamp, we received our forth assignment. Take these wireframes and turn them into CSS/HTML sites.

    wireframes-to-code
    From Wireframes to html and CSS

    — I added the gradient because I think they add a little pizazz for little effort.

    I was initially intimidated when I received the wireframes because I was used to using row-divs to separate rows and going from the three column layout to the two column layout would have meant violating one of those rows. (I was also a little irritated because the assignment violated the “content is king” paradigm that was so instilled in me.)

    Using the nth-child pseudo selector, I was able to control the right margin on the boxes to give them the spacing the divs needed when and where they needed them.

    I coded a few websites two years ago for graphic design school, so a lot of this is review, but there are also some new features/best practices that I was excited to utilize, like HTML5 semantic selectors (ex. article, header, footer, etc.).

    I used this code for the nav bar.

    border-right:1px solid #ccc;
    width:24.8%;
    /* fallback for non-calc() browsers */
    width:calc(100% / 4);
    box-sizing:border-box

    For the two column layout:

    article:nth-child(odd) {
    margin-left:0
    }

    article:nth-child(even) {
    margin-left:3.125%; /* 20 / 640 */
    }

    For a pure CSS3/HTML drop down menu, this code worked really well.

    Links:

    Dirty Markup clean that code!
    Google Calculator for calculating column widths ((formula: total width minus (margin-width times margin occurence) answer divided by number of columns)) ex. 960px wide layout with 20px margins and three columns (two margins). (960-40)/3= column width.
    CSS helper for converting pixel widths into percentages

    sharing options:

    • Share
    • Share on Tumblr (Opens in new window) Tumblr
    • Print (Opens in new window) Print
    • Share on LinkedIn (Opens in new window) LinkedIn
    • Share on X (Opens in new window) X
    • Share on Reddit (Opens in new window) Reddit
    • Share on Pinterest (Opens in new window) Pinterest
    • Share on Facebook (Opens in new window) Facebook
    • Email a link to a friend (Opens in new window) Email
    Like Loading…
  • Some Web Developer Resources

    August 24, 2015

    Mozilla plenty of tools, reference sheets, and demos

    Code Pen play in this page instead of mucking up your code

    Learn How with Shay Howe supplementary CSS and HTML knowledge

    • HTML5 Doctor
    • HTML5 Boilerplate
    • CodePen
    • Mozilla Developer Network
    • Can I Use?
    • HTML5 And The Document Outlining Algorithm
    • The New Bulletproof @Font-Face Syntax
    • HTML5 Outliner
    • HTML5 Outliner Chrome Extension
    • Datalist Experiment
    • Box-Shadow Demonstration
    • transition-timing-function – MDN
    • Autoprefixer
    • Dash
    • JavaScript Regular Expressions – MDN
    • Art Gallery Blog Source

    http://www.cnet.com/how-to/add-a-mute-button-to-chrome-tabs/

    http://necolas.github.io/normalize.css/

    • Responsive Web
    • Adaptive Web Design
    • Responsive.is
    • The Personal Disquiet of Mark Boulton
    • Future Friendly Resources
    • LukeW Ideation + Design
    • Media Queries
    • Viewport Meta Tag
    • Front-end Formations (Replaced 3 for 5 Course)
    • CSS Cross-Country
    • Example website: The Lost World

    A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

    • Smashing Magazine Design
    • Net Magazine
    • Hack Design
    • Thinking with Type
    • The Elements of Typographic Style
    • Typography Calculator
    • Color Theory for Designers
    • Adobe Kuler Color Wheel
    • Working with Color
    • Understanding Z layout and Understanding F-layout
    • Responsive Grid Generator
    • Photoshop Grids
    • Sass website
    • CodeKit
    • LiveReload
    • Middleman
    • Scout
    • The Sass Way
    • Chris Eppstein’s Blog
    • Kicking Ass + Taking Names with Sass & Compass by Nathan Henderson
    • CSS Tricks — Sass vs. Less
    • Compass website
    • CSS Tricks: Timing Functions
    • Playing with Timing Functions on CodePen
    • Cubicbezier.com
    • Smashing Magazine: Understanding Timing Functions
    • A Guide to CSS Animations
    • Paste to Prefix
    • Can I Use
    • Soup to Bits: Adventures in Web Animations
    • Litmus – 14-Day Free Trial
    • Bulletproof Buttons for Email
    • CSS Support Guide for Email
    • Slides Email
    • Challenges Email
    • Litmus Builder
    • Litmus Community
    • Litmus Scope
    • Responsive Email Resources
    • Responsive Email Patterns
    • Email Client Market Share
    • Front-End Foundations
    • Journey Into Mobile

    list of HTML5 elements

    • Useful Methods for Strings
    • Special Characters and Escape Sequences
    • File Organization with HTML, CSS, and JavaScript Files
    • Eloquent Javascript
    • Mozilla Development Network Javascript
    • JSFiddle
    • DailyJS
    • Closures at the MDN
    • Prototypes at “Javascript, Javascript…”
    • OOP at “Eloquent Javascript”

    screen reader only class is really good idea for accessibility

    • Binary Floating Point Values
    • JavaScript: The Right Way
    • Code Conventions for JavaScript
    • 45 Useful JavaScript Tips and Tricks
    • Thinkful: Best Practices 1 and 2
    Like Loading…
Previous Page Next Page

Blog at WordPress.com.

Loading Comments...
  • Subscribe Subscribed
    • Kismet Arts Tangent
    • Join 102 other subscribers
    • Already have a WordPress.com account? Log in now.
    • Kismet Arts Tangent
    • Subscribe Subscribed
    • Sign up
    • Log in
    • Report this content
    • View site in Reader
    • Manage subscriptions
    • Collapse this bar
%d