I'm using Gatsby to build a new website. I'd like to render some markdown files for a blog, but it doesn't seem to be able to process the lists/unordered lists based on the markdown syntax. For instance, this is the syntax:
* Purple dots are points on the graph, each point has an x and y coordinate. These are your observed values
* Blue line is the prediction line, covering the estimated values of the model
* The red line between each purple point and the prediction line are the errors. Each error is the distance from the point to its predicted point.
This is the output:
I also found that it's not possible to use # for the headers. For instance, here's my post description and title:
_Making Use of the scipy.optimize Library in Python to Minimize Error_
## Revision
Output:
I'm not sure what I need to change within Gatsby to render the markdown correctly?
Your code is rendering properly the markdown file, however, you haven't added any style to make them look like an unordered list or as a header.
Just add your stylesheet file:
import './yourStyles.scss'
In yourStyles.scss:
h1 {
font-size: 3rem;
color: red;
}
ul {
list-style-type: default; // change it by desired value
}
Related
enter image description here
enter image description here
Hello, I have an issue. I did add 2 inner sections in Elementor which contain 3 columns. For desktop, it looks great but for the phone, I cannot make it into 2 columns. Anybody can advise me, please?
You'll have a hard time doing this if your content is split between different inner sections.
Here's how you could do it with a little CSS.
(1) Create a new section with just one column, and add all your content to this one column. For illustration, I'm using paragraphs but the same principle will apply for other content.
(2)Go to section settings > advanced > advanced, and give this section a class of 'item-wrap'
(3) Go to section settings > advanced > custom CSS and add the following
/* set default widget width to 50% */
.item-wrap .elementor-widget-wrap>.elementor-element {
width: 50%;
}
/* set widget width to 33.33% on tablet and desktop */
#media(min-width:768px){
.item-wrap .elementor-widget-wrap>.elementor-element {
width: 33.33%;
}
}
(4) Here's the end result. Depending on the specifics of your page, we may need to tweak the CSS selectors in step 3. Give this a try and let me know how it goes.
Given a mixed list of CSS selectors like below, is there anything I can do to make it more compact, other than removing commas and brackets? I am not asking for the absolutely smallest code, just whatever makes good sense when using Stylus.
.cl_nw,
.cl_n,
.cl_ne,
.selected .color_fg1,
.selected .color_fg2,
.selected .color_fg3,
.alert_nw,
.alert_n,
.alert_ne,
ul.checklists li.list_item span.tasks span.progress b,
.menuPopupList li.selected,
.menuPopupList li.selected a,
.menuPopupList li.selected a:visited,
.suggestionBox li.selected,
a.undo {
background-color: #eb6d20;
}
I'm not used to stylus pre-processing thing, but reading their documentation they have an exemple using multiple selectors on a variable and use with string interpolation:
selectorsList = '.cl_nw, .cl_n, .cl_ne, .selected .color_fg1 '
{selectorsList}
color: red
That later compiles to this:
.cl_nw,
.cl_n,
.cl_ne,
.selected .color_fg1 {
color: #000;
}
Important to note, that you must use commas in this approach or the compiler will assume that you are using a hierarchy selector
This of course will not fully compact your code with some advanced technic as you comment, but in my personal oppinion, can help the easy maintence of the code and the clear vision of waht is being applied to the selectors
Try it online
See the full section documentation here
I have a dataset that I have created of gray scale images which i want to use with the siamese network example in caffe in which the documentation uses mnist dataset. I want to replace the mnist dataset with my own dataset
I see that for doing this I need my dataset to be in the format required by the siamese netwrk. This can be created using the 'create_mnist_siamese.sh' which loads the mnist dataset in the idx3-ubyte format and creates a dataset lmdb database with two images and a matching/non matching label in each location of the lmdb database.
So I figured for me to use the 'create_mnist_siamese.sh' script, my dataset also needs to be in the idx-ubyte format. I tried to convert my dataset to the idx-ubyte format using 'mnisten'. However i get the error 'error:total images are less than num_tests'. I guess the script is not identifying my images. The folder structure of the dataset is like this:
parent-directory
- subfolder
- subfolder
.
.
.
-txt file
parent directory name - 'generated dataset'
subfolders - 1 ,2 ,3 ... (the subfolders are titled 1 - 30 as I want to label the data in each subfolder by the name of the subfolder)
The txt file contains image title on each row with the class label.
How do I work with my dataset on the siamese network in caffe? Is there a direct way to convert my dataset to the lmdb format for the siamese network? Or do I have to use mnisten? If I do then how do I fix my error ? Anu help will be much appreciated. Thanks.
You don't need to use the exact same format - this is just a tutorial.... All you need to do is provide one or multiple data layers, with a total of three top Blobs: data, data_p, and sim. You can do that in any way you'd like, e.g. LMDB (like in the MNIST example), HDF5, or whatever.
General explanation
In the tutorial, they further show and easy way to load the image pairs: you concatenate two images in the channel dimension. For gray-scale, you take two input images, where each has for example the dimension [1, 1, 28, 28] (i.e. 1 image, 1 channel, 28x28 resolution). Then you concatenate them to be one image of size [1, 2, 28, 28] and save them e.g. to an LMDB.
In the network, the first step after loading the data is a "Slice" layer, which takes this image, and slices it (i.e. it splits it up) along that axis, thus creating two Top blobs, data and data_p.
How to create the data files?
There is no single right way to do that. The code from the tutorial is only for the MNIST set, so unless you have the exact same format, you can't use it without changes. You have a couple of possibilities:
Convert your images to the MNIST-format. Then, the code from the Caffe tutorial works out-of-the-box. It appears that you are trying this - if you need help on that, please be specific: what is "mnisten", include your code, and so on.
Write your own script to convert the images.
This is actually very simple: all you need to do is read the images in your favorite programming language, select the pairs, calculate the labels, and re-save as LMDB.
This is definitely the more flexible way.
Create HDF5 files with multiple Top blobs. This is very simple to do, but will probably be a bit slower than using LMDB.
What you use is up to you - I'd probably go with HDF5, as this is an easy and very flexible way to start.
How to generate the pairs?
Now, this is the difficult question here. The code from the tutorial just selects random pairs, which is not really optimal, and will make learning rather slow. You don't just need random pairs, you needmeaningful, difficult, but still solvable pairs. How to do that depends entirely on your dataset.
A very sophisticated example is presented, in (Radenović, 2016): they use a Siamese network for learning a representation for image retrieval on buildings. They use a Structure-from-Motion (SfM) algorithm to create a 3-D reconstruction of a building, and then sample image pairs from those reconstructions.
How exactly you create the pairs depends on your data - maybe you are fine with random pairs - maybe you need a sophisticated method.
Literature:
F. Radenović, G. Tolias, and O. Chum. "CNN Image Retrieval Learns from BoW: Unsupervised Fine-Tuning with Hard Examples". In: European Conference on Computer Vision (ECCV), 2016. arXiv: 1604.02426.
Generating pairs is the most important step in a Siamese network. However, there is a simple way to do that using caffe.
Load the data as separate lmdbs
Create 2 lmdbs data_1 and data_2 using the create_imagenet.sh or convert_imageset.cpp script. Use the same data for both the sets except data_2 containing one image less that data_1.
This will ensure that at each epoc, a different pair of images will be compared, thus allowing us to cover all nC2 combinations(n^2actually)
layer {
name: "data"
type: "Data"
top: "data"
top: "label"
data_param{
source: "/home/subho/SSD2/data_1/"
batch_size: 8
backend: LMDB
}
}
layer {
name: "data_p"
type: "Data"
top: "data_p"
top: "label_p"
data_param {
source: "/home/subho/SSD2/data_2/"
batch_size: 8
backend: LMDB
}
}
Introduce a Similarity layer in the prototxt
layer {
name: "sim_check"
type: "Similarity"
bottom: "label"
bottom: "label_p"
top: "sim_check"
propagate_down: false # for each bottom_blob
propagate_down: false
}
layer {
name: "loss"
type: "ContrastiveLoss"
contrastive_loss_param {
margin: 1.0
}
bottom: "feat"
bottom: "feat_p"
bottom: "sim_check"
top: "loss"
}
Create files for Similarity layer
Download files for similarity layer
Place the similarity_layer.cpp in caffe/src/caffe/layers/ and similarity_layers.hpp in caffe/include/caffe/layers/ and rebuild caffe.
cd build
cmake ..
make -j12
Note
If your network does not converge using the above technique, then you should have a look at the following :
Selection of image pairs using hard negatives
Ensuring balance of positive and negative pairs(dissimilar pairs)
I am trying to use variables to specify breakpoints using the CSSnext plugin.
Currently my css looks like this:
#media (width <= var(--screen-md-min)) {
background-color: var(--brand-purple-dark);
}
but when i try to run this I get the following warning in the console:
5: Missing #custom-media definition for '--screen-md-min'. The entire rule has been removed from the output.
This code works fine if I replace var(--screan-md-min) with actual pixels. I am sure this is just a problem with syntax, but the CSSnext documentation does not make the use of variables very clear.
cssnext only implements future-proof specifications.
And per specification, it's not possible to use custom properties (that' depends on the dom (:root is html) in a media query (that does not depend on the dom, but instead depends on the device).
However, people working on CSS specifications have thought about a solution for custom media queries. It's #custom-media.
#custom-media --small-viewport (width < 30rem);
#media (--small-viewport) {
/* styles for small viewport */
}
Some other informations
http://cssnext.io/features/#custom-media-queries
https://github.com/MoOx/postcss-cssnext/issues/253
I have to accomodate an MREC advertisement in my layout. The ad is 300pixels wide, and cannot resize as the fluid grid otherwise contracts.
Further, the ad needs to be the first item on smartphone, before the headline block. So, on the breakpoint I am setting it to omega to push it "after" the headline, as in this screenshot (gray rules just to make it easier to see).
The headline is 8 cols, the ad is 4. All is fine except on ipad the ad column and the ad reduces to under 300 pixels, which we are not allowed to do. So, how to keep everything fluid except the ad container?
Set max/min widths on the container?
This is not hard to do, but it means the grid up top won't exactly match the flexible grid below. I assume that isn't an issue. You have to use some functions to lay out these two elements, but everything else can be done exactly as it was before.
You can keep the ad flexible down to a minimum width:
.ad {
#include span-columns(4 omega);
min-width: 300px; // you can use any width you want.
}
Or you can make the ad completely static:
.ad {
float: right;
width: columns-width(4); // you can use any width you want.
}
The important part is that you must not set a column width on the headline.
You have a few other options. The simplest might be to set right margins and padding equal to the static ad size (plus gutter):
.headline {
margin-right: columns-width(4) + $gutter-width;
}
Or, if you want that gutter to flex, try:
.headline {
margin-right: columns-width(4);
padding-right: gutter();
}
You can add clear: both; to the main content to make sure it clears the headline and ad.
If this approach doesn't work for you, try creating a new "formatting context" for the headline. One of the classic techniques is simply overflow: hidden;. Nicole Sullivan has a good blog post on how they do it for oocss, but it gets a bit more complex and you may not need all that.
UPDATE:
All these solutions require the ad coming first in the markup. The only way around that is if you know the height of the ad. In that case, you could position the ad absolutely rather than floating it, create space for it in the same way, and set a min-height on the headline (or row-container if you have one).