Project: Trading Post – A local, peer-to-peer, produce and handmade goods commerce networking platform

Hi all, we’ve been working on our next project. It is a platform to facilitate selling by local vendors via contactless pickup points. We’re calling it Project: Trading Post.

As of the design phase, in comparison to current products, it sits somewhere between Etsy and Craigslist.

You can check out the beta/development platform here: http://www.redub.io/ptp/

A screenshot of the current phase of Project: Trading Post

We are working on the database structure now. It will be semi-curated – new vendors can’t autonomously join without being added by an admin. However, as the initial admin I don’t want it to be an extremely maintenance-intensive platform either, because I’ve got a lot on my plate as it is.

Our city (Farmington, NM) will be the first location to roll out, but we’re designing it to be scale-able although there will have to be a local admin for each location.

The plan is for this to eventually be ad-supported. We’ve got fixed costs for web hosting at the moment that should be able to handle it until the point where there are lots of locations. At that point, we’ll have to introduce ads to pay for a dedicated server because it will lean fairly heavily on MySQL not just for the WordPress implementation of the overall structure but for the product databases as well with the custom PHP code we’re going to use.

The domain name is still TBD at this point.

Like it? Hate it? Let us know!

Sarcastic 8-ball update: Database fun

Hi all, and happy Friday! We wanted to share the progress we’ve made on our Sarcastic 8-ball project.

Instead of fixed responses in a Javascript loop, I decided to go with a MySQL database link and use some PHP functions to interact with it.

An added benefit is that now users have the ability to add their own responses to the database and the additions will be included in the randomized selection of an “answer” by the 8-ball.

Their questions will also be saved and displayed on the main page, with a sarcastic confirmation message displayed with the “answer” – check it out!

We added a “sarcasm level” slider which affects the SQL query.

Maximum sarcasm is of course encouraged.

Sarcastic 8-ball screenshot

Check it out on our server at https://www.redub.io/8ball

As always, a how-to is in the works, so stay tuned!

Making a text-filled shape with CSS clip-path

I’ve always liked the aesthetic of art constructed from text. Beautiful, intricate shapes that look like they took hours or days to put together. I’ll be frank – I’m not quite that patient.

However, I’ve been learning about CSS clip-paths, and I wanted to do a quick project in which I use a text-filled HTML DIV element and then clip it into a shape using the clip-path.

Add in some copy-and-pasted Lorem Ipsum, and…

Lorem Pi!

In order to get the clip path, I used Inkscape. I found a Pi symbol and copy/pasted it into Inkscape. Note that the Pi symbol is a character which can be entered by using a key combination – if the moon is in the waning phase and you hop up and down on your left foot wearing a purple dress – but those conditions weren’t met and my laptop decided I wasn’t worthy to enter it using the key combination. Copy and paste complete, I then found a font I wanted to use.

I found the best way to get the path to cooperate is to first export it as a PNG image, then open that PNG image and run Trace Bitmap in Inkscape. I struggled for a while when my path had been exported and still wanted to be a regular text-sized character the same size as the rest of my text, while I wanted it to be a large almost full-page shape.

Bitmap traced, I exported an ‘Optimized SVG’ from inkscape. For what it’s worth, I chose not to have it convert the CSS properties to XML properties, although I didn’t really use them anyway.

I used the very helpful post by CSS Tricks here for knowledge and examples: https://css-tricks.com/almanac/properties/c/clip-path/

Basically, we add these tags inside the HTML document to define an inline SVG:

<svg> <clipPath id="pi"> <path d="*this is where all the coordinates go*"> </clipPath></svg>

For the DIV element, we define that with its own ID.

<div id="clip-me"></div>

Up in the CSS code section we just do our thing with the DIV element, using the ID as the selector.

#clip-me { *css goes here* }

We also use the ID of the SVG Clip-path as the selector for that:

