I’m looking for an absolutely top-notch web client-side specialist; any mobile platform expertise is very welcome as well.
A candidate must be independent in the legal business sense, as well as impressive and ambitious technologically.
The place of a candidate’s residence is of no significance since the major communication exchange will consist of project code/doc commits with daily to weekly latency.
The first job (of several) that I have for a candidate (~7.5h/week) is actually to find and to engage some decent frontend outsourcers by helping approach and supervise the latter, while they try and perform a test task as follows.
A major web page component (acting main element when in use) is required:
“Unlimited (zooming) view/edit of unlimited element structure”.
The goal is to attain smooth zooming and scrolling as well as simple content
editing on a “seemingly” infinitely detailed page surface with the details
(nested div
s) loaded and stored via an API on the fly.
(for reference, the actual service is implemented separately)
GET <API-URI>/divs/<UUID>[?dep=64]
(application/xhtml+xml) responds with
a “prerendered” HTML fragment with <div id="UUID"...
as the root element.
For instance, GET https://example.com/divs/...1a?dep=2
yields:
X-CONTAINER-DIV-UUID: ...05
– the UUID of dep
th container (parent) divX-ABSOLUTE-W-H-RATIO: 0.5
– the absolute (from root) width/height ratiobody:
<div id="...1a" style="position: absolute; left: 5%; top: 55%; width: 15%; height: 15%;">
<div id="...1b" style="position: absolute; left: 30%; top: 45%; width: 50%; height: 30%;">
<div id="...1e" style="position: absolute; left: 15%; top: 25%; width: 70%; height: 50%; background-image: url(data:image/png;base64,...)">
</div>
</div>
<div id="...1c" style="position: absolute; left: 15%; top: 10%; width: 60%; height: 20%;">
<div style="position: relative; width: 100%; height: 100%;">
<p>Some text!</p>
</div>
</div>
</div>
...#<UUID>
)X-ABSOLUTE-W-H-RATIO
from the service, it must have all
it needs for geometry computationsX-CONTAINER-DIV-UUID
from the service, it must be able
to zoom out to that containing div: dep
th (dep
[default: 64] refers
to param value), or root, if closer to root than dep
, and, of course,
when responding to a request with a root UUID, no such header will be
returnedid="<UUID>"
attribute, all
absolutely positioned with
style="position: absolute; left: R%; top: R%; width: R%; height: R%;"
attribute:
style="position: relative; width: 100%; height: 100%"
attribute,
with any – hopefully reasonable – content insidebackground-image
styling.and if this is the starting view (first request), for instance,
landing on https://example.com/whizz#...1a
should look something like
this:
containing element is constructed appropriately (using screen dimensions)
+----------------screen----------------+
|//////////////////////////////////////|
|//+------------div ...1a-----------+//|
|//| |//|
|//| +-----div ...1c-----+ |//|
|//| | | |//|
|//| | Some text! | |//|
|//| | | |//|
|//| | | |//|
|//| | | |//|
|//| +-------------------+ |//|
|//| |//|
|//| |//|
|//| |//|
|//| +----div ...1b---+ |//|
|//| | | |//|
|//| | | |//|
|//| | +-div ...1e-+ | |//|
|//| | |<pixelated | | |//|
|//| | | render of | | |//|
|//| | | contents> | | |//|
|//| | +-----------+ | |//|
|//| | | |//|
|//| +----------------+ |//|
|//| |//|
|//| |//|
|//| |//|
|//| |//|
|//| |//|
|//+--------------------------------+//|
|//////////////////////////////////////|
+----------------screen----------------+
POST/PUT/PATCH <API-URI>/divs/<UUID>
(application/xhtml+xml) modifies
the request div (which must be a container div identified by <UUID>
) using
the “edited” HTML fragment sent as a body.
The root of the fragment should be an identifiable div, and for each such div
within the fragment:
For instance, POST https://example.com/divs/...1a
with
<div id="...1d" style="position: absolute; left: 10%; top: 5%; width: 80%; height: 35%;">
<div id="...1c" style="position: absolute; left: 45%; top: 60%; width: 40%; height: 30%;"></div>
<div id="...1f" style="position: absolute; left: 10%; top: 10%; width: 60%; height: 20%">
<div style="position: relative; width: 100%; height: 100%;">
<p>More text?</p>
</div>
</div>
</div>
</div>
may occur with the initial state like above and aggregating a few edits, such as:
div ...1c
- should be a matter of showing borders and dragging corners, or somethingdiv ...1c
within a new container div ...1d
, covering
the former’s area
- adding new divs (by a sort of dragging corners), so they cover some divs
completelydiv ...1f
within div ...1d
- adding new divs (by a sort of dragging corners), so they are covered by
some divs completelydiv ...1f
with ‘More text?’ in it
- content divs will be edited with a pluggable “rich text” editorand the resulting picture will look something like this:
containing element is constructed appropriately (using screen dimensions)
+----------------screen----------------+
|//////////////////////////////////////|
|//+------------div ...1a-----------+//|
|//| +----------div ...1d---------+ |//|
|//| | +--div ...1f---+ | |//|
|//| | | More text? | | |//|
|//| | +--------------+ | |//|
|//| | | |//|
|//| | +--div ...1c--+ | |//|
|//| | | Some text! | | |//|
|//| | | | | |//|
|//| | +-------------+ | |//|
|//| +----------------------------+ |//|
|//| |//|
|//| +----div ...1b---+ |//|
|//| | | |//|
|//| | | |//|
|//| | +-div ...1e-+ | |//|
|//| | |<pixelated | | |//|
|//| | | render of | | |//|
|//| | | contents> | | |//|
|//| | +-----------+ | |//|
|//| | | |//|
|//| +----------------+ |//|
|//| |//|
|//| |//|
|//| |//|
|//| |//|
|//| |//|
|//+--------------------------------+//|
|//////////////////////////////////////|
+----------------screen----------------+
DELETE <API-URI>/divs/<UUID>
removes the request div (identified by <UUID>
):
if it is a non-empty and non-root container div, its contents are moved
to its direct container, while area attributes corrected so their areas
within that container will stay the same
For instance, DELETE https://example.com/divs/...1d
with the initial state
like above will correspond to a picture that looks something like this:
containing element is constructed appropriately (using screen dimensions)
+----------------screen----------------+
|//////////////////////////////////////|
|//+------------div ...1a-----------+//|
|//| |//|
|//| +--div ...1f---+ |//|
|//| | More text? | |//|
|//| +--------------+ |//|
|//| |//|
|//| +--div ...1c--+ |//|
|//| | Some text! | |//|
|//| | | |//|
|//| +-------------+ |//|
|//| |//|
|//| |//|
|//| +----div ...1b---+ |//|
|//| | | |//|
|//| | | |//|
|//| | +-div ...1e-+ | |//|
|//| | |<pixelated | | |//|
|//| | | render of | | |//|
|//| | | contents> | | |//|
|//| | +-----------+ | |//|
|//| | | |//|
|//| +----------------+ |//|
|//| |//|
|//| |//|
|//| |//|
|//| |//|
|//| |//|
|//+--------------------------------+//|
|//////////////////////////////////////|
+----------------screen----------------+
I have some weak preferences with frontend technologies, but the only things important here are GUI look & feel, and component engineering quality.
My preliminary effort estimation is 80 software engineer hours.
I am looking for the whole process: producing the “divplane” component and having chosen the right outsourcing provider – to take up to 5 months and to cost less than 2.5 × work estimation budget.