part

A Viget Glossary: What We Mean and Why it Matters - Part 1

By feedproxy.google.com
Published On :: Tue, 21 Apr 2020 08:00:00 -0400

Viget has helped organizations design and develop award-winning websites and digital products for 20 years. In that time, we’ve been lucky to create long-term relationships with clients like Puma, the World Wildlife Fund, and Privia Health, and, throughout our time working together, we’ve come to understand each others’ unique terminology. But that isn’t always the case when we begin work with new clients, and in a constantly-evolving industry, we know that new terminology appears almost daily and organizations have unique definitions for deliverables and processes.

Kicking off a project always initiates a flurry of activity. There are contracts to sign, team members to introduce, and new platforms to learn. It’s an exciting time, and we know clients are anxious to get underway. Amidst all the activity, though, there is a need to define and create a shared lexicon to ensure both teams understand the project deliverables and process that will take us from kickoff to launch.

Below, we’ve rounded up a few terms for each of our disciplines that often require additional explanation. Note: our definitions of these terms may differ slightly from the industry standard, but highlight our interpretation and use of them on a daily basis.

User Experience

Research

In UX, there is a proliferation of terms that are often used interchangeably and mean almost-but-subtly-not the same thing. Viget uses the term research to specifically mean user research — learning more about the users of our products, particularly how they think and behave — in order to make stronger recommendations and better designs. This can be accomplished through different methodologies, depending on the needs of the project, and can include moderated usability testing, stakeholder interviews, audience research, surveys, and more. Learn more about the subtleties of UX research vocabulary in our post on “Speaking the Same Language About Research”.

Wireframes

We use wireframes to show the priority and organization of content on the screen, to give a sense of what elements will get a stronger visual treatment, and to detail how users will get to other parts of the site. Wireframes are a key component of website design — think of them as the skeleton or blueprint of a page — but we know that clients often feel uninspired after reviewing pages built with gray boxes. In fact, we’ve even written about how to improve wireframe presentations. We remind clients that visual designers will step in later to add polish through color, graphics, and typography, but agreeing on the foundation of the page is an important and necessary first step.

Prototypes

During the design process, it’s helpful for us to show clients how certain pieces of functionality or animations will work once the site is developed. We can mimic interactivity or test a technical proof of concept by using a clickable prototype, relying on tools like Figma, Invision, or Principle. Our prototypes can be used to illustrate a concept to internal stakeholders, but shouldn’t be seen as a final approach. Often, these concepts will require additional work to prepare them for developer handoff, which means that prototypes quickly become outdated. Read more about how and when we use prototypes.

Navigation Testing (Treejack Testing)

Following an information architecture presentation, we will sometimes recommend that clients conduct navigation testing. When testing, we present a participant with the proposed navigation and ask them to perform specific tasks in order to see if they will be able to locate the information specified within the site’s new organization. These tests generally focus on two aspects of the navigation: the structure of the navigation system itself, and the language used within the system. Treejack is an online navigation testing tool that we like to employ when conducting navigation tests, so we’ll often interchange the terms “navigation testing” with “treejack testing”.

Learn more about Viget’s approach to user experience and research. 


Full Article

part

A Viget Glossary: What We Mean and Why It Matters - Part 2

By feedproxy.google.com
Published On :: Tue, 28 Apr 2020 10:09:00 -0400

In my last post, I defined terms used by our UX team that are often confused or have multiple meanings across the industry. Today, I’ll share our definitions for processes and deliverables used by our design and strategy teams.

Creative

Brand Strategy

In our experience, we’ve found that the term brand strategy is used to cover a myriad of processes, documents, and deliverables. To us, a brand strategy defines how an organization communicates who they are, what they do and why in a clear and compelling way. Over the years, we’ve developed an approach to brand strategy work that emphasizes rigorous research, hands-on collaboration, and the definition of problems and goals. We work with clients to align on a brand strategy concept and, depending on the client and their goals, our final deliverables can range to include strategy definition, audience-specific messaging, identity details, brand elements, applications, and more. Take a look at the brand strategy work we’ve done for Fiscalnote, Swiftdine, and Armstrong Tire.

Content Strategy

A content strategy goes far beyond the words on a website or in an app. A strong content strategy dictates the substance, structure, and governance of the information an organization uses to communicate to its audience. It guides creating, organizing, and maintaining content so that companies can communicate who they are, what they do, and why efficiently and effectively. We’ve worked with organizations like the Washington Speakers Bureau, The Nature Conservancy, the NFL Players Association, and the Wildlife Conservation Society to refine and enhance their content strategies.

Still confused about the difference between brand and content strategy? Check out our flowchart.

Style Guide vs. Brand Guidelines

We often find the depth or fidelity of brand guidelines and style guides can vary greatly, and the terms can often be confused. When we create brand guidelines, they tend to be large documents that include in-depth recommendations about how a company should communicate their brand. Sections like “promise”, “vision”, “mission”, “values”, “tone”, etc. accompany details about how the brand’s logo, colors and fonts should be used in a variety of scenarios. Style guides, on the other hand, are typically pared down documents that contain specific guidance for organizations’ logos, colors and fonts, and don’t always include usage examples.

Design System

One question we get from clients often during a redesign or rebrand is, “How can I make sure people across my organization are adhering to our new designs?” This is where a design system comes into play. Design systems can range from the basic — e.g., a systematic approach to creating shared components for a single website — all the way to the complex —e.g., architecting a cross-product design system that can scale to accommodate hundreds of different products within a company. By assembling elements like color, typography, imagery, messaging, voice and tone, and interaction patterns in a central repository, organizations are able to scale products and marketing confidently and efficiently. When a design system is translated into code, we refer to that as a parts kit, which helps enforce consistency and improve workflow.

Comps or Mocks

When reviewing RFPs or going through the nitty-gritty of contracts with clients, we often see the terms mocks or comps used interchangeably to refer to the static design of pages or screens. Internally, we think of a mock-up as a static image file that illustrates proof-of-concept, just a step beyond a wireframe. A comp represents a design that is “high fidelity” and closer to what the final website will look like, though importantly, is not an exact replica. This is likely what clients will share with internal stakeholders to get approval on the website direction and what our front-end developers will use to begin building-out the site (in other words, converting the static design files into dynamic HTML, CSS, and JavaScript code).

If you're interested in joining our team of creative thinkers and visual storytellers who bring these concepts to life for our clients, we’re hiring in Washington, D.C. Durham, Boulder and Chattanooga. Tune in next week as we decipher the terms we use most often when talking about development.


Full Article

part

Building a PC, Part IX: Downsizing

By blog.codinghorror.com
Published On :: Sun, 19 Apr 2020 23:56:03 GMT

Hard to believe that I've had the same PC case since 2011, and my last serious upgrade was in 2015. I guess that's yet another sign that the PC is over, because PC upgrades have gotten really boring. It took 5 years for me to muster up the initiative to


Full Article

part

Markdown Comes Alive! Part 1, Basic Editor

By feedproxy.google.com
Published On :: Wed, 26 Feb 2020 08:00:00 -0500

In my last post, I covered what LiveView is at a high level. In this series, we’re going to dive deeper and implement a LiveView powered Markdown editor called Frampton. This series assumes you have some familiarity with Phoenix and Elixir, including having them set up locally. Check out Elizabeth’s three-part series on getting started with Phoenix for a refresher.

This series has a companion repository published on GitHub. Get started by cloning it down and switching to the starter branch. You can see the completed application on master. Our goal today is to make a Markdown editor, which allows a user to enter Markdown text on a page and see it rendered as HTML next to it in real-time. We’ll make use of LiveView for the interaction and the Earmark package for rendering Markdown. The starter branch provides some styles and installs LiveView.

Rendering Markdown

Let’s set aside the LiveView portion and start with our data structures and the functions that operate on them. To begin, a Post will have a body, which holds the rendered HTML string, and title. A string of markdown can be turned into HTML by calling Post.render(post, markdown). I think that just about covers it!

First, let’s define our struct in lib/frampton/post.ex:

defmodule Frampton.Post do
  defstruct body: "", title: ""

  def render(%__MODULE{} = post, markdown) do
    # Fill me in!
  end
end

Now the failing test (in test/frampton/post_test.exs):