clip-path: url(#pi);

Remember how I said earlier how I’m not too patient? Well, I don’t like scrolling up and down large blocks of text when I’m building and editing code either.

By the way, I got the Lorem Ipsum text from: https://www.lipsum.com

So, to keep from having to have a bunch of copy/pasted text, I built a bit of Javascript to iterate and add the text to itself, then use innerHTML to output it to the HTML page using the DIV’s ID. Aren’t you glad we didn’t use its class?

function longText() {
var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
var i = 1;

while(i < 8) {
lorem += lorem;
i++;
}

document.getElementById("clip-me").innerHTML = lorem;

You can alter the number of times the while loop happens depending on the length of your text and your font size.

After that I did some more prettying up of the overall result. I ran a transform: scale to .7 on the #pi element as well, to make it take up a bit less space than it was doing at 100%.

Check out the example on our server: http://redub.io/lorempi/

To experiment, check it out on CodePen:

I should add that to display it on CodePen I had to take off some of the CSS that wasn’t really behaving properly and I’m not quite sure why. No big deal, play with it and make it your own. Thanks for reading, and have fun!

Making a virtual magic 8 ball with Javascript and CSS Clip-Path

George and I had the idea to make a virtual magic 8 ball but with only sarcastic responses. We are using are Javascript, for the randomization function. The styling is handled by CSS, and the elements are HTML DIV elements. This will be a multi-part project.

To begin the project, I set out to lay out the basic framework for a functional virtual magic 8 ball coded with Javascript using an array containing the possible responses and a randomization function.

For the construction of the shapes I decided to shape the HTML DIV elements with the CSS Clip-path property. The only shapes are going to be the outer circle, and the inner triangle with the response text in it.

My philosophy is that using only HTML elements simplifies things as well. While adding images can improve the ‘pretty’ factor, that’ll be a later stage addition if anything.

Generating the clip path is made easier by this handy tool made by Bennet Feely named Clippy which you can access here:

https://bennettfeely.com/clippy/

The clip code looks like this:

clip-path: circle(50% at 50% 50%);

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Once I had the shapes defined, I had some fiddling around to do in order to get the layout not to look ugly, and for the text to fit in the triangle.

.tritext {
        width: 50%;
        margin: auto;
        color: red;
        text-align: center;
        padding-top: 50%;
        padding-bottom: 20%;
        margin-bottom: auto;
        word-wrap: break-word;
        opacity: 90%;
        text-shadow: 1px 1px 8px maroon;
        z-index: 60;
    }

I went with a fixed size for the ball and triangle, because early experiments with percentages for the size resulted in some funky behavior.

Auto-sizing of the elements would be possible with some more fiddling. However, I plan on working with different fixed sizes based on browser width with @media tags.

The Javascript code was fairly simple.

I reused my getRndInteger function from the night sky generator:

function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
}

For the business end, I had to make a function to define the array of possible responses.

We call the getRndInteger function with possible values within the array. I used four possible responses, and a possible value between 1 and 4. This can be adjusted to match your array length. You can even set it up to automatically adjust based on the array length. I won’t be going that in depth with this example.

Since arrays start at 0, I subtracted one from the returned random integer to use all four of the possible responses in the array.

Finally, I used the innerHTML method to replace the “tritext” element (by ID) with the value after the subtraction.

function askBall() {
    var responses = ["Who Knows?", "Probably", "What the heck", "Definitely"];
    value = (getRndInteger(1, 4) - 1);
    document.getElementById("tritext").innerHTML = responses[value];
}

The result looks like this:

You can try out the live demo on our server here: http://redub.io/8ball/8.html

Or, for ease of experimentation, check it out on CodePen:

If you have any questions or suggestions please feel free to share in the comments below. Thanks for reading!

Generating a night sky with Javascript and CSS

I wanted to share a project I was working on this past weekend. I wanted to generate a night sky for use on a web page, using Javascript and CSS to enhance my knowledge of both.

The goal was originally to use cartoon-style stars in the form of SVG images and randomize their position on the web page. I used Inkscape to draw a simple one in a fun blue color.

cartoon star image

During the process, I decided that using simple 2px by 2px DIV elements in various colors looked better. Below is the CSS code I used for the star elements.

    #normalstar {
        width: 2px;
        height: 2px;
        background-color: white;
        border: 4px dotted "#EEEEEE";
        border-radius: 1px;
        position: absolute;
        animation-iteration-count: infinite;
        animation-name: zoom_out;
    }

For the animation of the CSS star elements, I used the selectors nth-of-type (odd) and (even) to set different delays for the animation duration, and transform: scale settings making for a subtle pulsating star effect.

 #normalstar:nth-of-type(odd) { animation-duration:  15s;  }   
 #normalstar:nth-of-type(even) { animation-duration:  5s; }

    @keyframes zoom_out {
        0% { transform: scale(1); }
        50% {transform: scale(.5);}
        100% {transform: scale(1);}
    }

For the star color, Javascript code randomizes that as well as the location of the stars. We have either yellow, light blue or white to randomly choose from. In my example, we have between 400 and 900 stars.

First, we have the general purpose randomization function to give us a nice random integer when provided a min and max argument.

function getRndInteger(min, max) {
 				 return Math.floor(Math.random() * (max - min + 1) ) + min;
				}

Then we use the function putStars() which handles the actual night sky generating business. It is called on page load.

function putStars()
{
var w = window.innerWidth;
var h = window.innerHeight;
var i = 1;
var starColor = "orange";

            while(i < limit) {
                var topPosition = getRndInteger(1, h);
                var leftPosition = getRndInteger(1, w);
                var scale = getRndInteger(1,10) / 10;
                var starRand = getRndInteger(1,3);
                if(starRand == 1) { 
                    starColor = "yellow"; 
                }
                else if(starRand == 2) { 
                    starColor = "lightblue"; 
                }
                else { 
                    starColor = "white"; 
                }
                starNormal(starColor, topPosition, leftPosition, scale);
                i++;
            }

        }

You can see the live example on our server at http://redub.io/stars

It looks something like this:

Javascript generated night sky
Every page load randomizes the star field.

Of course, the amount of stars can be customized from within the putStars function. You can change the getRndInteger(400, 900) function call to use different min and max numbers of stars. The browser has to render and animate that many different DIV elements, so the higher the number the more impact it will have on your system.

You can also easily customize the star colors, size, background gradient, etc. While we used viewport width as a property to use the whole browser window, you could constrain it to a smaller element for a different effect.

For ease of experimentation, check it out on CodePen:

If you have any questions or suggestions, let us know in the comments below. Thanks for reading!

Hello, world!

Hi, readers, and thank you for visiting. This is the inaugural post for our new project, the Redub Labs blog.

Our family likes to create things, and we wanted a place to post the things we create and talk about the process, as well as cool new things we find out about and want to share.

Please take a look at the projects we’ve got on the website so far, and stay tuned for more!