describe "render/2" do
  test "returns our post with the body set" do
    markdown = "# Hello world!"                                                                                                                 
    assert Post.render(%Post{}, markdown) == {:ok, %Post{body: "<h1>Hello World</h1>
"}}
  end
end

Our render method will just be a wrapper around Earmark.as_html!/2 that puts the result into the body of the post. Add {:earmark, "~> 1.4.3"} to your deps in mix.exs, run mix deps.get and fill out render function:

def render(%__MODULE{} = post, markdown) do
  html = Earmark.as_html!(markdown)
  {:ok, Map.put(post, :body, html)}
end

Our test should now pass, and we can render posts! [Note: we’re using the as_html! method, which prints error messages instead of passing them back to the user. A smarter version of this would handle any errors and show them to the user. I leave that as an exercise for the reader…] Time to play around with this in an IEx prompt (run iex -S mix in your terminal):

iex(1)> alias Frampton.Post
Frampton.Post
iex(2)> post = %Post{}
%Frampton.Post{body: "", title: ""}
iex(3)> {:ok, updated_post} = Post.render(post, "# Hello world!")
{:ok, %Frampton.Post{body: "<h1>Hello world!</h1>
", title: ""}}
iex(4)> updated_post
%Frampton.Post{body: "<h1>Hello world!</h1>
", title: ""}

Great! That’s exactly what we’d expect. You can find the final code for this in the render_post branch.

LiveView Editor

Now for the fun part: Editing this live!

First, we’ll need a route for the editor to live at: /editor sounds good to me. LiveViews can be rendered from a controller, or directly in the router. We don’t have any initial state, so let's go straight from a router.

First, let's put up a minimal test. In test/frampton_web/live/editor_live_test.exs:

defmodule FramptonWeb.EditorLiveTest do
  use FramptonWeb.ConnCase
  import Phoenix.LiveViewTest

  test "the editor renders" do
    conn = get(build_conn(), "/editor")
    assert html_response(conn, 200) =~ "data-test="editor""
  end
end

This test doesn’t do much yet, but notice that it isn’t live view specific. Our first render is just the same as any other controller test we’d write. The page’s content is there right from the beginning, without the need to parse JavaScript or make API calls back to the server. Nice.

To make that test pass, add a route to lib/frampton_web/router.ex. First, we import the LiveView code, then we render our Editor:

import Phoenix.LiveView.Router
# … Code skipped ...
# Inside of `scope "/"`:
live "/editor", EditorLive

Now place a minimal EditorLive module, in lib/frampton_web/live/editor_live.ex:

defmodule FramptonWeb.EditorLive do
  use Phoenix.LiveView

  def render(assigns) do
    ~L"""
      <div data-test=”editor”>
        <h1>Hello world!</h1>
      </div>
      """
  end

  def mount(_params, _session, socket) do
    {:ok, socket}
  end
end

And we have a passing test suite! The ~L sigil designates that LiveView should track changes to the content inside. We could keep all of our markup in this render/1 method, but let’s break it out into its own template for demonstration purposes.

Move the contents of render into lib/frampton_web/templates/editor/show.html.leex, and replace EditorLive.render/1 with this one liner: def render(assigns), do: FramptonWeb.EditorView.render("show.html", assigns). And finally, make an EditorView module in lib/frampton_web/views/editor_view.ex:

defmodule FramptonWeb.EditorView do
  use FramptonWeb, :view
  import Phoenix.LiveView
end

Our test should now be passing, and we’ve got a nicely separated out template, view and “live” server. We can keep markup in the template, helper functions in the view, and reactive code on the server. Now let’s move forward to actually render some posts!

Handling User Input

We’ve got four tasks to accomplish before we are done:

  1. Take markdown input from the textarea
  2. Send that input to the LiveServer
  3. Turn that raw markdown into HTML
  4. Return the rendered HTML to the page.

Event binding

To start with, we need to annotate our textarea with an event binding. This tells the liveview.js framework to forward DOM events to the server, using our liveview channel. Open up lib/frampton_web/templates/editor/show.html.leex and annotate our textarea:

<textarea phx-keyup="render_post"></textarea>

This names the event (render_post) and sends it on each keyup. Let’s crack open our web inspector and look at the web socket traffic. Using Chrome, open the developer tools, navigate to the network tab and click WS. In development you’ll see two socket connections: one is Phoenix LiveReload, which polls your filesystem and reloads pages appropriately. The second one is our LiveView connection. If you let it sit for a while, you’ll see that it's emitting a “heartbeat” call. If your server is running, you’ll see that it responds with an “ok” message. This lets LiveView clients know when they've lost connection to the server and respond appropriately.

Now, type some text and watch as it sends down each keystroke. However, you’ll also notice that the server responds with a “phx_error” message and wipes out our entered text. That's because our server doesn’t know how to handle the event yet and is throwing an error. Let's fix that next.

Event handling

We’ll catch the event in our EditorLive module. The LiveView behavior defines a handle_event/3 callback that we need to implement. Open up lib/frampton_web/live/editor_live.ex and key in a basic implementation that lets us catch events:

def handle_event("render_post", params, socket) do
  IO.inspect(params)

  {:noreply, socket}
end

The first argument is the name we gave to our event in the template, the second is the data from that event, and finally the socket we’re currently talking through. Give it a try, typing in a few characters. Look at your running server and you should see a stream of events that look something like this:

There’s our keystrokes! Next, let’s pull out that value and use it to render HTML.

Rendering Markdown

Lets adjust our handle_event to pattern match out the value of the textarea:

def handle_event("render_post", %{"value" => raw}, socket) do

Now that we’ve got the raw markdown string, turning it into HTML is easy thanks to the work we did earlier in our Post module. Fill out the body of the function like this:

{:ok, post} = Post.render(%Post{}, raw)
IO.inspect(post)

If you type into the textarea you should see output that looks something like this:

Perfect! Lastly, it’s time to send that rendered html back to the page.

Returning HTML to the page

In a LiveView template, we can identify bits of dynamic data that will change over time. When they change, LiveView will compare what has changed and send over a diff. In our case, the dynamic content is the post body.

Open up show.html.leex again and modify it like so:

<div class="rendered-output">
  <%= @post.body %>
</div>

Refresh the page and see:

Whoops!

The @post variable will only be available after we put it into the socket’s assigns. Let’s initialize it with a blank post. Open editor_live.ex and modify our mount/3 function:

def mount(_params, _session, socket) do
  post = %Post{}
  {:ok, assign(socket, post: post)}
end

In the future, we could retrieve this from some kind of storage, but for now, let's just create a new one each time the page refreshes. Finally, we need to update the Post struct with user input. Update our event handler like this:

def handle_event("render_post", %{"value" => raw}, %{assigns: %{post: post}} = socket) do
  {:ok, post} = Post.render(post, raw)
  {:noreply, assign(socket, post: post)
end

Let's load up http://localhost:4000/editor and see it in action.

Nope, that's not quite right! Phoenix won’t render this as HTML because it’s unsafe user input. We can get around this (very good and useful) security feature by wrapping our content in a raw/1 call. We don’t have a database and user processes are isolated from each other by Elixir. The worst thing a malicious user could do would be crash their own session, which doesn’t bother me one bit.

Check the edit_posts branch for the final version.

Conclusion

That’s a good place to stop for today. We’ve accomplished a lot! We’ve got a dynamically rendering editor that takes user input, processes it and updates the page. And we haven’t written any JavaScript, which means we don’t have to maintain or update any JavaScript. Our server code is built on the rock-solid foundation of the BEAM virtual machine, giving us a great deal of confidence in its reliability and resilience.

In the next post, we’ll tackle making a shared editor, allowing multiple users to edit the same post. This project will highlight Elixir’s concurrency capabilities and demonstrate how LiveView builds on them to enable some incredible user experiences.


Full Article

  • Code
  • Back-end Engineering
part

A Viget Glossary: What We Mean and Why it Matters - Part 1

By feedproxy.google.com
Published On :: Tue, 21 Apr 2020 08:00:00 -0400

Viget has helped organizations design and develop award-winning websites and digital products for 20 years. In that time, we’ve been lucky to create long-term relationships with clients like Puma, the World Wildlife Fund, and Privia Health, and, throughout our time working together, we’ve come to understand each others’ unique terminology. But that isn’t always the case when we begin work with new clients, and in a constantly-evolving industry, we know that new terminology appears almost daily and organizations have unique definitions for deliverables and processes.

Kicking off a project always initiates a flurry of activity. There are contracts to sign, team members to introduce, and new platforms to learn. It’s an exciting time, and we know clients are anxious to get underway. Amidst all the activity, though, there is a need to define and create a shared lexicon to ensure both teams understand the project deliverables and process that will take us from kickoff to launch.

Below, we’ve rounded up a few terms for each of our disciplines that often require additional explanation. Note: our definitions of these terms may differ slightly from the industry standard, but highlight our interpretation and use of them on a daily basis.

User Experience

Research

In UX, there is a proliferation of terms that are often used interchangeably and mean almost-but-subtly-not the same thing. Viget uses the term research to specifically mean user research — learning more about the users of our products, particularly how they think and behave — in order to make stronger recommendations and better designs. This can be accomplished through different methodologies, depending on the needs of the project, and can include moderated usability testing, stakeholder interviews, audience research, surveys, and more. Learn more about the subtleties of UX research vocabulary in our post on “Speaking the Same Language About Research”.

Wireframes

We use wireframes to show the priority and organization of content on the screen, to give a sense of what elements will get a stronger visual treatment, and to detail how users will get to other parts of the site. Wireframes are a key component of website design — think of them as the skeleton or blueprint of a page — but we know that clients often feel uninspired after reviewing pages built with gray boxes. In fact, we’ve even written about how to improve wireframe presentations. We remind clients that visual designers will step in later to add polish through color, graphics, and typography, but agreeing on the foundation of the page is an important and necessary first step.

Prototypes

During the design process, it’s helpful for us to show clients how certain pieces of functionality or animations will work once the site is developed. We can mimic interactivity or test a technical proof of concept by using a clickable prototype, relying on tools like Figma, Invision, or Principle. Our prototypes can be used to illustrate a concept to internal stakeholders, but shouldn’t be seen as a final approach. Often, these concepts will require additional work to prepare them for developer handoff, which means that prototypes quickly become outdated. Read more about how and when we use prototypes.

Navigation Testing (Treejack Testing)

Following an information architecture presentation, we will sometimes recommend that clients conduct navigation testing. When testing, we present a participant with the proposed navigation and ask them to perform specific tasks in order to see if they will be able to locate the information specified within the site’s new organization. These tests generally focus on two aspects of the navigation: the structure of the navigation system itself, and the language used within the system. Treejack is an online navigation testing tool that we like to employ when conducting navigation tests, so we’ll often interchange the terms “navigation testing” with “treejack testing”.

Learn more about Viget’s approach to user experience and research. 


Full Article

part

A Viget Glossary: What We Mean and Why It Matters - Part 2

By feedproxy.google.com
Published On :: Tue, 28 Apr 2020 10:09:00 -0400

In my last post, I defined terms used by our UX team that are often confused or have multiple meanings across the industry. Today, I’ll share our definitions for processes and deliverables used by our design and strategy teams.

Creative

Brand Strategy

In our experience, we’ve found that the term brand strategy is used to cover a myriad of processes, documents, and deliverables. To us, a brand strategy defines how an organization communicates who they are, what they do and why in a clear and compelling way. Over the years, we’ve developed an approach to brand strategy work that emphasizes rigorous research, hands-on collaboration, and the definition of problems and goals. We work with clients to align on a brand strategy concept and, depending on the client and their goals, our final deliverables can range to include strategy definition, audience-specific messaging, identity details, brand elements, applications, and more. Take a look at the brand strategy work we’ve done for Fiscalnote, Swiftdine, and Armstrong Tire.

Content Strategy

A content strategy goes far beyond the words on a website or in an app. A strong content strategy dictates the substance, structure, and governance of the information an organization uses to communicate to its audience. It guides creating, organizing, and maintaining content so that companies can communicate who they are, what they do, and why efficiently and effectively. We’ve worked with organizations like the Washington Speakers Bureau, The Nature Conservancy, the NFL Players Association, and the Wildlife Conservation Society to refine and enhance their content strategies.

Still confused about the difference between brand and content strategy? Check out our flowchart.

Style Guide vs. Brand Guidelines

We often find the depth or fidelity of brand guidelines and style guides can vary greatly, and the terms can often be confused. When we create brand guidelines, they tend to be large documents that include in-depth recommendations about how a company should communicate their brand. Sections like “promise”, “vision”, “mission”, “values”, “tone”, etc. accompany details about how the brand’s logo, colors and fonts should be used in a variety of scenarios. Style guides, on the other hand, are typically pared down documents that contain specific guidance for organizations’ logos, colors and fonts, and don’t always include usage examples.

Design System

One question we get from clients often during a redesign or rebrand is, “How can I make sure people across my organization are adhering to our new designs?” This is where a design system comes into play. Design systems can range from the basic — e.g., a systematic approach to creating shared components for a single website — all the way to the complex —e.g., architecting a cross-product design system that can scale to accommodate hundreds of different products within a company. By assembling elements like color, typography, imagery, messaging, voice and tone, and interaction patterns in a central repository, organizations are able to scale products and marketing confidently and efficiently. When a design system is translated into code, we refer to that as a parts kit, which helps enforce consistency and improve workflow.

Comps or Mocks

When reviewing RFPs or going through the nitty-gritty of contracts with clients, we often see the terms mocks or comps used interchangeably to refer to the static design of pages or screens. Internally, we think of a mock-up as a static image file that illustrates proof-of-concept, just a step beyond a wireframe. A comp represents a design that is “high fidelity” and closer to what the final website will look like, though importantly, is not an exact replica. This is likely what clients will share with internal stakeholders to get approval on the website direction and what our front-end developers will use to begin building-out the site (in other words, converting the static design files into dynamic HTML, CSS, and JavaScript code).

If you're interested in joining our team of creative thinkers and visual storytellers who bring these concepts to life for our clients, we’re hiring in Washington, D.C. Durham, Boulder and Chattanooga. Tune in next week as we decipher the terms we use most often when talking about development.


Full Article

part

Talking to computers (part 1): Why is speech recognition so difficult?

By feedproxy.google.com
Published On :: Thu, 3 Jun 2019 08:31:15 GMT

Although the performance of today's speech recognition systems is impressive, the experience for many is still one of errors, corrections, frustration and abandoning speech in favour of alternative interaction methods. We take a closer look at speech and find out why speech recognition is so difficult.


Full Article

part

Talking to computers (part 2): VUI as an error recovery system

By feedproxy.google.com
Published On :: Mon, 1 Jul 2019 08:21:51 GMT

I take a closer look at some unavoidable challenges to effective speech recognition, and I discuss why you may want to think twice before designing dialogue that is 'conversational' and 'natural'. I also offer five important questions that I think should form the basis of any VUI design kick-off meeting.


Full Article

part

Intercellar - Accidental Anomalies of Particle Wallpapers

By feedproxy.google.com
Published On :: Thu, 07 May 2020 04:00:00 +0000

Intercellar - Accidental Anomalies of Particle Wallpapers

AoiroStudioMay 07, 2020

Intercellar is a series of free wallpapers designed 'by accident' by Crtomir Just. I mentioned 'accident' because 'the images are the results of errors in particle simulations'. I think they are super stunning and crispy. We took the liberty to share Crtomir's entire collection and their 'download links'. You can download the 8K wallpapers, this feature is a reminder of what we used to do back in the days. We are definitely living in different times but it's always a nice reminder to remember what we were made of.

These images are the results of errors in particle simulations. While accidentally trying to scrub through the timeline, the otherwise predictable simulation explodes and is forced to take strange turns by blindly filling the gap between missing frames.

About Crtomir Just

Crtomir is an art director and 3D artist based in Murska Sobota, Slovenia, his work slightly shifted and it’s plain awesome. Make sure to follow his work on Behance and store.

 

 

 

 

 


Full Article

part

Markdown Comes Alive! Part 1, Basic Editor

By feedproxy.google.com
Published On :: Wed, 26 Feb 2020 08:00:00 -0500

In my last post, I covered what LiveView is at a high level. In this series, we’re going to dive deeper and implement a LiveView powered Markdown editor called Frampton. This series assumes you have some familiarity with Phoenix and Elixir, including having them set up locally. Check out Elizabeth’s three-part series on getting started with Phoenix for a refresher.

This series has a companion repository published on GitHub. Get started by cloning it down and switching to the starter branch. You can see the completed application on master. Our goal today is to make a Markdown editor, which allows a user to enter Markdown text on a page and see it rendered as HTML next to it in real-time. We’ll make use of LiveView for the interaction and the Earmark package for rendering Markdown. The starter branch provides some styles and installs LiveView.

Rendering Markdown

Let’s set aside the LiveView portion and start with our data structures and the functions that operate on them. To begin, a Post will have a body, which holds the rendered HTML string, and title. A string of markdown can be turned into HTML by calling Post.render(post, markdown). I think that just about covers it!

First, let’s define our struct in lib/frampton/post.ex:

defmodule Frampton.Post do
  defstruct body: "", title: ""

  def render(%__MODULE{} = post, markdown) do
    # Fill me in!
  end
end

Now the failing test (in test/frampton/post_test.exs):

describe "render/2" do
  test "returns our post with the body set" do
    markdown = "# Hello world!"                                                                                                                 
    assert Post.render(%Post{}, markdown) == {:ok, %Post{body: "<h1>Hello World</h1>
"}}
  end
end

Our render method will just be a wrapper around Earmark.as_html!/2 that puts the result into the body of the post. Add {:earmark, "~> 1.4.3"} to your deps in mix.exs, run mix deps.get and fill out render function:

def render(%__MODULE{} = post, markdown) do
  html = Earmark.as_html!(markdown)
  {:ok, Map.put(post, :body, html)}
end

Our test should now pass, and we can render posts! [Note: we’re using the as_html! method, which prints error messages instead of passing them back to the user. A smarter version of this would handle any errors and show them to the user. I leave that as an exercise for the reader…] Time to play around with this in an IEx prompt (run iex -S mix in your terminal):

iex(1)> alias Frampton.Post
Frampton.Post
iex(2)> post = %Post{}
%Frampton.Post{body: "", title: ""}
iex(3)> {:ok, updated_post} = Post.render(post, "# Hello world!")
{:ok, %Frampton.Post{body: "<h1>Hello world!</h1>
", title: ""}}
iex(4)> updated_post
%Frampton.Post{body: "<h1>Hello world!</h1>
", title: ""}

Great! That’s exactly what we’d expect. You can find the final code for this in the render_post branch.

LiveView Editor

Now for the fun part: Editing this live!

First, we’ll need a route for the editor to live at: /editor sounds good to me. LiveViews can be rendered from a controller, or directly in the router. We don’t have any initial state, so let's go straight from a router.

First, let's put up a minimal test. In test/frampton_web/live/editor_live_test.exs:

defmodule FramptonWeb.EditorLiveTest do
  use FramptonWeb.ConnCase
  import Phoenix.LiveViewTest

  test "the editor renders" do
    conn = get(build_conn(), "/editor")
    assert html_response(conn, 200) =~ "data-test="editor""
  end
end

This test doesn’t do much yet, but notice that it isn’t live view specific. Our first render is just the same as any other controller test we’d write. The page’s content is there right from the beginning, without the need to parse JavaScript or make API calls back to the server. Nice.

To make that test pass, add a route to lib/frampton_web/router.ex. First, we import the LiveView code, then we render our Editor:

import Phoenix.LiveView.Router
# … Code skipped ...
# Inside of `scope "/"`:
live "/editor", EditorLive

Now place a minimal EditorLive module, in lib/frampton_web/live/editor_live.ex:

defmodule FramptonWeb.EditorLive do
  use Phoenix.LiveView

  def render(assigns) do
    ~L"""
      <div data-test=”editor”>
        <h1>Hello world!</h1>
      </div>
      """
  end

  def mount(_params, _session, socket) do
    {:ok, socket}
  end
end

And we have a passing test suite! The ~L sigil designates that LiveView should track changes to the content inside. We could keep all of our markup in this render/1 method, but let’s break it out into its own template for demonstration purposes.

Move the contents of render into lib/frampton_web/templates/editor/show.html.leex, and replace EditorLive.render/1 with this one liner: def render(assigns), do: FramptonWeb.EditorView.render("show.html", assigns). And finally, make an EditorView module in lib/frampton_web/views/editor_view.ex:

defmodule FramptonWeb.EditorView do
  use FramptonWeb, :view
  import Phoenix.LiveView
end

Our test should now be passing, and we’ve got a nicely separated out template, view and “live” server. We can keep markup in the template, helper functions in the view, and reactive code on the server. Now let’s move forward to actually render some posts!

Handling User Input

We’ve got four tasks to accomplish before we are done:

  1. Take markdown input from the textarea
  2. Send that input to the LiveServer
  3. Turn that raw markdown into HTML
  4. Return the rendered HTML to the page.

Event binding

To start with, we need to annotate our textarea with an event binding. This tells the liveview.js framework to forward DOM events to the server, using our liveview channel. Open up lib/frampton_web/templates/editor/show.html.leex and annotate our textarea:

<textarea phx-keyup="render_post"></textarea>

This names the event (render_post) and sends it on each keyup. Let’s crack open our web inspector and look at the web socket traffic. Using Chrome, open the developer tools, navigate to the network tab and click WS. In development you’ll see two socket connections: one is Phoenix LiveReload, which polls your filesystem and reloads pages appropriately. The second one is our LiveView connection. If you let it sit for a while, you’ll see that it's emitting a “heartbeat” call. If your server is running, you’ll see that it responds with an “ok” message. This lets LiveView clients know when they've lost connection to the server and respond appropriately.

Now, type some text and watch as it sends down each keystroke. However, you’ll also notice that the server responds with a “phx_error” message and wipes out our entered text. That's because our server doesn’t know how to handle the event yet and is throwing an error. Let's fix that next.

Event handling

We’ll catch the event in our EditorLive module. The LiveView behavior defines a handle_event/3 callback that we need to implement. Open up lib/frampton_web/live/editor_live.ex and key in a basic implementation that lets us catch events:

def handle_event("render_post", params, socket) do
  IO.inspect(params)

  {:noreply, socket}
end

The first argument is the name we gave to our event in the template, the second is the data from that event, and finally the socket we’re currently talking through. Give it a try, typing in a few characters. Look at your running server and you should see a stream of events that look something like this:

There’s our keystrokes! Next, let’s pull out that value and use it to render HTML.

Rendering Markdown

Lets adjust our handle_event to pattern match out the value of the textarea:

def handle_event("render_post", %{"value" => raw}, socket) do

Now that we’ve got the raw markdown string, turning it into HTML is easy thanks to the work we did earlier in our Post module. Fill out the body of the function like this:

{:ok, post} = Post.render(%Post{}, raw)
IO.inspect(post)

If you type into the textarea you should see output that looks something like this:

Perfect! Lastly, it’s time to send that rendered html back to the page.

Returning HTML to the page

In a LiveView template, we can identify bits of dynamic data that will change over time. When they change, LiveView will compare what has changed and send over a diff. In our case, the dynamic content is the post body.

Open up show.html.leex again and modify it like so:

<div class="rendered-output">
  <%= @post.body %>
</div>

Refresh the page and see:

Whoops!

The @post variable will only be available after we put it into the socket’s assigns. Let’s initialize it with a blank post. Open editor_live.ex and modify our mount/3 function:

def mount(_params, _session, socket) do
  post = %Post{}
  {:ok, assign(socket, post: post)}
end

In the future, we could retrieve this from some kind of storage, but for now, let's just create a new one each time the page refreshes. Finally, we need to update the Post struct with user input. Update our event handler like this:

def handle_event("render_post", %{"value" => raw}, %{assigns: %{post: post}} = socket) do
  {:ok, post} = Post.render(post, raw)
  {:noreply, assign(socket, post: post)
end

Let's load up http://localhost:4000/editor and see it in action.

Nope, that's not quite right! Phoenix won’t render this as HTML because it’s unsafe user input. We can get around this (very good and useful) security feature by wrapping our content in a raw/1 call. We don’t have a database and user processes are isolated from each other by Elixir. The worst thing a malicious user could do would be crash their own session, which doesn’t bother me one bit.

Check the edit_posts branch for the final version.

Conclusion

That’s a good place to stop for today. We’ve accomplished a lot! We’ve got a dynamically rendering editor that takes user input, processes it and updates the page. And we haven’t written any JavaScript, which means we don’t have to maintain or update any JavaScript. Our server code is built on the rock-solid foundation of the BEAM virtual machine, giving us a great deal of confidence in its reliability and resilience.

In the next post, we’ll tackle making a shared editor, allowing multiple users to edit the same post. This project will highlight Elixir’s concurrency capabilities and demonstrate how LiveView builds on them to enable some incredible user experiences.


Full Article

  • Code
  • Back-end Engineering
part

A Viget Glossary: What We Mean and Why it Matters - Part 1

By feedproxy.google.com
Published On :: Tue, 21 Apr 2020 08:00:00 -0400

Viget has helped organizations design and develop award-winning websites and digital products for 20 years. In that time, we’ve been lucky to create long-term relationships with clients like Puma, the World Wildlife Fund, and Privia Health, and, throughout our time working together, we’ve come to understand each others’ unique terminology. But that isn’t always the case when we begin work with new clients, and in a constantly-evolving industry, we know that new terminology appears almost daily and organizations have unique definitions for deliverables and processes.

Kicking off a project always initiates a flurry of activity. There are contracts to sign, team members to introduce, and new platforms to learn. It’s an exciting time, and we know clients are anxious to get underway. Amidst all the activity, though, there is a need to define and create a shared lexicon to ensure both teams understand the project deliverables and process that will take us from kickoff to launch.

Below, we’ve rounded up a few terms for each of our disciplines that often require additional explanation. Note: our definitions of these terms may differ slightly from the industry standard, but highlight our interpretation and use of them on a daily basis.

User Experience

Research

In UX, there is a proliferation of terms that are often used interchangeably and mean almost-but-subtly-not the same thing. Viget uses the term research to specifically mean user research — learning more about the users of our products, particularly how they think and behave — in order to make stronger recommendations and better designs. This can be accomplished through different methodologies, depending on the needs of the project, and can include moderated usability testing, stakeholder interviews, audience research, surveys, and more. Learn more about the subtleties of UX research vocabulary in our post on “Speaking the Same Language About Research”.

Wireframes

We use wireframes to show the priority and organization of content on the screen, to give a sense of what elements will get a stronger visual treatment, and to detail how users will get to other parts of the site. Wireframes are a key component of website design — think of them as the skeleton or blueprint of a page — but we know that clients often feel uninspired after reviewing pages built with gray boxes. In fact, we’ve even written about how to improve wireframe presentations. We remind clients that visual designers will step in later to add polish through color, graphics, and typography, but agreeing on the foundation of the page is an important and necessary first step.

Prototypes

During the design process, it’s helpful for us to show clients how certain pieces of functionality or animations will work once the site is developed. We can mimic interactivity or test a technical proof of concept by using a clickable prototype, relying on tools like Figma, Invision, or Principle. Our prototypes can be used to illustrate a concept to internal stakeholders, but shouldn’t be seen as a final approach. Often, these concepts will require additional work to prepare them for developer handoff, which means that prototypes quickly become outdated. Read more about how and when we use prototypes.

Navigation Testing (Treejack Testing)

Following an information architecture presentation, we will sometimes recommend that clients conduct navigation testing. When testing, we present a participant with the proposed navigation and ask them to perform specific tasks in order to see if they will be able to locate the information specified within the site’s new organization. These tests generally focus on two aspects of the navigation: the structure of the navigation system itself, and the language used within the system. Treejack is an online navigation testing tool that we like to employ when conducting navigation tests, so we’ll often interchange the terms “navigation testing” with “treejack testing”.

Learn more about Viget’s approach to user experience and research. 


Full Article

part

A Viget Glossary: What We Mean and Why It Matters - Part 2

By feedproxy.google.com
Published On :: Tue, 28 Apr 2020 10:09:00 -0400

In my last post, I defined terms used by our UX team that are often confused or have multiple meanings across the industry. Today, I’ll share our definitions for processes and deliverables used by our design and strategy teams.

Creative

Brand Strategy

In our experience, we’ve found that the term brand strategy is used to cover a myriad of processes, documents, and deliverables. To us, a brand strategy defines how an organization communicates who they are, what they do and why in a clear and compelling way. Over the years, we’ve developed an approach to brand strategy work that emphasizes rigorous research, hands-on collaboration, and the definition of problems and goals. We work with clients to align on a brand strategy concept and, depending on the client and their goals, our final deliverables can range to include strategy definition, audience-specific messaging, identity details, brand elements, applications, and more. Take a look at the brand strategy work we’ve done for Fiscalnote, Swiftdine, and Armstrong Tire.

Content Strategy

A content strategy goes far beyond the words on a website or in an app. A strong content strategy dictates the substance, structure, and governance of the information an organization uses to communicate to its audience. It guides creating, organizing, and maintaining content so that companies can communicate who they are, what they do, and why efficiently and effectively. We’ve worked with organizations like the Washington Speakers Bureau, The Nature Conservancy, the NFL Players Association, and the Wildlife Conservation Society to refine and enhance their content strategies.

Still confused about the difference between brand and content strategy? Check out our flowchart.

Style Guide vs. Brand Guidelines

We often find the depth or fidelity of brand guidelines and style guides can vary greatly, and the terms can often be confused. When we create brand guidelines, they tend to be large documents that include in-depth recommendations about how a company should communicate their brand. Sections like “promise”, “vision”, “mission”, “values”, “tone”, etc. accompany details about how the brand’s logo, colors and fonts should be used in a variety of scenarios. Style guides, on the other hand, are typically pared down documents that contain specific guidance for organizations’ logos, colors and fonts, and don’t always include usage examples.

Design System

One question we get from clients often during a redesign or rebrand is, “How can I make sure people across my organization are adhering to our new designs?” This is where a design system comes into play. Design systems can range from the basic — e.g., a systematic approach to creating shared components for a single website — all the way to the complex —e.g., architecting a cross-product design system that can scale to accommodate hundreds of different products within a company. By assembling elements like color, typography, imagery, messaging, voice and tone, and interaction patterns in a central repository, organizations are able to scale products and marketing confidently and efficiently. When a design system is translated into code, we refer to that as a parts kit, which helps enforce consistency and improve workflow.

Comps or Mocks

When reviewing RFPs or going through the nitty-gritty of contracts with clients, we often see the terms mocks or comps used interchangeably to refer to the static design of pages or screens. Internally, we think of a mock-up as a static image file that illustrates proof-of-concept, just a step beyond a wireframe. A comp represents a design that is “high fidelity” and closer to what the final website will look like, though importantly, is not an exact replica. This is likely what clients will share with internal stakeholders to get approval on the website direction and what our front-end developers will use to begin building-out the site (in other words, converting the static design files into dynamic HTML, CSS, and JavaScript code).

If you're interested in joining our team of creative thinkers and visual storytellers who bring these concepts to life for our clients, we’re hiring in Washington, D.C. Durham, Boulder and Chattanooga. Tune in next week as we decipher the terms we use most often when talking about development.


Full Article

part

Mirage JS Deep Dive: Understanding Mirage JS Models And Associations (Part 1)

By feedproxy.google.com
Published On :: Thu, 30 Apr 2020 09:30:00 +0000

Mirage JS is helping simplify modern front-end development by providing the ability for front-end engineers to craft applications without relying on an actual back-end service. In this article, I’ll be taking a framework-agnostic approach to show you Mirage JS models and associations. If you haven’t heard of Mirage JS, you can read my previous article in which I introduce it and also integrate it with the progressive framework Vue.js.


Full Article

part

eagereyesTV: What is Data? Part 1, File Formats and Intent

By eagereyes.org
Published On :: Wed, 06 Nov 2019 16:07:40 +0000

We all use data all the time, but what exactly is data? How do different programs know what to do with our data? How is visualizing data different from other uses of data? And isn’t everything inside a computer data in the end? The latest episode of eagereyesTV looks at what data is and what […]


Full Article

part

eagereyesTV: What Is Data? Part 2, Are Images Data?

By eagereyes.org
Published On :: Mon, 16 Dec 2019 13:01:25 +0000

Visualization turns data into images, but are images themselves data? There are often claims that they are, but then you mostly see the images themselves without much additional data. In this video, I look at image browsers, a project classifying selfies along a number of criteria, and the additional information stored in HEIC that makes […]


Full Article

part

Regular Tur'an numbers of complete bipartite graphs. (arXiv:2005.02907v2 [math.CO] UPDATED)

By arxiv.org
Published On ::

Let $mathrm{rex}(n, F)$ denote the maximum number of edges in an $n$-vertex graph that is regular and does not contain $F$ as a subgraph. We give lower bounds on $mathrm{rex}(n, F)$, that are best possible up to a constant factor, when $F$ is one of $C_4$, $K_{2,t}$, $K_{3,3}$ or $K_{s,t}$ when $t>s!$.


Full Article

part

Triangles in graphs without bipartite suspensions. (arXiv:2004.11930v2 [math.CO] UPDATED)

By arxiv.org
Published On ::

Given graphs $T$ and $H$, the generalized Tur'an number ex$(n,T,H)$ is the maximum number of copies of $T$ in an $n$-vertex graph with no copies of $H$. Alon and Shikhelman, using a result of ErdH os, determined the asymptotics of ex$(n,K_3,H)$ when the chromatic number of $H$ is greater than 3 and proved several results when $H$ is bipartite. We consider this problem when $H$ has chromatic number 3. Even this special case for the following relatively simple 3-chromatic graphs appears to be challenging.

The suspension $widehat H$ of a graph $H$ is the graph obtained from $H$ by adding a new vertex adjacent to all vertices of $H$. We give new upper and lower bounds on ex$(n,K_3,widehat{H})$ when $H$ is a path, even cycle, or complete bipartite graph. One of the main tools we use is the triangle removal lemma, but it is unclear if much stronger statements can be proved without using the removal lemma.


Full Article

part

Exotic Springer fibers for orbits corresponding to one-row bipartitions. (arXiv:1810.03731v2 [math.RT] UPDATED)

By arxiv.org
Published On ::

We study the geometry and topology of exotic Springer fibers for orbits corresponding to one-row bipartitions from an explicit, combinatorial point of view. This includes a detailed analysis of the structure of the irreducible components and their intersections as well as the construction of an explicit affine paving. Moreover, we compute the ring structure of cohomology by constructing a CW-complex homotopy equivalent to the exotic Springer fiber. This homotopy equivalent space admits an action of the type C Weyl group inducing Kato's original exotic Springer representation on cohomology. Our results are described in terms of the diagrammatics of the one-boundary Temperley-Lieb algebra (also known as the blob algebra). This provides a first step in generalizing the geometric versions of Khovanov's arc algebra to the exotic setting.


Full Article

part

On the partitions into distinct parts and odd parts. (arXiv:2005.03619v1 [math.CO])

By arxiv.org
Published On ::

In this paper, we show that the difference between the number of parts in the odd partitions of $n$ and the number of parts in the distinct partitions of $n$ satisfies Euler's recurrence relation for the partition function $p(n)$ when $n$ is odd. A decomposition of this difference in terms of the total number of parts in all the partitions of $n$ is also derived. In this context, we conjecture that for $k>0$, the series

$$

(q^2;q^2)_infty sum_{n=k}^infty frac{q^{{kchoose 2}+(k+1)n}}{(q;q)_n}

egin{bmatrix}

n-1\k-1

end{bmatrix}

$$ has non-negative coefficients.


Full Article

part

Maximum of Exponential Random Variables, Hurwitz's Zeta Function, and the Partition Function. (arXiv:2005.03392v1 [math.PR])

By arxiv.org
Published On ::

A natural problem in the context of the coupon collector's problem is the behavior of the maximum of independent geometrically distributed random variables (with distinct parameters). This question has been addressed by Brennan et al. (British J. of Math. & CS. 8 (2015), 330-336). Here we provide explicit asymptotic expressions for the moments of that maximum, as well as of the maximum of exponential random variables with corresponding parameters. We also deal with the probability of each of the variables being the maximal one.

The calculations lead to expressions involving Hurwitz's zeta function at certain special points. We find here explicitly the values of the function at these points. Also, the distribution function of the maximum we deal with is closely related to the generating function of the partition function. Thus, our results (and proofs) rely on classical results pertaining to the partition function.


Full Article

part

A Note on Cores and Quasi Relative Interiors in Partially Finite Convex Programming. (arXiv:2005.03265v1 [math.FA])

By arxiv.org
Published On ::

The problem of minimizing an entropy functional subject to linear constraints is a useful example of partially finite convex programming. In the 1990s, Borwein and Lewis provided broad and easy-to-verify conditions that guarantee strong duality for such problems. Their approach is to construct a function in the quasi-relative interior of the relevant infinite-dimensional set, which assures the existence of a point in the core of the relevant finite-dimensional set. We revisit this problem, and provide an alternative proof by directly appealing to the definition of the core, rather than by relying on any properties of the quasi-relative interior. Our approach admits a minor relaxation of the linear independence requirements in Borwein and Lewis' framework, which allows us to work with certain piecewise-defined moment functions precluded by their conditions. We provide such a computed example that illustrates how this relaxation may be used to tame observed Gibbs phenomenon when the underlying data is discontinuous. The relaxation illustrates the understanding we may gain by tackling partially-finite problems from both the finite-dimensional and infinite-dimensional sides. The comparison of these two approaches is informative, as both proofs are constructive.


Full Article

part

Categorifying Hecke algebras at prime roots of unity, part I. (arXiv:2005.03128v1 [math.RT])

By arxiv.org
Published On ::

We equip the type A diagrammatic Hecke category with a special derivation, so that after specialization to characteristic p it becomes a p-dg category. We prove that the defining relations of the Hecke algebra are satisfied in the p-dg Grothendieck group. We conjecture that the $p$-dg Grothendieck group is isomorphic to the Iwahori-Hecke algebra, equipping it with a basis which may differ from both the Kazhdan-Lusztig basis and the p-canonical basis. More precise conjectures will be found in the sequel.

Here are some other results contained in this paper. We provide an incomplete proof of the classification of all degree +2 derivations on the diagrammatic Hecke category, and a complete proof of the classification of those derivations for which the defining relations of the Hecke algebra are satisfied in the p-dg Grothendieck group. In particular, our special derivation is unique up to duality and equivalence. We prove that no such derivation exists in simply-laced types outside of finite and affine type A. We also examine a particular Bott-Samelson bimodule in type A_7, which is indecomposable in characteristic 2 but decomposable in all other characteristics. We prove that this Bott-Samelson bimodule admits no nontrivial fantastic filtrations in any characteristic, which is the analogue in the p-dg setting of being indecomposable.


Full Article

part

An improved exact algorithm and an NP-completeness proof for sparse matrix bipartitioning. (arXiv:1811.02043v2 [cs.DS] UPDATED)

By arxiv.org
Published On ::

We investigate sparse matrix bipartitioning -- a problem where we minimize the communication volume in parallel sparse matrix-vector multiplication. We prove, by reduction from graph bisection, that this problem is $mathcal{NP}$-complete in the case where each side of the bipartitioning must contain a linear fraction of the nonzeros.

We present an improved exact branch-and-bound algorithm which finds the minimum communication volume for a given matrix and maximum allowed imbalance. The algorithm is based on a maximum-flow bound and a packing bound, which extend previous matching and packing bounds.

We implemented the algorithm in a new program called MP (Matrix Partitioner), which solved 839 matrices from the SuiteSparse collection to optimality, each within 24 hours of CPU-time. Furthermore, MP solved the difficult problem of the matrix cage6 in about 3 days. The new program is on average more than ten times faster than the previous program MondriaanOpt.

Benchmark results using the set of 839 optimally solved matrices show that combining the medium-grain/iterative refinement methods of the Mondriaan package with the hypergraph bipartitioner of the PaToH package produces sparse matrix bipartitionings on average within 10% of the optimal solution.


Full Article

part

p for political: Participation Without Agency Is Not Enough. (arXiv:2005.03534v1 [cs.HC])

By arxiv.org
Published On ::

Participatory Design's vision of democratic participation assumes participants' feelings of agency in envisioning a collective future. But this assumption may be leaky when dealing with vulnerable populations. We reflect on the results of a series of activities aimed at supporting agentic-future-envisionment with a group of sex-trafficking survivors in Nepal. We observed a growing sense among the survivors that they could play a role in bringing about change in their families. They also became aware of how they could interact with available institutional resources. Reflecting on the observations, we argue that building participant agency on the small and personal interactions is necessary before demanding larger Political participation. In particular, a value of PD, especially for vulnerable populations, can lie in the process itself if it helps participants position themselves as actors in the larger world.


Full Article

part

Football High: Garrett Harper's Story, Part II

By feedproxy.google.com
Published On :: Tue, 10 Dec 2013 00:00:00 EST

The decisions coaches make on the sidelines about returning a concussed player to the game or not can be a "game changer" for that athlete's life.


Full Article

part

Football High: Garrett Harper's Story, Part I

By feedproxy.google.com
Published On :: Tue, 10 Dec 2013 00:00:00 EST

For many competitive high school football players like Garrett Harper, the intensity of this contact sport has its price.


Full Article

part

Energy Department Reports Show Strong Growth of U.S. Wind Power

By feedproxy.google.com
Published On :: Thu, 18 Aug 2016 17:54:01 +0000

By Energy.Gov Annual reports analyzing the wind energy industry released today by the Energy Department show continued rapid growth in wind power installations in 2015, demonstrating market resilience and underscoring the vitality of the U.S. wind energy market on a … Continue reading →


Full Article

part

The Complete Tutorial on the Top 5 Ways to Query Your Relational Database in JavaScript - Part 2

By dzone.com
Published On :: Wed, 29 Apr 2020 20:58:05 GMT

Welcome back! In the first part of this series, we looked at a very "low-level" way to interact with a relational database by sending it raw SQL strings and retrieving the results. We created a very simple Express application that we can use as an example and deployed it on Heroku with a Postgres database.

In this part, we're going to examine a few libraries which build on top of that foundation, adding layers of abstraction that let you read and manipulate database data in a more "JavaScript-like" way.


Full Article

part

The cruelest part of the coronavirus: It's cut us off from community and solace

By www.inlander.com
Published On :: Mon, 23 Mar 2020 11:57:00 -0700

There’s a cliche that always follows a big tragedy — something we say after natural disasters, economic collapses, school shootings, acts of terrorisms.…


Full Article

  • Comment/Columns & Letters
part

Aerosmith and Guided By Voices celebrate landmark albums this month and are worlds apart in style and popularity — but maybe not as far as you think

By www.inlander.com
Published On :: Mon, 27 Apr 2020 10:13:40 -0700

Put pictures of 1975-era Aerosmith and 1995-era Guided By Voices next to each other and you probably wouldn’t think the bands have anything in common.…


Full Article

part

Identifying particular images from a collection

By www.freepatentsonline.com
Published On :: Tue, 19 May 2015 08:00:00 EDT

A method of identifying one or more particular images from an image collection, includes indexing the image collection to provide image descriptors for each image in the image collection such that each image is described by one or more of the image descriptors; receiving a query from a user specifying at least one keyword for an image search; and using the keyword(s) to search a second collection of tagged images to identify co-occurrence keywords. The method further includes using the identified co-occurrence keywords to provide an expanded list of keywords; using the expanded list of keywords to search the image descriptors to identify a set of candidate images satisfying the keywords; grouping the set of candidate images according to at least one of the image descriptors, and selecting one or more representative images from each grouping; and displaying the representative images to the user.


Full Article

part

ZnO nanoparticle catalysts for use in transesterification and esterification reactions and method of making

By www.freepatentsonline.com
Published On :: Tue, 10 Mar 2015 08:00:00 EDT

A method of forming a product from an oil feedstock, such as a biodiesel product, and a heterogeneous catalyst system used to form said product is disclosed. This catalyst system, which has a high tolerance for the presence of water and free fatty acids (FFA) in the oil feedstock, may simultaneously catalyze both the esterification of FAA and the transesterification of triglycerides present in the oil feedstock. The catalyst system is comprised of a mixture of zinc oxide and a second metal oxide. The zinc oxide includes a mixture of amorphous zinc oxide and zinc oxide nanocrystals, the zinc nanocrystals having a mean grain size between about 20 and 80 nanometers with at least one of the nanocrystals including a mesopore having a diameter of about 5 to 15 nanometers. Preferably, the second metal oxide is a lanthanum oxide, the lanthanum oxide being selected as one from the group of La2CO5, LaOOH, and combinations or mixtures thereof.


Full Article

part

Polyglycol ether-free sulphosuccinates based on polyglycerol partial esters and use thereof

By www.freepatentsonline.com
Published On :: Tue, 31 Mar 2015 08:00:00 EDT

The invention relates to polyglycol ether-free, polyglycerol partial ester-based sulphosuccinates, the preparation thereof, and the use of these in cosmetic formulations and also in cleaning compositions in the industrial and domestic sector and formulations comprising these sulphosuccinates.


Full Article

part

Polyamide moulding materials containing copolyamides for producing transparent moulding parts with low distorsion in climatic testing

By www.freepatentsonline.com
Published On :: Tue, 19 May 2015 08:00:00 EDT

Polyamide molding materials for transparent molding parts. The materials comprise transparent copolyamides that contain: (A) 40 to 100 wt % of at least one transparent copolyamide with a glass transition temperature (Tg) of at least 80° C. and not more than 150° C., composed of at least two diamines that are different from each other, wherein the at least two diamines are a mixture of (a) 50 to 90 mol % bis-(4-amino-3-methylcyclohexyl)methane (MACM) and/or bis-(4-amino-3-ethylcyclohexyl)methane (EACM) and/or bis-(4-amino-3,5-dimethylcyclohexyl)methane (TMACM) and b) 10 to 50 mol % aliphatic diamine having 9 to 14 carbon atoms, in particular decandiamine, particularly preferably at least 20 mol % decandiamine, each relative to the total amount of diamines, and of one or more aliphatic dicarboxylic acids, having 6 to 36 carbon atoms, (B) 0 to 60 wt % of at least one further polymer, (C) 0 to 10 wt % of additives, the sum of the components (A), (B) and (C) totaling 100% by weight.


Full Article

part

Aqueous dispersions of microgel encapsulated particles utilizing hyperbranched acrylic polymers

By www.freepatentsonline.com
Published On :: Tue, 26 May 2015 08:00:00 EDT

An aqueous dispersion includes particles at least partially encapsulated in a microgel where the microgel is prepared from a hyperbranched acrylic polymer. In addition, a method for making an aqueous dispersion includes: (1) mixing in an aqueous medium: (a) particles, (b) at least one ethylenically unsaturated monomer, and (c) a water-dispersible hyperbranched acrylic polymer having ethylenic unsaturation; and (2) polymerizing the at least one ethylenically unsaturated monomer and water-dispersible hyperbranched acrylic polymer having ethylenic unsaturation to at least partially encapsulate the particles in a microgel.


Full Article

part

Method for removing parasites and in particular ectoparasites of vertebrates, in particular of mammals, and compositions for the implementation of this method

By www.freepatentsonline.com
Published On :: Tue, 19 Dec 2000 08:00:00 EST

Methods for removing parasites and in particular ectoparasites of vertebrates, in particular of mammals, and compositions for the implementation of this method.Methods for removing parasites of vertebrates, and in particular arthropods, mainly insects and Arachnida, wherein an effectively parasiticidal amount of a compound of formula (I) ##STR1## in particular of fipronil, is administered to the animal via an administration route which makes possible systemic distribution and good absorption.


Full Article

part

Methods for forming lead zirconate titanate nanoparticles

By www.freepatentsonline.com
Published On :: Tue, 14 Apr 2015 08:00:00 EDT

Methods for forming lead zirconate titanate (PZT) nanoparticles are provided. The PZT nanoparticles are formed from a precursor solution, comprising a source of lead, a source of titanium, a source of zirconium, and a mineralizer, that undergoes a hydrothermal process. The size and morphology of the PZT nanoparticles are controlled, in part, by the heating schedule used during the hydrothermal process.


Full Article

part

Semiconductor nanoparticles and method for producing same

By www.freepatentsonline.com
Published On :: Tue, 12 May 2015 08:00:00 EDT

Copper(II) acetate, zinc(II) acetate, and tin(IV) acetate are weighed so that the total amount of metal ions is 2.0×10−4 mol and the molar ratio of ions is Cu:Zn:Sn=2:1:1, and 2.0 cm3 of oleylamine is added to prepare a mixed solution. Apart from this, 1.0 cm3 of oleylamine is added to 2.0×10−4 mol of sulfur powder to prepare a mixed solution. These mixed solutions are separately heated at 60° C. and mixed at room temperature. The pressure in a test tube is reduced, followed by nitrogen filling. The test tube is heated at 240° C. for 30 minutes and then allowed to stand until room temperature. The resultant product is separated into a supernatant and precipitates by centrifugal separation. The separated supernatant is filtered, methanol is added to produce precipitates. The precipitates are dissolved by adding chloroform to prepare a semiconductor nanoparticle solution.


Full Article

part

Nanoparticles for drug delivery to the central nervous system

By www.freepatentsonline.com
Published On :: Tue, 12 May 2015 08:00:00 EDT

The present disclosure relates to compositions and methods for producing nanoparticles to provide relatively more rapid delivery of such particles across the blood-brain barrier. The nanoparticles may be formed from bis-quaternary pyridinium-aldoxime salts that may also be of a specific polymorphic structure and which may be formed in either hydrophobic or hydrophilic type liquid media. In addition, the nanoparticle for transport across the blood-brain barrier may comprise a polymeric resin encapsulating a bis-quaternary pyridinium-2-aldoxime salt.


Full Article

part

Nanoparticles comprising antibacterial ligands

By www.freepatentsonline.com
Published On :: Tue, 19 May 2015 08:00:00 EDT

Materials and Methods are disclosed for producing nanoparticles linked to antibacterial ligands, including antibiotics and/or molecules which bind to bacterial markers, and for the use of the nanoparticles for the treatment of conditions treatable by the antibiotic ligands.


Full Article

part

Stimulus responsive nanoparticles

By www.freepatentsonline.com
Published On :: Tue, 19 May 2015 08:00:00 EDT

Disclosed are various embodiments of methods and systems related to stimulus responsive nanoparticles. In one embodiment includes a stimulus responsive nanoparticle system, the system includes a first electrode, a second electrode, and a plurality of elongated electro-responsive nanoparticles dispersed between the first and second electrodes, the plurality of electro-responsive nanorods configured to respond to an electric field established between the first and second electrodes.


Full Article

part

Multi-modality nanoparticles having optically responsive shape

By www.freepatentsonline.com
Published On :: Tue, 19 May 2015 08:00:00 EDT

In certain embodiments novel nanoparticles (nanowontons) are provided that are suitable for multimodal imaging and/or therapy. In one embodiment, the nanoparticles include a first biocompatible (e.g., gold) layer, an inner core layer (e.g., a non-biocompatible material), and a biocompatible (e.g., gold) layer. The first gold layer includes a concave surface that forms a first outer surface of the layered nanoparticle. The second gold layer includes a convex surface that forms a second outer surface of the layered nanoparticle. The first and second gold layers encapsulate the inner core material layer. Methods of fabricating such nanoparticles are also provided.


Full Article

part

Nanocrystals and amorphous nanoparticles and method for production of the same by a low energy process

By www.freepatentsonline.com
Published On :: Tue, 26 May 2015 08:00:00 EDT

A process for the production of nanocrystals or amorphous nanoparticles of actives (nanomaterials), especially from the peels of grapes. A dispersion of a micrometer-sized material in a solution of surfactant or a steric stabilizer is first provided. The macrosuspension is then stirred for at least 1 minute at a rotational speed above 500 rpm using a rotor-stator mixer. The stirred mixture is passed through a jet stream or piston-gas type high pressure homogenizer. The nanomaterials produced can be incorporated into formulations for use as nutraceutical, nutritional supplement, or as supportive treatment in medical therapy. The active can be derived from the peels of grapes.


Full Article

part

Method and apparatus for applying plasma particles to a liquid and use for disinfecting water

By www.freepatentsonline.com
Published On :: Tue, 05 May 2015 08:00:00 EDT

The invention provides a method and apparatus for creating plasma particles and applying the plasma particles to a liquid. Liquid feedstock (e.g., water and/or hydrocarbons mixed with biomass) is pumped through a pipeline; the single-phase stream is then transformed into a biphasic liquid-and-gas stream inside a chamber. The transformation is achieved by transitioning the stream from a high pressure zone to a lower-pressure zone. The pressure drop may occur when the stream further passes through a device for atomizing liquid. Inside the chamber, an electric field is generated with an intensity level that exceeds the threshold of breakdown voltage of the biphasic medium leading to a generation of a plasma state. Furthermore, the invention provides an energy-efficient highly adaptable and versatile method and apparatus for sanitizing water using plasma particles to inactivate biological agents contaminating water.


Full Article

part

Process for eliminating or reducing persistent organic pollutants contained in particles

By www.freepatentsonline.com
Published On :: Tue, 12 May 2015 08:00:00 EDT

A treatment process of persistent organic pollutants contained in particles is provided. Said process includes reacting persistent organic pollutant in particles under hydrothermal conditions in the presence of Fe2+ and Fe3+. Several beneficial effects can be achieved, including 1) no other additive is needed during the reaction process; 2) Fe2+ and Fe3+ are safe, cheap and extensive sources; 3) because Fe2+ and Fe3+ are dissolved, they can fully disperse into particles, and fully contact can be achieved, thus obtaining a decomposition rate no less than 70% of the persistent organic pollutants is under subcritical conditions.


Full Article

part

Ultra fast process for the preparation of polymer nanoparticles

By www.freepatentsonline.com
Published On :: Tue, 30 Dec 2014 08:00:00 EST

A process for the preparation of polymer lattices comprising polymer nanoparticles by a photo-initiated heterophase polymerization includes preparing a heterophase medium comprising a dispersed phase and a continuous phase and at least one of at least one surfactant, at least one photoinitiator, and at least one polymerizable monomer. The at least one polymerizable monomer is polymerized by irradiating the heterophase medium with electromagnetic radiation so as to induce a generation of radicals. The at least one photoinitiator is selected from compounds comprising at least one phosphorous oxide group (P═O) or at least one phosphorous sulfide (P═S) group. The irradiating of the heterophase medium is effected so that a ratio of an irradiated surface of the heterophase medium to a volume of the heterophase medium is at least 200 m−1.


Full Article

part

Process for the modification of polymers, in particular polymer nanoparticles

By www.freepatentsonline.com
Published On :: Tue, 30 Dec 2014 08:00:00 EST

A process for the preparation of modified polymers by a photo-initiated polymerization includes preparing a polymerization medium comprising at least one photoinitiator comprising at least one phosphorous oxide (P═O) group or at least one phosphorous sulfide (P═S) group, and at least one polymerizable monomer. The at least one polymerizable monomer is polymerized by irradiating the polymerization medium with electromagnetic radiation so as to induce a generation of radicals so as to obtain a polymer. The polymer is modified by irradiating the polymer with electromagnetic radiation so as to induce a generation of radicals from the polymer in a presence of at least one modifying agent.


Full Article

part

Processes for manufacturing electret fine particles or coarse powder

By www.freepatentsonline.com
Published On :: Tue, 27 Jan 2015 08:00:00 EST

The present invention provides a process for producing electret fine particles or coarse powder that can be uniformly electrified and exhibits excellent electrophoretic properties. Specifically, the present invention relates to the production processes (1) and (2) below:(1) A process for producing electret fine particles, comprising emulsifying a fluorine-containing material that contains a vinylidene fluoride-hexafluoropropylene-tetrafluoroethylene terpolymer in a liquid that is incompatible with the fluorine-containing material to obtain emulsified particles; and subjecting the emulsified particles to electron ray irradiation, radial ray irradiation, or corona discharge treatment.(2) A process for producing electret coarse powder, comprising subjecting a resin sheet containing a vinylidene fluoride-hexafluoropropylene-tetrafluoroethylene terpolymer to electron ray irradiation, radial ray irradiation, or corona discharge treatment to process the resin sheet into an electret resin sheet; and pulverizing the electret resin sheet.


Full Article

part

Method to facilitate fast context switching for partial and extended path extension to remote expanders

By www.freepatentsonline.com
Published On :: Tue, 26 May 2015 08:00:00 EDT

A method, apparatus, and system for switching from an existing target end device to a next target end device in a multi-expander storage topology by using Fast Context Switching. The method enhances Fast Context Switching by allowing Fast Context Switching to reuse or extend part of an existing connection path to an end device directly attached to a remote expander. The method can include reusing or extending at least a partial path of an established connection between an initiator and the existing target end device for a connection between the initiator and the next target end device, whereby the existing target end device and the next target end device are locally attached to different expanders.


Full Article

part

Method for producing polymer particles

By www.freepatentsonline.com
Published On :: Tue, 03 Feb 2015 08:00:00 EST

A method for producing polymer particles includes a preparation step for preparing a first oily liquid containing an oily olefin monomer, a radical polymerization initiator, and an iodine molecule, a synthesis step for obtaining a second oily liquid containing at least an iodine compound produced by a reaction between a radical generated by cleavage of the radical polymerization initiator and the iodine molecule in the first oily liquid, a suspension step for obtaining an oil droplet of the second oily liquid by suspending the second oily liquid in water, and a polymerization step for polymerizing the oily olefin monomer in the oil droplet.


Full Article